特集PC技術

コアJavaScript(ECMAScript)の図書室

 

3冊目 JavaScriptのことはじめ。

JavaScriptの最も基本的な文法について説明をします。
あの有名な最初に学ぶHello Worldみたいなプログラムです。
JavaScriptプログラムの基本となりますので確実に抑えておくポイントになります。
基本的な方法は主に2つあります。
HTMLに埋め込む方法と、JSファイルに記述して読み込む方法です。

目次

[1] HTMLファイルに埋め込む方法

まずは、HTMLファイルにJavaScriptを埋め込む方法です。
説明をする前に以下のプログラムをメモ帳等を記述し、ファイルを保存してください。

ファイル JS01_01.html
<script type="text/javascript">
<!--
document.write("ほぷしぃへようこそ");
-->
</script>

上記プログラムを記述して、ファイルを保存したら、Webブラウザで開きます。
真っ白な画面に「ほぷしぃへようこそ」と表示されると思います。
JavaScriptのコードはHTMLファイル内で、<script>タグ内に書き込みます。
また、「<!--」 と「-->」はHTMLファイルのコメントですが
JavaScript未対応のブラウザに対応するための記述方法です。
現在使用しているブラウザはあまり気にする必要もないような気がします。

[2] JSファイルに記述してHTMLファイルで読み込む方法

このほかにもJSファイルを記載し、HTMLファイルから呼び出す方法があります。
この場合は、ファイルを2つ用意します。
このとき2つのファイルは同じフォルダ内に入れておいてください

ファイル JS01_02.html
<script type="text/javascript" src="JS01_02.js">
</script>
ファイル JS01_02.js
document.write("ほぷしぃへようこそ");

htmlファイル形式のファイルをWebブラウザで確認してみると同じように画面に出力されます。
HTMLファイルとJSファイルを上記のように分けて記述します。
JSファイルはHTMLファイルの<script>タグのsrc属性にファイルパスを記載します。
これで、最初に書いたプログラムと同等な機能を実現できます。
HTMLとJavaScriptは基本的に役割が違うのでわけたほうがよいでしょう。

[3] 2種類の方法を同時に使う場合の注意点

上記の2種類を同時に使用するときには注意しておかないといけないことがあります。
プログラムを見てください

ファイル JS01_03.html
<script type="text/javascript" src="JS01_03.js">
<!--
document.write("これは出力されません");
-->
</script>
<script type="text/javascript">
<!--
document.write("埋め込みの方法");
-->
</script>
ファイル JS01_03.js
document.write("外部ファイルの参照");

実行していただければわかると思いますが、"これは出力されません"は出力されません。
外部ファイルの参照をしているタグの中にJavaScriptのコードを書いた場合には無効です
これ以降のコンテンツでは省略して記載いたしますので、ご自由に記述してください

[4] JavaScriptプログラムの注意点

JavaScriptプログラムにおいて抑えておきたい点についていくつか説明します。
JavaScriptプログラム実行順は基本的に上から下に実行されます。
ただ、関数などが実行する場合には異なります。
関数につきましては、別の機会に取り扱います。

文末のセミコロン(;)

文末には基本セミコロン(;)がありますが、あってもなくても動作します。
書くのは面倒かもしれませんが、書いておいたほうがよけいな不具合を防ぐことができます。

document.writeln("ほぷしぃへようこそ");

document.writeln("ほぷしぃへようこそ")
改行やスペース

セミコロンがなくても動作するように下記のようなプログラムでも動作します。
読みにくくする原因になるだけなので、基本的にはやめておくべきです。


document.writeln("ほぷしぃへようこそ");

document.
writeln("ほぷしぃへようこそ");

document.	writeln("ほぷしぃへようこそ");
大文字と小文字は区別される

JavaScriptプログラムにおいて大文字と小文字は別物として扱われます。

document.writeln("ほぷしぃへようこそ");

// 上とは別物なのでエラー
//DOCUMENT.WRITELN("ほぷしぃへようこそ");

[5] 更新履歴

日付 詳細
2011/05/20 コンテンツ公開

コメントの投稿


画像の中に見える文字を入力してください。

トラックバックURL

http://www.isl.ne.jp/cgi-bin/mt/mt-tb.cgi/1705

サイト内検索

コアJavaScript(ECMAScript)の図書室

twitterTwitter

最新ブログ記事

2015年06月13日

JavaScriptの情報室

4冊目 ハイブリッドアプリが作れる。tabris.js

2014年10月16日

C++言語学習録

第3回 ファイルを分割してみよう

2014年10月09日

C++言語学習録

第2回 オブジェクト指向の復習

2014年10月02日

C++言語学習録

第1回 C++の開発環境を整える

2014年09月25日

Swiftを試してみようなう。

第4回 Swiftでクラスを使うなう。

ISL 情報戦略研究所

pagetopこのページの先頭へ戻る