JavaScript本格入門を読む・10
Ajaxアプリケーションで構造データを扱う
昨日モヤモヤしてたけど、yahoo周りは本を読むだけにして、JASONPのほうは書くことにしました。
入力された値をもとに問い合わせURLを作成し、その結果をXMLデータとして出力する
これがね、やりたかったんだけどね・・・
JSONデータを扱う
・eval関数を利用すれば、そのままオブジェクトとしてJavaScriptのコード内で利用できる
・XMLに比べるとデータサイズをおさえられる
クロスドメイン環境でAjax技術を実装する
よし、はてなのほう書くぞ。
http://b.hatena.ne.jp/entry/jsonlite/?callback=show&url=http%3A%2F%2Fwww.nicovideo.jp
まずはこれではてながどのような情報を返すのか見る。
function search(){
var url = 'http://b.hatena.ne.jp/entry/jsonlite/?callback=show&url='
+ encodeURIComponent(document.fm.url.value);
var scr = document.createElement('script');
scr.type = 'text/javascript';
scr.src = url;
document.getElementsByTagName('body').item(0).appendChild(scr);
}
function show(data){
var count = document.getElementById('count');
var result = document.getElementById('result');
result.innerHTML = '';
if(data == null){
count.innerHTML = 0;
} else {
count.innerHTML = data.count;
var ul = document.createElement('ul');
for (var i=0; i<data.bookmarks.length; i++){
var li = document.createElement('li');
var anchor = document.createElement('a');
anchor.href = 'http://b.hatena.ne.jp/' +bm.user
var text = document.createTextNode(bm.user + '' +bm.timestamp);
anchor.appendChild(text);
li.appendChild(anchor);
ul.appendChild(li);
}
var result = document.getElementById('result');
result.appendChild(ul);
}
}
（中略）
<form name="fm">
<label>URL:
<input type="text" name="url" size="50"
value="http://www.nicovideo.jp" /></label>
<input type="button" id="disp" value="検索" onclick="search()" />
</form>
<hr />
<span id="count">-</span>件、ブクマされています。
<div id="result"></div>ひゃっほーすごい。
なんか今までの集大成ってかんじ！むしろspan久々に書いたｗ
これがスクリプトタグで読み込んで処理できるなんてすごい・・・すごいよ！
9.jQuery
ついにやってきたぞ最終章！（何故なら「10.現場で避けて通れない応用知識」は現場に出ないのでいらんだろ、って思って////）
えーと、まずはjQueryをダウンロードするのか。
Download jQuery | jQuery
どれダウンロードすればいいかわからなくて色々ぐぐってしまった・・・
とりあえず2.1のminiでいいのかな。
条件に合致したデータを抽出する
<div id="list">
<table border="0">
<tr>
<td><img src="http://ch.res.nimg.jp/img/system/blog/ch2526250.jpg" height="160" width="120" /></td>
<td><img src="http://ch.res.nimg.jp/img/system/blog/ch2567654.jpg" height="160" width="120" /></td>
<td><img src="http://ch.res.nimg.jp/img/system/blog/ch2584861.jpg" height="160" width="120" /></td>
<td><img src="http://ch.res.nimg.jp/img/system/blog/ch2581686.jpg" height="160" width="120" /></td>
<td><img src="http://ch.res.nimg.jp/img/system/blog/ch1254.jpg" height="160" width="120" /></td>
<td><img src="http://ch.res.nimg.jp/img/system/blog/ch65001.jpg" height="160" width="120" /></td>
</tr>
</table>
</div>
(略)
$('#list img').animate({width:240, height:320}, 3000)な なんじゃこりゃーーーーー
1行しか書いてないよ！？うそっ いつものgetElementByIdをせこせこ書くのはどうしたんですかーーーー
jQueryすごすぎじゃない！？すごい・・・上のはなんだったんだってくらいすごい・・・
ちょっとここ数ヶ月で1番感動したわ。
興奮しすぎてアップしてみた。
ブロマガ動くよ
複数のメソッドを続けて呼び出す
<select id="channel">
<option value="video">ソードアート・オンラインⅡ 第1話「銃の世界」</option>
<option value="blomaga">MSSPブロマガ</option>
<option value="video">美少女戦士セーラームーンCrystal Act.1 うさぎ-SAILORMOON-</option>
<option value="blomaga">ニコニコゲーム実況チャンネル ブロマガ</option>
<option value="video">アルドノア・ゼロ 第1話「火星のプリンセス」</option>
（中略）
$('<option></option>')
.attr('value', 'js_master')
.text('redcat1113の秘密の部屋')
.css('background-color', '#FFff00')
.appendTo('#channel');CSSが動かないーと思ったらローカルだったからか。アップしたら動きました。
チャンネルだよ
<select id="channel">
<option class="video">ソードアート・オンラインⅡ 第1話「銃の世界」</option>
<option class="blomaga">MSSPブロマガ</option>
<option class="video">美少女戦士セーラームーンCrystal Act.1 うさぎ-SAILORMOON-</option>
<option class="blomaga">ニコニコゲーム実況チャンネル ブロマガ</option>
<option class="video">アルドノア・ゼロ 第1話「火星のプリンセス」</option>
</select>
（中略）
$('#channel').
find('option.video').css('backgroundColor', '#66ccff').end().
find('option.blomaga').css('backgroundColor', '#ccffcc');こっちもアップ。
チャンネル2だよ
イベントリスナを登録する
$(
function(){
$('#btn').click(
function(){
window.alert('ボタンがクリックされたよ');
}
);
}
);
//-->
（略）
<input type="button" id="btn" value="ダイアログ表示"/>イベントリスナのクロスブラウザ対応もjQueryがブラウザ間の仕様差を吸収してくれるんだって！
ほんと、jQueryがいいこすぎてやばいわ・・・
jQueryでAjaxを実装する
またyahooJSONなのでここは読むだけ。やっぱすっきりしたなー
サーバからの応答をそのままページに反映する
おおまたPHPか・・・id:fukkenに教えてもらった
PHP IDE :: JetBrains PhpStormこれをいれたぞ！
<?php
require_once 'magpie/rss_fetch.inc';
define('MAGPIE_OUTPUT_ENCODING','UTF-8');
define('MAGPIE_CACHE_ON', TRUE);
$rss = fetch_rss($_REQUEST['url']);
mb_convert_variables('UTF-8', 'auto', $rss);
print('<ul>');
foreach($rss->items as $item){
$pub = $item['pubdate']==null ? $item['dc']['date'] : $item['pubdate'];
?>
<li>
<a href='<?php print($item['link']); ?>'>
<?php print($item['title']); ?></a>
(<?php print(date('Y/m/d',strtotime($pub))); ?>）
</li>
<?php } ?>
</ul>PHP。やっぱりサジェストありがたいけど、＝周りが苦手
$(
function() {
$('#disp').click(
function() {
$('#result').load('rss.php', $('form').serializeArray());
}
);
}
);
(中略)
<form>
URL：
<input type="text" name="url" size="50"
value="http://www.wings.msn.to/contents/rss.php" />
<input type="button" id="disp" value="読み込み" />
</form>
<hr />
<div id="result"></div>RSSフィード
そして動かないわけだよね。
diffって直しても動かない・・・
なんか昨日もだけど、同じディレクトリにあるファイルを読みにいってないような気がする・・・
つまりは私がジオシティーズの配置を間違っているのではないだろうか。
がーん。道のりは険しいぜ。
今日はここまでにしておくか。
たぶん明日が最後。
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">パラドックス１３</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;">
ほうほう
