Web言語マスター復活への道/7日目

2021年7月27日 04:09

おはようございます！メダルラッシュ🥇🥈🥉　すぐそこでやってるのにほんともったいない！！！

目標

・javascript基礎

本日の作業

・HTML側でjavascriptを追加する
cssと同様に、別ファイルに記載してあるjsコードを追加することができます。document.getElementById("box),innerHTML　って長いような、、
基本のようなので繰り返し利用して覚えます。

index.html

<!DOCTYPE html>
<html lang="ja">
   <head>
       <meta charset="utf-8">
       <title>JavaScript</title>
   </head>
   <body>
       <div id="box"></div>
       <script src="coding.js"></script>
   </body>
</html>

coding.js

document.getElementById("box").innerHTML = "Hello World!"

結果

・clickイベント
"onclick"を利用する。クリックされると、functionで定義しているalertが実行される。

index.html

<!DOCTYPE html>
<html lang="ja">
   <head>
       <meta charset="utf-8">
       <title>JavaScript</title>
   </head>
   <body>
       <button type="button" id="button">ボタン</button>
       <script src="coding.js"></script>
   </body>
</html>

coding.js

document.getElementById("button").onclick = function() {
   alert("押した");
};

結果

イベントはたくさんあるようなので、使いたいものがあったら都度調べます。ざっとみてよく使いそうなのは下記です。
・onmouseover …マウスカーソルがその上に乗った時
・oninput …要素に値が入力されたとき
・onloadstart …メディア・ファイルの読み書きを開始した時
参考：https://web-designer.cman.jp/javascript_ref/event_list/

・組み合わせ
コードの練習がてら、今までの組み合わせで書いてみます。
boxの中に入力された文字を一度変数yournameに入れ、名前とあいさつを出力されるというものです。
つまづいたところは、名前＋あいさつの部分がboxになることを見落としてhtmlのボックス作成忘れてたところです。

index.html

<!DOCTYPE html>
<html lang="ja">
   <head>
       <meta charset="utf-8">
       <title>JavaScript</title>
   </head>
   <body>
       お名前<input type="box" id="name">
       <button type="button" id="button">return</button>
       <div id="box2"></div>
       <script src="coding.js"></script>
   </body>
</html>

coding.html

document.getElementById("button").onclick = function() {
   var yourname =
       document.getElementById("name").value;

       document.getElementById("box2").innerHTML = yourname + "さん、おはようございます" ;
   };

結果

・ランダム要素
すでに組み込まれている関数を用いて出力させます。ちなみにこのコードは自分で考えてなく、ほぼ写してます。
Math.ramdomで自動的に数字を作成してくれて、その数字とコメントを出力させるといったものです。一回書いてみるとあーなるほどね～と理解できました

coding.html

<!DOCTYPE html>
<html lang="ja">
   <head>
       <meta charset="utf-8">
       <title>JavaScript</title>
   </head>
   <body>
       <button type="button" id="button">ランダム</button>
       <div id="box2"></div>
       <script src="coding.js"></script>
   </body>
</html>

coding.js

document.getElementById("button").onclick = function () {
   var num = Math.random();

   document.getElementById("box2").innerHTML = num + "<br>";

   if (num >= 0.5) {
       document.getElementById("box2").innerHTML += "当たり";
   }
   else {
       document.getElementById("box2").innerHTML += "はずれ";
   }

};

結果

感想

document.get.....が長くて、"うわ、覚えるのめんど、、"と思って昨日終了したのですが、やってみるとすんなり入ってきました。getElementByIDの他にもあるはずなので、都度勉強です。
明日は練習問題を解いて、なんとなくコード書けそうだったら次に行きたいと思います！

この記事が気に入ったらサポートをしてみませんか？