Recommended
More Related Content
More from Chitose Institute of Science and Technology.
More from Chitose Institute of Science and Technology. (11)
Recently uploaded
Recently uploaded (7)
2013sguヒューマンインターフェース論006
- 3. JavaScriptの特徴（ルール） （p.9） 文の末尾にはセミコロンが記述。 var foods=[‘りんご’, ‘バナナ’, ‘みかん’]; コードブロックは中カッコで囲まれる。 for (var i in foods){…} 変数はvarというキーワードによって宣言する。 var foods=[‘りんご’, ‘バナナ’, ‘みかん’]; for (var i in foods){…} 13年5月20日月曜日
- 6. JavaScriptの特徴（ルール） （p.9） 配列要素にアクセスするには角カッコ間にインデックス を指定。 var foods=[‘りんご’, ‘バナナ’, ‘みかん’]; インデックスの値はゼロから始まる。 for (var i in foods){…} 13年5月20日月曜日
- 7. JavaScriptの特徴（ルール） （p.9） 配列要素にアクセスするには角カッコ間にインデックス を指定。 var foods=[‘りんご’, ‘バナナ’, ‘みかん’]; インデックスの値はゼロから始まる。 for (var i in foods){…} 「iが1つ目、2つ目、…」× 13年5月20日月曜日
- 8. JavaScriptの特徴（ルール） （p.9） 配列要素にアクセスするには角カッコ間にインデックス を指定。 var foods=[‘りんご’, ‘バナナ’, ‘みかん’]; インデックスの値はゼロから始まる。 for (var i in foods){…} 「iが1つ目、2つ目、…」×「iが0つ目、1つ目、…」○ 13年5月20日月曜日
- 9. JavaScriptの特徴（ルール） （p.9） 変数への値の代入は=を使用。 var foods=[‘りんご’, ‘バナナ’, ‘みかん’]; 2つの値が等しいかどうかを調べるには==を使用。 if (foods[i] == ‘りんご’){…} +は文字列の連結にも使われる。 alert(foods[i] + ‘は大好きです！’); 13年5月20日月曜日
- 10. JavaScriptを用いたページ内の 構成要素変更の例（p.10）第2章 例1−9： <html> <head> <meta charset="shift_JIS"> <title>私の素敵なページ</title> <script type = "text/javascript"> function sayHello() { document.getElementById('foo').innerHTML='こんにちは！'; } </script> </head> <body> <h1 id="foo" onclick="sayHello()">クリックしてみて！</h1> </body> </html> ドキュメント内のfooというIDの要素を探し、 そのコンテンツ(innerHTML)を ‘こんにちは！’に 書き換える。 13年5月20日月曜日
- 11. JavaScriptを用いたページ内の 構成要素変更の例（p.10）第2章 例1−9： <html> <head> <meta charset="shift_JIS"> <title>私の素敵なページ</title> <script type = "text/javascript"> function sayHello() { document.getElementById('foo').innerHTML='こんにちは！'; } </script> </head> <body> <h1 id="foo" onclick="sayHello()">クリックしてみて！</h1> </body> </html> ドキュメント内のfooというIDの要素を探し、 そのコンテンツ(innerHTML)を ‘こんにちは！’に 書き換える。 fooというIDを与える。 クリック（onclick）されたら “sayHello”関数を実行する。 他のイベントハンドラを試してみては？ http://w3g.jp/xhtml/dic/event 13年5月20日月曜日
- 15. jQuery（p.11） 準備 jQueryをポータルサイト掲示板よりダウンロード。 ファイル名はjquery.jsに変更済み。 HTMLファイルと同一階層に配置する。 13年5月20日月曜日
- 16. jQueryの基本形 「なにを（セレクター）、どうする（メソッド）」 $(function(){ $( ‘セレクター’ ).jQueryメソッド }); なにを どうする 13年5月20日月曜日
- 17. jQueryの基本形 「なにを（CSSセレクター）、どうする（メソッド）」 function sayHello() { $('#foo').text('こんにちは！'); } なにを どうする 13年5月20日月曜日
- 18. jQueryの基本形 「なにを（CSSセレクター）、どうする（メソッド）」 function sayHello() { $('#foo').text('こんにちは！'); } なにを どうするid “foo”を ‘こんにちは！‘という文字列にする 13年5月20日月曜日
- 19. CSSを思い出す（p.6） body{ color:red; } セレクタ: HTML上のスタイル の適用対象。（何処の） プロパティ: 色やフォントサイズ などのスタイル要素。（何を） 値: 色やフォントサイズなどの値。 （どうする） jQueryはCSSのイメージに近い 13年5月20日月曜日
- 20. jQuery（p.11） 例1-10：例1-9を変更する。 <html> <head> <meta charset="shift_JIS"> <title>私の素敵なページ</title> <script type = "text/javascript" src=”jquery.js”></ script> <script type = "text/javascript"> function sayHello() { $('#foo').text('こんにちは！'); } </script> </head> <body> <h1 id="foo" onclick="sayHello()">クリックしてみて！</h1> </body> </html> JavaScriptライブラリであるjuery.jsを読込む。 CSSセレクタ メソッド： Attributer：属性に関するメソッド Manipulation：要素に関するメソッド CSS：CSSに関するメソッド Effects：エフェクト効果に関するメソッド 13年5月20日月曜日
- 25. はじめの一歩（p.16-17） iPhone用のスタイルシート（補足）：p.16-17 <link rel="stylesheet" type="text/css" href="iphone.css” media="only screen and (max-width: 480px)"/> Media Query: Media Typeの拡張 Media Type：all, aural, braille, handheld, print, projection, screen, tty, tv （http://w3g.jp/xhtml/dic/link#media参照） 13年5月20日月曜日
- 26. はじめの一歩（p.16-17） iPhone用のスタイルシート（補足）：p.16-17 <link rel="stylesheet" type="text/css" href="iphone.css” media="only screen and (max-width: 480px)"/> Media Feature: （例）width, min-width, max-width view port の横幅、つまりウィンドウの横幅 min-: 以上, max-: 以下の意味 （例）max-width: 480px→ウィンドウの横幅が 480px以下の場合 13年5月20日月曜日
- 27. はじめの一歩（p.16-17） iPhone用のスタイルシート（補足）：p.16-17 <link rel="stylesheet" type="text/css" href="iphone.css” media="only screen and (max-width: 480px)"/> 「（コンピュータやiPhoneなどの）スクリーン “で(and)”480PX以下（max-width）」 （その時は）cssである（ “text/css” ）、 “iphone.css”を使います。 13年5月20日月曜日