現在の主流は、外部ファイルを作成してリンクさせる方法です。
出来るだけ、HTMLファイルはコンテンツのみで、複雑なコードはすべて外部ファイルでリンクさせるのが良いとされています。
理由は、SEO対策などを考慮してのことです。検索エンジンがサイトの判断をしやすいようにするためや、制作側の分業が促進されたりと色々あります。

Back

Javascriptファイルの書式

「Javascript」の拡張子

拡張子	js 例：ファイル名.js

記述例：

Javascript外部ファイルとHTMLファイルをリンクさせる方法

<head>
<script type="text/javascript" src="./ファイル名.js"></script>
</head>

Javascript外部ファイルにリンクさせる場合、最初に呼び込みさせて動作させるためにheadタグの間に記述するのが無難。

JavascriptをHTMLファイルへ記述する方法

ページを開くと「Hello!」アラート画面が表示されるSampleコード

Back

Javascriptで使われるHTMLタグ

script	スクリプトを記述するためのタグ。タブの中に、コードを記述することで、Javascriptなどを利用が可能。
noscript	scriptタグに記述したコードにブラウザが未対応の時に、noscriptタグ内に記述した文章を表示。
meta	<head> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> JavaScriptを認識させるために記述します。認識されないときは、記述してみましょう。

scriptの属性一覧

src=url	外部スクリプトファイルのURLを指定。
type=type	スクリプトの言語type="text/javascript" などMIMEタイプ指定。
defer	スクリプトを非同期に読み込み。
async	スクリプトを非同期に読み込み・実行。
charset=charset	スクリプトのキャラクタセットを指定。
language=lang	スクリプト言語を指定。現在では type属性使用が推奨。
event=event	将来の機能のために予約されていたが、HTML5 では廃止予定。
for=id	将来の機能のために予約されてたが、HTML5 では廃止予定。

Back

コメントの使い方

「Javascript」のコメントは、

・「//コメント内容」
・「/*コメント内容*/」

の二つの方法があります。

「//（ダブルスラッシュ）」のコメント

「//（ダブルスラッシュ）」は、
「//（ダブルスラッシュ）」から行末までがコメントとして扱われます。
コードの後に「//（ダブルスラッシュ）」入れてコメントとすることもできます。

「/」と「/」のコメント

「/*」と「*/」で挟む場合は、、
「/*」と「*/」の間に記述された内容がコメントとして扱われます。
「/*」と「*/」で囲まれていれば、複数行でもコメントとして扱われます。
コードの後に、「/*」を記述してコメントにすることも可能

「Javascript」のコメントコード

// 1行コメント
var 変数名 = document.querySelector('#ID名');// 1行コメント

/* 1行コメント */
var 変数名 = document.querySelector('#ID名');/* 1行コメント */

/*
複数行のコメント
複数行のコメント
複数行のコメント
複数行のコメント
*/

Back

ヒアドキュメントの使い方

「javascript」のヒアドキュメントとは

記述した内容通りに、変数に代入して、その変数を出力するなど、
記述内容をそのまま取り扱う方法。

記述した通りに変数に格納・出力などができるので、かなり便利な手法。
HTMLコードを取り扱うのによく使われる。

「javascript」のヒアドキュメントコード

コード内容

var 変数名 = (function(){/*

サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト

*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

上記のコードは、「Javascript」上でコメント扱いにしてる部分を、「match」関数で抽出して変数に代入することで、ヒアドキュメントとする方法。

Safari対応のヒアドキュメントコード

<html>
<head>
<title>Safari対応のヒアドキュメント</title>
</head>
<body id="body">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var _html = (function () {/*
<h1>サンプルテキスト</h1>
<span>さんぷるてきすとさんぷるてきすとさんぷるてきすと</span>
<img src="https://www.google.co.jp/images/srpr/logo11w.png">
*/}).toString().replace(/(\n)/g, '').split('*')[1];
$('#body').append(_html);
</script>
</body>
</html>

Back

「with (obj)」ステートメントの使い方

「Javascript」のちょっと便利な機能「with」。
同じオブジェクトの参照・変更などを記述するときに、
オブジェクト指定をまとめて記述できるのが「with」。

なくても大丈夫ですけど、便利なので、覚えておくと良いです。

「obj」で指定したオブジェクトについて処理を行う。
通常例：
document.write(document.bgColor);
document.write(document.fgColor);

withの使用例：
with (document) {
write(bgColor);
write(fgColor);
}

Back

【Javascript】「Javascript」の使い方

INDEX

Javascriptの使い方

Javascriptファイルの書式

「Javascript」の拡張子

記述例：

Javascriptで使われるHTMLタグ

scriptの属性一覧

コメントの使い方

「//（ダブルスラッシュ）」のコメント

「/*」と「*/」のコメント

「Javascript」のコメントコード

ヒアドキュメントの使い方

「javascript」のヒアドキュメントとは

「javascript」のヒアドキュメントコード

Safari対応のヒアドキュメントコード

「with (obj)」ステートメントの使い方

「/」と「/」のコメント