半歩ずつでも前に進めば変わっていく

Kozue Blog

プログラミング 学習 記録

プログラミングで月収5万円になるまでの記録62日目

更新日:

こんにちは、こずえです。
プログラミング学習記録62日目です。
JavaScriptについて学習しました。

所感:学習が捗らない時は運動!

合計学習時間

前回までの時間:123.25[h]
今回の時間:3.00[h]
合計時間:126.25[h]

学習内容

前回と同様に以下のサイトを読み進めていきました。

今回は「二章第十回 img要素とその他」から「二章第十四回 nullとundefined」までを読みました。

以下自分まとめです。

DOM

プロパティと属性

  • get​Attribute:要素の属性の値を返すメソッド
  • set​Attribute:要素に属性を追加(or 変更)するメソッド
<p><img id="icon" src="icon.png" alt="icon"></p>

<script type="text/javascript">

	var img = document.getElementById("icon");

	// プロパティから属性を表示する
	console.log(img.src);
	console.log(img.alt);

	// ノードのメソッドを使用して属性を表示する
	console.log(img.getAttribute("src"));
	console.log(img.getAttribute("alt"));
	img.setAttribute("alt", "blog-icon")
	console.log(img.getAttribute("alt"));

	// textプロパティ
	var title = document.getElementsByTagName("title").item(0);
	console.log(title.text);
	title.text = "change title";
	console.log(title.text);

</script>

consoleの表示結果は以下のようになります。

---プロパティから属性を表示する---
file:///絶対パス/icon.png
icon
---ノードのメソッドを使用して属性を表示する---
icon.png
icon
blog-icon
---textプロパティ---
test
change title

要素のスタイルの操作

要素のスタイルを操作するにはHTMLElementのstyleプロパティを使用します。

<p style="font-size: 50px;">hello</p>

<script type="text/javascript">
	var p = document.getElementsByTagName("p").item(0);

	// 文字サイズのスタイルを変更
	p.style.fontSize = "100px";
	// 背景色のスタイルを追加
	p.style.backgroundColor = "Aqua";
</script>

“-“を含むプロパティ名は「font-size」→「fontSize」のように置き換えて指定する必要があります。
(“-“の除去と”-“の直後の文字を大文字化)

フォーム

  • HTMLFormElement:form要素のインターフェイス
    • elements:form要素に含まれる全てのフォームコントロール(※1)をもつHTMLCollectionを表すプロパティ
    • submit:フォームを送信するメソッド
    • reset:フォームを初期状態にリセットするメソッド
  • HTMLInputElement:input要素のインターフェイス
    • value:コントロールの現在値を表すプロパティ
    • defaultValue:コントロールの初期値を表すプロパティ
  • HTMLTextAreaElement:textarea要素のインターフェイス
  • HTMLButtonElement:button要素のインターフェイス
  • HTMLSelectElement:select要素のインターフェイス
  • forms:Documentインターフェイスのプロパティで文書内の全てのform要素をもつHTMLCollectionを表すプロパティ
    • namedItem:指定したid属性またはname属性の要素を返すメソッド
    • disable:disabled属性を表すプロパティ
    • type:typeを属性を表すプロパティ
    • readOnly:readonly属性を表すプロパティ
    • checked:コントロールの現在値を表すプロパティ(checkbox, radio)

※1:フォーム内で操作可能な要素(input、textarea、button…etc)

入力欄の現在値をconsoleに表示するプログラムを書いてみました。

入力欄の現在値を取得してconsoleに出力
<form action="#">
	<p>
		<input id="bar" type="text" name="hoge" value="hello">
		<input type="button" name="reset_input_value" value="reset" onclick="reset();">
	</p>
</form>

<script type="text/javascript">
	var pre_value = document.getElementById("bar").defaultValue;
	var input = document.getElementById("bar");

	// 入力欄の現在値と前回値を比較する
	function check_input_value() {
		
		var ret = false;

		if (pre_value != input.value) {
			pre_value = input.value;
			ret = true;
		}

		return ret;
	}

	// 入力欄の値を初期値に戻す
	function reset() {

		input.value = input.defaultValue;
	}

	// 入力欄の内容が変わったらconsoleに出力する
	setInterval(()=>{
		var ret = check_input_value();
		if (ret) {
			console.log(input.value);
		}
	}, 1000);
</script>

真偽

0、空文字列、false、null、undefined、NaN以外は偽として扱われ、それ以外は真として扱われる(オブジェクト含む)。

参考資料

以下は「JavaScript初級者から中級者になろう — uhyohyo.net」以外の参考資料になります。

-プログラミング, 学習, 記録
-, ,

Copyright© Kozue Blog , 2019 All Rights Reserved Powered by STINGER.