【Javascript】「Javascript」の使い方
【Javascript】
「Javascript」の使い方
Javascriptの使い方
- 直接JavascriptコードをHTMLファイルに記述する。
- Javascript外部ファイルを作成し、リンクさせる。コードは外部ファイルに記述。
- 他のプログラム外部ファイルを作成し、リンクさせ、Javascriptコードを出力させる。
現在の主流は、外部ファイルを作成してリンクさせる方法です。
出来るだけ、HTMLファイルはコンテンツのみで、複雑なコードはすべて外部ファイルでリンクさせるのが良いとされています。
理由は、SEO対策などを考慮してのことです。検索エンジンがサイトの判断をしやすいようにするためや、制作側の分業が促進されたりと色々あります。
Back
Javascriptファイルの書式
「Javascript」の拡張子
記述例:
Javascript外部ファイルとHTMLファイルをリンクさせる方法
<head>
<script type="text/javascript" src="./ファイル名.js"></script>
</head>
Javascript外部ファイルにリンクさせる場合、最初に呼び込みさせて動作させるためにheadタグの間に記述するのが無難。
JavascriptをHTMLファイルへ記述する方法
<script type="text/javascript">
Javascriptコードの記述
</script>
<noscript>
JavaScript未対応ブラウザです。
</noscript>
scriptタグを使って、Javascriptコードを記述します。
記入する場所は自由ですが、一般的にheadタグの間に記入することが推奨されます。
ページを開くと「Hello!」アラート画面が表示されるSampleコード
<script type="text/javascript">
window.alert("Hello!!");
</script>
<noscript>
JavaScript未対応ブラウザです。
</noscript>
上記のサンプルコードをHTMLファイルに貼り付けて実行してみてください。
アラート画面がポップアップするはずです。
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