gorogoronyan FC2

JavaScript はじめの一歩 (1)

はじめの一歩

サンプル 1: 一番簡素なサンプル

関数 alert() のダイアログを表示する
関数 alert() のダイアログを表示する
TestJS_hello01.html
関数 alert() のダイアログを表示するサンプルです。
<script>
// 関数 alert() を実行する。
alert("こんにちは\nHello");
</script>

サンプル 2: ボタンを押したらダイアログを表示する

ボタンを押すと関数 alert() のダイアログを表示する
ボタンを押すと関数 alert() のダイアログを表示する
TestJS_hello02.html
ボタンを押すと関数 alert() のダイアログを表示します。 関数宣言とクリック (click) イベントのサンプルです。

プログラムが実行されるタイミングの違い

TestJS_hello01.html では HTML の読み込み完了を待たずに alert() を実行している点に注意してください。 script タグ内で関数を直接呼ぶと HTML を読み込む途中でもすぐに実行されます。 alert() のダイアログを閉じるまで HTML のテキストは表示されません。

TestJS_hello02.html では script タグ内には関数 hello() の 宣言(定義) があるだけで、 関数の 実行 (呼び出し) がありません。 ボタンを押したときにはじめて hello() が実行されます。 関数の宣言と実行の違いにも注意してください。

html, head, body などのタグは省略しても構いません

ちょっとサンプルを書いて動かすだけなら html, head, body などのタグを毎回書く必要はありません。 これらのタグはなくても構いません。
HTML5 の最小限のサンプル

上のサンプル TestJS_hello02.html も下のコードだけで動きます。 コードをコピーして適当な名前の html ファイルに保存して実行してみてください。

<script>
//関数の宣言
function hello(){
    alert("こんにちは\nHello");
}
</script>

<button onclick="hello()">ボタンを押す</button>
(補足) コードの内容によっては文字化けすることがあるので、 その場合は先頭の行に
<meta charset="utf-8"/> を追加してください。

サンプル 3: div タグに文字列を表示する

次に alert() のダイアログを表示する代わりに div タグに文字列を表示してみます。

TestJS_div_textContent01.html
ボタンを押すと div タグの文字列を書き換えます。

このサンプル では const や document.querySelector() などいろんなキーワードが出てきます。後で説明します。
変数宣言 (let)、定数宣言 (const)
JavaScript: HTML 要素にテキストを出力する

予約語

キーワード functionconst は JavaScript では特別な意味を持ち、 変数名や関数名などに使うことはできません。このようなキーワードを 予約語 と呼びます。予約語には function, const, let, if, else, null, true, false などがあります。

デバッグの仕方

プログラムの記述に誤り (バグ) があるとプログラムは正常に動作しません。 バグを取り除く作業をデバッグと呼びます。

ブレイクポイントとステップ実行の使い方は、 はじめから覚える必要はありません。 後で説明する console.log() でもほとんどのデバッグができます。 ブレイクポイントやステップ実行による動作確認は手間がかかるので、 プログラミングに慣れた人々もあまり使いません。
console.log() で文字列を出力する

文字列を囲む記号

JavaScript では文字列を囲む記号文字で ダブルクォート "、シングルクォート ' のどちらでも使えます。 また、2020年代のウェブブラウザではグレイヴ・アクセント ` を使用することもできます。 グレイヴ・アクセントは シフトキー + @ で入力できます。

例:
"文字列"    //ダブルクォートで囲む
'文字列'    //シングルクォートで囲む
`文字列`    //グレイヴ・アクセントで囲む (IE では動作しませんでした)

シングルクォートは HTML タグの中に関数呼び出しがあるときに使うと便利です。

例:
<body onload="func('文字列');">

参考でダブルクォートだけで書こうとすると \" のように文字 \ でエスケープが必要になり、見づらくなります。

例: \ でエスケープした記述
<body onload="func(\"文字列\");">

グレイヴ・アクセントは文字列の中に変数名を入れたいときに便利です。 テンプレートリテラル と呼びます。
console.log() で文字列を出力する

補足: 他の言語の文字列を囲む記号文字

C 言語, Java, C# では文字列を囲む記号文字にダブルクォートを使います。 シングルクォート '文字' は、文字列 (String 型) ではなくて 文字 (Char 型) になるので文字列には使いません。 ダブルクォートの方が汎用性があるのでこちらを多用します。

変数宣言 (let)、定数宣言 (const)

プログラミングでは変数を多用します。

let s = "あいう";   //変数 s に文字列あいうを代入する。

変数とは別に定数というのもあります。

let   変数宣言。let で宣言された変数は繰り返し代入できます。
const 定数宣言。const で宣言された定数は 1回しか代入できません。

let

変数の宣言には let を使用します。 昔の JavaScript では変数宣言で var を使っていましたが、 現在では let を使用し、var は使いません。 let は後の時代になって出てきた新しい予約語です。

const

const は 1回だけ代入できる変数で使用します。

const で宣言された変数に再び代入しようとするとエラーが出ます。

const c1 = "constで宣言された変数(定数)";
c1 = "再び代入しようとするとエラー(TypeError)が出る";
Edge 106 のコンソール画面
Edge 106 のコンソール画面
定数に再代入すると TypeError が出る。

再代入しない変数は const で宣言する習慣にしておくと 後で役に立ちます。書き間違いの代入をエラーで素早く発見できます。 また、定数は途中で値が変わらないので デバッグのときに調べる範囲を狭めることができ楽になります。 プログラムの中で使用する変数は、再代入を繰り返す let の変数よりも 1回しか代入しない const の定数の方が多いです。

var は現在では使用しません

var は古い予約語で、これから JavaScript を使う人は眺める必要はありません。 むやみに var を使うとイベント処理などで混乱する話が出てきます。
onclick を付ける処理を JavaScript でまとめる - 難しい話の例

その他

私の JavaScript のサンプルで、ときどき script 要素内に 下のような記述が入っている場合があります。

<script>
//<![CDATA[

//]]>
<script>

<![CDATA[コメント]]> は XML のコメントを表します。 HTML の <!--コメント--> に相当します。 HTML を書くときには不要です。 個人的に HTML ファイルを XML ファイルとして プログラム処理できるようにするために入れてあります。
HTML5 ひな形
HTML も XML 形式で書いておくと便利かも

関連

inserted by FC2 system