JSPT http://jspt.coolwebwindow.com JavaScript Programing Training Sun, 15 Jun 2008 10:12:41 +0000 http://wordpress.org/?v=2.5 ja iPodライクなメニュー http://jspt.coolwebwindow.com/2008/06/15/21/ http://jspt.coolwebwindow.com/2008/06/15/21/#comments Sun, 15 Jun 2008 10:11:19 +0000 vanilla http://jspt.coolwebwindow.com/?p=21 iPodライクなメニューをiQueryを使って表現しています。デモは以下のサイトにあります。

jQuery iPod-style Drilldown Menu | Filament Group, Inc.

]]> http://jspt.coolwebwindow.com/2008/06/15/21/feed/ 地図から都道府県を選択できるJavaScript http://jspt.coolwebwindow.com/2008/06/07/20/ http://jspt.coolwebwindow.com/2008/06/07/20/#comments Sat, 07 Jun 2008 02:43:50 +0000 vanilla http://jspt.coolwebwindow.com/?p=20 住所のフォームから都道府県を選択する場合、一般的に47列に並んだテキストから選択するわけですが、住んでいるところが北海道ならまだしも、福岡県とか下のほうにあるところを選択するのは結構面倒ですよね。このjsmapというJavaScriptは、地図形式で都道府県を選択できるので、クリック数は増えるのですが視覚的にわかりやすい形です。デモはサイトのトップページにあります。

jsmap - JavaScriptによる都道府県入力補助

]]> http://jspt.coolwebwindow.com/2008/06/07/20/feed/ フェードするツールチップ http://jspt.coolwebwindow.com/2008/06/07/19/ http://jspt.coolwebwindow.com/2008/06/07/19/#comments Sat, 07 Jun 2008 01:57:44 +0000 vanilla http://jspt.coolwebwindow.com/?p=19 テキストにマウスのカーソルを合わせると、フェードインしながらツールチップが現れ、マウスアウトすると、フェードアウトしながらツールチップが消えるJavaScriptです。デモはこちらから。

Fading JavaScript Tooltips 2kb - Web Development Blog

]]> http://jspt.coolwebwindow.com/2008/06/07/19/feed/ JavaScriptのイベントハンドラについて http://jspt.coolwebwindow.com/2008/05/17/18/ http://jspt.coolwebwindow.com/2008/05/17/18/#comments Sat, 17 May 2008 13:09:23 +0000 vanilla http://jspt.coolwebwindow.com/?p=18 Javascriptを実行する際に、HTMLタグにonclickを埋め込まない形の書き方について紹介されています。1ステップごとに書かれているのでものすごくわかりやすいです。

いまいち、 


function foo(x) {
    alert(x);
}

と 


foo
    = function (x) {
        alert(x);
    };

が同義ってことが理解できていなかったのですが、この記事をみてなんとなく理解できました。

こうやってみていると、Javascriptの書き方も日々進化しているんだなぁと実感ｗ

JavaScript のイベントハンドラ - daily dayflower

]]> http://jspt.coolwebwindow.com/2008/05/17/18/feed/ JavaScript関数の呼び出しはどうするべきか？ http://jspt.coolwebwindow.com/2008/05/17/17/ http://jspt.coolwebwindow.com/2008/05/17/17/#comments Fri, 16 May 2008 22:06:15 +0000 vanilla http://jspt.coolwebwindow.com/?p=17 JavaScript関数を呼び出すときに、｢onclick属性｣を使うべきか？それとも｢ライブラリ｣を使うべきか？という議論。

本気でやるならonclick属性は避けてライブラリを活用すべき - id:HolyGrailとid:HoryGrailの区別がつかない日記

]]> http://jspt.coolwebwindow.com/2008/05/17/17/feed/ JavaScriptの勉強に。 http://jspt.coolwebwindow.com/2008/05/13/16/ http://jspt.coolwebwindow.com/2008/05/13/16/#comments Tue, 13 May 2008 13:36:59 +0000 vanilla http://jspt.coolwebwindow.com/?p=16 JavaScriptのイベント処理とかの話ですが、ちょっとわかりづらい説明です＞＜参考程度にブクマします。

[Think IT] 第1回：そろそろ本気で学びませんか？ (1/3)

]]> http://jspt.coolwebwindow.com/2008/05/13/16/feed/ テキストのスクロールやスライド http://jspt.coolwebwindow.com/2008/05/10/15/ http://jspt.coolwebwindow.com/2008/05/10/15/#comments Sat, 10 May 2008 01:43:15 +0000 vanilla http://jspt.coolwebwindow.com/?p=15 テキストなどをスライドさせるJavascript（ｊQuery）です。ニュースティッカーとしても使えそうですね。デモはこちらから。

Ultimate JavaScript Scroller and Slider - Web Development Blog

]]> http://jspt.coolwebwindow.com/2008/05/10/15/feed/ Photoshop風カラーピッカー http://jspt.coolwebwindow.com/2008/05/10/14/ http://jspt.coolwebwindow.com/2008/05/10/14/#comments Sat, 10 May 2008 00:47:44 +0000 vanilla http://jspt.coolwebwindow.com/?p=14 Photoshopで用いられているようなカラーピッカーをJavascript(prototype)で表現しています。デモはこちらから。

