SSブログ
JavaScript ブログトップ

Ajax を使った CSS のリファレンスとか、CSS 簡易エディタ [JavaScript]

Ajax を使った CSS のリファレンス
http://www.dhtmlgoodies.com/scripts/css-lookup/css-lookup

面白い。けど、詳しい解説が欲しい(日本語で)
とほほのスタイルシート入門
http://www.tohoho-web.com/css/index.htm

CSS を指定したときのサンプルもあるといいなぁ。
とりあえず、これ↓かな
http://css.eweb-design.com/

・・・と思ったら、左側に CSS を指定すると右側にプレビューできる簡易エディタ。
http://tokyoenvious.xrea.jp/javascript/instantCSSEditor/
限界があるけど、ちょっと確認するにはこれぐらいがちょうど良い。

ついでに、CSS で段組レイアウトする時のサンプル発見。これもすばらしい。
http://phpspot.org/blog/archives/2006/04/css.html
http://blog.html.it/layoutgala/

追記(2006/5/1)
角丸ライブラリ
http://d.hatena.ne.jp/tikeda/20060501/1146444788
はてな内の2カラムレイアウト
http://d.hatena.ne.jp/tikeda/20060429/1146292221


JavaScript で RSS を読む [JavaScript]

JavaScript で RSS を取得してページの一部に展開したくなった。

少し前にも調べたことがあって、そのときは、これ!というのがなかったけど、
Google 君に聞いてみると、今は簡単に出来るらしい
(・・・と言っても、ライブラリ化してる人がいるわけだが。ありがたや。)
http://www.kawa.net/works/ajax/rss/rss.html
http://allabout.co.jp/internet/javascript/closeup/CU20050531A/

設置は、こちらの手順をみれば、超わかりやすい。
http://www.kawa.net/works/ajax/rss/rss-box.html

と、思ったら
>なお、JavaScript のセキュリティ制限により、同サイト内の RSS ファイルのみダウンロードできます。
>他サイトにある RSS ファイルは読み込めません。
ということで、実際 IE では読み込めないことはないが、読み込む前に、セキュリティ警告のダイアログが出る。

残念。

こちらは↓もろ、RSS リーダーを作ろうとしてる(以前見た気がする)
JavaScriptでRSSリーダーは作れるか
http://www.apollostar.com/k-ishii/JavaScriptRssReader.html
超訳すると WSH で↓みたいに RSS をファイルに落としてから読むみたい。

strURL="http://www3.asahi.com/rss/index.rdf"
Set objHTTP = CreateObject("MSXML2.XMLHTTP") 
Call objHTTP.Open("GET", strURL, FALSE) 
objHTTP.Send
WScript.StdOut.WriteLine objHTTP.ResponseText


重ねて残念。セキュリティを理由にガードされているからには、がんばっても無理な気がしてきた。


prototype.js [JavaScript]

Ruby on Rails に使われているらしい(ことを今頃知る)
世の中的には8月頃にブームが来たらしい。とても付いていけない。
とりあえず、ここにメモっておくことにする。

本家
http://prototype.conio.net/

prototype.js の開発者向けメモ(1.3.1)
http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html
(ありがたやありがたや)

prototype.js version 1.4.0系でのEnumerableの使い方
http://www.onflow.jp/blog/archives/2005/11/prototypejs_ver.html

prototype.js をちゃんと使ってみる。
http://blog.shebang.jp/archives/50174235.html
Ajax のサンプルとしては小さくて良いような

まちゅダイアリーのサンプル
http://www.machu.jp/diary/20050829.html
http://www.machu.jp/diary/20050831.html

Prototype.js Effectサンプル
http://hori-uchi.com/prototype/Effect.html
視覚効果のサンプルなので、質実剛健で利便性のためにだけ Prototype.js を使いたい場合は必要ない

Validator 0.1.0
http://blog.kan.vc/1134288746.html
http://dev.kan.vc/validator/
http://dev.kan.vc/validator/trac.cgi/wiki/UsersManual
(prototype.js を使った Validator ライブラリ)

