いやな天気が続くな。
今日は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.")
}
たったこれだけ。実行結果
ボタンを押すとアラートを出す。
0 件のコメント:
コメントを投稿
コメント表示は承認制に設定しています