◆20200820 授業メモ windowオブジェクト スクロールメソッド jQueryの入口
※今日は朝のスピーチだった
テーマは「デジタル家電」
自宅にあるスマートスピーカについて話をした。
本日の授業内容
・windowオブジェクトのスクロールメソッドを使った演習
・HTMLの記述にて’javascript:void(0)’の役割の学習
→ページ遷移のキャンセル
・変数名’name’の仕様に注意
・ページ移動の関数のつくり方
function move() {
if (window.confirm('ページを移動します')) {
// 条件：確認ダイアログ画面の呼出し
// 確認ダイアログの戻り値:「ok」→true 「キャンセル」→false
↑移動先のurlを記述する
}
}
・ページ移動の応用演習
・履歴を残さずにページ移動する方法
→「５秒後にページが飛びます」仕掛けのつくり方
window.setTimeout(function () {
}, 5000);
ルール
jqueryを利用する場合ジョンレシグさんが作成したJSファイルを読み込まなければならない。
読み込みの方法
1.ファイルをダウンロードして読み込み
2.CDNを利用して読み込み（推奨）
※jQuery本体ファイルは利用する前に読み込むこと
jQueryが用意している便利なメソッドを使用することができる
代表的なメソッド：＄()
・jQueryの問題演習
以下板書
〇スムーズスクロール
HTML
// < !DOCTYPE html >
// <html lang="ja">
// <head>
// <meta charset="UTF-8">
// <title>スムーススクロール</title>
// </head>
// <body style="width:5000px;height:5000px;background:url(img/scale.png);">
// <h1>スムーススクロール</h1>
// <div class="box" style="position:fixed;bottom:50px;right:50px;">
// <p id="pagetop">
// <a href="javascript:void(0)" onclick="moveScroll(0, 0)">ページトップへ</a>
// </p>
// </div>
// <script src="window_scroll2.js"></script>
// </body>
// </html>
JS
// 関数定義部分
// 第一引数：
// 第二引数：
// 戻り値なし
function moveScroll(x, y) {
// x:0
// y:0
window.scrollTo({
top: y,//縦軸座標位置：引数y[0]
left: x,//横軸座標位置：引数x[0]
behavior: 'smooth'//スクロール方法
});
console.log('scrollX:' + window.scrollX);
console.log('scrollY:' + window.scrollY);
}
console.log('１回目の出力');
var str = 'みかん';
console.log(window.str);
// windowインスタンスをコンソールで確認
// オブジェクト詳細を確認する際には
// console.log(調べたいオブジェクト)を使う
console.dir(window)
console.log('２回目の出力');
console.log(alert('警告ダイアログ'));
console.log(confirm('確認ダイアログ'));
console.log(prompt('プロンプト'));
〇変数名「name」に要注意
console.log('１回目の出力');
console.log(nameList);
console.log(nameList.length);
for (var i = 0; i < nameList.length; i++) {
console.log(nameList[i]);
}
// 配列（部屋数）が2
// 'ゆず'と'びわ'がコンソール上に表示される
// 通常通りの表示
console.log('２回目の出力');
// windowインスタンス内に画面の名前を管理するnameプロパティが
// 元から存在しているため、名前を管理するので文字列以外は管理不可
// 新たに宣言したnameプロパティも同じルールで適用される
// 文字列以外のデータ型でン有力すると自動的に文字列型に変換されてしまう。
// ・・・要は部屋数ではなく文字数（ゆず, びわの5文字）が表示されてしまうということ
console.log(name);
console.log(name.length);
for (var i = 0; i < name.length; i++) {
console.log(name[i]);
}
console.log('３回目の出力');
var str = 'みかん';
console.log(str[0]);
console.log(str[1]);
console.log(str[2]);
〇ページ移動
function move() {
if (window.confirm('ページを移動します')) {
// 条件：確認ダイアログ画面の呼出し
// 確認ダイアログの戻り値:「ok」→true 「キャンセル」→false
// ↑trueだった時の処理
}
}
.応用
// < !DOCTYPE html >
// <html lang="ja">
// <head>
// <meta charset="UTF-8">
// <title>ページ移動</title>
// </head>
//<body>
//<h1>ページ移動</h1>
//<div class="box">
//<input type="button" value="jobtech移動します" onclick="move('http://jobtech.jp/');">
//<input type="button" value="yahooに移動します" onclick="move('http://yahoo.co.jp/');">
//<input type="button" value="googleに移動します" onclick="move('https://www.google.co.jp/');">
move（引数）←引数にアドレスを指定する
//</div>
//<script src="location_href.js"></script>
// </body>
// </html>
JS
function move(url) {
// ↑urlの一言を入れるだけでHTML側の引数のアドレスを反映させられるらしい
if (window.confirm('ページを移動します')) {
location.href = url;
// urlの一言を入れるだけでHTML側の引数のアドレスを反映させられるらしい
}
}
〇履歴を残さずにページ移動 location.replace('とび先のurl');
window.setTimeout(function () {
// replaceメソッド：履歴を残さずページ遷移
// 第一引数：URLを文字列で指定
// 戻り値：なし
}, 5000);
< !DOCTYPE html >
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="box">
<div class="inner">
<div class="photo">
</div>
scriptタグで囲んだ中に記述していきます</p>
</div>
//jqueryを利用する場合ジョンレシグさんが作成したJSファイルを読み込まなければならない
//読み込みの方法2種類
//1.ファイルをダウンロードして読み込み
//2.CDNを利用して読み込み（推奨）
//今回は2を使ってjquery本体ファイルを読み込み。
※jQuery本体ファイルは利用する前に読み込むこと
jQueryが用意している便利なメソッドを使用することができる
代表的なメソッド：＄()
</div>
<script>
$(function () {
//ページ読み込み完了後の処理
// jQueryの強味はページ内要素の操作に長けていること
// ページ内のすべての要素をブラウザが認識してから処理をする
window.alert('成功！');
});
</script>
</body>
</html>
----------------jQuery 問題--------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="box">
<div class="inner">
<div class="photo">
</div>
scriptタグで囲んだ中に記述していきます</p>
<div id="content">
複数のデザインを変更する場合は、
オブジェクトを使って指定します。
</div>
</div>
</div>
<script>
$(function () {
// ページ読み込み完了後の処理を記述する
// cssメソッド
//第一引数：CSSプロパティ
//第二引数：プロパティに対する値
// 練習１
// <h1>の文字色をredに設定してみる
// 練習２
// <h2>の背景色を#fccに設定してみる
//練習３
//class名「inner」に枠線(実線、2px、#ccc)を設定してみる
//練習４
//h1要素の文字色をコンソールに表示する
//練習５
//ID名「content」に背景色#ffcと文字色greenを設定してみる
});
オブジェクト指定の場合、プロパティ名をクォートで囲まなくてもよいが、
「-」が入っているとエラーになるのでクォートで囲むことを推奨
</script>
</body>
</html>
