Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

JavaScript jQuery JSP/Servlet

jQueryの$(document).ready()とは?意味や使い方をご紹介

投稿日:2021年4月11日 更新日:

<目次>

(1) jQueryの$(document).ready()とは?意味や使い方をご紹介
 (1-1) 「$(document).ready()」とは?
 (1-2) サンプルプログラム
 (1-3) 参考:DOMとは

(1) jQueryの$(document).ready()とは?意味や使い方をご紹介

(1-1) 「$(document).ready()」とは?

一般的にページに変更を加える際は、JavaScriptの「document」オブジェクト(DOM)が「準備できる」までは変更を加えない方が安全です。jQueryでは、この「ページが表示可能か?」の状況(ステータス)を検知してくれる機能があります。

それを実現するのが「$(document).ready()」で、この「ready()」の中に記述したJavaScriptのコードは、ページのDOM(Document Object Model)において、JavaScriptの実行準備が可能になるまで処理を保留します。

 

(例)通常形
$( document ).ready(function() {
    console.log( "Document Ready Test !" );
});

 

短縮形の表記もあり、「$(document).ready()」は短縮して「$( );」と記述できます。

(例)短縮形

$(function() {
    console.log( "Document Ready Test !" );
});

 

目次にもどる

(1-2) サンプルプログラム

今回は「document」オブジェクトのロードを開始~完了($(document).ready()を満たす)までの様子を、簡単な画面(JSP)を使って確認する例をご紹介します。

JSP画面にはGoogleMap等が埋め込まれており、この画面の描画処理の開始(START)と終了(FINISH=$(document).ready()を満たす)の「時刻」を、今回ご紹介した方法で取得し、それをコンソールに表示するプログラムになります。

(図121)

■JavaScript

現在時刻の情報(時、分、秒、ミリ秒)を取得し、それらを連結して「hh:mm:ss:ms」の形式で出力するプログラムを作成します。こちらについては下記の別記事をご参照頂けたらと思います

(解説)JavaScriptで現在時刻をhhmmss形式で取得する方法

(図122)

目次にもどる

■JSP

JSPの中にもJavaScriptを埋め込んでおり、<script></script>内で「開始時刻」と「終了時刻」を開発者ツール(F12)のコンソールに表示処理を行っています。

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src='js/IT0998_js_hhmmss.js' type='text/javascript' language='javascript' charset='utf-8'></script>
    <script>
    /* (1)documentロード「開始」時刻をコンソールに出力 */
    console.log(startTime()+": ## document load START");
    /* (2)documentの表示準備ができたら、ready内のfunction(){}を実行 */
    $( document ).ready(function() {
        /* (3)documentロード「終了」時刻をコンソールに出力 */
        console.log(startTime()+": ## document load FINISH");
    });
    </script>
</head>
<body>
        (1) Load "tennis-database.com"<br /><br />
    <iframe src="https://tennis-database.com" width="600" height="100"></iframe><br /><br />
        (2) Load some Google Map<br /><br />
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d282714.5956249621!2d-157.83519735607007!3d21.40608556168899!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7bffdb064f79e005%3A0x4b7782d274cc8628!2z44Ki44Oh44Oq44Kr5ZCI6KGG5Zu9IOODj-ODr-OCpOW3ng!5e0!3m2!1sja!2sjp!4v1612401060798!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0">
    </iframe>
<br />
</body>
</html>

(図123)

(図124)サンプルプログラム実行結果

目次にもどる

(1-3) 参考:DOMとは

JavaScriptには「DOM」という概念があり、コンテンツにアクセスして変更を加える方法をDocument Object Model(通称DOM)と呼びます。DOMには様々な単位の「オブジェクト」があり、ウィンドウ全体に相当する「Window」オブジェクトや、Window内のHTML文書に相当する「document」や、そのdocument内の<form>タグ内に相当する「form」オブジェクトなど様々あります。

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-JavaScript, jQuery, JSP/Servlet

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

JavaScriptでテキストボックスの値を取得する方法(動画解説付き)

<目次> (1) JavaScriptでテキストボックスの値を取得する方法 (2) 表記例①:document.[Form Name].[Element Id].Value  (2-1) 構文  (2 …

サーバサイドJava(JSP&サーブレット)における画面遷移の手法とそのサンプルコードの紹介

(0)目次&概説 (1) 画面遷移の代表手法  (1-1) フォワード  (1-2) リダイレクト (2) 画面遷移手法のご紹介  (2-1) 方法1:formタグ+Submitボタン(JSP/Ser …

クッキーとは?JSPでCookieを保存&取得するサンプルプログラムと代表的なメソッド紹介

(1) セッションとは (2) クッキーとは  (2-1) 概要  (2-2) サンプルプログラム   (2-2-1) 概要&画面遷移   (2-2-2) HelloCookie.jsp   (2-2 …

JSP/Servletで画面毎のアクセスカウンターを作成してみた(パート2:ソース解説編)

(1) 仕様について (2) ソースコード  (2-1) AccessCounter2.java   (2-1-1) サンプルPG   (2-1-2) サンプルPG解説  (2-2) DbConnec …

Javaのフォーム認証でオリジナルの(元の)リクエスト情報を取得する方法

<目次> (1) Javaのフォーム認証でオリジナルの(元の)リクエスト情報を取得する方法  (1-1) 構文  (1-2) サンプルプログラム   ●JSP(要求ページ)   ●JSP(ログインペー …

  • English (United States)
  • 日本語
Top