「Javascript」の使い方は、
覚えておかないと利用することは難しい。

「書式」「リンク方法」「記述場所」など、
色々なルールがある。

「WEBページ」で、
「Javascript」を使用するのなら、
「Javascript」を「外部ファイル」に記述して、
「WEBページ」に「リンク」させて使用するのが、主流となっている。

Back

「Javascript」の「使い方」

「Javascript」には、

・直接「Javascriptコード」を「HTMLファイル」に記述する
・「Javascript」の「外部ファイル」を作成し、コードを記述し、「リンク」させる
・他の「プログラム外部ファイル」を作成し、リンクさせ、「Javascriptコード」を出力させる

という使用方法がある。

現在の主流は、
「外部ファイル」を作成し、
「Javascriptコード」を記述したものを、
「HTMLファイル」などに「リンク」させる方法。

出来るだけ、「HTMLファイル」は「コンテンツ」のみで、
複雑なコードはすべて「外部ファイル」に記述し、「リンク」させるのが良いとされている。

理由は、SEO対策などを考慮してのこと。
「検索エンジン」が、サイトの判断をしやすいようにするためや、
制作側の分業が促進されたりと色々あるらしい。

Back

「Javascriptファイル」の「書式」

「Javascript」の「拡張子」

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

記述例：

「Javascript外部ファイル」と「HTMLファイル」をリンクさせる書式

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

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

「Javascript」を「HTMLファイル」へ記述する書式

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

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」のコメントは、

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

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

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

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

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

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

「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」で「ヒアドキュメント」を使う方法

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

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

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

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