#JavaScriptとはどういうものか
簡単に言うとウェブページをリロードすることなく画面に変化を起こせるもの
例えばこの画面の左側（スマホの場合上）に記事をいいねするボタンやストックするボタンがあります
それらにカーソルを合わせると色が変わる、
クリックすると画像が変化するなどの処理はJavaScriptで書かれています
LGTMとストックはチェックマークがついた状態がデフォルトです（すっとぼけ）
#1.HTMLファイルに直接書き込む <script>
<script>と</script>の間にJavaScriptの処理を書き込みます
コンソールにHello Worldが表示されます
html
<script>
console.log('Hello World');
</script>
#2.HTMLの要素の属性として書き込む(イベントハンドラ)
実行ボタンを押すとアラートが表示されます
実行のタイミングはイベントハンドラによって異なる
html
<input type="button" value="実行" onclick="alert('Hello World')">
イベントハンドラ例
| イベント ハンドラ |
動作 |
|---|---|
| onLoad | ページや画像の読み込みが完了した時に発生 |
| onClick | 要素やリンクをクリックした時に発生 |
| onSubmit | フォームを送信しようとした時に発生 |
| onKeyDown | キーを押した時に発生 |
#3.外部ファイルに書き込む
拡張子が.jsのファイルを作り
JavaScriptファイルをHTMLファイルで読み込むことができます
hello.js
function hello() {
consol.log('hello');
}
html
<!DOCTYPE html>
<html>
<head>
<title>任意のタイトル</title>
<script src="hello.js"></script>//ここでJavaScriptが実行される
</head>
・
・
</html>
#4.URL記述
javascript:関数と書くとJavaScriptの処理をURLのように扱うことができます
こんにちはをクリックするとコンソールにHello Worldが表示されます
html
<a href="javascript:console.log('Hello World')">こんにちは</a>
#まとめ
４つ目のURL記述を初めて知り、これを機にJavaScriptの書き方についてまとめました
JavaScriptはHTML、CSSをやってきた人にとって初めての本格的なプログラミングになると思うので
書き方さえ覚えてしまえば
ググる→コピペ→うまく動く→書いてあることを理解する
の繰り返しで行けると思います！
頑張ってください
最後まで目を通していただきありがとうございました！
