ホームページやワードプレスを運営していく上で自分のサイトにちょっとした動きを表現したいという時に便利な言語がジャバスクリプトです。
今日はそのジャバスクリプトの基本の書き方について解説していきたいと思います。
Menu
JavaScriptはどのような場面で使用されてるか
数例ですがよく使用されてる箇所でいうと下記のようなものがサイトでよく見かけるのではないでしょうか。
例
・トップページにスクロールする右下のボタン。
・数秒ごとに画面をスライドさせて画像を切り替える処理。
・HTMLタグやCSSの追加や削除する。
・アラートを表示させる。
などまだまだ沢山できることがあります。
JavaScriptの記述方法（HTML内）
HTML内部で以下のようにscriptタグを記入してから処理を記述します
1 2 3 4 5 | <script type="text/javascript"> alert('クリックされました'); //処理を記述 </script> |
記述例
アラートを表示させる場合
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html lang="jn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>内部の書き方</title> </head> <body> <input type="submit" value="チェック" onclick="c(this)" /> <script type="text/javascript"> //scriptタグを記述してから処理を記述 function c() { alert('クリックされました'); } </script> </body> </html> |
JavaScriptの記述方法（外部ファイル）
jsファイルの作成（myFile.js）
作成したファイルの拡張子をjsに変更して保存後にファイルの中にJavaScriptコードを記述していきます。
1 2 3 | function c() { alert('クリックされました'); } |
headタグ内に記述
headタグ内に作成したjsファイルのパスを記述
この記述をすることで作成した外部jsファイルが読み込めるようになります。
1 | <script src="jsファイルのパスを記述"> </script> |
記述例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="jn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="myFile.js"> </script> //head内に記述 <title>外部ファイルの書き方</title> </head> <body> <input type="submit" value="チェック" onclick="c(this)" /> </body> </html> |
まとめ
今回はJavascriptの基本的な記述方法を解説しました。
ホームページやブログを動的な動きにするためのJavaScriptは重要な役割をしています。
この機会に是非マスターして自分のホームページやワードプレスなどのブログに動的な動きを付けてみてはどうでしょうか(^O^)
