Webデザインを知る

Webデザイン初心者による日々の勉強過程の記録です

［JavaScript］Locationオブジェクト / setTimeoutメソッド / DOM

JavaScript

［JavaScript］

　Locationオブジェクト

  • WebページのURLを情報としてもつオブジェクト
  • hrefプロパティの値に別のWebページのURLを入力する

［作成例］

f:id:webdesignbegineer:20151114115941p:plain

 

　setTimeoutメソッド

  • あらかじめ指定した時間後に、指定した処理を行わせる
  • 一定時間ごとに同じ処理を繰り返す
　　var 変数 = window.setTimeout('実行したい処理', '時間msec');

［作成例 その１］

f:id:webdesignbegineer:20151114120748p:plain

f:id:webdesignbegineer:20151114120947p:plain

［作成例 その２］

　タイマーが動き出しても他の処理は続行される

 

f:id:webdesignbegineer:20151114121318p:plain

［作成例 その３］

  • locationオブジェクトのreplace( )メソッドは、現在のページを、引数で指定したURLのHTMLドキュメントに入れ替える
  • 履歴の情報自体を入れ替える（戻るボタンで戻れない）

f:id:webdesignbegineer:20151114121956p:plain

f:id:webdesignbegineer:20151114122013p:plain

 

　DOM（Document Object Model）

  • HTML文書をオブジェクトとして読み込んで操作するための仕組み
  • Documentオブジェクトが持つ要素の構造そのもの、あるいはそれらにアクセスしたり操作したりする機能
  • ドキュメントをツリー構造で扱う

　　1. 要素名で要素を取得する

  • document.getElementsByTagName( );
  • document.getElementById( );

　　2. 要素の内容を取得する

  • innerHTMLプロパティを使う（オブジェクト名 . innerHTML）

［作成例 その１］

f:id:webdesignbegineer:20151114122408p:plain

f:id:webdesignbegineer:20151114122417p:plain

［作成例 その２］

f:id:webdesignbegineer:20151114123241p:plain

f:id:webdesignbegineer:20151114123308p:plain

f:id:webdesignbegineer:20151114123424p:plain

［作成例 その３］

f:id:webdesignbegineer:20151114123617p:plain

f:id:webdesignbegineer:20151114123623p:plain