最近は徐々に暖かくなり、春の訪れと共に花粉を感じ恐怖しているバナナです。
今日は、インラインスクリプトでJavaScriptを読み込む方法を学んでいきたいと思います。
読み込む方法
<script>タグで囲みその中に処理を記載していきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>インラインスクリプトで、JavaScriptを読み込む</title>
</head>
<body>
<script>
// ここに処理を書く
console.log('banana');
</script>
</body>
</html>
type="text/javascript"は必要なの？
HTML5では、<script>タグのtype属性の初期値がtype="text/javascript"なので、JavaScriptの場合は、type属性を省略できるそうです。
HTML4.01ではtype属性が必須みたいです。
実行順番は？
HTML内に記載された順に実行されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<script>
console.log('apple');
</script>
</head>
<body>
<script>
console.log('banana');
</script>
<script>
console.log('orange');
</script>
</body>
</html>
※必要な記述だけにしています。
※デモを開いたらデベロッパーツールを開いてコンソールを見てみてください。
上から順に実行されるので、コンソールには
「apple」「banana」「orange」の順番に表示されました。
別々に書かれたインラインスクリプトから変数は取得できるのか？
<head>～</head>内のインラインスクリプトで宣言した変数は<body>～</body>内のインラインスクリプトで取得できるのか？をやってみたいと思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<script>
let fruit = "banana";
console.log(fruit);
</script>
</head>
<body>
<script>
console.log(fruit);
</script>
</body>
</html>
取得することができました。
ちなみに
<body>～</body>内で宣言した変数は<head>～</head>内のインラインスクリプトに読み込めるのか？ さっきの逆のパターンですね。
<!DOCTYPE html>
<html lang="ja">
<head>
<script>
console.log(fruit);
</script>
</head>
<body>
<script>
let fruit = "banana";
console.log(fruit);
</script>
</body>
</html>
エラーが出ました。
HTMLは上から読み込まれていくので、<head>～</head>内のインラインスクリプトが読み込まれた段階では、変数「fruit」は宣言されていないのでエラーが出てしまいました。
記述する順番は大切ですね。
まとめ
インラインスクリプトで、JavaScriptを読み込む方法でした。
特に難しいことはないですね。
HTMLが上から読み込まれて処理される。ということだけ頭に入れておけば問題なさそうです。
最近、自分のレベル低下を感じたので1からJavaScriptを学び直していきます。
頑張ります。
では、今回はこの辺で。
またね。