JavaScriptの記述方法
- HTML内外への記述方法
- コメントアウトの記述方法
- 変数の記述方法
HTML内外への記述方法
1.HTMLのbody内に記述
＜script＞＜/script＞で囲って記述する。
メモ
短い記述や、動作確認の際に最適。
複数ファイルで同じJavaScriptを使いたい場合は非効率なので、2番の方法の方が良い。
例）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML内に記述</title>
</head>
<body>
<h1>テキスト</h1>
<!--ここから-->
<script>
//JavaScript記述
</script>
<!--ここまで-->
</body>
</html>
2.拡張子.jsの外部ファイルに記述
htmlのhead内に＜script src="リンク先とファイル名.js"＞＜/script＞で追加する。
メモ
複数のJavaScriptファイルがある場合は、上から順番に実行される。順番を間違えると、思ったように動作しない場合があるので注意。
例）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>拡張子.jsの外部ファイルに記述</title>
<!--ここから-->
<script src="ファイル名.js"></script>
<!--ここまで-->
</head>
<body>
<h1>テキスト</h1>
</body>
</html>
コメントアウトの記述方法
1行の時は先頭に//をつける
複数行の時は/**/で囲む
例）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>コメントアウトの記述方法</title>
</head>
<body>
<h1>テキスト</h1>
<!--ここから-->
<script>
// 1行のコメントアウト
/*
複数行の
コメントアウト
*/
</script>
<!--ここまで-->
</body>
</html>
変数の記述方法
命名規則
・変数の役割を表す簡潔な英語名にする
・単語のつなぎ目は頭文字を大文字にすると見やすい
・予約語は利用できない
予約語|MDN https://developer.mozilla.org/ja/docs/conflicting/Web/JavaScript/Reference/Lexical_grammar
1.constで記述
const 変数名 = 値（データ型）で記述する。
メモ
変数の中身の変更（再代入）不可！再宣言不可！
→コードの途中で誤って値が変更されてしまうことを防げるので、基本はconstを使う。変数の中身を変更する可能性がある場合はletを使う。
※ブロック｛｝の内外では別の変数として扱われるので、再宣言、再代入が可能。
例）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>constで記述</title>
</head>
<body>
<h1>テキスト</h1>
<!--ここから-->
<script>
const sample1 = 'テキスト';
const sample2 = 123;
const sample3 = true;
//下記のように再代入するとエラーになる
sample1='テキスト2';
</script>
<!--ここまで-->
</body>
</html>
2.letで記述
let 変数名 = 値（データ型）で記述する。
メモ
変数の中身の変更（再代入）が可能。再宣言は不可！
→変数の中身を変える可能性がある場合にのみ使う。
※ブロック｛｝の内外では別の変数として扱われるので、再宣言が可能。
例）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>letで記述</title>
</head>
<body>
<h1>テキスト</h1>
<!--ここから-->
<script>
let sample1 = 'テキスト';
let sample2 = 123;
let sample3 = true;
//下記のように再代入が可能
sample1='テキスト2';
//下記のように再宣言は不可
let sample1 = 'テキスト2';
</script>
<!--ここまで-->
</body>
</html>
3.varで記述
var 変数名 = 値（データ型）で記述する。
メモ
変数の中身の変更（再代入）も再宣言も可能。
→変数の値を意図せず上書きしてバグが発生する可能性があるので、基本はconstまたはletを利用したほうがよい。
例）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>varで記述</title>
</head>
<body>
<h1>テキスト</h1>
<!--ここから-->
<script>
var sample1 = 'テキスト';
var sample1 = 123;
sample1='テキスト2';
//再宣言も再代入も可能
</script>
<!--ここまで-->
</body>
</html>