QLOOKアクセス解析

2013年01月 の記事一覧

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScript学習メモ

■概要
・HTML/CSSはページ作成時に役割を果たす
 JavaScriptは一度できあがったページを変化させる役割を担う
・Windows,XML,WebAPIがUTF-8を採用したことで事実上標準化
・大文字小文字が区別される
・ブラウザはJavaScriptが出てくると画面描画を中断し、
 JavaScriptの処理が終わるまで続きのHTMLを処理しない

■省略語など
[DOM]:DataObjectModel
[JSON]:JavaScriptObjectNotation
[JSONP]:JSON with padding ※発音注意:じぇいそんぴー
[foo,bar,hoge,hogehoge] あれ、それ、なんか ※発音注意:ほぅじ

■様式
変数定義:var x ※型指定なし、定義も任意。
連結演算子:+
比較演算子:(and) && (or) || (=) ==
コメント://または/**/

if文:if(条件){処理内容}
真:if(x){}、偽:if(!x){}

for文:for(初期値;条件;変化量){処理内容}
初期値の設定がおこなわれたあと条件判断をクリアするとループに入る
ループするたび変数が調整され、いずれループを抜ける
e.g.) for(i=1;i<2;i++){document.write(i);}

for(in)文:for(変数 in 配列){処理内容}
e.g.) for(keys in JS){document.write(keys + ":" + JS[keys]);}

■配列:array[]
var x = new myArray(3)
データの個数が3個になる x[0],x[1],x[2]が作られる。

var x = ["a","b","c"]
直接配列に値を入れることもできる

配列名.length
配列の要素数

文字列.split("区切り文字")
配列で結果を返す

■メソッド・プロパティ
window.alart(内容);
アラートを出す

window.prompt("表示する質問文","初期設定の答え");
入力ボックスを出す

window.open(URL,ウインドウ名,詳細オプション);
※ウインドウ名はJavaScriptから操作するためのもので新規ウインドウのタイトルではない
※詳細オプション:省略するとタブで開く
 width=500,height=600,toolbar=no,menubar=no など

document.write(書出す内容);
HTMLソースを吐き出す

location.search
現在のURLの?以降を示すプロパティ
※?を含む
※GET引数を取得する際に使用する

文字列.substr(n);
先頭からn文字を取り除いた残りの文字列を抽出する

■動的にHTML変更
document.createElement("タグ").innerHTML="文字列"
e.g.) var CHILD = document.createElement("p").innnerHTML="これを追加しました";
※追加するオブジェクトを作る

オブジェクト.setAttribute("属性名","値")
e.g.) CHILD.setAttribute("id","CLD");
※追加するオブジェクトにidやnameを設定

document.getElementsByTagName("追加先の親ノード").item(0).appendChild("追加するオブジェクト");
e.g.) document.getElementsByTagName("div").item(0).appendChild(CHILD);


■JavaScriptとCSS
JSでCSSを指定する場合にハイフンが使えない
→ハイフンを抜いて次の一文字を大文字にする
 CSS:background-color
 JS:backgroundColor

nameはいくつでも、idは重複不可
※同一HTML内での制限
getElement等のメソッドを使用する場合にはidが便利

■外部ファイル化


■JSONデータ
{"データ名":[
{"項目名1":"値1"},
{"項目名2":"値2"}
]}

e.g.)
{"飲食店メニュー":[
{"麺類":[
{"name":"味噌ラーメン","price":"500"},
{"name":"塩ラーメン","price":"500"},
]}
]}

■JSONデータの扱い方
var JS = {JSONdata}
オブジェクトに名前を付ける
e.g.) var JS = {"name":"BOB"}

JSONオブジェクト名["キー名"]
値を参照する
e.g.) alart(JS["name"]);
→BOBと書かれたアラートが出る

JSONオブジェクト名["トップ項目名"][ノード番号]["キー名"]
多階層JSONデータの場合
e.g.) JS["shop_menu"][0]["name"]
※ドットなどは不要

■JSONPデータの扱い方
JSONP自身がfunctionを呼ぶ(コールバックする)仕様なので、コードは勝手に実行される
1.functionはJSONPのデータと同じ名前にする
2.functionの引数には、JSONPのデータが入る
3.引数がJSONデータなので、引数["キー名"]で値が取得できる

JS({JSONPdata})
function JS(data){処理内容}

→data["キー名"]で{JSONPdata}の値を取り出すことができる

YahooのGeocoderでは..
<script sec="...&callback=JS"></script> という形でコールバックされる
※HTML内での位置注意※
コールバックされる関数は、先に読み込まれている必要がある



参考書籍:


スポンサーサイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。