スポンサーリンク

「これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん」を読んでみる(6)Chapter7前半_Ajax通信の基本

以下の本を読んで、CSSとJavaScriptについて勉強している。


これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん Kindle版
たにぐち まこと (著)
発売日:2017年03月27日
2580円

(環境)
Windows8.1
VisualStudioCode

『これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん』サポートサイト
https://book.mynavi.jp/supportsite/detail/9784839959715.html

前回は、第6章を写経してみた。

 

今回は、第7章「Ajax通信のきほんを学ぼう」を写経してみる。

いよいよ、待ち望んでいたAjax通信!あらかじめ画像データなどの重いデータを読み込んでおいて、クリックしたらササッと表示できるサイトを作れるようになるかな?

(1)index.html ファイルの作成

image

(2)Googleウェブフォント

https://fonts.google.com/specimen/Open+Sans
image

image

image

image

image

(3)CSSファイルの作成

image

(4)画像ファイルの用意

サポートサイト
https://book.mynavi.jp/supportsite/detail/9784839959715.html

からダウンロードして保存。

image

おお!カッコイイ!

image

JSONデータの用意

image

for構文

image

image

div.appendChild(‘img’); ではく、div.appendChild(img); が正しいらしい。むむっ。

image

2件目

image

繰り返しの処理 for構文

image

おお!これで、JSONを使うことができた。

JSONファイルの作成

image

Chromeで、F12を押す。

image

image

onreadystatechange イベント

image

これで、いったん完成。

スポンサーリンク