prototype.js でデザインパターン - Iterator(naoya のはてなダイアリ)
http://d.hatena.ne.jp/naoya/20050813/1123919908 ・・・から続くエントリ

prototype.js の Object汚染を回避する方法(最速インターフェース研究会)
http://la.ma.la/blog/diary_200507101154.htm

[その他 JavaScript関連]
やねうらおさんの JavaScript Ajax 本の紹介
http://d.hatena.ne.jp/yaneurao/20051027#p1

JavaScript で引数束縛(まだ、意味すら理解できていない私)
http://nanto.asablo.jp/blog/2005/12/13/176033
JavaScriptでカリー化
http://d.hatena.ne.jp/m-hiyama/20051213/1134446855

追記
prototype.js 1.4.0 リリースだそうです
http://secure.ddo.jp/~kaku/tdiary/20051216.html#p09

さらに追記
http://codezine.jp/a/article.aspx?aid=222

さらにさらに追記(2005/12/30)
prototype.jsのものすごく簡単な使い方
http://blog.nomadscafe.jp/archives/000569.html

もう一つ追記(2006/1/16)
prototype.jsを読んでみる (1)
http://dev.ariel-networks.com/Members/anaka/prototype-js30928aad3093307f308b/view


JavaScript ってすごい [JavaScript]

最近発見したブックマーク達

JavaScriptでワイヤーフレームを回転させる
http://homepage2.nifty.com/m_kamada/di200511.htm#08_01

Google Maps で鈴鹿サーキット試走
http://tech.nitoyon.com/javascript/application/racing/1/

Wema SVG
http://cgi.no-ip.org/wema/

(参考)
prototype.js v1.3.1 の使いかた
http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html
#わしに使いこなせるか?
1.4_r1?から追加された Ajax.Responders.register
http://d.hatena.ne.jp/secondlife/20051119/1132326795
prototype.jsをベースにしたJavaScriptライブラリ「script.aculo.us」
http://hatena.g.hatena.ne.jp/hatenatech/20051111
http://www.everes.net/163
キー割り当てライブラリ
http://la.ma.la/blog/diary_200511041713.htm
# Ajax は作るものではなく、使うもの・・・と日記には書いておこう

私が持ってる本
JavaScript & DHTML クックブック
http://www.oreilly.co.jp/books/4873111692/
良書らしいのだが、こういうクックブックとか逆引きリファレンスの類は苦手。

最速インターフェース研究会の人と、TokuLog! の人が一応お勧めしていたので、
JavaScript ビジュアル・リファレンスはよさげ
http://www.amazon.co.jp/exec/obidos/ASIN/4844357808/250-9817964-8916232
# 関係ないけど、HTML& CSS ビジュアルリファレンスはどうだ?
http://www.amazon.co.jp/exec/obidos/ASIN/4844357794/250-9817964-8916232

(結論)
うーむ、やっぱり JavaScript は、よく分からん。
たぶん、(自分ではまだ)できそうなことと、できなさそうなことの峻別が出来てないからだろうな。


フォームのファイル選択欄をボタン押下で表示する [JavaScript]

/* 本当は、参照(ブラウズ)ボタンでファイルを選択したら次のファイル選択欄を出したい */
/* とりあえず、Add More File ボタンを押したら表示することで我慢 */
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>test < /title>
<script language="JavaScript" type="text/javascript">

function appendFile(form_id, name) {
if (!document.createElement || !document.getElementById) return;

var childs = document.getElementById(form_id)
for (i = 0; i < childs.length; i++) {
var child = childs[i];
if (child.name == name && child.type == 'file' && child.value == '') {
return;
}
}

var br = document.createElement("br");
document.getElementById(form_id).appendChild(br);
var ele = document.createElement("input");
ele.setAttribute("type", "file");
ele.setAttribute("name", name);
document.getElementById(form_id).appendChild(ele);
}

< /script>

< /head>
<body>
<form id="sampleform" action="." method="post" encType="multipart/form-data" >
<input type="text" name="textvalue" /> <br />
<input type="submit" value="Submit Form" /> <br />
<input type="file" name="filedata" />
< /form>

<input type="button" value="Add More File" onclick="appendFile('sampleform', 'filedata');" />
< /body>
< /html>


