Home > トレーニング
トレーニング Archive
[2日目]JavaScriptを記述する際の注意事項
- 2008-04-19 (土)
- トレーニング
今回は、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非対応のブラウザにメッセージを表示するには23行目（閉じタグは25行目）のようにnoscriptタグを使用します。この中には普通にHTMLタグも使用できます。
JavaScriptスクリプトを外部ファイルから読み込む
HTMLとは別にJavaScriptを管理したいときや、1つのスクリプトを複数のHTMLファイルで使用する場合は、JavaScriptスクリプト用の外部ファイルを作成し、HTML文書に読み込ませます。その場合は、head内部に以下のように記述して外部ファイルを読み込ませます。
<script type=”text/Javascript” src=”javascript.js”>
注意しなければならないのは、外部ファイルの拡張子を.jsにすることです。そうしなければJavaScriptとして認識されません。
- Comments: 0
- Trackbacks: 0
[1日目]私のJavaScriptに対するイメージ
- 2008-04-05 (土)
- トレーニング
JavaScriptと言えば、以下のことを思い浮かべます。
用語が並ぶと？？？と頭がパニックになりますが、これらは学んでいくうちにだんだんと理解できるようになる（予定な）ので、ざっくりとだけ。
スクリプト言語
スクリプト言語（-げんご、scripting language）とは、アプリケーションソフトウェアやソフトウェアツールの動作内容を、台本（Script）のように記述するための、簡易的なプログラミング言語の総称である。
プログラミング言語の中でも簡易的なものをさすようです。が、別にJavaScriptが簡単だと思っちゃうと後で痛い目に遭う。台本（Script）のように記述するっていうのがよくわからない。きっとプログラミングしていくうちにわかるようになるはず＞＜
インタプリタ方式
インタプリタ（interpreter）とは、プログラミング言語で書かれたソースコードを逐次解釈しながら実行するソフトウェアである。プログラムの実行に主としてインタプリタが用いられるプログラミング言語をインタプリタ言語と呼ぶ。
普段人が書いているコードは人にわかりやすく書いているだけであって、コンピュータはそのままでは解読できない。よって一度コンピュータが解釈（翻訳）する手間がいる。
Javaとかだったらコードをコンパイルしてコンピュータが解釈できる形にしたもの（classファイルとか）サーバにアップするのだけど、JavaScriptは逐次コンピュータが解釈しながら実行しているという感じなのかな？
そのため、コンパイルよりもインタプリタのほうが解釈する手間分時間がかかるようですが、どのくらい違いがあるのかは実行内容などにもよるようです。
クライアントサイドスクリプト
クライアントサイド（client side）とは、コンピュータネットワーキングにおいて、クライアントサーバ関係におけるクライアントによって実行される操作・処理のことを指す。
クライアントとはこの場合ブラウザを指します。ブラウザによってコードが実行されるので、閲覧しているブラウザの種類によって実行結果が違ったりうまく実行できなかったりします。要は、Javascriptはブラウザ依存があるってことですね。
オブジェクト指向
オブジェクト指向（オブジェクトしこう）とは、オブジェクト同士の相互作用としてシステムの振る舞いをとらえる考え方である。
正直、オブジェクト指向とは何か？を理解できるのは結構難しいかもしれません。私も少しJavaをしたことがあるのですが、人のコードをいじくりまわしていてようやく「こういうことがオブジェクト指向なのね！」と感じる瞬間があったくらいですし。
オブジェクト指向って、プログラミングの設計方法みたいなものなのですよね。大掛かりなシステム設計などしたときに、Javaだったらカプセル化とか継承などの概念がすごく重要になってくるようなのですが、Javascriptでのオブジェクト指向に関しては全くよくわかりませんので、これから勉強していきたいと思います。
Javascriptにおけるオブジェクト指向を理解するために、このあたりのサイトを読んでみたい。
- JavaScriptによるオブジェクト指向プログラミング
- オブジェクト指向プログラム言語としてのJavaScript
- Part2 JavaScript流オブジェクト指向プログラミング：ITpro
- プロトタイプ（prototype）によるJavaScriptのオブジェクト指向：CodeZine
- JavaScript によるオブジェクト指向プログラミング
- ＠もぐりん JavaScript->オブジェクト指向
Javascript オブジェクト指向でググったらたくさんわかりやすい説明をしているサイトを発見できます。
- Comments: 0
- Trackbacks: 0
[0日目]意気込み表明
- 2008-03-30 (日)
- トレーニング
こんばんは。CoolWebWindowのvanillaです。
以前からやってみたいと言っていたプログラミングblogですが、ようやく公開することとなりました。
勉強するプログラム言語ですが、PHPとJavascript、どちらにするか決めかねていたのですが、以下の点からJavascriptを勉強することにしました。正確にはJavascriptはプログラミング言語ではないのですがね。
- １．環境設定の易しさを考慮して
- PHPを動作させようと思ったら、環境構築が面倒だし、サーバ立てるのもね私ひとりの力では無理だったので。その点、Javascriptはブラウザとテキストエディタがあればよいので、環境設定をする必要がなくラクだったため。
- ２．デザインをよりリッチにする技術を取得したいから
- ホームページ作成において、別に自分でフォームを作ったりCMSを構築したいとかは思わないから。それよりも、CSSではできなかったり複雑になってしまうことを簡単にできるようになりたいです。
- ３．ライブラリを使えるようになりたい
- 特にPrototypeよりもｊQueryを勉強したいです（気分的に）。最終的には、ライブラリを使用してJavascriptが書けるといいな。
- ４．Ajaxがしたい
- 例えば、GoogleMapがAjax技術を利用しているとかはわかるのだけど、マクロな目でみて、今までのJavascriptとは何か違うのか理解したい。
- ５．amachangさんが何を話しているか理解したい
- amachangさんのblogはいつも楽しく読ませていただいているのですが、Javascriptの話題になると途端についていけなくなります＞＜もっと楽しくamachangさんのblogが読みたいですｗ
一方で、Javascriptはクライアントサイドに依存するため、OFFられてたら意味ないからなあと敬遠していましたが、「デザインをよりリッチにする」という目的であるならば、OFFにしてデザイン的に劣ってもwebサイトとしてはなりたつし、別にいいんじゃないかなぁと思ったり思わなかったりで。
師匠は誰か？
最近のこういう流行のプログラミングblogには必ず師匠がいるようですが、私は周りにそういう人がいないし（いや、いるのはいるのですが身内はお互い非常に嫌な気持ちになるだけなので）、師匠は本とwebサイトです。
現在の私の師匠はこちらです。
Amazonおすすめ度：
本当はサイ本を購入しようとしていたのですが、参考書を買うにあたり夫に相談したら「お前には難しくて無理だから、入門書にしろ。」と言われてしまいました＞＜入門的サイ本でもよかったかもしれませんが。
Amazonおすすめ度：
blogの更新頻度について
勉強のほうは時間が空いたときにしようと思いますが、blogの更新頻度としては、週一くらいを目指しています。が、もっとスパンが空くかもしれません＞＜とりあえず三日坊主にならないようにしたいです。
その他の目的
あと、このblogはJavascripを勉強する他に、WordPressを勉強するという目的もあります。これまでWordPressでサイト構築をしたことがなかったものですから。あとデザインはできるだけ自分で作らず、人が作ったのをガシガシ使っていきたいです。ホームページ用のデザインテンプレート配布をしているwebサイトではそうはいきませんからね。
そんなこんなでどうぞ宜しくお願いします。
- Comments: 0
- Trackbacks: 0
Home > トレーニング
- Search
- Feeds
- Meta