JavaScript本格入門を読む・9
Ajax
今日からAjaxです。
私のAjaxの認識は言葉がかっこいい、程度です。
8-1.Ajaxとは
<form method="POST" action="hello.php"> 名前: <input type="text" name="name" size="15" /> <input type="submit" name="submit" value="送信" /> </form> <?php if($_REQUEST['submit'] != null) { sleep(3); print('こんにちは、'.$_REQUEST['name'].'さん!'); } ?>
まずはPHPでって・・・PHPなんて新入社員研修でやった以来ですよ!つまりは6年前!ひどい!
PHPになったとたん、webstormちゃんがサジェストしてくれなくなっちゃったしPHPのエディタを何か別にいれろとか言ってくるし・・・
まーた半角スペースでまごまごしちゃったからな!?(早く覚えろよ)
しかもさー確認のためにアップロードしようとしたらPHPファイルって無料でアップロードできないんだって!!!
そんなん知らなかったよ・・・しょうがないからジオシティーズプラスってやつ月額540円で加入したよ・・・
(ここでジオシティーをチョイスするあたりが古いインターネットの匂い)
来月退会しよう。なので下記のURLはきっとアクセスできなくなるでしょう。
hello
すごいこの程度のPHPすらアップロードできないなんてPHP怖い・・・
function getXHR() { var req; try { req = new XMLHttpRequest(); } catch(e) { try { req = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { req = new ActiveXObject('Microsoft.XMLHTTP'); } } return req; } function asyncSend(){ var req =getXHR(); req.onreadystatechange = function(){ var result = document.getElementById('result'); if (req.readyState == 4) { if (req.status == 200) { result.innerHTML =req.responseText; } else{ result.innerHTML = "サーバーエラーが発生しました"; } } else{ result.innerHTML = "通信中・・・"; } } req.open('GET', 'helloworld.php?name=' + encodeURIComponent(document.fm.name.value), true); req.send(null); } (中略) <form name="fm"> <label>名前: <input type="text" name="name" size="15" /></label> <input type="button" name="submit" value="送信" onclick="asyncSend()" /> </form> <div id="result"></div>
こっちhtml。下がPHP
<?php sleep(3); print('こんにちわ、'.$_REQUEST['name'].'さん!');
Hello,World
何回diffってもエラーになるし、サーバーエラーになる・・・・
何がいけないの・・・
もうずっと色々やってるんだけどうまくいかない・・・
もうやだ・・・
もうやだ!!!
次はAjaxアプリケーションで構造データを扱う、なんだけど既にここで躓いているのに出来る気がしない。
あとyahooウェブ検索webサービスはもう動かないらしい。
書評 JavaScript本格入門 function前の init: って何? - ScriptWorks.JP
つまり、今まで本の通りに書いてきたけど、別のもので書き直さないといけないってことか・・・
ハー出来る気がしない。
上のブログには
以下の getJSON.html はローカル環境でのみお試しください。
ってあったけど、ローカル環境を構築するってのも出来ないんだよね・・・
友達に相談したら、「ローカル環境を作るのも勉強のうち」って言われたんだけど、けど・・・けど・・・・
ハーどうしよう。
とりあえず、今日はここまでにして明日考えるかな。
JavaScript本格入門を読む・8
これ、昨日やったのに公開を忘れたので、公開するぜーーー
ぴょんぴょんするぜーーー
イベントリスナを登録する
function addListener(elem, ev, listener){ if(elem.addEventListener){ elem.addEventListener(ev, listener, false); } else if(elem.attachEvent){ elem.attachEvent('on' +ev, listener); } else { throw new Error(' イベントリスナに未対応です') } } addListener(window, 'load', init); function init() { addListener(document.getElementById('btn'), 'click', function(){ window.alert('ボタンがクリックされました。'); }); } (中略) <input type="button" id="btn" value="ダイアログ表示" />
イベントリスナを削除する
function removeListener(elem, ev, listener){ if(elem.removeEventListener){ elem.removeEventListener(ev, listener, false); } else if(elem.detachEvent){ elem.detachEvent('on' +ev, listener); } else { throw new Error(' イベントリスナに未対応です') } }
次のに必要だったのでこっちも
イベントに関わる情報を取得する
addListener(window, 'load', init); function init(){ addListener(document.getElementById('logo'),'mousedown', function (e) { var result = []; result.push('発生元:' +getSource(e).id); result.push('イベント:' + e.type); result.push('ボタン:' +getButtonType(e)); result.push('X座標:' + e.clientX); result.push('Y座標:' + e.clientY); window.alert(result.join('\n')); }); } function getSource(e){ if(e.target){ return e.target; } else if(window.event){ return window.event.srcElement; } } function getButtonType(e){ if(e.target){ switch(e.button){ case 0 :return 'left'; case 1 :return 'center'; case 2 :return 'right'; } } else if(window.event){ switch(window.event.button){ case 1 :return 'left'; case 2 :return 'right'; case 4 :return 'center'; } } } (中略) <img id="logo" src="http://www.wings.msn.to/image/wings.jpg" />
switch文キター
IE用のやつうざいなぁ
上位要素へのイベント伝播を抑制する
addListener(window, 'load', init); function init(){ addListener(document.getElementById('outer'), 'click', function(e){ window.alert("上位要素のイベントリスナです"); }); addListener(document.getElementById('inner'), 'click', function(e){ window.alert("下位要素のイベントリスナです"); }); } (中略) <div id="outer"> <div id="inner"> クリックしてみましょう。 </div> </div>
cancelBubbleは別にいいかな・・・
メモ:IEはcancelBubbleプロパティ、それ以外のブラウザはstopPropagationメソッドを使用
イベントデフォルトの挙動を抑止する
function cancelEvent(e){ if(e.preventDefault){ e.preventDefault(); } else if (window.event){ window.event.returnValue = false; } } addListener(window, 'load', init); function init(){ addListener(document.getElementById('fm'), 'submit', function(e){ if(!window.confirm('送信してよろしいですか?')){ cancelEvent(e); } }); } (中略) <form id="fm"> <input type="text" id="name" size="10" /> <input type="submit" value=" 送信" /> </form>
また、綴りを間違えたけど、アラートが出るからわかりやすいな・・・
JSは躓くとそれ以降処理されないからどのへんが間違っているかアタリがついて良いなぁ。
今日はAjaxどこまで出来るかしらん。
JavaScript本格入門を読む・7
3日やってなかっただけで久々感。
6月は暇だったけど、なんか7月は忙しいなぁ。
7-3.属性値を取得/設定する
多くの属性は「要素ノードの同名のプロパティ」としてアクセスできる。
・HTMLとJavaScriptとで名前の相違を意識する必要がない
・取得/設定する属性名を、スクリプトから動的に変更できる
不特定の属性を取得する
window.onload =function(){ var logo =document.getElementById('logo'); var attrs =logo.attributes; var result =[]; for (var i = 0; i<attrs.length; i++){ var attr =attrs.item(i); if(attr.nodeValue){ result.push(attr.nodeName + ':' +attr.nodeValue); } } window.alert(result.join('\r\n')); } (中略) <img id="logo" src="http://uni.res.nimg.jp/img/zero_index/logo.png" height="42" width="245" border="0" alt="niconico" />
出来たけど、何に使うんだろこれ
ノードを追加/置換/削除する
innerHTMLプロパティとどのように使い分けるか
・シンプルなコンテンツの編集→innerHTMLプロパティ
・複雑なコンテンツの編集→本節のアプローチ
新規にノードを作成する
function add(f) { var anchor = document.createElement('a'); anchor.href = f.url.value; var name = document.createTextNode(f.name.value); anchor.appendChild(name); var br = document.createElement('br'); var list = document.getElementById('list'); list.appendChild(anchor); list.appendChild(br); } (中略) <label>サイト名: <input type="text" name="name" size="30" /> </label><br /> <label>URL: <input type="text" name="url" size="50" /> </label><br /> <input type="button" value="追加" onclick="add(this.form)" /> </form> <div id="list"></div>
わーいなんか動的やで・・・
かっこいい・・・
既存ノードを置換/削除する
function show(e,chid){ var img =document.createElement('img'); img.src ='http://ch.res.nimg.jp/img/system/blog/' +chid +'.jpg'; img.alt = e.innerHTML; img.height =320; img.width =240; var pic =document.getElementById('pic'); if(pic.getElementsByTagName('img').length >0){ pic.replaceChild(img.pic.lastChild); } else{ document.getElementById('del').disabled =false; pic.appendChild(img); } } function del(){ var pic =document.getElementById('pic'); pic.removeChild(pic.lastChild); document.getElementById('del').disabled =true; } (中略) <ul> <li><a href="JavaScript:void(0)" onclick="show(this, 'ch2526250')"> マックスむらいチャンネル</a></li> <li><a href="JavaScript:void(0)" onclick="show(this, 'ch2567654')"> 『ライフログ』生主ブロマガ</a></li> <li><a href="JavaScript:void(0)" onclick="show(this, 'ch2584861')"> MSSPブロマガ</a></li> <li><a href="JavaScript:void(0)" onclick="show(this, 'ch2571478')"> アイドルマスター ミリオンラジオ!</a></li> </ul> <input type="button" id="del" value="削除" disabled="disabled" onclick="del()" /> <div id="pic"></div>
サンプルをちょっと変えてみて、
ブロマガ - ニコニコチャンネル
の著名人週間ランキングの上位の画像をとってくるやつにしてみた。
サンプルそのままじゃなくて、ちょっと変えることが出来るようになったの我ながら進化すぎるわ。すげーわ・・・
(自分で自分を褒めだした)
7-5.JavaScriptからスタイルシートを操作する
インラインスタイルにアクセスする
function changeStyle(elem,color){ elem.style.backgroundColor = color; } (中略) <div onmouseover="changeStyle(this,'Pink')" onmouseout="changeStyle(this,'White')"> マウスを乗せると色が変わります。 </div>
外部スタイルシートを適用する
.highlight { background-color: pink; } .normal { background-color: White; }
function changeStyle(elem,color){ elem.style.backgroundColor = color; } (中略) <div onmouseover="changeStyle(this,'Pink')" onmouseout="changeStyle(this,'White')"> マウスを乗せると色が変わります。 </div>
おお!すっきり!
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">パラドックス13</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がサジェストしてくれるから簡単にできた。
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.属性値を取得、設定するからですよ!未来の私!
JavaScript本格入門を読む・5
サブウィンドウを生成する
var subwin; function win_open(){ subwin = window.open('http://www.nicovideo.jp/','Sample', 'width=600, height=300, scrollbars=yes, location=yes'); } function win_close(){ if (subwin && !subwin.closed){ subwin.close(); } } (中略) <input type="button" value="サブウィンドウを開くよ" onclick="win_open()" /> <input type="button" value="サブウィンドウを閉じるよ" onclick="win_close()" />
サブウィンドウ閉じる意味わからんけど、いいかんじだ。
ちょっとそろそろちゃんと整形もしようと思ってきた。
タイマー機能を実装する
var timer; window.onload = function() { timer = window.setInterval( function() { var dat = new Date(); document.getElementById('result').innerHTML = dat.toLocaleTimeString(); }, 1000 ); }; //--> (中止) <input type="button" value="タイマー停止" onclick="clearInterval(timer)" /> <div id = "result"></div>
「タイマー停止」を押しても止まらなくて、タイマーとは・・という気分になったぜ。
色々やったら止まるようになったけど、結局どこが違ってたかわからなかったな・・・
よくない。
- setInterval→決められた時間感覚で繰り返し処理を実行する
- setTimeout→指定された時間が経過したところで一回だけ処理を実行する
ウインドウサイズやスクロー位置を操作する
<input type="button" value="scrollTo" onclick="window.scrollTo(0,200)" /> <input type="button" value="moveBy" onclick="moveBy(100,100)" /> <input type="button" value="resizeBy" onclick="window.resizeBy(50,50)" />
これねー動きませんでした。
どこが違うのかなぁと格闘して、サンプルコード見て比較して・・・
そして気づいたんですよね。
サンプルコードも動かないや・・・
なんかちょっとググったらメインウインドウのサイズを変えるべきではない議論?みたいのがあるみたいですね
565541 – Web sites shouldn't be allowed to resize main window
まぁそうですね・・・
じゃあこれ何なの・・・
ステータス行を操作する
<a href='http://www.nicovideo.jp' onmouseover="window.status='niconico';return true;"> ほげほげ</a>
操作!出来ない!!
POSTORO: IE7以降では window.statusを使ってステータスバーに文字列を表示できない
このあたりか?とおもったらよくみたら本に書いてあった。
多くのブラウザがstatusプロパティの動作をデフォルトで無効にしています
えっ・・・じゃあこれは出来ないことを学ぶってことかい?
さっきから何なんだ!ぷんすか!
6−4.フォーム要素にアクセスする
フォーム要素へのアクセスの基本
function process(){ var name = document.fm.name.value; window.alert('こんにちわ!' + name + 'さん'); return false; } (中略) <form name = "fm" onsubmit = "return process()"> 名前: <input type = "text" name ="name" size=100 /> <input type = "submit" value ="送信" /> </form>
Chromeだと「JavaScriptのアラート」っていうのが出てきてダサい・・・
function process(){ var result = ''; for (var i = 0; i<document.fm.elements.length; i++){ result += document.fm.elements[i].name + '\n'; } window.alert(result); return false; } (中略) <form name = "fm" onsubmit = "return process()"> <label>name1: <input type = "text" name ="name1" size=10 /></label><br /> <label>name2: <input type = "text" name ="name1" size=10 /></label><br /> <label>name3: <input type = "text" name ="name1" size=10 /></label><br /> <input type="submit" value="送信" />
documents[0].elements[0].valueの数値インデックスは一目見て「その要素を示しているか」がわかりにくいですね、という為のコードなのに「name1」「name2」だったら数値インデックスと同じやんけ!と文句を言ってみたり///
トメトメしいわ////
フォーム要素共通のプロパティ/メソッド
「document.fm.name.value」と記述する変わりに「f.name.value」といった記法を利用する。
可能な箇所は出来るだけ「this」「this.form」にする
function process(){ var fmt = document.fm.fmt; for(var i = 0; i < fmt.length; i++){ fmt[i].disabled = !document.fm.need.checked; } } (略) <form name="fm"> <label>メールマガジンの登録を希望 <input type="checkbox" name="need" value="1" checked="checked" onclick="process()" /> </label> <br /> <label><input type="radio" name="fmt" value="plain" />プレーン形式</label> <label><input type="radio" name="fmt" value="html" />HTML形式</label> </form>
半角スペースが足りないと動かなくなるのやめてほしい・・・・うう・・・・・
テキスト系の要素を操作する
function chk(){ var q = document.fm.old; if (q.value != null && q.value != ''){ if(isNaN(q.value)){ window.alert('年齢は数値で入力してね'); q.value = q.defaltValue; q.focus(); q.select(); return false; } } } (中略) <form name="fm" method"POST" action"" onsubmit="return chk()"> <label>年齢:<input type="text" name="old" value="20" size="3" />歳</label> <input type="submit" value="送信">
いい加減に!=のとき、!の後ろに半角スペースを入れてしまうのをやめる!!!
ラジオボタン/チェックボックスを操作する
function show(){ var result =[]; var f = document.fm.food; for(var i=0; i<f.length; i++){ if (f[i].checked){ result.push(f[i].value); } } window.alert(result.toString()); return false; } (中略) <form name="fm" method"POST" action"" onsubmit="return show()"> 好きなアイスクリームは? <label><input type="checkbox" name="food" value="ハーゲンダッツ" />ハーゲンダッツ</label> <label><input type="checkbox" name="food" value="レディボーデン" />レディボーデン</label> <label><input type="checkbox" name="food" value="スーパーカップ" />スーパーカップ</label> <input type="submit" value="送信">
選択ボックス/リストボックスを操作する
function getList(elem){ var result = ''; for(var i = 0; i < elem.options.length; i++){ if(elem.options[i].selected){ result += elem.options[i].value + ','; } } return result; } function show(){ window.alert(getList(document.fm.food)); return false; } //--> (中略) <form name="fm" onsubmit="return show()"> 好きなアイスクリームは? <select name="food" multiple="multiple" size="4"> <option value="ハーゲンダッツ">ハーゲンダッツ</option> <option value="レディボーデン">レディボーデン</option> <option value="スーパーカップ">スーパーカップ</option> <option value="ベンアンドジェリーズ">ベンジェリ</option> <option value="コールドストーンクリーマリー">コールドストーン</option> <option value="爽">爽</option> </select> <input type="submit" value="送信" />
どうして動かないのかずっとわからなくて、ついにサンプルコードとdiffってしまった・・・
また半角スペースでした。イヤーーーー
時間かかってしまった。
今日はここまで。今日のは別にJavaScriptじゃなくても普通にhtmlで出来そうな気がしたけど楽しい。
明日も出来るかな・・・
JavaScript本格入門を読む・4
4日目です。ダレてくる頃です。ダレてます。イエーイ
でも4日目が三日坊主にならない境目な気もしてるよ!
5.大規模開発でも通用する書き方を身につける
5-1.JavaScriptにおけるオブジェクト指向の特徴
もっともシンプルなクラスを定義
コンストラクタで初期化する
var Member = function(firstName,lastName){ this.firstName = firstName; this.lastName = lastName; this.getName = function(){ return this.lastName + ' ' +this.firstName; } }; var mem = new Member('ai', 'kaneko'); document.writeln(mem.getName());
これ、最初「愛」が「undefined」になって愛が・・・見つからない・・・って思った。
動的にメソッドを追加する
var Member = function(firstName,lastName){ this.firstName = firstName; this.lastName = lastName; }; var mem = new Member('ai', 'kaneko'); mem.getName = function(){ return this.lastName + ' ' +this.firstName; } document.writeln(mem.getName());
同一のクラスをもとに生成されたインスタンスであっても、それぞれが持つメンバは同一であるとは限らない。
5-2.コンストラクタの問題点とプロトタイプ
メソッドはプロトタイプで宣言する
プロトタイプオブジェクトを利用することの2つの利点
var Member = function(firstName,lastName){ this.firstName = firstName; this.lastName = lastName; }; var mem = new Member('niconico','太郎'); Member.prototype.getName =function(){ return this.lastName + ' ' +this.firstName; }; document.writeln(mem.getName());
getNameメソッドどっちでもいけるのか。すてき
プロパティの設定
var Member = function(){}; Member.prototype.sex = '男'; var mem1 = new Member(); var mem2 = new Member(); document.writeln(mem1.sex + '|' + mem2.sex); mem2.sex = '女'; document.writeln(mem1.sex + '|' + mem2.sex);
プロトタイプオブジェクトが利用されるのは「値の参照時だけ」
(1)静的プロパティは、基本的に読み取り専用
(2)静的メソッドの中では、thisキーワードは使えない
プロパティの削除
var Member = function(){}; Member.prototype.sex = '男'; var mem1 = new Member(); var mem2 = new Member(); document.writeln(mem1.sex + '|' + mem2.sex); mem2.sex = '女'; document.writeln(mem1.sex + '|' + mem2.sex); delete mem1.sex delete mem2.sex document.writeln(mem1.sex + '|' + mem2.sex);
えー
削除するのは、インスタンス上のsexプロパティっていうの難しい・・・
オブジェクトリテラルでプロトタイプを定着させる
var Member = function(firstName,lastName){ this.firstName = firstName; this.lastName = lastName; }; Member.prototype = { getName : function(){return this.lastName + ' ' +this.firstName;}, toString : function(){return this.lastName + this.firstName;} }; var mem = new Member('niconico','太郎'); document.writeln(mem.getName()); document.writeln(mem.toString());
確かにわかりやすくなって・・・のかな・・・・(ドキドキ)
5-3.オブジェクトの継承
継承とは
プロトタイプチェーンの基礎
var Animal = function(){} Animal.prototype = { walk : function() { document.writeln('ポコポコ…'); } }; var Dog = function(){}; Dog.prototype = new Animal(); Dog.prototype.bark = function() { document.writeln('ワンワン! '); } var d = new Dog(); d.walk(); d.bark();
いやー・・・まぁぶっちゃけさ、よくわからなくなってきたよね。
継承関係は動的に変更可能
var Animal = function(){} Animal.prototype = { walk : function() { document.writeln('ポコポコ…'); } }; var SuperAnimal = function(){} SuperAnimal.prototype = { walk : function(){ document.writeln('ダダダダダダ');} }; var Dog = function(){}; Dog.prototype = new Animal(); var d1 = new Dog(); d1.walk(); Dog.prototype = new SuperAnimal(); var d2 = new Dog(); d2.walk(); d1.walk();
インスタンスが生成された時点で固定され、その後の変更にかかわらず保存される
書いてあることを読めるし、サンプルコードも書いて「お、おう・・・」って思うけど
「本当に理解してるの?」って言われたら「わからないです。。。」ってかんじなんだが!
書いていくうちに身につくのかなぁ・・・
6.ブラウザを自在に操る〜ブラウザオブジェクト
やっとブラウザオブジェクトきたーーーーーー!!!
6-1.イベントが発生したら処理を行う
function btn_onclick(){ window.alert('ボタンをクリック'); } (中略) <input type="button" value="ダイアログ表示" onclick="btn_onclick()" />
はー動くって楽しい。
window.onload = function(){ document.getElementById('btn').onclick = function(){ window.alert(' ボタンがクリックされました。'); }; }; (中略) <input id="btn" type='button' value="ダイアログ表示" />
getElementByIdちゃんキター!おひさ!
イベント標準の挙動をキャンセルする
<body oncontextmenu = "return false;">
ほうほう
6-2.ブラウザオブジェクトの基本をおさえる
JavaScript本格入門を読む・3
3-5.Objectオブジェクト
toString/valueOfメソッド
var obj = new Object(); document.writeln(obj.toString()); document.writeln(obj.valueOf()); var dat = new Date(); document.writeln(dat.toString()); document.writeln(dat.valueOf()); var ary = ['apple','lemon','banana']; document.writeln(ary.toString()); document.writeln(ary.valueOf()); var num = 10; document.writeln(num.toString()); document.writeln(num.valueOf()); var reg = /[0-9]{3}-[0-9]{4}/g; document.writeln(reg.toString()); document.writeln(reg.valueOf());
constructorプロパティ
var data = []; if(typeof data == 'object' && data.constructor == Array){ document.writeln('変数dataはArrayオブジェクトのインスタンスです'); }
これ、書けたけどどういうことだってばよ。
前やったtypeof演算子は「Object」しか返さない→そのためにconstructorプロパティ!
→とはいえ、document.writelnで書いてるやんけ、と思ったんだが。
constructorプロパティは戻り値としてインスタンスの生成に使用されたコンストラクタ(Functionオブジェクト)を返します
???関数がわかればわかるのかな。
Globalオブジェクト
var n = '123xx' document.writeln(Number(n)); document.writeln(parseFloat(n)); document.writeln(parseInt(n)); var d = new Date(); document.writeln(Number(d)); document.writeln(parseFloat(d)); document.writeln(parseInt(d)); var h = '0777' document.writeln(Number(h)); document.writeln(parseFloat(h)); document.writeln(parseInt(h)); var e ='1.01e+2' document.writeln(Number(e)); document.writeln(parseFloat(e)); document.writeln(parseInt(e));
ここまで来て思ったけど、こういうので何が出来るか、を知ることがもしや大事なのか
var str = '!"#$%&()+-*/@~_|;:,.'; document.writeln(encodeURI(str)); document.writeln(encodeURIComponent(str));
これめっちゃ便利そう〜!(イメージ)decodeURIで元の文字列にデコード出来る(メモ)
4.関数
function命令
function triangle(base,height){ return base * height / 2; } document.writeln('三角形の面積なの' + triangle(5,2));
Functionコンストラクタ
var triangle = new Function('base', 'height', 'return base * height /2;'); document.writeln('三角形の面積なのよ' + triangle(5,2));
こっちはさんざん書いたおかげでなじみがあるな!
関数リテラル表現
var triangle = function(base,height){ return base * height /2; }; document.writeln('三角形の面積なのだ' + triangle(5,2));
変数はどの場所から参照できるか?スコープ
グローバル変数→関数の外で宣言した変数
ローカル変数→関数の中で宣言した変数
var scope = 'niconico' function getValue(){ var scope = 'ニコニコ動画'; return scope; } document.writeln(getValue()); document.writeln(scope);
変数宣言にvar命令は必須
var命令を使わずに宣言された変数はすべてグローバル変数
ローカル変数を定義するには、必ずvar命令を使用する
var value = 10; function decrementValue(value){ value--; return value; } document.writeln(decrementValue(100)); document.writeln(value);
var value =[1,2,4,8,16]; function deleteElement(value){ value.pop(); return value; } document.writeln(deleteElement(value)); document.writeln(value);
4-4.引用情報を管理する
JavaScriptは引数の数をチェックしない
function showMessage(value){ if(arguments.length != 1){ throw new Error('引数の数が間違っているよ' + arguments.length); } document.writeln(value); } try { showMessage('山田','鈴木'); } catch(e){ window.alert(e.message); }
windowアラートが出ると、チェックするかんじするなぁ
可変長引数の関数を定義する
function sum(){ var result =0; for (var i =0; i< arguments.length; i++){ var tmp = arguments[i]; if(isNaN(tmp)){ throw new Error('指定値が数値じゃないよ' +tmp); } result += tmp; } return result; } try{ document.writeln(sum(1,3,5,7,9)); } catch(e){ window.alert(e.message); }
途中間違えたら、アラート出てきてちょっと嬉しい。
明示的に宣言された引数と可変長引数を混在させる
function printf(format){ for (var i = 1; i<arguments.length; i++){ var pattern = new RegExp('\\{' +(i - 1)+ '\\}', 'g'); format = format.replace(pattern,arguments[i]); } document.writeln(format); } printf('こんにちわ、{0}さん。私は{1}です。','redcat1113','金子');
確かに何をしたいか直感的にわかりにくい!!
見た目でわからないという・・・
再起呼び出しを定義する
function factorial(n){ if (n != 0) { return n * arguments.callee(n - 1); } return 1; } document.writeln(factorial(5));
これ、if以下の半角スペースで躓いてしまった・・・
エディタの設定で半角スペース表示させるようにしたぜ!
はー難しい。
4-5.高度な関数のテーマ
「まず基本だけを修めたい」という方はスキップしても構いません
じゃあ余裕でスキップさせていただきます!!!(やる気なし)
慣れてきたのか書くのが早くなってきたし、エラー出た後に間違いに気づくのも早くなってきた。
やっぱ実際に書くの大事だな。
明日は、「大規模開発でも通用する書き方を身につける」だけど、身につける必要あんのかな、と始める前から懐疑的だぜ!