JavaScriptでウェブサイトを書き換えよう！

目標#

ウェブサイトの内容は、基本的には『HTML』で書きますが、JavaScriptでもウェブサイト内の文章を書き換えることができます。

JavaScriptを使って、ウェブサイトに表示する内容を書き換えてみましょう！
if文を使って、条件に応じてウェブサイトに表示する内容を変えられるようにしましょう！

準備#

script.js内に書いてあるプログラムを全て削除し、↓のコードをコピーしてペーストする。#

// ----- getElementByIdの使い方 -----let favorite_food = document.getElementById("favorite_food");
// 好きな食べ物の情報を入れる// 文字を入力するときには、" " で囲むよfavorite_food.innerText = "カレーライス";

コメント#

行の先頭に //をかくと、Glitchでは薄い灰色で表示されます。これは、コメントといって、プログラムに自分のメモを書きたいときに使います。プログラムの実行結果には全く影響がないので、後でみたときにわかりやすいようにたくさんをコメントを残しておくと良いです！

document.getElementById#

document.getElementById("favorite_food")というのは、ウェブサイトのHTMLの中からfavorite_foodというid名が付けられた場所の情報を取ってくるための命令です。

ゴール#

『好きな食べ物』を自分が好きな食べ物に書きかえる

Mission 1. 好きな食べものを書きかえる#

favorite_food.innerText = "カレーライス"というコードの、「カレーライス」の文字を自分の好きな食べ物の名前に変えてみよう！

ウェブサイトはどう変化するかな？

Mission 2. 好きなことを追加しよう#

次は、「好きなこと」という緑色のタイトルの下に、自分の好きなことを表示させてみましょう！ぜひ、Mission 1 でやったようにJavaScriptを使って書いてみましょう！

Mission 1で使った、getElementByIdを使ってみましょう！

Challenge: 「好きなこと」の説明を追加しよう！#

Mission 1.2が終わった人は、Mission2で書いた好きなことの下に、詳しい説明を追加してみましょう！！

今回は、index.html に pタグを用意していないので、pタグを追加するところから挑戦してみてね！id名は、他のと被っていなければ、好きな名前で大丈夫です。アルファベットを使ってid名も pタグに忘れずにつけよう！

目標#

準備#