JavaScript 入門 [JavaScript]

CSS と並んで JavaScript を避けて通れなさそうな今日この頃・・・

とりあえず、ここ↓がよさげ
http://www.rfs.jp/sitebuilder/javascript/

最低限「命令文」のページを読め(→自分)
http://www.rfs.jp/sitebuilder/javascript/01/10.html
(リストボックスからいくつ選択したでしょうか?のサンプルにいろいろな要素が詰まってる)

オブジェクトの階層
http://www.rfs.jp/sitebuilder/javascript/01/03.html

イベントハンドラ
http://www.rfs.jp/sitebuilder/javascript/01/08.html
http://www.rfs.jp/sitebuilder/javascript/01/09.html

「JavaScript サンプル集 & HTML の基礎」もサンプル集として良い(と思う)
http://www9.plala.or.jp/oyoyon/html/index.html
要素の追加 http://www9.plala.or.jp/oyoyon/html/script/append.html
テーブルタグ作成 http://www9.plala.or.jp/oyoyon/html/script/make_table.html

フォームの入力チェック(いつも忘れるので、典型的なサンプルを挙げておこう)
http://jsm.suepon.com/script/jsm39.html
Form の onSubmit のイベントハンドラで false を返すと Submit されない。
Form のアイテムを参照するために、onSubmit で呼ぶ関数に this(Form 自身のオブジェクト)を渡してあげるようにしてあげると分かり易い。
#ただし、このチェックはユーザー補助であって安全ではないので注意(→皆さん)
http://www.ipa.go.jp/security/awareness/vendor/programming/a01_01_main.html

All About に JavaScript のチャネルがある
http://allabout.co.jp/career/javascript/
最近のはやりは、やっぱり Ajax みたい。
Ajaxはじめの一歩 XMLHttpRequest
http://allabout.co.jp/career/javascript/closeup/CU20050515A/index.htm?FM=cukj&GS=javascript
Sync(同期)とAsync(非同期)
http://allabout.co.jp/career/javascript/closeup/CU20050615A/index.htm
動的なテーブル書き換え
http://allabout.co.jp/career/javascript/closeup/CU20050630A/index.htm
http://allabout.co.jp/career/javascript/closeup/CU20050715A/index.htm
OPTION要素をXMLで書き換える
http://allabout.co.jp/career/javascript/closeup/CU20051015A/index.htm
インタラクティブなフォーム生成 (テキスト入り INPUT)
http://allabout.co.jp/career/javascript/closeup/CU20050915A/index.htm
インタラクティブなフォーム生成2 (SELECT )
http://allabout.co.jp/career/javascript/closeup/CU20050930A/index.htm


Ajax [JavaScript]

Ajax って、特定のプロトコルに従ったフレームワークのことだと思っていて、
Python の実装が出たら使ってみようか、と思っていたがどうも違うらしい。
http://d.hatena.ne.jp/keyword/Ajax
http://naoya.dyndns.org/~naoya/mt/archives/001610.html
JavaScript の XMLHttpRequest をつかった非同期更新の総称か。

それならば、簡単なサンプルがないかと探した中では、これが一番わかりやすかった
http://apollo.u-gakugei.ac.jp/~sunaoka/ajax/ajaxzip/
これくらいの JavaScript & Perl ならおじさんにもなんとなくわかるぞ。
データを↓こんな感じで XML 形式で受け取って JavaScript で更新してあげるのね
http://apollo.u-gakugei.ac.jp/~sunaoka/ajax/ajaxzip/ajaxzip.cgi?z=1000001

いくつあるかわからない配列のような要素をずらずらっと表示するのは、
どうすれば良いのだろう。仕組みは同じなので JavaScript の書き方の問題だけだけど、
時間があるときに RSS Reader のサンプルの JavaScript を見てみようか。
http://komenotsugama.jp/cgi/rssreader/index.cgi

今まで、なんとなく避けてきたけど JavaScript もちょっとお勉強しないとだめみたい
http://www.amazon.co.jp/exec/obidos/ASIN/4873111692


JavaScript ブログトップ