REALITY コマンド作成チュートリアル

ハムチレクチャー - HTML 初⼼者向け解説資料

Transcript

1. ハムチレクチャー - HTML 初心者向け解説資料 REALITY コマンド作成チュートリアル
2. 0. うぇぶぺーじとは HTML （えいちてぃーえむえる） CSS （しーえすえす） JavaScript （じゃばすくりぷと） の 3 つであーだこーだするやつ
3. 1-1. HTML ウェブページの土台、骨組みを作る言語だぴょん 家で言ったら柱とか壁みたいなもん。 <html lang="ja"> <head> <!-- へっど！ --> </head> <body> <!-- ぼでぃー！ --> </body> </html> <html> : 「ここからここまでがウェブページだよ！」って宣言する親玉 <head> : ページの設定とか、裏方さん。表には出ないけど超重要 <body> : ユーザーが実際に見る画面の中身！主役級！
4. 1-2. CSS ！ CSS (Cascading Style Sheets) はウェブページの見た目を担当するぴょん HTML が骨組みなら、CSS は服やメイクのようなもの。文字の色、大きさ、背 景、配置などを指定できる h1 { /* セレクタ: どの要素にスタイルを適用するか */ color: blue; /* プロパティ: 何を */ } /* classセレクタ: 特定のクラスを持つ要素 */ .important-text { font-weight: bold; } <head> の中に書くか <style> にかくか、別の .css ファイルを作るのが普通
5. 1-2. JavaScript ウェブページに「動き」を与える魔法の呪文、それが JavaScript だぴょん！ HTML ( 骨) と CSS ( 見た目) だけじゃできない、あんなことやこんなことを実現！ 例えば… ボタンを押したら「こんにちは！」って挨拶させたり 画像がシュッと出てきたり、クルクル回ったり ユーザーが何か入力したら、それに合わせて表示を変えたり <script> // JavaScriptのこーーーーど function greetMe() { alert('やあ！JavaScriptの世界へようこそ！ '); } greetMe(); // この呪文を唱えると... ポップアップが出る！ </script>
6. 2. セクション 1: Hello Hamuchi <section> <h2 class="...">No.1 Hello Hamuchi</h2> <button id="hamu-button-01" class="...">出す</button> <script> 問題！ </script> </section> 説明： ボタンをクリックでコンソール（F12 で出すでばっぐつーる）にメッセージ表示 document.getElementById('hamu-button-01') : ID で要素をとる addEventListener('click', ...) : ボタンがクリックされるのを待ち構える
7. 3-2. Hello Hamuchi 問題 <script> function onClickHamuchi01() { // ここの処理が問題！ } // ボタンを取ってきて const hamuButton01 = document.getElementById('hamu-button-01'); // ボタンがクリックされたら onClickHamuchi01 を発動するように設定！ hamuButton01.addEventListener('click', onClickHamuchi01); </script> ミッション： 上のコードのコメント部分 ( // ここに... ) に、コンソールにメッセージを出す JavaScript のコードを書こう！ 正しく書ければ、ボタンを押すと開発者ツールにメッセージが出るはず！
8. 3-1. セクション 2: 簡単な計算 <section> <h2 class="...">No.2 簡単な計算</h2> <button id="hamu-button-02" class="...">計算開始</button> <script> 問題！ </script> </section> 説明： コンピューター得意の計算をやらせてみよう！ 足し算 (+), 引き算 (-), 掛け算 (*), 割り算 (/) を使ってみるよ。 ボタンを押したら、 「8686 × 8686 」の答えをコンソールに出してみよう！ 暗算禁 止！
9. 3-2. 簡単な計算 問題 <script> function onClickHamuchi02() { // ここの処理が問題！ } // ボタンを探してきて... const hamuButton02 = document.getElementById('hamu-button-02'); // クリックされたら計算を発動！ hamuButton02.addEventListener('click', onClickHamuchi02); </script> ミッション： 上のコードのコメント部分 ( // ここに... ) に、計算してコンソールに表示する コードを書こう！ 掛け算は * を使う
10. 4-1. セクション 3: HTML を操作する <section> <h2 class="...">No.3 HTMLを操作する</h2> <img id="image" src="/600.png" alt="ハムチ" class="..." /> <button id="hamu-button-03" class="...">消える</button> <script> 問題！ </script> </section> ボタンクリックで画像の表示/ 非表示を切り替え isVisible 変数で状態管理 ボタンテキストも状態に応じて変化 CSS アニメーションでスケールイン/ アウト
11. 4-2. HTML を操作する 問題 <script> let isVisible = true; // 今、画像が見えてる？ function onClickHamuchi03() { const image = document.getElementById('image'); // 画像を探す const button = document.getElementById('hamu-button-03'); // ボタンを探す if (isVisible) { image.className = 'w-[300px] animate-scale-out-center'; // アニメーション button.innerHTML = // 問題1！; isVisible = // 問題2！; } else { image.className = 'w-[300px] animate-scale-in-center'; // アニメーション button.innerHTML = // 問題3！; isVisible = // 問題4！; } }; const hamuButton03 = document.getElementById('hamu-button-03'); hamuButton03.addEventListener('click', onClickHamuchi03); </script>
12. 5-1. セクション 4: コマンドを実装する <section> <h2 class="...">No.4 コマンドを実装する</h2> <div id="janken-result">結果：<span id="janken-result-text"></span></div> <input id="input-command" placeholder="..." /> <button id="hamu-button-04" class="...">実行する</button> <script> 問題！ </script> </section> ミッション： テキスト入力とボタンでコマンド実行 /janken コマンドでランダムなじゃんけん結果を表示 未知のコマンドはエラー表示
13. 5-2. コマンドを実装する 問題 <script> const onClickHamuchi04 = () => { const input = document.getElementById('input-command'); const button = document.getElementById('hamu-button-04'); const command = input.value; const result = document.getElementById('janken-result-text'); const random = Math.floor(Math.random() * 3); const janken = ['問題1！', '問題2！', '問題3！']; if (条件！問題4) { result.innerHTML = // 難問 ; result.style.color = 'initial'; } else { result.innerHTML = 'そんなコマンドないよ！ (`/janken` って入れてみて)'; result.style.color = 'red'; } }; // ボタンを探してきて... const hamuButton04 = document.getElementById('hamu-button-04'); // クリックされたら、コマンド実行の魔法を発動！ hamuButton04.addEventListener('click', onClickHamuchi04); </script>
14. まとめ このスライドで、ウェブページの基本がなんとなくわかったかな？ HTML で骨組みを作り、CSS で飾り付け、JavaScript で動きをつける！ この 3 つ がキホン！ 各セクションの問題をクリアすれば、君も立派なウェブ魔法使い見習いだ！ どんどん試して、壊して、学んでいこう！ Let's Enjoy Hacking!