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





【Javascrpt】ページ読み込み時に「Javascript」を実行する方法



「Javascript」をページ読み込み時に実行したい時は、
・「onLoad」属性を使う方法
・「addEventListener」を使う方法
などの方法があります。
「addEventListener」を使う方法には、
「load」と「DOMContentLoaded」などのタイミングがあります。






ページ読み込み時にJavascriptを実行する方法


「Javascript」では、
ページ読み込み時に実行できる方法がいくつかあります。

・「onLoad」を使う方法
・「addEventListener('load', 関数名 )」を使う方法
・「addEventListener('DOMContentLoaded', 関数名 )」を使う方法
・「jQuery」の「ready」と「load」
などの方法が用意されている。




Back



「onLoad」を使う方法


すべてのDOMツリー構造及び関連リソースが読み込まれたあとにJavaScriptが実行される記述

window.onload = function() {
実行プログラムを記述する
}


<head>
</head>
<!-- bodyにonloadイベントを設定 -->
<body onload="start()">
<p id="ID名"></p>

<script>
function start() {
var Sample = document.getElementById('ID名');

Sample.textContent = 'こんにちは!';
}
</script>
</body>


function load() {
alert("ページが読み込み完了!");
}
window.onload = load;


複数の「window.onload」を書いた場合、
上書きされてしまい、最後に書いたイベントだけしか実行されない。

複数の処理を実行したい場合は、「addEventListener()」使うと、
登録された処理は、登録された順番に実行される。


Back



「addEventListener」を使う方法


window.addEventListener('load', function() {
console.log('出力したいテキスト');
})


window.addEventListener('DOMContentLoaded', function() {
実行プログラムを記述
})



ページ読み込み時に実行するように設定できる「addEventListener」は、
・「addEventListener('load', 関数名)」
・「addEventListener('DOMContentLoaded', 関数名)」
の2通りの方法がある。
「DOMContentLoaded」は、
DOMが読み込まれた時点で実行するので、
画像の読み込みなど、
全ての読み込みが完了してから実行される「load」よりも、
実行速度が早い。

「addEventListener」は
複数の「onloadイベント」を登録できるのが特徴で、
複数記述されると上書きされてしまう「onLoad」よりも、
多くの処理を登録できるので、便利。
登録順に処理が実行されるようになっている。
複数の「onloadイベント」を登録してもすべて実行される。

「DOMContentLoaded」を設定すると「DOMツリー構造」が読み込まれた時点で実行される。
ほとんどの場合、「DOMツリー構造」さえ完了していれば「JavaScript」から「DOM」を取り扱える。
通常の「onload」イベントよりも速く動作するというメリットがある。


「DOMContentLoaded」は、
「jQuery」の「ready()」メソッドとほとんど同じ動作をする。
「DOMContentLoaded」は主に、
標準のJavaScriptイベントで利用され、
HTML構造が読み込まれたらプログラムを実行する。
注意点は、「DOMContentLoaded」はIE9から対応。


Back



「jQuery」の「ready」と「load」を使う方法


$(document).ready(function(){
実行プログラムを記述
});


<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() {

$('h1').text('タイトル文字');

})
</script> </head> <body> <h1>置き換えられる前のタイトル文字</h1> </body> </html>

省略前の記述

function showLog() {
console.log('HTMLが読み込まれました!');
}
$(document).ready(showLog);


省略後の記述

$(function() {
//ここに処理を書く
});

$(関数名);



「jQuery」の「ready()」は、
ページ読み込み時に、
HTMLの構造が組み立てられた後、
すぐに処理を実行することができるメソッド。

「HTML」が全て読み込まれる前に、
「jQuery」は実行されるので、
読み込まれていないHTMLを指定するとエラーになる。

読み込み前の要素を指定することを避ける方法が、
「jQuery」の「ready()」。



load()の使い方

$('img').on('load', function() {
実行プログラムを記述
})


//ready()メソッドの場合 $(document).ready(function() {
実行プログラムを記述
});


//loadイベント処理の場合 $(window).on('load', function() {
実行プログラムを記述
});


「load()」メソッドは、
load()メソッドを単体で使用することはなく、
「on()」メソッドのloadイベント処理として記述することになる。
「loadイベント」を設定すると、
指定したHTML要素の読み込みが完了した時点で処理を実行する。
時間のかかる容量の大きな画像ファイルなどでも、
ブラウザが読み込み完了するまで、プログラムを実行しない。
「load」イベントを記述しておけば、
最後まで読み込まれてから処理が実行される。


ready()が動かない場合の対処例

$('h1').text('hello'); ↓
jQuery('h1').text('hello');


「$」を他のプラグインやライブラリなどでも利用されている場合、
「jQuery」で正しく動作しないことがある。
「jQuery」の対処法は、「$」を「jQuery」に置き換えることで、
正常に機能するようになっている。
次のサンプル例を見てください!


Back



画像の読み込み方法


画像の読み込みにも使える「onLoad」「addEventListener」。
画像を読み込むのは時間がかかるので、
読み込みが完了してからでないと、
処理が実行できない。
そんな時に、「onLoad」「addEventListener」を利用して、
画像読み込みが完了したかどうかチェックしてからの実行処理を行う。


var img = new Image(); //インスタンスの生成
img.src = 'image/sample.jpg'; //画像ファイルの読み込み
document.body.appendChild(img); //画像を追加・表示


var img = new Image();
img.onload = function() {
//画像の読み込み完了後の実行プログラム
};


var img = new Image();
img.src = 'image/sample.jpg';
document.body.appendChild(img);

img.addEventListener('load', function {
// 画像の幅サイズを出力
console.log(img.width);
};



Back



「onbeforeunload」イベントの使い方


「onbeforeunload」イベントは、
「onloadイベント」の逆で、
ページから離脱するときのイベント処理を記述する。

主に、「Webページをリロード」「別のURLに遷移する」時などに実行されるイベントで、
「離脱防止」や「誤ったリロード」を防止するような目的で使われることが多い。


window.onbeforeunload = function(e) {
実行プログラムを記述
}


window.addEventListener('beforeunload', function(e) { 実行プログラムを記述
});


window.addEventListener('beforeunload', function(e) {
e.returnValue = '本当にページ移動しますか?';
});



Back