javascriptの基本
実際にjavascriptの基本的な記述を
勉強してみましょう。
まずは超シンプルなjavascript
<html> <head> <script type="text/javascript"> <!-- document.write("ここにjavascriptを書きましょう。"); //--> </script> </head> <body> </body> </html> |
<script language="javascript">と</script>の
間に書かれた内容がjavascriptとみなされます。
今回はheadの中に書いていますが
もちろんbodyの中でも良いです。
それではソースコードの説明です。
上記のソースコードでは
<script language="javascript">と</script>の間に
document.write("ここにjavascriptを書きましょう。");
というコードがありますね。
これはdocumentオブジェクトのwriteメソッドを
使用するという記述なのですが
クマイエではそんな難しい事を
書いていく気はサラサラないので
document.write("");内に書いたものが
ブラウザに表示されると覚えてもらえれば結構です。
ちなみに;は書き損じではありません。
多くのプログラミング言語では
一つの式の最後を明示してあげなくてはいけません。
この;(セミコロン)は式の終わりを明示するものです。
javascriptはセミコロンがなくても
動いてくれるのですが
これがあった方がわかりやすいし、
一行で書きたい時等にも使えるので
できたら式の終わりには;を打ちましょう。
<!-- と //-->は
javascript非対応ブラウザの為のコードです。
これをつけておく事で非対応ブラウザでも
おかしな画面にならないようにします。
それじゃさっそく上のソースコードを
そのままコピって適当な名前で保存してみましょう。
もちろん拡張子はhtmlです。
次はそれをダブルクリックで開いてみましょう。
するとdocument.write("");内の文字が
表示されましたよね。
これであなたもちょっとしたプログラマーです。
外部からjavascriptを読み込む
htmlファイルの中に直接書き込めるjavascriptですが
あんまり書きすぎるとゴチャゴチャになって
読みにくくなります。
そんな時はjavascriptを一つのファイルにまとめ
そのファイルを読み込んであげましょう。
まずは外部ファイルとしてのjavascriptの作り方。
別に難しい事はありません。
javascript部分だけを書いてやればいいのです。
上のjavascriptの基本で書いたソースコードを例にします。
<html> <head> <script type="text/javascript"> <!-- document.write("ここにjavascriptを書きましょう。"); //--> </script> </head> <body> </body> </html> |
このソースコードで言えば
| document.write("ここにjavascriptを書きましょう。"); |
の部分がjavascript部分です。
他の部分は必要ありません。
あくまでjavascript部分だけを書かなければいけません。
上記のjavascript部分だけを抜き取ったソースコードを
コピってメモ帳やテキストエディタに貼り付けてみましょう。
そしてここからが重要。
保存の際に.jsという拡張子にしてあげましょう。
そうする事によってこのファイルはjavascriptファイルだと認識され
htmlから読み込む事ができます。
とりあえず今回はtest.jsという名前にしておいてください。
それでは読み込み方法。
<html> <head> <script src="./test.js" type="text/javascript"> </script> </head> <body> </body> </html> |
この記述でjsファイルを読み込めます。
ちなみに ./ 部分は同じフォルダの中にあるという意味です。
のでjsファイルとこのhtmlは同じフォルダに入れてあげてください。
それでは上のソースコードをコピってさっそく
やってみましょう。
保存してhtmlファイルをダブルクリック!!!!
どうですか?Javascriptの基本でやった内容と同じ
結果が出ましたか?出たら完成です。
|
|
|