ch31.dvi

Similar documents
JavaScript 演習 2 1

JavaScript演習

JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID

SVG資料第6回目(その3) SVGとHTMLの間でデータを交換する

JavaScript 1.! DOM Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2

PowerPoint Presentation

サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out

JavaScript演習

経営論集2011_07_小松先生.indd

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動

padding( パディング ) padding プロパティでボックスの内側の余白を指定します この部分の内側には背景 ( 背景色や背景画像 ) を表示できます border( ボーダー ) border プロパティでボックスの境界線を指定します ボーダーには色 太さ 線の種類を指定できます 画像で

07_経営論集2010 小松先生.indd

about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理

サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT

6 2 1

ProVisionaire Control V3.0セットアップガイド

JavaScript の使い方

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ

画像 images/ SpaceShuttle.png を指定します <!DOCTYPE html> <html> <head> <title>circleanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/

_勉強会_丸山さつき_v3

Web プログラミング 1 JavaScript (4) (4 章 ) 2013/7/17( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5

CSS

インターネットマガジン2000年9月号―INTERNET magazine No.68

カンペキな初心者のための、Adobe® AIR™の基礎の基礎

インターネットマガジン1999年7月号―INTERNET magazine No.54

ホームページ制作 基礎編 (HTML5 CSS3 コーディング )

MorphAndTextAnime の説明 HTML の記述 (MorphAndTextAnime.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中につぎの記述をします id 属性 div2

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime01.css"> </hea

(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis >

第6回 CSS入門(つづき)

Web データ管理 HTML+CSS (3) (2 章 ) 2011/10/19( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/23

3 3.1 SSedit ua012345% ssedit SuperSQL config.ssql log.txt( logs.txt) SSedit SSedit 3.2 ssql Putty SSedit ua012345% ssql HTML /public html/ssql.ssql 4

CSSNiteLP51-s7-kubo.key

MovingTextsAnime1 の説明 HTML の記述 (MovingTextsAnime1.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作り その中にボックスやテキストを記述します id 属性 div1 のdiv 要素から id 属性 div

untitled


SVG資料第10回目(その2) Ajaxによる同期通信と非同期通信の違い

【お試し版】Web制作者のためのCSS設計の教科書(非売品)

インターネットマガジン2001年2月号―INTERNET magazine No.73


年刊EDP 2003

スタイルシートでデザインを整えよう


Transcription:

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

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

1.1. 3 1.2: ( ) ( ) ( 1.2)

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

1.1. 5 1.1.2 1.4: ( )

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 = 3000 + 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>

1.1. 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 300 600 ( ) (HTML+JavaScript)

8 1 1.5: 1000 1 ( 1.5): ( ) (7 2 ) ( ) 7 7

1.1. 9 1.6: ( 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 = abcdefghijklmnopqrstuvwxyz0123456789 ;

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>

1.2. 11 </html> : start() count 0.5 show() show() count ans 0.5 show() count answer() (ans null ) OK (HTML+JavaScript) 1000 1 1.2 1.2.1 ( )

12 1 1.7: ( 1.7) 2 3 ( ) 3

1.2. 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 = abcdefghijklmnopqrstuvwxyz0123456789 ; var chr = null, dur = 0; function start() { var delay = 3000 + 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 1 1.8:

1.2. 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 0 380 dur hide() hide ans() (HTML+JavaScript)

16 1 10 1.2.2 1.2.3 ( ) 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

1.2. 17 1.9: 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 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 / 30 40 ( 30 25 ) 1 (HTML+JavaScript) (rgb(250,255,255) )