はじめに
コースの流れ
こちらでは以下のサイトを参考に学習していきます。
主な流れとしては、
参考サイトで学習し→本サイトの演習&クイズで知識の定着を繰り返していきます。
実際に手を動かすことで応用の効くスキルが身に付いていきますので共に頑張っていきましょう！
コードの表示
これからコードは下のように表示していきます。何をするためのコードなのかコメントで補足していますので、参考サイトのコードが何をしているのかわからなくなった時はみてみてください
JavaScriptのコード例
//ボタンをクリックしたらmyFunctionを実行
<button onclick="myFunction()">Click Me!</button>
<script>
function myFunction() {
// id:demoを持つ要素を取得する
let x = document.getElementById("demo");
// id:demoを持つ要素の文字の大きさを25pxにする
x.style.fontSize = "25px";
// id:demoを持つ要素の文字色をredにする
x.style.color = "red";
}
</script>
<button onclick="myFunction()">Click Me!</button>
<script>
function myFunction() {
// id:demoを持つ要素を取得する
let x = document.getElementById("demo");
// id:demoを持つ要素の文字の大きさを25pxにする
x.style.fontSize = "25px";
// id:demoを持つ要素の文字色をredにする
x.style.color = "red";
}
</script>
実践＆クイズ
こちらは実践問題の例です。下の緑のボタンから回答を確認することができます
04: 空欄を埋めてください
空白に入る文字を入れてください
<button onclick="hello()">アイサツ</button>
<p id="demo"></p>
<script>
function hello() {
let hello = .getElementById("demo");
hello.textContent = "こんにちは！";
hello.style.fontSize = "50px;"
}
</script>
<p id="demo"></p>
<script>
function hello() {
let hello = .getElementById("demo");
hello.textContent = "こんにちは！";
hello.style.fontSize = "50px;"
}
</script>