JavaScript
☆★データーでの確認★☆kamome.js ウェブサイトに設置できるシンプル・軽量なスライドショープログラム kamome.js ファイルをダウンロード 対応ブラウザ : Internet Explorer 6-9, Firefox, Safari, Opera, Google Chrome kamome.js slideshow はスタンドアロ…
☆★データーでの確認★☆単純なJavaScript マウスが乗ったとき(Over)、マウスが離れたとき(Out)を使う > onMouseOver="this.src='images/◎◎.jpg'" onMouseOut="this.src='images/◎◎.jpg'" ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>単純なJavaScript</title> <style> * { margin: 0; padding</meta></head></html>…
☆★データーでの確認★☆サムネールで画像置換 サムネイル画像とメイン画像は別々のサイズで準備をする ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ソファーのあるインテリア</title> <style type="text/css"> </meta></head></html>
フォームの基本形 基準となる基本をつくりカスタマイズしていく ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームとテーブルでマークアップする</title> <style type="text/css"> body { font-size: 75%; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-ser</meta></head></html>…
必須項目にフォーカス 送信した後の記入された項目を自動で削除する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォーカス時のスタイルを指定する</title> <link rel="stylesheet" href="css/style.css" media="screen,print"> </head> <body> <form action="#" method="POST" id="inquiry"> </form></body></html>
フォーカス時、初期表示のテキストが消える ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScript：入力フィールドの初期値を消す</title> <style> p.field input{ color:#999; } </style> <script> var nameField = 'お名前を入力して下さい'; var mailField = 'メールアドレスを入力して下さい'; functi</meta></head></html>…
フォームの入力チェック フォーム内の入力を確認して、未記入の場合アラートでお知らせ ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームの入力チェック</title> <style> th { text-align: right; font-weight: normal; vertical-align: top; } </style> <script> function check(){ myField=document.m</meta></head></html>…
パスワード認証 パスワード.htmlを作成しておく robots.txtも同時に設定しないとセキュリティの問題が残ってしまう ソースコード【 HTML 】 <html> <head> <meta charset="UTF-8"> <title>課題7 パスワード認証</title> <script> function secret(){ password=document.myForm.pass.value location.href ='secret/' + </script></meta></head></html>…
Scratch 想像 • プログラム • 共有ソフト ゲーム感覚でプログラムをおぼえる MIT プログラミン Scratchの日本版 文部科学省
デジタル時計の作成 タイマー機能/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プロパティを参照する
