2020 ソフトウェア設計及び演習用の班Wiki - 20::gr09::鈴木直揮::メモ::javascriptに対しての愚痴::答え

20::gr09::鈴木直揮::メモ::javascriptに対しての愚痴::答え

archive mode

[[9班wiki|20::gr09]] > [[鈴木直揮|20::gr09::鈴木直揮]]  >  [[メモ|20::gr09::鈴木直揮::メモ]] > [[javascriptに対しての愚痴の答え|20::gr09::鈴木直揮::メモ::javascriptに対しての愚痴::答え]]

!!! 答え

入力欄やボタンが表示されますが、実行ボタンを推してもpタグには何も起きません！

それじゃあ、何か打ち込み間違っていたりバグってる筈だから、F12で出てくるコンソールでエラーが出てくる筈ですね？

出ません！！！==マジでクソ==

!!! 適当な解説

このjavascriptは

8<
var bmi = w / (h * h);
>8

の行まではちゃんと動いています。問題は次の行です。

8<
document.getElementById("bmi").textcontent = "BMIは" + bmi + "です";
>8

document.getElementById("bmi")でidがbmiのhtmlタグの部分を持ってきて、そのプロパティのtextcontentに文字列を代入・・・気づきましたか？

本来はtext"C"ontentになる筈の部分がtext"c"ontentになってます。なので元々テキストを代入したかったtext"C"ontentには何も入ってないので実行ボタンを押しても虚無が表示されたという事らしいです。

!!! 何でエラーがコンソールに出ないの！！！（全ギレ）

多少コンソールを弄ってデバッグした事を元にした推測なので、色々と調べた訳じゃないので正確な事は分からないです。下にあるのは、エラーがコンソールに出ない理由が一番分かりやすいだろうサンプルプログラムです。

8<
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>BMI計算</title>
		<script>
			function calc_bmi() {
				var h = document.getElementById("height").value;
				var w = document.getElementById("weight").value;
				var bmi = w / (h * h);
				document.getElementById("bmi").textcontent = "BMIは" + bmi + "です";
                                console.log(document.getElementById("bmi").textcontent);
			}
		</script>
	</head>
	<body>
		<h1>BMI計算</h1>
		身長[m]: <input id="height" /><br />
		体重[kg]: <input id="weight" /><br />
		計算: <button onClick="calc_bmi()">実行</button>
		<p id="bmi"></p>
	</body>
</html>
>8

これを実行するとさっきのプログラムのように画面の方は何も起こらないけれど、F12を押した時に出るコンソールの方にはちゃんと表示される筈だったBMIが表示されている筈です。

document.getElementByIdやjavascriptの挙動は良く分からないのですが、勝手にプロパティを生やす事が出来るみたいです。エラーが出る筈が無いですね。（困惑）

!!! そもそも

javascriptはどうやらキャメルケース（単語と単語の境目を後の単語の頭文字を大文字にする事によって表す）を良く使う言語らしいです。今まで学んできたC言語では割とスネークケース（単語と単語の間にアンダーバーを入れる）が多かったのでjavascriptを書く時もその癖が出てしまったみたいです。または普通にシフトを押し忘れてたのか・・・。

==キャメルケース、特に今回みたいにcとCみたいに大文字なのか小文字なのか分かりづらいパターンがあって嫌なんですよね〜スネークケースだと見間違いようが無いので・・・。長くなるけど・・・。というかこれを警告してくれるエディタとか使わなくちゃいけないのか〜〜〜もしかしたら間違ってね？ぐらいはブラウザで警告してくれ〜〜〜（全ギレ）==

Tag:

Attachment

New: append-tag

(download: 3262 bytes, at 2020/05/29 00:01:28 <frozen> )
(download: 3253 bytes, at 2020/05/29 00:03:35 <frozen> )
(download: 3439 bytes, at 2020/05/29 00:08:59 <frozen> )
(download: 3529 bytes, at 2020/05/29 00:13:42 <frozen> )
(download: 3530 bytes, at 2020/05/29 00:14:17 <frozen> )

Edit

20::gr09::鈴木直揮::メモ::javascriptに対しての愚痴::答え

Attachment

Syntax Help

URL Link

Page Link

Image or Attachment

Text Decoration

Special Letter

Headline

Itemize

Enumerate

Table

Description

Quotation

Preformatted text