蜻蛉のバグ取り部屋: Chrome のプラグインを作る！その2　ローカルのファイルを読み込む

今朝は雨が強く、研究室で服が濡れたまま過ごしたため寒かった。
いやな天気が続くな。

今日はHTMLとJavaScriptを触ったので記録する。

プラグインをいちいち読み込みなおしてスクリプトをテストするのは煩に堪えない。
某はフロントエンド初心者なので、簡単にHTMLでJavaScriptのテストをして、そのままプラグインのテンプレに移植するような開発をしたい。
プラグイン要素は正直皆無だが、開発の下地作りということで番号を与える。

ポイント

HTMLとJavaScriptのファイル分割方法
イベントハンドラとしてJavaScriptの関数を利用する
アイコンを指定するとちょっとかっこいい

開発・実行環境

下記の環境でコードを実行し、動作を確かめた。

ブラウザ Google Chrome
バージョン: 77.0.3865.120（Official Build）（64 ビット）

PC
プロセッサ: Intel(R) Core(TM) i5-5200U CPU @2.20GHz
メモリ: 8.00 GB
OS: Windows 8.1 (64bit)

コード

test.html

<!DOCTYPE html>
<html>
  <head>
    <meta charser="utf-8" />
    <title>Test page</title>
    <link rel="icon" href="iocn.png" sizes="16x16" type="image/png" />
    <link rel="icon" href="icon.png" sizes="32x32" type="image/png" />
    <link rel="icon" href="icon.png" sizes="48x48" type="image/png" />
    <link rel="icon" href="icon.png" sizes="62x62" type="image/png" />
    <script type="text/javascript" src="test.js"></script>
  </head>
  <body>
    <input type="button" value="Click me!" onclick="test()">
  </body>
</html>

このローカルファイルをブラウザから読み込む。
ホームページを実際に作るとなると、<head>タグ内にSEO対策としてきちんと記載するべき項目がたくさんあるようだが[1]、今回はローカルのちょっとしたテストなので、エンコーディング、タイトル、アイコンだけで済ませる。

<input type="button" value="Click me!" onclick="test()">

ボタンクリックのイベントが発生した際、test.jsに定義されたtest関数が呼ばれる[2]。

test.js

var test = function testFunc() {
  alert("Hello World.")
}

たったこれだけ。

実行結果

ボタンを押すとアラートを出す。

感想

微速前進。

付録

特になし。

蜻蛉のバグ取り部屋

ページ

2019年10月25日金曜日

Chrome のプラグインを作る！その2　ローカルのファイルを読み込む

ポイント

開発・実行環境

コード

test.html

test.js

実行結果

感想

付録

参考文献

0 件のコメント:

コメントを投稿

ページ

2019年10月25日金曜日

Chrome のプラグインを作る！ その2 ローカルのファイルを読み込む

ポイント

開発・実行環境

コード

test.html

test.js

実行結果

感想

付録

参考文献

0 件のコメント:

コメントを投稿

Chrome のプラグインを作る！その2　ローカルのファイルを読み込む