第6回 Javascriptを使ってみよう!

元気100倍( ⚈ ̍̑⚈ ̍̑⚈)৴≡Oアンパーンチ
みなさん、こんにちは!
普段は医療職で働きながら、趣味でプログラミングを始めたズダです!
今回はJavascriptを使って、実際にサイトを作ってみましょう!!

魔法使いが魔法を唱えるページを作成しました。下の「魔法を唱える!」ボタンを押したら、ランダムに魔法が唱えられます!!

魔法使いのページ

魔法使いのページへようこそ!

いかにも強そうな呪文の魔法が出てきましたね!!ではこのページをどのように作っているのかを説明します。

<HTML>


Copy code<!DOCTYPE html> <html> <head> <title>魔法使いのページ</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>魔法使いのページへようこそ!</h1> <button id="magicButton">魔法を唱える!</button> <p id="magicText"></p> <script src="script.js"></script> </body> </html>

ここでは、魔法使いのページの下地(=HTML)を作っています。

linkはCSSを下地で使いますよ、scriptはJavascriptを下地で使いますよ、という宣言です。

buttonでクリックできるボタンを作り、pで魔法の言葉が出てくる段落を作りました。

<CSS>

cssCopy codebody {
    background-color: lavender;
    font-family: 'Arial', sans-serif;
    padding-top: 20%;
}

h1 {
    color: darkmagenta;
    font-size: 2em;
}

button {
    font-size: 1.2em;
    padding: 10px 20px;
    margin-top: 20px;
}

CSSではHTMLで作った下地を鮮やかに変えました。

それぞれの詳細は第4回を見ていただければと思いますが、1つだけ補足をします。paddingやmarginは上下左右のどこにクッションを挟むかを指定できます。今回は上部分にクッションを挟んでいるのでpadding-topと表記されています(rightに変えたら右にクッションが挟まります)

※今回はCSSを全体に反映させているのでサイトの見た目が少し変わっています

<Javascript>

javascriptCopy codelet spells = ["エクスペリアームス", "ウィングガーディウムレビオーサ", "エクスペクト・パトローナム"];

function castSpell(spell) {
    return "魔法:" + spell + "を唱えた!";
}

document.getElementById("magicButton").onclick = function() {
    let spell = spells[Math.floor(Math.random() * spells.length)];
    document.getElementById("magicText").textContent = castSpell(spell);
}

ここでは以下のようにコマンドを入れています。

魔法を唱える!(magicButton)をクリックする(onclick)と魔法をランダムに選択(Math.random)して魔法(spells)を唱え、HTMLの段落(P)に表示させる(魔法:+spell+を唱えた!)

これでボタンをクリックするとランダムに3つの魔法のうち1つが選ばれて、その魔法が唱えられたことが表示されます。

では最後に、代表的なJavascriptの魔法を教えますので試してみてください!!

  1. alert("こんにちは!"); – これは、”こんにちは!”というメッセージを含むアラートボックスを表示する魔法です。これを使うと、あなたがプログラムに何かを伝えたい時に使うことができます。
  2. console.log("こんにちは!"); – これは、”こんにちは!”というメッセージをコンソールに表示する魔法です。魔法使い(プログラマー)だけが見ることができる秘密のメッセージです。
  3. let name = "ハリー"; – これは、”ハリー”という名前を持つ魔法使いを作るときに使います。
  4. name = "ロン"; – これは、すでに作られた魔法使いの名前を”ロン”に変える魔法です。こうすると、魔法使いの名前が”ハリー”から”ロン”に変わります。
  5. const school = "ホグワーツ"; – これは、”ホグワーツ”という学校を作る魔法です。ここで、constは一度作ったら変えられない魔法を作るときに使います。
  6. if (school === "ホグワーツ") { console.log("ようこそ、ホグワーツへ!"); } – これは、もし学校が”ホグワーツ”なら、”ようこそ、ホグワーツへ!”というメッセージを表示する魔法です。
  7. for (let i = 1; i <= 3; i++) { console.log(i + "回目の魔法!"); } – これは、”1回目の魔法!”、”2回目の魔法!”、”3回目の魔法!”というメッセージを順に表示する魔法です。
  8. function castSpell(spell) { console.log("魔法:" + spell + "を唱えた!"); } – これは、指定した魔法を唱える魔法です。例えば、castSpell("エクスペリアームス");とすると、”魔法:エクスペリアームスを唱えた!”と表示されます。
  9. let spells = ["エクスペリアームス", "ウィングガーディウムレビオーサ", "エクスペクト・パトローナム"]; – これは、魔法のリストを作る魔法です。
  10. spells.forEach(function(spell) { castSpell(spell); }); – これは、リストのすべての魔法を一つずつ唱える魔法です。

たくさん出て難しい!!って思った方も多くいるかと思います。

繰り返しになりますが、基本的にはChatGPTが解決してくれます。分からない単語や魔法が出てきたらぜひChatGPTに聞いてみてください!少しづつ覚えていけば問題ないです!!

こんなサイトを作りたいな→ChatGPTに相談→ChatGPTが作ったプログラミングを確認→修正する

というような流れでChatGPTを活用してみてください!!このブログではChatGPTがどんなプログラミングを書いたのかを理解できるようにお伝えしていこうかと思います!!

ではまた次回!バイバイキーン!( ⚈ ̍̑⚈ ̍̑⚈)৴≡Oアンパーンチ  

コメント

タイトルとURLをコピーしました