Web言語マスター復活への道/7日目
おはようございます!メダルラッシュ🥇🥈🥉 すぐそこでやってるのにほんともったいない!!!
目標
・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の他にもあるはずなので、都度勉強です。
明日は練習問題を解いて、なんとなくコード書けそうだったら次に行きたいと思います!
この記事が気に入ったらサポートをしてみませんか?