[Q&A] 謎：HTML内に紛れ込んだjavascriptで書かれたコードの判別方法

謎：HTML内に紛れ込んだjavascriptで書かれたコードの判別方法

解決したいこと

「HTML内において、どのコードがJavascriptで書かれているのかを判別する方法」をご教示頂きたく思います。

これまでは「javascriptはscriptタグで囲んで使う」という風に思っていました。
しかしそうでもないようでして…。

なんと下記コードの「” ”」の中のコードもJavascriptのコードなんだそうです。

 <button onclick="window.location.hash = '#home'">ホーム</button>

javascriptを一目で見抜くにはどうすれば良いのでしょうか？？

ソースコード

<!DOCTYPE html>
<html>

<head>
    <title>MyMoney SampleCode</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <!--sakuraの読み込みと、画面レイアウトのスタイルシートの読み込み-->
    <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura-earthly.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">

    <!--IndexedDB関連のJavaScriptの読み込み-->
    <script src="indexedDB.js">s</script>

    <!-- Chart.jsとグラフ表示のJavaScriptの読み込み -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
    <script src="graph.js"></script>

    <!--フォーム入力チェックのJavaScript読み込み-->
    <script src="inputCheck.js"></script>
</head>

<body>
    <header>
        <h1 id="home">MyMoney</h1>
        <div class="navi">
            <button onclick="window.location.hash = '#home'">ホーム</button>
            <button onclick="window.location.hash = '#input'">入力</button>
            <button onclick="window.location.hash = '#inOutList'">入出金一覧</button>
            <button onclick="window.location.hash = '#graph'">グラフ</button>
        </div>
    </header>
    <article>
        <!-- 入力 -->
        <h2 id="input">入力</h2>
        <section id="inputSection">
            <div>
                <label>収支</label>
                <input type="radio" value="支出" checked>支出
                <input type="radio" value="収入">収入
                <label>日付</label>
                <input type="date">
                <label>カテゴリ</label>

                <select>
                    <option>-選択してください-</option>
                    <option>食費</option>
                    <option>趣味</option>
                    <option>交際費</option>
                    <option>交通費</option>
                    <option>ファッション</option>
                    <option>クルマ</option>
                    <option>家賃</option>
                    <option>保険</option>
                    <option>税金</option>
                    <option>その他</option>
                </select>
            </div>
            <div>
                <label>金額</label>
                <input type="number" placeholder="金額を記入">円
                <label>メモ</label>
                <input type="text" placeholder="買ったものを記入">
            </div>
        </section>
        <div class="submit">
            <button>登録する</button>
        </div>

        <!-- 入出金一覧 -->
        <h2 id="inOutList">入出金一覧</h2>
        <section id="list">
            <!-- ここに入出金一覧を表示します。 -->
        </section>

        <!-- グラフ -->
        <h2 id="graph">グラフ</h2>
        <!-- <hr> -->
        <section>
            <!-- ここにグラフを表示します。 -->
        </section>

    </article>
    <footer>
        &copy;MyMoney
    </footer>
</body>

</html>

自分で試したこと

ネットで検索しましたが、ピンとくる情報に出会えませんでした。

以上、お手数ではございますが
もしご存知の方がいらっしゃいましたら
ご教示の程よろしくお願い申し上げます。

1Answer

@yucatio posted at 2022-01-27

インラインイベントハンドラーですね。

onclickや、onmouseoverなどのイベントハンドラー属性の中にjavascriptのコードが書けるようです。

Comments

@yosaku_ibs
Questioner
@yucatio　様

いつも大変お世話になっております。
ご回答くださり誠にありがとうございます。

リンクを拝見させて頂きましたが、この記法は悪手なんですね・・・。
「悪手な記法」というイメージで丸ごと覚えてしまいます笑。

ご紹介頂きましたリファレンスをもう少し深読みしようと思います。

いつもありがとうございます。

以上、御礼申し上げます。