連載
» 2016年08月22日 05時00分 公開

JavaScriptプログラミングをdocument.writeやalertで始める際の基礎知識をパーフェクトに解説する初心者のためのWebアプリ開発超入門(1)(3/5 ページ)

[金城俊哉,著]

手書きのHTMLとJavaScriptの動的処理

 Webページに文字を表示するコードの書き方がわかりましたので、さっそくコードを書いていきます。「えっ!どこに書くの?」ということになりますが、ここでは、最も簡単な方法を使うことにするようです。HTMLドキュメントを作って、その中にJavaScriptのコードを書いてしまうとのことです。

HTMLドキュメントの中にJavaScriptのコードを書く

theme

JavaScriptの命令を使って、Webページに「Hello world!」と表示する。


Navigator

「テキストエディターで新規のドキュメントを開いて、まずはHTMLのコードを書いてWebページの骨格を作りましょう。そのあとで、内部にJavaScriptのコードを書いていきます」


まずはHTMLドキュメントを作成

Navigator

「新規のドキュメントを作成したら、次のようにHTMLのコードを記述しましょう」


HTMLのコード
Navigator

「これ以上ないというくらいに簡素なWebページです。<html>〜</html>がHTMLドキュメントの範囲を示しています。<body>〜</body>の部分がWebページの本体になる部分です。しかし、ここでは本体の部分が空なので、このままブラウザーで表示しても何も表示されません。つまり、空のページというわけです。この空の本体部分にJavaScriptのコードを書いていきます」


Driver

「いきなり書いちゃっていいんですか?」


Navigator

「いえ、HTMLドキュメントの中にJavaScriptのコードを書く場合は、<script type="text/javascript">と</script>というHTMLのコードを書いてから、この間にコードを書くようにします。<script type="text/javascript">の部分は、これからJavaScriptのソースコードが始まることを示し、</script>はソースコードの終わりを示します」


Driver

「では、作成したHTMLドキュメントの中にJavaScriptのコードを書いていきますね」


JavaScriptのコードの記述(Hello.html)
Navigator

「エディター上で次のようになっていれば、OKです」


エディターで入力したところ

Onepoint

「<script type="text/javascript">」の「type="text/javascript"」は省略できるようになっています。省略したとしても<script>〜</script>内部はJavaScriptのコードとして見なされます。

HTMLドキュメントを公開用フォルダーに保存する

 記述が済んだら、パソコン上で稼働するWebサーバーの公開用フォルダーにHTMLファイルとして保存することになります。

 ファイルメニューをクリックして名前を付けて保存(Macのテキストエディットの場合は保存)を選択します。

Notepad++の[ファイル]メニュー

 (1)Webサーバーの公開用フォルダーを選択します。

 (2)ファイル名に「hello」と入力し、ファイルの種類Hyper Text Markup Language file(*html,…)を選択して、HTML形式ファイルとして保存するようにします。

 (3)最後に保存ボタンをクリックして、ファイルを保存します。

HTMLファイルの保存

作成したJavaScriptのページを確認する

 公開用フォルダーへの保存が済んだら、さっそくWebブラウザーでページを表示して、どのようになるか確認することが必要です。

WebサーバーにアクセスしてJavaScriptのページを表示する

Driver

「さっそくWebブラウザーを起動して確認しましょう」


Navigator

直接、ファイルをダブルクリックして表示するのではなく、ローカルのWebサーバーを通じて『hello.html』を表示しましょう。アドレスの入力欄に『http://localhost/hello.html』と入力してみてください」


hello.htmlを表示
Driver

「無事、JavaScriptのページが表示されましたー」


Attention

もし、うまく表示されない場合は、Webサーバーが起動中であるか確認してみてください。また、指定したアドレスが間違っていないか、特に拡張子を含めてファイル名が正しく指定されているかも確認してみましょう。

Navigator

「ところで『文字を表示するだけならHTMLだけでできるよ』と思いませんでした?」


Driver

「確かに文字を表示するだけなら、HTMLでできますよね」


Navigator

「そこをあえて、最初のJavaScriptプログラムとしてやってみたのです。ずいぶん長い説明の割には、文字を表示するだけのプログラムでしたが、命令文の書き方、さらにはオブジェクトやメソッドなど、JavaScriptのキモとなる部分は、すでに習得しましたってことですよ」


Driver

「でも、これだけじゃプログラムとしての実感が湧きませんねぇ」


Navigator

「実はwrite()メソッドは、もうちょっとプログラムらしいことができるのです。これについては、引き続き次の項で取り組んでいくことにしましょう」


Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。