このコースでは、JavaScriptの基本的な使い方をレクチャーしていきます。
JavaScriptを使うには、HTMLとCSSの知識が必要になりますので、まだ習得されていない方はHTML入門講座を先に受講してください。
学習環境
このコースではブラウザはGoogle Chrome、テキストエディターはVisual Studio Codeを使っていきます。
JavaScriptとは
JavaScriptは、ブラウザで動くプログラミング言語です。
一般的にはWebサイトに動きをつけたり、要素を書き換えたり、HTMLだけでは実現できない処理を行うことができます。
JavaScriptを習得することで、より複雑なことをWeb上で表現することができます。
JavaScriptを使ってみよう
任意の場所に、「my-app」フォルダを作成してください。動画ではデスクトップに「my-app」フォルダを作成していきます。
フォルダをVS Codeで開いて、index.htmlを作成します。
index.htmlに、以下のコードを記述してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>まずは、HTMLに直接JavaScriptを書いていきます。
bodyの閉じタグの前にscriptタグを書いて、その中に以下のコードを記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log('Hello, world!');
</script>
</body>
</html>コードを書いたらブラウザを更新して、右クリック→「検証」でDevToolsを表示します。
DevToolsのコンソールを開くと、「Hello, world!」と表示されます。
console.logは、括弧()の中身をコンソールに表示させることができます。
最後のセミコロン（;）は、文の終了を意味します。
このように、JavaScriptはHTMLに直接書くことができます。
別ファイルのJavaScriptを読み込む
次に、「my-app」フォルダの中に「js」フォルダを作成して、その中にscript.jsという名前のファイルを作成してください。
作成したら、以下のコードを記述してください。
console.log('Hello, JavaScript!');次に、HTMLを以下のように書き換えてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./js/script.js"></script>
</body>
</html>再度ブラウザをリロードして、コンソールを確認してください。