ch31.dvi

Size: px

Start display at page:

Download "ch31.dvi"

あゆみまるこ
7 years ago
Views:

1 ( ) ( 1.1 ): [ ] [ ] CPU[ + ] [ ] CPU( ) ( 1

2 : ( 1.1 ): ( ) [ ] ( )[ ] + ( ) (+ ) ( ) ( )

3 : ( ) ( ) ( 1.2)

4 : 120m/ (432km/h) 0.5 2m/ 1 ( 1 ) ( ) ( ) ( 1.3)

5 : ( )

6 6 1 1 ( 1.4) HTML JavaScript <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>experiment: motion time</title> <style type="text/css"> p { background: rgb(180,200,255); padding: 2mm div { margin: 5mm; padding: 5mm #box { width: 100px; height: 100px; border: solid black 4px #panel { background: rgb(150,255,200); </style> <script type="text/javascript"> var time = -1; function start() { document.getelementbyid( box ).style.background = white ; var delay = Math.floor(3000 * Math.random()); settimeout(change, delay); function change() { document.getelementbyid( box ).style.background = red ; time = new Date().getTime(); function stop() { var t1 = new Date().getTime(); var p0 = document.getelementbyid( message ); var a0 = document.getelementbyid( area ); if(time < 0) { p0.innerhtml = ; else { var t2 = t1 - time; time = -1; p0.innerhtml = + t2 + msec ; a0.value += t2 + \n ; </script> </head> <body> <h1> </h1>

7 <p> </p> <div id="box"></div> <div id="panel"> <button onclick="start()"> </button> <button onclick="stop()"> </button> <p id="message"> </p> <textarea id="area" rows="20" cols="20"></textarea> </div> </body> </html> start() 3 6 change() change() time ( ) stop() time ( ) (HTML+JavaScript)

8 : ( 1.5): ( ) (7 2 ) ( ) 7 7

1.1. 9 1.6: ( 1.6) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.

9 : ( 1.6) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>experiment: recognition time</title> <style type="text/css"> p { background: rgb(180,200,255); padding: 2mm div { margin: 5mm; padding: 5mm #disp { width: 100px; height: 1em; border: solid black 4px #disp { text-align: center #panel { background: rgb(150,255,200) </style> <script type="text/javascript"> var str = abcdefghijklmnopqrstuvwxyz ;

10 10 1 var ans = null, count = 0; function start() { document.getelementbyid( i1 ).value = ; count = parseint(document.getelementbyid( i0 ).value); ans = ; settimeout(show, 500); function show() { if(ans.length < count) { var char = str.charat(math.floor(str.length * Math.random())); document.getelementbyid( disp ).innerhtml = char; ans += char; settimeout(show, 500); else { document.getelementbyid( disp ).innerhtml = ; document.getelementbyid( mesg ).innerhtml = ; function answer() { var c1 = document.getelementbyid( i1 ).value; var p0 = document.getelementbyid( mesg ); var a0 = document.getelementbyid( area ); if(ans == null) { p0.innerhtml = ; else { var result = (ans == c1)? OK : NG ; ans = null; p0.innerhtml = result + ; a0.value += count +, + result + \n ; </script> </head> <body> <h1> </h1> <p> </p> <h1 id="disp">?</h1> <div id="panel"> :<input id="i0" size="5" value="5"> <button onclick="start()"> </button><br> ( )<input id="i1" size="10"> <button onclick="answer()"> </button> <p id="mesg"> </p> <textarea id="area" rows="20" cols="20"></textarea> </div> </body>

11 </html> : start() count 0.5 show() show() count ans 0.5 show() count answer() (ans null ) OK (HTML+JavaScript) ( )

12 : ( 1.7) 2 3 ( ) 3

13 ( 1.8) 100% 0% <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>experiment: recognition time</title> <style type="text/css"> p { background: rgb(180,200,255); padding: 2mm div { margin: 5mm; padding: 5mm #box { width: 400px; height: 400px; border: solid black 4px #disp { visibility: hidden; position: relative #panel { background: rgb(150,255,200) </style> <script type="text/javascript"> var str = abcdefghijklmnopqrstuvwxyz ; var chr = null, dur = 0; function start() { var delay = Math.floor(3000 * Math.random()); settimeout(show, delay); function show() { dur = parseint(document.getelementbyid( time ).value); chr = str.charat(math.floor(str.length * Math.random())); var xpos = Math.floor(380 * Math.random()); var ypos = Math.floor(380 * Math.random()); var d = document.getelementbyid( disp ); d.style.left = xpos + px ; d.style.top = ypos + px ; d.innerhtml = chr; d.style.visibility = visible ; settimeout(hide, dur); function hide() { document.getelementbyid( disp ).style.visibility = hidden ; document.getelementbyid( mesg ).innerhtml = ; function ans() { var c1 = document.getelementbyid( answer ).value; var p0 = document.getelementbyid( mesg ); var a0 = document.getelementbyid( area ); if(chr == null) { p0.innerhtml = ; else {

14 :

15 var result = (chr == c1)? OK : NG ; chr = null; p0.innerhtml = + dur + msec, + result + ; a0.value += dur +, + result + \n ; </script> </head> <body> <h1> </h1> <p> </p> <div id="box"><div id="disp">?</div></div> <div id="panel"> :<input id="time" size="5" value="100"> <button onclick="start()"> </button> <input id="answer" size="5"> <button onclick="ans()"> </button> <p id="mesg"> </p> <textarea id="area" rows="20" cols="20"></textarea> </div> </body> </html> : start() 3 6 show() show() dur 1 chr x y dur hide() hide ans() (HTML+JavaScript)

16 ( ) 1 ( ) ( 1.9) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>experiment: recognition time</title> <style type="text/css"> p { background: rgb(180,200,255); padding: 2mm

17 : div { margin: 5mm; padding: 5mm #box { width: 400px; height: 50px; border: solid black 4px #move { position: relative; background: blue; #move { height: 5px; width: 5px; top: 0px; left: 0px #panel { background: rgb(150,255,200) </style> <script type="text/javascript"> var target = null, dur = 100, ypos = 10, vy = 100; function set() { dur = parseint(document.getelementbyid( time ).value); document.getelementbyid( move ).style.background = document.getelementbyid( color ).value; function step() { if(target == null) target = document.getelementbyid( move ); ypos = ypos + dur * vy * 0.001; target.style.left = Math.floor(ypos) + px ; if(ypos < 20 && vy < 0 ypos > 320 && vy > 0) vy = -vy; settimeout(step, dur); </script>

18 18 1 </head> <body onload="step()"> <h1> </h1> <p> ( ) </p> <div id="box"><div id="move"></div></div> <div id="panel"> :<input id="time" size="3" value="100">ms :<input id="color" size="15" value="rgb(0,0,255)"> <button onclick="set()"> </button> </div> </body> </html> : set() dur step() (body onload=... ) dur step() target ( ) Y (0.001 / / ) Y / ( ) 1 (HTML+JavaScript) (rgb(250,255,255) )

JavaScript 演習 2 1

JavaScript 演習 2 1 本日の内容演習問題 1の解答例前回の続き document.getelementbyid 関数演習問題 4 イベント処理基本的なフォームテキストボックスの入力値の取得演習問題 5 演習問題 1 prompt メソッドと document.write メソッドを用いて, ユーザから入力されたテキストと文字の色に応じて, 表示内容を変化させる JavaScript