javascriptを書く準備
javascript言語を書く方法は、主に2パターンあります。
①HTMLファイル内でscriptタグの中に記載する方法
②拡張子が「.js」のファイルにjavascriptを書いて、そのファイルをHTMLファイルから読み込ませる。
①HTMLファイル内でscriptタグの中に記載する方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>javascriptを書く準備</h1>
<div>HTMLファイル内でscriptタグの中にjavascriptを書く方法</div>
<script>
//javascriptのコードを記載する
alert('javascriptの読み込みができました。');
</script>
</body>
</html>
bodyタグの中にscriptタグを埋め込む場合は、bodyタグの一番下に記載します。
HTMLコードはscriptタグの上に記載しましょう。
14行目で、javascriptが正常に読み込まれているかを確認するために、アラート表示がされるコードを書きました。
index.htmlファイルをブラウザ表示させてみましょう。下記のようにアラート表示されます。
②拡張子が「.js」のファイルにjavascriptを書いて、そのファイルをHTMLファイルから読み込ませる。
まず、「○○.js」というファイルを作成します。
ここではサンプルとして「script.js」というファイル名で作成します。
script.jsファイル
alert('javascriptの読み込みができました。');
では次に、script.jsファイルをHTMLファイルから読み込みます。
下記コードの7行目でscript.jsファイルを読み込みます。
index.htmlファイル
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="script.js"></script>
<title>Document</title>
</head>
<body>
<h1>javascriptを書く準備</h1>
<div>HTMLファイル内でscriptタグの中にjavascriptを書く方法</div>
</body>
</html>
index.htmlファイルをブラウザ表示させてみましょう。
script.jsファイル内のjavascriptコードが読み込まれ、アラート表示されます。
フォルダ構成の補足
上記では、index.htmlファイルとscript.jsファイルが同じフォルダ階層に配置しています。
「.html」や「.js」のように拡張子が異なる場合はフォルダ階層を分ける方が、管理がしやすいので下記画像のようにすると良いでしょう。
script.jsファイルはjsフォルダの中に配置します。
ファイルの配置が変更された場合は、HTMLファイルから読み込むときのパスも変更しましょう。
<script src="js/script.js"></script>
javascriptのインデントについて
インデントとは、文章の行頭に空白を挿入することです。
インデントのサンプル画像(2行目)
javascriptの場合はインデントは2つ、または4つ空けるのが一般的なルールとなっています。
どちらかに統一して記載しましょう。
javascriptの基礎学習を始めよう!
これで、javascriptを学習する準備は整いました。
javascriptの学習の基礎問題をブログで掲載しています。
まずは、変数定義の問題から試してみてください。
独学が難しい場合
現場レベルで通用するエンジニアを目指していて、プログラミングスクールを検討している方はRUNTEQがオススメです。

コメント