通っている学校が間もなく夏休みに入るということで、より多くのクラスメイトにJavaScriptに接してほしいと考え、教材を作りました。
主にDOM操作に関するものです。
Qiita上の方々にも助けになれば良いなと思って投稿しますが、私自身も初学者なので、間違った日本語の使い方をしている部分などあると思います。
もしあればお気軽に連絡していただけると幸いです。
fizzbuzzについての解説が記載されていませんが、私のクラスの多くはどういうものか知っているため省きました！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作入門</title>
<!-- DOM操作の基礎、CSSの基礎を学べます。-->
<!--css記述はじめ-->
<style>
body {
background-color: rgb(223, 248, 227);
}
h1 {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-align: center;
}
span {
font-family: fantasy;
font-size: larger;
}
.fizzbuzz {
background-color: red;
}
.buzz {
background-color: orange;
}
.fizz {
background-color: rgb(252, 235, 204);
}
</style>
<!--css記述終わり-->
</head>
<body>
<h1>Fizz-Buzz</h1>
<button onClick="displayExplanationOfCSS()">CSSの解説を表示する</button>
<button onclick="countUp(cnt++)">+</button>
<!--buttonタグでボタン生成。
onclick属性（ onclick="")をつけることでボタンとして機能し、関数を呼び出せる。
押したら関数countUpが実行される。
押すたびにcntが１増えるように、cnt++としている。-->
<div id="display">
<!--divタグは特に表示は変わらないが、ブラウザ上の画面を分割するために使うイメージ。
div = divided = 「分けられた、分割された」
(id="")と記述することで、divタグにID（好きな文字や数字）をふることができる。
idを振ることで、後ほどjavascriptにてidに紐づけたhtmlの操作ができる。-->
</div>
<div id="displayOfExplanation">
</div>
<script>
let cnt = 1;
const countUp = (cnt) => {//関数はletでもいいが、深く考えないでconstを使うのが定例。
/* アロー関数を用いている。
const 関数名 = (引数) => {
{ 処理 }
}
function countUp(cnt) {
}
に同じ。 */
let display = document.getElementById("display");
/*<div id="display">
この部分にfiz, buzzなどを表示したい。
親要素としてid="display"のdivタグを変数displayに代入
document.getElementById=>divタグのIDを取得する関数。
めちゃくちゃ使うので覚えておくこと。
</div> */
let span = document.createElement("span");
// span要素を作成し、変数名spanに保持。
//createElement=>新しい要素を作りspanという変数に代入
let text;//変数
// displayに表示していくテキストを設定していく。
if(cnt%15==0){
text = "fizzbuzz";//textにfizzbuzzを代入。後ほどspanに代入
span.className = "fizzbuzz";//spanのclassNameをfizzbuzzに設定（<span className="fizzbuzz">という意味。以下同様
}else if(cnt%5==0){
text = "buzz";
span.className = "buzz";
}else if(cnt%3==0) {
text = "fizz";
span.className = "fizz";
}else{
text = cnt;//割り切れないときはその数字を表示。
}
span.innerText = text + " ";
// spanのinnerTextに上で設定したtextを代入。
//innertext=>タグの文字を操作するときに使う。fizzbuzz処理のtextをspanの文字として代入
display.appendChild(span);
//保持していたdisplayに先ほどつくったspanを代入。
//appendChild=>子供を作る。getelementしていたdisplayの子供を作る。
//画面上ではappendchildをして初めて、画面のhtmlが書き換わる（追記される）
}
const displayExplanationOfCSS = () => {
let display2 = document.getElementById("displayOfExplanation");
let p = document.createElement("p");
let explanation =
"CSSの解説\n\n" +
"headタグ内のstyleタグを作り、それぞれ設定する。\n"+
"上3つのbody, h1, spanは、HTMLのタグを表す。\n"+
"クラス名を指定したい場合は.fizbuzzのように.をつける。idの場合は#\n\n"+
"CSSで以下よく使うプロパティまとめ\n"+
"background-color : 背景色。redなど色の英語名や#bgrで指定できる。b+g+c+Enterで簡単に入力できるぞ！\n"+
"text-align : 中央ぞろえ、左揃えなど\n"+
"font-family : フォントを選べる。特殊なフォントを使いたいならimportしよう\n"+
"font-size : そのまま字のサイズ。これに限ったことではないが、15などと数字のみ入力すると勝手に単位はpx(ピクセル)として扱われる。\n\n細かいことは作った人に聞いてくれ！"
p.innerText = explanation;
display2.appendChild(p);
}
</script>
</body>
</html>