JavaScript本格入門を読む・6

結局土日は遊んで全然JavaScriptの本を読みませんでした。
よくないですね。
コメントでid:fukkenから
WebStorm :: The smartest JavaScript IDE
をすすめられたのでダウンロードしてみたぞ！！

6-5.表示ページのアドレス情報を取得/操作する

function jump(elem){
    var isbn = elem.value;
    location.href = 'http://www.kinokuniya.co.jp/f/dsg-' + isbn;
}
（中略）
<form name="fm">
    <select name="book" onchange="jump(this)">
<option value=" ">書籍名を選択してください</option>
    <option value="01-9784041013335">お文の影</option>
    <option value="01-9784062778275">パラドックス１３</option>
    <option value="01-9784796658393">果てしなき渇き</option>
    <option value="01-9784087478600">白蓮れんれん</option>

しゅごい・・・webstormちゃんしゅごい。
入力補完もしてくれるし、閉じタグも書いてくれる。できるこ！！！
しかもコードも見やすい。サジェストもしてくれる。天才では？？？？
ISBNで飛ぶページ、紀伊國屋しか思いつかなかったので文庫ランキングの上位で書いてみました。

クエリ情報を取得する

function $q(){
    var result = {};
    var str = location.search.substring(1);
    var params = str.split('&');
    for(var i = 0; i<params.length; i++){
        var kv = params[i].split('=');
        result[kv[0]] = decodeURIComponent(kv[1]);
    }
    return result;
}
var q = $q();
document.write('id:' + q['id']);

これあってるかわからないです・・・
というのも、これいったんサンプルをサーバーにアップロードして確認してくださいって書いてあって
http://081.in/redcat1113/72.html
アップロードしてみたんだけど、そもそもクエリの投げ方？がわかんないんだよね・・・・
無理矢理URLに?12345とか付与したらエラーになるしね。なんかそもそも論なかんじだな・・・

6-6.ドキュメントを操作する

DOMで対応しにくい機能のみらしい。DOM楽しみだーーー

クッキーを記録、取得する。

function setCookie(name, value, expires, domain, path, secure){
    var c ='';
    c += name + '=' + encodeURIComponent(value);
    if(expires){
        var exp = new Date();
        exp.setDate(exp.getDate() + expires);
        c += '; expired=' +exp.toGMTString();
    }
    if(domain){c +=';domain=' +domain; }
    if(path){c +=';path=' +path; }
    if(secure){c +=';secure'; }
    document.cookie = c;
}
function getCookie(name){
    var cs = document.cookie.split(';');
    for(var i =0; i<cs.length; i++){
        var kv =cs[i].split('=');
        if(kv[0] ==name){return decodeURIComponent(kv[1]); }

    }
    return null;
}
var cnt =getCookie('js_cnt');
cnt =cnt? ++cnt :1;
setCookie('js_cnt', cnt, 90)
document.write('あなたはこのサイトに '+cnt+'回アクセスしました。');

こんなに長いし複雑なコードなのに1発で成功してこわい・・・これもwebstormちゃんのおかげなのかな？
ローカルだと1回しかカウントされなかったからこっちもあげてみた。
http://081.in/redcat1113/73.html
リロードするたび数値が増える！自動挿入広告がmacだと文字化けててダサいから次アップするときはちゃんと指定してあげよう・・・

スクリプトから文字列を出力する

ページ出力が完了した状態でwritelnメソッドを呼び出すと、writelnメソッドは新しいドキュメントをオープンする
現在、writelnメソッドを利用するのは以下の2つ
1.デバッグ用途で変数を出力
2.サブウインドウに対してコンテンツを出力

function winOpen(){
    var subwin = window.open('', 'Child','width=200, height=200');
    subwin.document.open('text/html');
    subwin.document.writeln('入力値：');
    subwin.document.writeln(subwin.opener.document.fm.data.value);
    subwin.document.writeln('<br /><input type="button" value="閉じる"');
    subwin.document.writeln('onclick="self.close();" />');
    subwin.document.close();
}
（中略）
<form name="fm">
    <input type="text" name="data" value="出力される文字列" />
    <input type="button" value="開く" onclick="winOpen()" />

onclickでvalueをクリアしたかったんだけど、ちょっとめんどくさそうだな。
こういうちょっとした改変がさくっとできるようになりたいな・・・

6-7.その他に重要な3つのブラウザオブジェクト

Historyオブジェクト

<a href="JavaScript:history.back()">戻る</a>｜
<a href="JavaScript:history.forward()">進む</a>

Navigatorオブジェクト

document.writeln(navigator.appCodeName);
document.writeln(navigator.appName);
document.writeln(navigator.appVersion);
document.writeln(navigator.platform);
document.writeln(navigator.userAgent);
document.writeln(navigator.javaEnabled());

おおーってかんじだ。webstormがサジェストしてくれるから簡単にできた。

Screenオブジェクト

function adjust(){
    window.moveTo(0,0);
    window.resizeTo(screen.width, screen.height);
}

resizeTO、chromeもfirefoxも動かなかったーsafariは動いた（メモ）

7.DOM

DOMキター
DOMの本は何冊か持ってて、そして挫折しているのであった。

7-1.DOMの基本

<p id="great">これが<strong>文書ツリー</strong>です。</p>

文書ツリーの解釈はブラウザごとに違う
・ノード間の空白/改行を無視する
・タイトル要素配下のテキストノードを無視する

特定のノードを取得する

• ID値やタグ名といったキーによって特定の要素を直接取得するダイレクトアクセス
• ある要素を起点にその子要素、親要素、兄弟要素を、というように相対的な位置関係でノードを取得するノードウォーキング

ID値をキーにノードを取得する

function btn_onclick() {
    var result = document.getElementById('result');
    result.innerHTML = 'こんにちわ、' + document.fm.name.value + 'さん！';
}
（中略）
<form name="fm">
    <label>名前：
     <input type="text" id="name" name="name" size="15" /></label>
    <input type="button" value="送信" onclick="btn_onclick()" />
    <div id="result"></div>

タグ名をキーにノードを取得する

window.onload =function(){
    var result =[];
    var list =document.getElementsByTagName('a');
    for(var i=0; i<list.length; i++){
        result.push(list.item(i).href);
    }
    window.alert(result.join('\n'));
}
（中略）
<a href="http://www.nicovideo.jp/">niconico</a><br />
<a href="http://www.nicovideo.jp/video_top">ニコニコ動画</a><br>
<a href="http://live.nicovideo.jp/">ニコニコ生放送</a><br>

class属性をキーにノードを取得する

これ、IE8未対応なのか。やな予感するなー
書かなくてもいいかな・・・

相対的な位置関係でノードを取得する

window.onload =function(){
    var result =[];
    var s =document.getElementById('food');
    var opts = s.childNodes;
    for(var i= 0; i < opts.length; i++){
        var opt =opts.item(i);
        if (opt.nodeType == 1){
          result.push(opts.item(i).value);
        }
    }
    window.alert(result.join(','));
}
（中略）
<form name="fm" >
好きなアイスクリームは？
<select id="food" name="food">
<option value="ハーゲンダッツ" />ハーゲンダッツ</option>
<option value="レディボーデン" />レディボーデン</option>
<option value="スーパーカップ" />スーパーカップ</option>
</select>
        <input type="submit" value="送信">

久々に手こずった。

なんかはてなブログの調子が昼も夜も悪いのでこのへんにしておこう。
たぶん2，3日更新できないです。
次は7-3.属性値を取得、設定するからですよ！未来の私！