【JavaScript授業十四日目】問題解答、ブラウザオブジェクト
問題array
マウスカーソルが乗った時に大きい画像を表示する
●HTML
<body>
<div class="box">
<div class="inner">
<div class="stage">
<img id="bigImage" src="img/big001.jpg">
</div>
<div class="thumb">
<ul>
<li>
<!-- onmouseover="changeImg();"で画像切り替え -->
<img src="img/001.jpg" onmouseover="changeImg(this.src);">
</li>
<li>
<img src="img/002.jpg" onmouseover="changeImg(this.src);">
</li>
<li>
<img src="img/003.jpg" onmouseover="changeImg(this.src);">
</li>
</ul>
</div>
</div>
</div>
<script src="js/script01.js"></script>
</body>
◆関数について
changeImg(this.src);
・HTMLのonmouseover属性の属性値部分でchangeImg関数が呼び出される
・小さな画像にマウスカーソルが乗った時に呼び出される
引数：this.srcを受け取る
・引数pathに画像のパス情報が渡されている
・this：イベント発生要素、マウスカーソルが乗った画像
・this.src：イベント発生要素のsrc属性
●JS
function changeImg(path) {
console.log('画像変更');
console.log(path);
パス(文字列)を分解して配列化
Stringオブジェクト内のsplitメソッド使用
最後のファイル名を取得
var pathArray = path.split('/');
console.log(pathArray);
console.log(
pathArray[pathArray.length - 1]
);
ファイル名の前に「big」を追加
var fileName =
'big' + pathArray[pathArray.length - 1];
console.log(fileName);
パス配列の最後の部屋(ファイル名)をbig付きのファイル名で上書き
pathArray[pathArray.length - 1]
= fileName;
console.log(pathArray);
分解したパスを元に戻す
配列(Arrayオブジェクト)から文字列に戻す
path = pathArray.join('/');
console.log(path);
document.getElementById('bigImage')
.setAttribute('src', path);
}
◆ポイント
・文字列 → 配列 → 配列でファイル名操作 → 文字列
・文字列から配列に変更
・ 文字列.split('分割文字');
・配列から文字列に変更
・配列.join('接続文字');
split⇔join （配列化⇔文字列化）
●別解（長い文字列に戻さないver）
function changeImg(path) {
パスを分解して配列化し、最後のファイル名を取得
var img = path.split("/");
var imgPath = img.slice(img.length - 2);
ファイル名の前に「big」を追加して文字列に戻す
imgPath = imgPath.join("/big");
パスがbig付きに切り替わる
document.getElementById('bigImage').setAttribute('src', imgPath);
}
問題string
問題１：件名が10文字を超えていたら警告文を表示すること
問題２：本文が100文字を超えていたら警告文を表示すること
問題３：本文の文字数を表示すること
●HTML
<body>
<div class="box">
<div class="inner">
<!-- form:値送信の大枠 -->
<!-- onsubmit属性:returnリターン付きのformCheck()[関数] -->
<form action="" onsubmit="return formCheck();">
<dl>
<dt>
名前
<span id="nameText" class="warning"></span>
</dt>
<dd>
<input type="text" id="name" name="myName">
</dd>
<dt>
件名
<span id="subjectText" class="warning"></span>
</dt>
<dd>
<input type="text" id="subject" name="mySubject">
</dd>
<dt>
お問い合わせ内容
<span id="contentText" class="warning"></span>
</dt>
<dd>
<!-- onkeyup属性:キーを押して戻るタイミング -->
<textarea id="content" name="myContent"
onkeyup="countString();"></textarea></dd>
<dd>
<span id="displayCount">0</span>文字
</dd>
</dl>
<div class="submit_box">
<!-- type="submit"で送信 -->
</div>
</form>
</div>
</div>
<script src="js/script01.js"></script>
</body>
●JS
問題１：件名が10文字を超えていたら警告文を表示すること
ユーザ入力値(件名)を変数name代入
valueプロパティ：フォームの入力値を管理
innerHTMLプロパティ：要素内のコンテンツ
件名入力に関する警告文を管理する変数
var subjectText = '';
警告文を代入する条件
ユーザ入力値(件名)の文字数をlengthプロパティで確認
10より大きい数値だったら処理する
if (subject.length > 10) {
subjectText = ' 10文字以内で入力ください'
}
document.getElementById('subjectText').innerHTML = subjectText;
問題2：件名本文が100文字を超えていたら警告文を表示すること
var contentText = '';
if (content.length > 100) {
contentText = ' 100文字以内で入力ください'
}
document.getElementById('contentText').innerHTML = contentText;
● 問題2.5：条件によって送信ができる・できないようにする
function formCheck() {
console.log('フォームチェック');
値を送信するかを真偽値で管理
true：送信する
false：送信しない
var flag = true;
if (name.length > 5 || subject.length > 10 || content.length > 100) {
flag = false;
}
return flag;
}
・イベント用の属性on〇〇にreturnを使って真偽値を渡すことができる
・イベント発生時にブラウザ処理を制御できる
・trueを渡すことで通常通りブラウザ処理する
・falseを渡すとブラウザ処理する
※イベント発生時のブラウザ処理
・送信ボタン押した時→値送信処理
・リンク押した時→ページ遷移（移り変わる）
問題3：本文の文字数を表示すること
function countString() {
ユーザ入力値(本文)を取得
文字数を表示
document.getElementById('displayCount').innerHTML = count.length;
}
ブラウザオブジェクト
昔はブラウザ（ChromuやSafari,IE,Firefoxなど）ごとに挙動が違ったが、近年は各ブラウザが互換性をもたせるべく歩み寄っている
●暗黙オブジェクト
・インスタンスにすでに用意されている
console.log(window.alert('警告ダイアログ'));
・「OK」ボタンのみのダイアログ画面
・戻り値：なし
console.log(window.confirm('確認ダイアログ'));
・「OK」「キャンセル」ボタンのダイアログ画面
・戻り値は：「OK」→true 「キャンセル」→false
console.log(window.prompt('プロンプト'));
・1行入力欄ありのダイアログ画面
・引数：ダイアログ画面内の文字
・戻り値：ユーザ入力値
●HTML
・window.confirm(); → confirm(); 省略可能
・省略したものを関数だと勘違いしないように注意！
●windowオブジェクトのsetTimeoutメソッド
test関数定義
一定時間後経過後に呼び出される処理
function test() {
console.log('処理しました１');
}
var timerID1;
ボタンから呼び出される関数定義
function start1() {
timerID1 = window.setTimeout(test, 3000);
setTimeoutメソッド
一定時間経過後の特定の処理をする
第1引数：一定時間経過後に実行する関数
関数名の後に()を記述しない
関数オブジェクトのアドレスを指定
※()をつけると即時関数呼び出しになってしまう
第2引数：遅延させる時間をミリ秒指定
戻り値：キャンセル用のID番号
console.log('timerID1:' + timerID1);
}
●引数に使うとき、なぜ関数名の後に「()丸カッコ」を記述しないのか？
・「()」付きだとすぐに実行してしまう
・アドレスだけ渡すと、3秒後待った後に実行してくれる
↓これも可能
var lesson = function () {
console.log("関数に変数を代入");
}
lesson();
●無名関数を使う場合（こっちのほうがわかりやすい？）
var timerID2;
ボタンから呼び出される関数定義
function start2() {
timerID2 = window.setTimeout(function () { ←キャンセルする必要がない
console.log('処理しました２');
}, 3000);
第1引数：一定時間経過後の関数を登録
無名関数で指定
console.log('timerID2:' + timerID2);
}
●windowオブジェクトのclearTimeoutメソッド
function stop1() {
console.log('stop1実行');
window.clearTimeout(timerID1);
clearTimeoutメソッド
第1引数：停止させる処理のID番号
※setTimeoutメソッド実行時に発行されたID
}
●練習：5秒後に自分の名前をコンソール表示
window.setTimeout(function () { ←関数名あってもなくてもOK
console.log('宇都宮'); ないほうが複数人作業の時はエラーになりにくい
}, 5000);
JSはシングルスレッドなので、実行されるかの保証はされない
シングルスレッドとは、1ラインで処理が進むこと
処理していく中で、5秒後に割り込んでくるが実行するのは最後だったりするイメージ