PhotoShop-like JavaScript Color Picker

]]> http://jspt.coolwebwindow.com/2008/05/10/14/feed/ jQueryサンプル集 http://jspt.coolwebwindow.com/2008/04/30/13/ http://jspt.coolwebwindow.com/2008/04/30/13/#comments Wed, 30 Apr 2008 02:35:11 +0000 vanilla http://jspt.coolwebwindow.com/?p=13 jQueryのサンプルを紹介しているまとめサイトです。

jQueryサンプル集 - DesignWalker

]]> http://jspt.coolwebwindow.com/2008/04/30/13/feed/ [2日目]JavaScriptを記述する際の注意事項 http://jspt.coolwebwindow.com/2008/04/19/12/ http://jspt.coolwebwindow.com/2008/04/19/12/#comments Sat, 19 Apr 2008 04:24:18 +0000 vanilla http://jspt.coolwebwindow.com/?p=12 今回は、JavaScriptを記述する際の注意事項です。私はこのあたりはわかっている（つもりな）ので簡単に済ませます。

JavaScriptの記述方法

JavaScriptはwebページを動作させるスクリプトとして扱う場合、HTML文書（ドキュメント）に組み込んで使用します。HTMLに組み込ませる方法はCSS同様、HTML文書に直接埋め込む場合と外部ファイルから読み込む場合の2種類あります。まずは、HTML文書に直接埋め込む場合のサンプルを示します。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScriptのサンプルソース</title>
<script type="text/javascript" language="Javascript">
<!--
//ここにスクリプトを記述。この行はコメントです。
document.write('Hallo! JavaScript');
-->
</script>
</head>
<body>
<script type="text/javascript" language="Javascript">
/*
ここにスクリプトを記述。
この行はコメントです。
複数行にわたってコメントを書くことができます。
*/
document.write('<h1>JavaScriptのテスト</h1>');
document.write('<p>bodyにもJavaScriptは記述できます。</p>');
document.write('<img src="image/photo.jpg">');
<noscript>
<p>JavaScriptを有効にしてください。</p>
</noscript>
</script>
</body>
</html>

上から説明していきます。

metaタグを記述する

まず4行目。HTML文書にJavaScriptを記述する際は、metaタグを利用して、JavaScriptを使用していることを明示しなければなりません。場合によってはこれをちゃんと記述していないとJavaScriptが正常に動作しない場合もあるので注意です。

script typeを記述する

HTML文書にJavaScriptを記述する際は、script type内に記述します。HTML 4.01ではlanguage=”Javascript”は非推奨なのですが、これを書かないとかなり古いブラウザではJavaScriptを読み込めません。どこまでのブラウザを保障するかが問題となります。

JavaScriptを認識できないブラウザの対処

7行目(閉じタグは10行目）ではJavaScriptを認識できないブラウザのための対処がなされています。JavaScriptを認識できないブラウザは、スクリプトをテキスト（文字）として表示してしまうので、HTMLのコメントタグを使用して、テキストとして表示されないようにしています。

ただし、XHTMLではHTMLのコメントタグが利用できません。専用にコメントタグが用意されているのでそちらを使います。 


//<![CDATA[
ここにスクリプトを記述。
//]]>

しかし、現在ブラウザは完全にXHTMLに対応しておらず、CDATAセクションを認識するかどうかもブラウザによってはまちまちの現状です。そのため、できるだけHTML文書に直接スクリプトを書かないほうが無難と言えば無難です。

コメント

8行目および15行目（閉じタグは19行目）には、コメントが書かれています。一行のみのコメントは先頭に//を記述します。複数行の場合は/* ～ */で囲みます。

大文字と小文字を区別する

JavaScriptでは大文字と小文字を区別します。そのため10行目の例で言えば、Document.write(’Hallo! Javascript’);と最初のDを大文字で書いてしまえば動作しなくなってしまいます。

ステートメントの最後にセミコロン

ステートメント（1つの命令の最小単位）の最後にセミコロンをつけます。CSSもそうですね。CSSと同様に1行のみであればセミコロンは省略できますが、ステートメントの最後にセミコロンをつける習慣をつけておいたほうがよいので、1行でもセミコロンはつけましょう。

クォーテーションの入れ子

例えば22行目のように、クォーテーションを入れ子にしたいときがあるでしょう。その場合は、外部にシングルクォーテーションで囲んだら内部はダブルクォーテーションで囲みます。その逆も有効です。ただし、シングルクォーテーションをシングルクォーテーションで囲んだら（あるいはダブルクォーテーションをダブルクォーテーションで囲んだら）エラーになるので注意です。

では、さらに入れ子をしたいときはどうすればよいのか？その場合は、バックスラッシュ(\)を使用してクォーテーションをエスケープします。このあたりは、とほほのＷＷＷ入門のサイトを参考にされたし。

JavaScriptの ” と ‘ について

JavaScript非対応のブラウザにメッセージを表示する

JavaScript非対応のブラウザにメッセージを表示するには23行目（閉じタグは25行目）のようにnoscriptタグを使用します。この中には普通にHTMLタグも使用できます。

JavaScriptスクリプトを外部ファイルから読み込む

HTMLとは別にJavaScriptを管理したいときや、1つのスクリプトを複数のHTMLファイルで使用する場合は、JavaScriptスクリプト用の外部ファイルを作成し、HTML文書に読み込ませます。その場合は、head内部に以下のように記述して外部ファイルを読み込ませます。

<script type=”text/Javascript” src=”javascript.js”>

注意しなければならないのは、外部ファイルの拡張子を.jsにすることです。そうしなければJavaScriptとして認識されません。

]]> http://jspt.coolwebwindow.com/2008/04/19/12/feed/