2013-01-01から1ヶ月間の記事一覧
デジタル時計の作成 タイマー機能/li>一定時間ごとに処理を繰り返すwindowオブジェクトの「setTimeoutメソッド」を使用 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイマー</title> <style> input { width: 90px; font-size: 66px; font-family: monospace;/* [ monospace ]モノスペース </meta></head></html>…
DOMによる記述 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>デジタル時計</title> <style> #clock { width: 450px; background-color: #000; color: #fff; text-align: center; border: 10px solid #666; font-size: 90px; font-weight: bold; padding: 10px 20px; } </style> <script> va…</meta></head></html>
指定時間後に処理を実行 タイマーを使うと、一定周期で処理を繰り返すことができる setTimeoutメソッド：タイマーを開始する clearTimeoutメソッド：タイマーを停止する
ユーザー定義オブジェクトとは ユーザーがオリジナルのオブジェクトを ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ユーザー定義オブジェクト</title> <script> function Person(name, height){ this.name = name; this.height = height; } </script> </head> <body> <script> var friends = new Array(3); friends[0] = ne</body></html>…
ユーザー定義オブジェクト コンストラクタは、functionキーワードで定義する li>コンストラクタ内でプロパティに値を設定するには、「this . プロパティ名 = 値」と記述する
オブジェクトにメソッドを追加する prototypeプロパティを使用してオブジェクトにメソッドを定義する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>prototypeによるメソッドの追加</title> <script> function Person(name, height){ this.name = name; this.height = height; } function calc</meta></head></html>…
prototypeプロパティ ユーザー定義オブジェクトには、メソッドを追加できる メソッドを追加するには、prototypeプロパティに関数を代入する
既存のWebページをロードする ソースコード【 JavaScript 】 var win = window.open('http://google.co.jp', '', 'resizable=yes', 'width=600, height=400'); 引数１：URL 引数２：ウィンドウ名を指定しますが、通常は空 引数３：サイズ変更 引数４：幅（ピ…
windowオブジェクト 新規ウィンドウを開くには、windowオブジェクトのopenメソッドを使用する 新規ウィンドウにHTMLを出力するには、documentオブジェクトのopenメソッド、writeメソッド、closeメソッドの順に実行する
画像（イメージ）を操作する 画面をクリックするごとに別の画像が表示される ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>イメージの操作</title> <style> body { text-align: center; } </style> <script> var imgs; function init() { imgs = new Array(3); for(var i = 0;i <= (imgs.length - 1);i++) { </meta></head></html>…
関数の呼び出し onloadで呼び出しているのに、()が付いたり、付かなかったりする 関数についている名前（この場合はinit）は、関数を呼び出すときにも使えるが、関数をオブジェクトとして扱うときにも使える 例えば関数を呼び出すときの書式は ソースコード…
imageオブジェクト imageオブジェクト：ブラウザ内の画像を管理する imageオブジェクトの「srcプロパティ」に画像ファイルのパスを代入するとイメージを変更できる
《主なイベントハンドラ一覧》 イベントハンドラ 説明 onBlur ページやフォーム要素からフォーカスが外れた時に発生 onFocus ページやフォーム要素にフォーカスが当たった時に発生 onChange フォーム要素の選択、入力内容が変更された時に発生 onSelect テキ…
イベントハンドラの記述方法 HTML要素内でイベントハンドラを設定する（2013年時点では、外部に記述するよう推奨されている。） ダブルクォート内の記述はシングルクォートにする クリックされると func1関数を呼び出す ダイアログボックスを表示する イベン…
イベントハンドラ イベントの処理は、イベントハンドラで行う クリックすると呼び出される、onclickイベントハンドラ HTMLドキュメントが読み込まれたときに呼び出される、onloadイベントハンドラ
form部品のアクセス formオブジェクトの下位階層にある フォーム部品の活用 フォーム部品のアクセス ソースコード【 JavaScript 】 document.myForm.height.value myForm：formオブジェクト height：textオブジェクト value：valueプロパティ（テキストボッ…
]formオブジェクト valueプロパティ：textオブジェクトの文字列を設定・取得する checkedプロパティ：radioボタンがオンかどうかを判断する
☆★データーでの確認★☆新規ウィンドウを開く windowオブジェクトの openメソッドを使用 その戻り値は、生成されたwindowオブジェクトになる windowオブジェクトは、Webブラウザが自動的に生成するオブジェクト プログラム内で開いた「windowオブジェクト」の…
オブジェクトの階層構造 Webブラウザ上の主なオブジェクトには、windowオブジェクトを頂点とする階層構造がある navigatorオブジェクト 個々のウィンドウに依存しないオブジェクト 「for〜in文」を利用して、プロパティ一覧を表示する navigator . プロパテ…
platformプロパティ OSの情報を保持している OSによってメッセージを変更する indexOfメソッド 文字列の中に引数で指定した文字列が含まれているかどうかを調べるメソッド 見つかった場合は、文字列の先頭を「0」とした数値で位置を戻す 見つからない場合は…
Webブラウザのオブジェクト Webブラウザのオブジェクトには、階層構造がある navigatorオブジェクトを使用すると、Webブラウザに関する情報が得られる ユーザーのOSを調べるには、platformプロパティを参照する
イベントとは 何らかの状態が起こったときに生まれるメッセージのようなもの JavaScriptに用意されている「イベントハンドラ」という仕組みを使うと、このイベントを捕まえて適切な処理を行うことができる 注意 イベントハンドラは「script」内に記述する場…
☆★データーでの確認★☆乱数の発生 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>乱数の発生</title> </head> <body> <h1>乱数の発生</h1> <script> MAX = 10; var num; for(var i = 0;i < 10;i++){ num = Math.floor(Math.random() * (MAX + 1)); document.write(num,'<br>'); } </script> </body> </html>
☆★データーでの確認★☆画像のランダム表示 「img0〜img4」画像を準備する 「img1〜」の場合は、((Math.random()*numOfImg)+1)となる ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>イメージをランダムに表示する</title> <style> body { text-align: center; } </style> </head> <body> <h1>今日のイメージ</h1> <script> // 「img0〜</body></html>…
☆★データーでの確認★☆おみくじ 大吉・中吉・小吉・凶がランダムに表示する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>おみくじ</title> <style> body { background: url(images/omikuji.gif); } </style> </head> <body> <h1>あなたの今日の運勢</h1> <script> // 配列imagesにイメージファイルのパスを入れておく var images = </body></html>…
IE6透過PNG対応策は「DD_belatedPNG.js」 読み込んで使うだけなので、「mini」を選択 配布元：DillerDesign 条件コメント 「透過PNG」をIE6で表示させるために以下の「JSファイル」を利用する。 ダウンロードしたファイルを、「透過PNG」をIE6で表示させたい…
IE Tester IE6対策 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <style> body { background: url(img/02.jpg); text-align: center; } </style> </head> <body> <p><img src="img/kotobuki.png"></p> </body> </html> ブラウザで表示 IE Testerで表示 透過PNGが適応されていない
IE Tester IE6透過PNG対応策は「DD_belatedPNG.js」 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>IE6透過PNG対応策は「DD_belatedPNG.js」</title> <style> body { background: url(img/02.jpg); text-align: center; } </style> </meta></head></html>
連想配列 配列の場合「０」から始まる添字で要素を指定しましたが意味的な関連性はない 添字の代わりに、「キー」と呼ばれる文字列で要素を指定 連想配列は、「Objectオブジェクト」というオブジェクトとして扱う 連想配列の生成 new演算子とObjectコンスト…
連想配列名（キー）として要素を指定する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>連想配列</title> </head> <body> <script> var colors = new Object(); colors['white'] = '白色'; colors['red'] = '赤色'; colors['green'] = '緑色'; colors['yellow'] = '黄色'; for(var eigo in colors){ docume</body></html>…
