作成ファイル・保存場所
js-basic フォルダに以下のファイルを作成してください。（フォルダがない場合は、新規に作成してください）
| ファイル名 | 内容 |
|---|---|
| js-basic01.html | JavaScriptの基本を体験するHTMLファイル |
基本コード(HTML)を入力しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JS Practice 01</title>
</head>
<body>
<h1>JavaScript表示の体験</h1>
<script>
// 最初のメッセージを表示してみよう
// 次のメッセージ
</script>
</body>
</html>
JavaScriptは <script> タグの中に直接書きます（当面外部ファイルは使いません）
今回のテーマ
「JavaScriptってなにができるの？」という疑問から始めてみましょう。
まずは 画面に表示する、ポップアップを出すなど、わかりやすい出力で体験するところからスタートします。
- JavaScriptの基本的な書き方を体験します。
alert()という関数を使って画面にポップアップメッセージを表示。console.log()を使って、デベロッパーツールのコンソール確認- HTMLとJavaScriptの関係（連携方法）を理解する
- プログラムは上から順に実行されることを意識してロジックの基礎を学ぶ
チェックポイント
<script>タグ内に JavaScript を正しく書けているかalert("○○");を正しく記述できているか- １行ごとに ; コロンで終了しているか
- エラーが出ていないか（スペルやカッコのミスに注意）
- どこに書いたコードが「いつ実行されるか」がわかるようになっているか
- デベロッパーツールで確認ができているか
HTML/JavaScriptトレーニング
入力した基本コードの<script>内に下記のコードを入力
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JS Practice 01</title>
</head>
<body>
<h1>JavaScript表示の体験</h1>
<script>
// 最初のメッセージを表示してみよう
alert('こんにちは！JavaScriptの世界へようこそ');
// 次のメッセージ
console.log('これがJavaScriptの基本的な書き方です！');
</script>
</body>
</html>
- alert() は「ポップアップを出す命令」です。中の文字列（”…”）がそのまま表示されます。
- JavaScriptは 上から順に実行されるので、複数書けば順番に表示されます。
- コメント（// から始まる行）はメモや説明としてコード内に書いてOK！(ctrl+/)
ブラウザ上で右クリック＞検証をクリックし、右メニューの上部「コンソール」をクリックします。
応用トレーニング
- メッセージの中に自分の名前や好きな言葉を入れてみよう