ラベル 【javascript】練習 の投稿を表示しています。 すべての投稿を表示
ラベル 【javascript】練習 の投稿を表示しています。 すべての投稿を表示

2012-02-23

時刻を表示 【javascript】

参考サイト
とほほのJavaScriptリファレンス』動く時計を表示してみよう

★js側
function jikoku() {
dd =new Date();
document.F1.T1.value= dd.toLocaleString();
window.setTimeout("jikoku()",1000);
}


★htnl側
<body onload="jikoku()">
<form name="F1" action="#">
<input name="T1" type="text" size="50" >
</form>
</body>


前回のおさらい→をふまえて、わからないところ↓
★js側
function jikoku() {
dd =new Date();
document.F1.T1.value= dd.toLocaleString();
window.setTimeout("jikoku()",1000);
}

document.F1.T1.value…ドキュメントオブジェクトのフォームの操作

document.フォームの名前.インプットの名前.value

フォームのvalueに値を入れている

windowオブジェクト→こちら

window.setTimeout(関数,時間);…windowオブジェクトのメソッド
一定時間経過した後に関数を実行

1000…1000ミリ秒→1秒 関係ないけど、1分は×60=60000ミリ秒
※『ミリ秒』…時間の単位



◆フォームを使わない方法



調べてもif文とか使わないといけないのかと思ったが、できました。

とっても参考→人力検索はてな


★html側
<body onload="jikoku()">
<div id="time"></div>
</body>


★js側
function jikoku() {
dd =new Date();
document.getElementById("time").innerHTML=dd.toLocaleString();
setTimeout("jikoku()",1000);
}


document.getElementById(ID)…指定したIDの参照や更新

innerHTML…取得や置き換え※functionに入れないと駄目だょ


▼指定したIDの中身を別のIDにもコピーする
function gogo(){
tt=document.getElementById("boxa");
document.getElementById("inbox").innerHTML = ("これは"+ tt.innerHTML +"です。");
}


ちなみに、
document.getElementById→("ID")

document.getElementByTagName→("要素")


document.getElementByName→("name")



さらに、IEでしか使えない『document.all』のかわりに、
document.getElementByTagName→("*")が使えるらしい



----------------参考サイト--------------------
・システムエンジニアのスキルアップ
http://itref.fc2web.com/javascript/document.html

・指定IDのエレメント取得 - JavaScriptリファレンス
http://javascriptist.net/ref/document.getelementbyid.html

解説…?
http://www.gifu-nct.ac.jp/elcon/labo/fukunaga/edu/1d/jssample/s_tokei/kaisetsu.html

今まで使ったオブジェクト 【javascript】

◆windowオブジェクト


すべてのオブジェクトの親となるオブジェクト。

アラート出したり、新規ウィンドウ開いたり閉じたりなど



◆documentオブジェクト


★メソッド
document.write();…文字列の表示
document.open();…新しいドキュメントの作成
document.write();…文字列の表示と改行される(ドキュメント・ライトライン)
document.clear();…削除
document.close();…閉じる


オブジェクト・プロパティ・メソッドどうやって使うの?
こんがらがったらこちら→わかりやすいサイト(オブジェクト、メソッド、プロパティについて



--------------とっても親切参考サイト------------------------
JavaScript documentオブジェクト
http://itref.fc2web.com/javascript/document.html

2012-02-22

javascriptの勉強をはじめる

◆javascriptを勉強するにあたって必要なもの

テキストエディタブラウザ



★document.write→(ドキュメント・ライト)文字列を書き出す
document.write("★★");


画像もかきだせる。
その場合はimgタグの『”(ダブルクォーテーション)』を
『’(シングルクォーテーション)』にする。もしくはその反対。

記号について→


document.write("text");
document.write("<img src='イメージ.jpg'>");


document.write("text");
document.write('<img src="イメージ.jpg">');

※イメージのパスはHTML側から読み込むパス



▼日本語の文字化け▼
テキストエディタで【jsファイル】を開いて
【UTF-8】で再度読み込み、日本語文字化け部分を再度入力

▼タグをいれるときの注意点▼
たとえば、<p>タグをいれたい。
document.writeln("<p>テキスト</p>");
↑こう入れても表示上問題はないがだめらしい。

終了タグの中に『¥』をいれるらしい。
document.writeln("<p>テキスト<\/p>");



これらは、documentオブジェクト→




◆今からやること

・ページを開いたときの時刻の表示


参考サイト
とほほのJavaScriptリファレンス


dd= new Date();
document.write(dd.toLocaleString());



ddって箱にnew Date();入れてね(変数)

new Date();
現在の時間を取り出す(Dateオブジェクト)
日付時間などを操作したいとき

.toLocaleString()
Dateオブジェクトのメソッド

メソッドとは?
~オブジェクト指向プログラミングにおいて、各オブジェクトが持っている自身に対する操作。~
IT用語辞典より


ということは、メソッドをとってみると…

dd= new Date();
document.write(dd);


2012年2月22日 18:04:13
↓↓↓
Wed Feb 22 2012 17:54:02 GMT+0900
(曜日/月/日付/年/時間/基準時間より9時間)

脱線(GMT(グリニッジ標準時)って?




メソッドをかえてこんなことも簡単にできる。

▼開催まであと○日!
dd= new Date(); document.write(29-dd.getDate()); 
※日付のみを参照

開催日が29日だとして、(今現在は23日)表示されるのは『6日』となる



-----------------------------------------------------

とてもわかりやすいサイト
http://www.artemis.ac/contents/javascript/jsdate.htm

メソッドの一覧
http://www.scollabo.com/banban/java/ref_15.html


※new Date を→ Date のみにすると、同じように表示されるが、
まったくの別物なので、メソッドは使えなくなる。

アマゾン和書/最新の情報