ITメモ
JavaScript
「Javascript」の基礎知識
「Javascript」の使い方エラーチェックをする方法変数配列(Array)「DOM(Document Object Model)」の使い方関数 / Function条件分岐・繰り返しイベントハンドラー(Event Handler)文字の操作方法文字の検索方法スコープファイルの操作方法画像の操作方法情報を出力・チェックする方法ヒアドキュメントの使い方Built-in Object(ビルトインオブジェクト)ライブラリー / Library
Library
「Ajax」の使い方
Library「jQuery」
【jQuery】とは【jQuery】の書式【jQuery】「Javascript」にリンクさせる方法【jQuery】「Javascript」に記述する方法【jQuery】のオブジェクト【jQuery】「CSS」を参照・設定する方法【jQuery】「HTML」要素の情報を参照・設定する方法【jQuery】「HTML」タグを追加する方法【jQuery】ユーティリティ関数【jQuery】イベントアクションを設定する方法【jQuery】イベントオブジェクト「.on」の使い方【jQuery】読み込み完了してから実行する「.ready」の使い方【jQuery】「Ajax」を使う方法【jQuery】「エフェクト」「アニメーション」を使う方法
Reference
数字
計算に誤差が出る時の解決方法
ファイル読み込み
「XMLHttpRequest」コンストラクタ - サーバーのファイルを読み込む方法
イベント
ページ読み込み時に「Javascript」を実行する方法画像読み込みが完了してから、次の処理を実行する方法「addEventListener()」の使い方 - イベントが発生したのを検知して実行する方法
要素情報
HTMLタグの「class」属性値を取得、変更する方法「querySelector()」の使い方 - HTML要素の情報を参照・設定する方法「querySelectorAll()」の使い方 - 要素内の指定した子要素を参照・設定する方法「classList」プロパティ - HTMLタグ属性値「class」の情報を参照・確認・追加・削除する方法「getElementById()」の使い方 - HTML要素の情報を「ID名」で参照・設定する方法「getElemetnsByClassName()」の使い方 - HTML要素の情報を「クラス名」で参照・設定する方法「Node.Childnodes」の使い方 - 要素内の子要素を参照・設定する方法「ParentNode.children」の使い方 - 要素内の子要素を参照・設定する方法要素の配置位置を確認する方法
Style関連
スタイル属性(色・線・大きさなど)を参照・変更する方法「getPropertyValue」メソッド - 指定されたCSSプロパティの値などを取得する「getComputedStyle」メソッド - CSSを適用したスタイルを参照する
ページ関連
Webページのタイトルを変更する方法「モニター」情報を取得する方法「ブラウザ」情報を取得する方法「ページ」情報を取得する方法「イベント」情報を取得する方法「マウス」情報を取得する方法
サイズ関連
要素の縦・横サイズを参照・変更する方法「モニター」「ブラウザ」のサイズ情報を取得する方法
端末情報
スマートフォンからのアクセスを識別する方法





【Javascript】「Javascript」の使い方

【Javascript】
「Javascript」の使い方










Javascriptの使い方


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

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


Back



Javascriptファイルの書式


「Javascript」の拡張子

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



記述例:


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