【JavaScript授業十六日目】ブラウザオブジェクト(続き2)

●window_scroll

・「scrollToメソッド1実行」ボタンをクリックで呼び出し
・関数内でscrollToメソッドの実行

関数内でscrollToメソッドの実行

function test1() {

  横方向入力欄の値を変数に代入

  var num1 = document.getElementById('num1').value;

  縦方向入力欄の値を変数に代入

  var num2 = document.getElementById('num2').value;

  scrollToメソッド：画面位置の移動(スクロール)

  第1引数：横方向の位置

  第2引数：縦方向の位置

  window.scrollTo(num1, num2);

  移動後をコンソール表示

  console.log('scrollX:' + window.scrollX);

  console.log('scrollY:' + window.scrollY);

}

・「scrollToメソッド1実行」ボタンをクリックで呼び出し
・関数内でscrollToメソッドの実行
・引数オブジェクトバージョン

function test2() {

  var num1 = document.getElementById('num1').value;

  var num2 = document.getElementById('num2').value;

  セレクトボックスでユーザが選択した項目のvalue属性値を取得

  「auto」「instant」「smooth」のどれか

  var select1 = document.getElementById('select1').value;

  window.scrollTo({

    left: num1,

    top: num2,

    behavior: select1

  });

  引数をオブジェクトで指定

  複数の設定を名前付きで指定できるのでJQueryでよく使われる

  console.log('scrollX:' + window.scrollX);

  console.log('scrollY:' + window.scrollY);

  behaviorにsmoothを指定すると移動中の

  スクロール位置を取得してしまうことがある

  もし移動後の値をとりたい時はは遅延処理を

  使って少し待ってから取得する

}

●遅延処理を使って取得する

  window.setTimeout(function () {

    console.log('scrollX:' + window.scrollX);

    console.log('scrollY:' + window.scrollY);

  }, 1000);

・「scrollByメソッド1実行」ボタンをクリックで呼び出し
・関数内でscrollByメソッドの実行
・引数オブジェクトバージョン

function test3() {

  var num1 = document.getElementById('num1').value;

  var num2 = document.getElementById('num2').value;

  window.scrollBy(num1, num2);

  console.log('scrollX:' + window.scrollX);

  console.log('scrollY:' + window.scrollY);

}

これは現在位置からの移動

●javascript:void(0)

「：」プロトコル（通信規約、通信手順）[html:  、 ftp:　など]

<a href="javascript:alert('aaa')" onclick="moveScroll(0, 0)">

ページトップへ

</a>

・上記は「javascript:」と書くことでJSの処理のアラートが表示される

・「void(0)」はなにもさせない処理（今回はHTMLのリンク処理をなくしている）

・普通のリンク

href="https://www.youtube.com/"

・リンク押したページに戻れないリンク

href="javascript:location.replace('https://www.youtube.com/')"

↑こういったこと可能

●ページの一番上・左に戻すリンク

●HTML

<p id="pagetop">

  <a href="javascript:void(0)" onclick="moveScroll(0, 0)">

ページトップへ

</a>

</p>

●JS

 

function moveScroll(x, y) {

　x：0　←HTMLの記述

　y：0　←HTMLの記述

  window.scrollTo({

    top: y,

    left: x,

    behavior: 'smooth'

  });

  console.log('scrollX:' + window.scrollX);

  console.log('scrollY:' + window.scrollY);

}

関数定義

第1引数：横方向座標位置

第2引数：縦方向座標位置

戻り値：なし

●グローバル変数はWindowインスタンスのプロパティ

 

console.dir(window);

・Windowインスタンスをコンソールで確認
・オブジェクトを詳細に確認する際はconsole.dir(調べたいオブジェクト)

var str = 'みかん';

console.log(window.str);

console.log(str);

・今までやってきたが、「window.」は省略可能

●変数名「name」注意！

var name = ['ゆず', 'びわ'];

 

console.log(name);

console.log(name.length); ←5(部屋数じゃなくて文字数になってしまっている)

・Windowインスタンス内に画面の名前を管理する

・nameプロパティが元から存在している

・名前を管理するので文字列以外は管理できない

・新たに宣言したnameプロパティも同じルールが適用される

・文字列以外のデータ型の値を代入すると自動的に文字列型に型変換されてしまう

・ArrayインスタンスのtoStringメソッドを使って文字列に型変換される

　例)  ['ゆず','びわ']　→　'ゆず,びわ'

・配列は複数形の名前の変数にすることを心掛ける（今回だとnameListなど）

●履歴を残さずページ移動

location.replace('http://jobtech.jp/');

 

・replaceメソッド：履歴を残さずページ遷移

・第1引数：URLを文字列で指定

・戻り値：なし

●Historyオブジェクト

<div class="box">

  <p><a href="https://www.google.co.jp/">Google</a></p>

  <p><a href="javascript:void(0)" onclick="history.back();">戻る</a></p>

  <p><a href="javascript:void(0)" onclick="history.forward();">進む</a></p>

  <p><a href="javascript:void(0)" onclick="history.go(-3);">3ページ戻る</a></p>

  <p><a href="javascript:void(0)" onclick="history.go(3);">3ページ進む</a></p>

</div>

・履歴の戻るや進むボタンと同じ挙動

・ページが分岐した際に、戻る動作をするときに使える