javascript学習の準備をしよう!

※本サイトはアフィリエイトリンクを掲載しています。
javascript

javascriptを書く準備

javascript言語を書く方法は、主に2パターンあります。

①HTMLファイル内でscriptタグの中に記載する方法

②拡張子が「.js」のファイルにjavascriptを書いて、そのファイルをHTMLファイルから読み込ませる。

 

①HTMLファイル内でscriptタグの中に記載する方法

例を出すと、下記の12行目と15行目のscriptタグの間にjavascript言語を記載する方法です。
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">
  <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がオススメです。

コメント