jQueryを使ったAjax入門

JavaScriptファイルの準備と読み込み

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
準備したHTMLファイルに、以降のレッスンで実装していくAjaxの処理を記述する為のJavaScriptファイルの用意と、それをHTMLファイルから読み込む方法について解説致します。
講師:
02:49

字幕

このレッスンでは準備した HTML ファイルに以降のレッスンで実装していくAjax の処理を記述する為のJavaScript ファイルの用意とそれを HTML ファイルから読み込む方法について解説していきます。まずはダウンロードしてきたこちらの頭が 01_06 から始まるフォルダーの中に入っているこちらの2つのファイルをエディターで開いてください。そして、これがそれらのファイルを開いた状態です。これらのファイルを使って今回のレッスンの解説を進めていきたいと思います。それではファイルの中身を見ていきましょう。まずこちらの index.html ファイルですがこちらのファイルは前回までのレッスンで準備してきたものとなります。下の部分ではこのように jQuery を読み込んでいますね。そして、今回はもう1つ新たに外部 JavaScript ファイルを用意します。それが、こちらの index.js ファイルとなります。ではまず、こちらのファイルから見ていきましょう。まず、こちらのファイルではこちらの部分に、ドキュメントが読み込まれた際に実行されるといった意味の記述を行っていてそして、こちらの部分に読み込みを確認する為のアラート文を入れています。 きちんと HTML からこの JavaScript のファイルを読み込んでいればこちらのアラート文が実行されて画面上に「JavaScript 読み込み完了」という表示が出てくることになります。それでは先程の index.html に戻ります。そして、こちらの index.html ファイルからは先程の index.js ファイルを読み込みます。読み込む場所はこちらの jQuery を読み込んでいるそのすぐ下のこちらの部分となります。このようにscript タグを使って先程の index.js ファイルを読み込みます。これで JavaScript ファイルの読み込みは完了となります。それでは実際にこちらのindex.html ファイルをブラウザで確認してみたいと思います。こちらが、その index.html ファイルをブラウザで開いた状態となっています。今回はローカルサーバー上にこのファイルを設置しています。それでは、こちらの更新ボタンを押してみたいと思います。するとこのように「JavaScript 読み込み完了」と表示されましたね。これで JavaScript のファイルの準備は完了となります。 以上でレッスンは終了です。今回は準備した HTML ファイルに以降のレッスンで実装していくAjax の処理を記述する為のJavaScript ファイルの用意とそれを HTML ファイルから読み込む方法について解説いたしました。

jQueryを使ったAjax入門

AjaxとはAsynchronous JavaScript + XML の略で、JavaScriptを使って非同期通信を利用しWebサイトのコンテンツを動的に書き換える手法です。このコースではモダンなWebサイト作るうえで必須の技術となっているAjaxjについて、その機能を簡単に実装できるjQueryを使って解説します。

1時間30分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年09月14日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。