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で出来そうな気がしたけど楽しい。
明日も出来るかな・・・
