【書籍学習ログ】HTML/CSS/JavaScript 基礎 - 【6日目】
1冊目、最終章〜！
やっていきましょう＼\٩( 'ω' )و //／
1月31日(木) 2.0h
Chapter 7 Ajax通信のきほんを学ぼう〜jQuery、Vue.jsにもチャレンジ！
CSSプロパティ
position: fixed
要素の位置を固定する
header { position: fixed; /*画面内に固定する*/ top: 0; /*位置。top、left、right、bottom指定可能*/ }
z-index
重なり合う要素の優先度を指定する
header { z-index: 100; /*最小0、最大1000000000、大きいほど上に表示*/ }
JavaScript
配列Arrayオブジェクト
var 配列名 = ['値1', '値2', '値3', ...];
配列名[0]...値1、配列名[1]...値2、...
JSONデータをJavaScriptで扱う
・内部JSONデータからHTMLを生成する
例: <img src="ファイルパス">
1. createElementで新しい要素'img'を作成
2. setAttributeで属性'src'を追加
3. appendChildで属性の値にJSONから取得した値を代入
4.要素を追加
// JSON var images = [ { "path": "img/img_1.jpg", "caption": "It's a dog." "name": "taro" }, ... ] var img; document.createElement('img'); /*img要素生成*/ img.setAttribute('src', images[0].path); /*属性srcにimages配列0番目要素のpathを追加*/ document.getElementById('img_unit').appendChild(img); /*画像表示場所に要素を追加*/
・Ajax通信を利用して外部JSONデータ(.json)を取得
1. XMLHttpRequestオブジェクトでファイル読込
2. openメソッドで通信を開始
3. responseTypeで受け取るデータを指定
4. sendメソッドで値を送信
5. onreadystatechangeイベントで受信データを処理
6. responseプロパティで受信内容を参照
var ajax = new HMLHttpRequest(); ajax.open('GET', 'image.json'); // Get: 取得のみ POST: 送信もする ajax.responseType = 'json'; // text、arraybufferblob、document、jsonから指定 ajax.send(null); // null: 何も送信しないことを明示 ajax.onreadystatechange = function() { if (ajax.readyState === XMLHttpRequest.DONE && ajax.status === 200) { // データ取得時の処理。responseから参照 // 例: var data = this.response[i]〜img.setAttribute('src', data.path) } }
readyStateプロパティについて :
| 数値 | 定数 | 意味 |
|---|---|---|
| 0 | UNSENT | インスタンス生成したがopenメソッドはまだ利用せず |
| 1 | OPENED | openメソッドを使用した |
| 2 | HEADERS_RECEIVED | sendメソッドが使用され、ヘッダー部分が受信できた |
| 3 | LOADING | データ受信中 |
| 4 | DONE | 通信終了、すべてのデータを受信済 |
HTTPステータスについて :
| ステータスコード | 意味 |
|---|---|
| 200 | 正常終了 |
| 301 | Webページが移動した |
| 401 | 認証が必要 |
| 404 | ファイルが見つからない |
| 500 | 内部エラー |
for文
for (var i=0; i<10; i++) { // 処理 }
jQuery
jQuery
JavaScriptライブラリ。
｢Download jQuery｣から、｢Download the compressed, production jQuery X.X.X｣でダウンロード。
ファイルをWebページファイル群に｢js｣フォルダを作成して配下に置く。
htmlファイルのbody要素最後で読み込む。
htmlの内容を変更・取得
$('#img_unit').html('ここに画像を表示'); // 内容変更
alert($('#img_unit').html()); // 取得
cssの内容を変更・取得
$('#img_unit').css('margin-top', '100px'); // 内容変更
$('#img_unit').css('margin-top'); // 取得
メソッドチェーン
$('#img_unit').html('ここに画像を表示').css('margin-top', '100px');
要素の作成
$('作成する要素')
要素の追加
A.append(B); Aの要素にBが子要素として追加
A.appendTo(B); Bの要素にAが子要素として追加
成果物
まとめと感想
重ね合わせのレイアウトを実装できた。
また、JSONデータの扱いについて以下の方法を学習できた。
・内部から取得
・外部(.jsonファイル)からAjax通信で取得 - JavaScript、jQuery、Vue.js
JavaSctipr→jQuery→Vue.jsと進む中で、同じ成果物を実装しているのにも関わらず
どんどんソースコードがすっきりしていく様子に感動した。
ライブラリとフレームワークを用いることで全く違った書式となること、
実装の効率が高まること、特色のある機能があることを体験することができた。
ただ、今回は書籍内容に準じて開発を進めておりVue.jsはCDN利用、
使用エディタVSCodeの拡張機能などは利用しなかったため、
記述の補完もなくLive Serverで起動+Chromeデベロッパツールでのデバッグでは
確認できないエラーがあるなど、デバッグに苦労する場面があった。
(Vue.js使用コードにて用意する配列名を｢Photes｣としてしまうスペルミスが原因だった)
開発を本格的に行う時には改めて開発環境を見直したい。
