この回からはjavascriptの学習をしていきます。
まず、htmlファイルを作ります。
名前は何でもいいです。
ただし、拡張子に「.html」を付けるのを忘れないでください。
例:名前.html
次はコードの中身を書きます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
タイトル
</title>
<script src="js/test.js"></script>
</head>
<body>
<input type="button" value="OK" onclick="ohayou()">
</body>
</html>
念のため、htmlについて解説します。
・<!DOCTYPE html>はhtmlバージョンを宣言するコードです。(ぶっちゃけ無くても動きます)
・<head>はページには表示されない情報を書きます。
javascriptコードの書いてあるファイルの場所もここに書きます。
・<head>タグ内にある<meta charset=”UTF-8″>は文字コードを設定するところです。
これが無いと使うブラウザによっては文字化けする可能性がありますので、必ず書きましょう。
・<body>の中身が基本的にブラウザに表示されます。
さて、<script src=”js/test.js”></script>の部分が気になったと思いますが、これは「jsフォルダの中のtest.jsファイルを読み込みます」という意味です。
なので「名前.html」と同じところにjsファイルを作りましょう。

こんな感じです。(この中では名前は「授業」になっています)
次はこのjsフォルダの中に「test.js」ファイルを作りましょう。
そしてこのファイルの中身を書きます。
function ohayou(){
alert("Hello!");
}
これはjavascriptの関数です。
ohayouという名前の関数で、「Hello」という名前のアラートが出てくる仕組みになっています。
この関数は<input type=”button” value=”OK” onclick=”ohayou()”>で読み込まれます。
onclick=”ohayou()で同じ名前が書いてあるので解りますね?
これで準備は整いました。
これで「名前.html」をクリックしましょう。
デフォルトで設定されてあるブラウザでページが表示されます。(コードを編集するときは右クリックで「プログラムから開く」の項目を選んで、普段編集で使うテキストエディタを選びましょう)
するとこんな画面が開くはずです。

この「OK」は<input type=”button” value=”OK” onclick=”ohayou()”>の「value=”OK”」で表示されています。
このボタンを押しましょう。

このアラート画面が出てきます。
それではまた次回。
コメント