JavaScriptで出来ることは下の記事でも紹介しているのでご参照ください。
WEBプログラミングを始めるために初心者は何から勉強すればいいのか？
基本はJavaScriptではなくJQueryを使うでしょうが、JQueryはJavaScriptを簡単に使うために作られたものなのでやはりJavaScriptの基礎から勉強するほうがよいでしょう。
JavaScriptはHTMLやCSSと違い、もっとプログラミングっぽい言語になります。
if や for などといった条件分岐やループも使います。
変数という概念も出てきますが、これが出来れば書き方の問題だけで他の言語でも同じ部分が出てきますので後が楽になるはずです。
逆にPHPやRubyなどを勉強された方には今回の内容は少し物足りないかもしれません。
JavaScriptの読み込み方
JavaScriptの読み込み方には2通りあり、HTMLヘッダー内に書く方法と、別ファイルを読み込む方法です。
一般的には別ファイルを読み込む方法を使うことが多いですが、HTMLヘッダー内に書いても間違いではありません。
ただ、HTMLヘッダー内に書くとHTMLファイルが混雑して見難くなります。
ちなみに「HTMLヘッダー内に」と説明しましたが、HTMLファイル内ならばどこに書いても問題ありません。
JavaScriptファイルを読み込むのも body の締めタグ直前に書くことも多いです。
「各場所はどこが正しいのか」については、何を実行するかによって変わってきます。
（良い例えが思い浮かびませんが）例えば、メイン画像を画面いっぱいに表示したい場合は画面サイズを取得し、それに合わせてHTMLロード後にサイズを設定する必要があります。
この場合は body 閉じタグ前に書くことでHTMLが読み込まれた後に実行することが出来ます。
HTMLのヘッダー部に書く
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>プロフィール｜フリーエンジニアライフ</title>
<script type="text/javascript">
～
</script>
</head>
<body>
</body>
</html>
これはHTMLファイルの head タグ内に書く方法です。
7～9 行目のように script タグを定義し、type に text/javascript と書きます。
これで script タグ内がJavaScriptであることを定義します。
HTML5では type=”text/javascript” は不要です。しかし、書いてあっても問題無いため書いておいた方が無難かと思います。
そして、～ の部分にJavaScriptコードを書きます。
別ファイルにし読み込む
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>プロフィール｜フリーエンジニアライフ</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
</body>
</html>
JavaScriptのファイルをHTMLファイルとは別に作成し、読み込む方法です。
7行目のように script タグを定義し、type に text/javascript と書きます。
HTML5では type=”text/javascript” は不要です。しかし、書いてあっても問題無いため書いておいた方が無難かと思います。
src プロパティで読み込むファイルを指定します。
JavaScript のコードは読み込むファイル内に定義します。
読み込みのサンプル
実際に読み込んだサンプル画面を用意しました。
HTMLがこちらです。
不要なコードは省略しています。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>プログラムサンプル｜フリーエンジニアライフ</title>
<link rel="stylesheet" type="text/css" href="sample017style.css">
<script type="text/javascript">
function btna() {
alert('ボタンA');
}
</script>
<script type="text/javascript" src="sample017script.js"></script>
</head>
<body>
<div id="container">
<header><!--ヘッダー--></header>
<div id="content">
<div id="inner-content" class="clearfix">
<main id="main">
<article>
<header>
<h1>JavaScriptの読み込み方</h1>
</header>
<section>
<p>ボタンAはHTMLヘッダ内のJavaScript「btna()」を実行します。</p>
<p>ボタンBは外部ファイルのJavaScript「btnb()」を実行します。</p>
<input type="button" onclick="btna()" value="ボタンA" />
<input type="button" onclick="btnb()" value="ボタンB" />
</section>
<footer><!-- コンテンツフッター --></footer>
</article>
</main>
<div id="sidebar"><!-- サイドバー --></div>
</div><!-- /#inner-content -->
</div><!-- /#content -->
<footer><!-- フッター --></footer>
</div><!-- /#container -->
</body>
</html>
そして、JavaScriptファイルがこちら
function btnb() {
alert('ボタンB');
}
画面を開くと、ボタンAとボタンBの二つのボタンがあります。
ボタンAはHTMLヘッダ内のJavaScript「btna()」を実行します。
ボタンBは外部ファイルのJavaScript「btnb()」を実行します。
alert() というのはメッセージのポップアップが表示されます。
ボタンAを押すと「ボタンA」というメッセージで、ボタンBを押すと「ボタンB」というメッセージが表示されます。
[btn class=”simple”]画面はこちら[/btn]
まとめ
JavaScriptを書く場所は、HTMLのヘッダー内に書くか、別ファイルに記述し読み込む。
HTMLヘッダー内はあくまで基本でありHTML内ならばどこに書いても問題ない。
どこに書くかは、何を実行するかで決まる。
開発していく中で読み込む順番などでバグが出ることがあります。そのときにはご質問ください。
コメント