作成ファイル・保存場所
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の関係（連携方法）を理解する
- プログラムは上から順に実行されることを意識してロジックの基礎を学ぶ
デベロッパーツールは、ブラウザ画面を右クリックして検証（chrome使用)から入ります。
チェックポイント
<script>タグ内に JavaScript を正しく書けているかalert("○○");を正しく記述できているか- １行ごとに ; コロンで終了しているか
- エラーが出ていないか（スペルやカッコのミスに注意）
- どこに書いたコードが「いつ実行されるか」がわかるようになっているか
HTML/JavaScriptトレーニング
// 最初のメッセージを表示してみよう
alert('こんにちは！JavaScriptの世界へようこそ');
// 次のメッセージ
console.log('これがJavaScriptの基本的な書き方です！');
解説
- alert() は「ポップアップを出す命令」です。中の文字列（”…”）がそのまま表示されます。
- JavaScriptは 上から順に実行されるので、複数書けば順番に表示されます。
- コメント（// から始まる行）はメモや説明としてコード内に書いてOK！(ctrl+/)
応用トレーニング
- メッセージの中に自分の名前や好きな言葉を入れてみよう
