- PDF 無料ダウンロード

Size: px

Start display at page:

Download "5.3............................... 22 5.4..................................... 26 5.5.................................. 28 5.6........................"

しょうこえいさか
7 years ago
Views:

1 JavaScript JavaScript JavaScript JavaScript JavaScript HTML HTML

2 A JavaScript (JSWorkbench) 34 B Firefox 35 C Firefox 38 C C.2 JavaScript

3 1 JavaScript JavaScript JavaScript 2 JavaScript 2.1 JavaScript JavaScript Web JavaScript Web JavaScript HTML Web HTML JavaScript JavaScript JavaScript 2.2 JavaScript JavaScript HTML <script> </script> HTML // <head></head> <body> <script type="text/javascript"> // </script> 2.3 JavaScript JavaScript HTML Web HTML hello.html ( ) Web <head></head> 3

4 <body> <script type="text/javascript"> // Hello document.write( Hello ); </script> Web document.write 2.4 () document.write Hello " "Hello" (,) [ 1] Web 2.4 JavaScript (function) JavaScript JavaScript JavaScript y = 3x + 4 x func(x) y = func(x) = 3x + 4 JavaScript function func(x) { return 3 * x + 4; func return JavaScript * 8 6 / 2 7 %

5 func(1) 1 (x = 7 ) func(1) 7 [ 2] 3 ( mod3 ) ( ) mod3 function mod3(x) { return ( x 3 ) ; 2.5 = = var i 3 var i = 3; var x = 2; var y = x; var z = x + 1; y x 2 z x (2) 1 3 ( ) (") 2.6 var string1 = "Hello"; var string2 = ; 2.6 Web document.write 5

6 document.write Web <head></head> <body> <script type="text/javascript"> // func function func(x) { return 3 * x + 4; // result 1 var result = func(1); // result document.write( func(1) =, result); </script> Web func(1) = 7 func(1) 1 Web 1 2, 3 [ 3] x JavaScript 2 y = 3x 2 + 4x + 5 [ 4] 2 mod (func) Web for for for ( = ; ; ) { { 6

7 (func) for // func function func(x) { return 3 * x + 4; // var x; for (x = 1; x <= 10; x = x + 1) { var result = func(x); document.write( func(, x, ) =, result, <br> ); <br> HTML x [ 5] JavaScript document.write func funcwrite // func function func(x) { return 3 * x + 4; // func function funcwrite(x) { var result = func(x); document.write( func(, x, ) =, result, <br> ); funcwrite 1 10 // func function func(x) { return 3 * x + 4; // func 7

8 function funcwrite(x) { var result = func(x); document.write( func(, x, ) =, result, <br> ); // var x; for (x = 1; x <= 10; x = x + 1) { funcwrite(x); [ 6] n (n!) n 1 n n! = n (n 1) 2 1 n n! { 1 (n = 1 ) f actorial(n) = n factorial(n 1) ( ) n 1 1 n * factorial(n - 1) JavaScript function factorial(n) { if (n <= 1) { return 1; else { return n * factorial(n - 1); 1 if 1 factorial if if ( ) { else { 8

9 a < b // a b a <= b // a b a > b // a b a >= b // a b a == b // a b a!= b // a b a b if else [ 7] n fib n fib 0 = 0 fib 1 = 1 fib n = fib n 1 + fib n 2 (n >= 2 ) n n (fib) 20 ( ) n (fib) function fib(n) { if (n <= 0) { return 0; else if (n == 1) { return 1; else { return fib(n - 1) + fib(n - 2); 2.10 for (repeat) function repeat(f, start, end) { var i; for(i = start; i <= end; i = i + 1) { f(i); for f(i) repeat (f ) i repeat 9

10 // func function func(x) { return 3 * x + 4; // func function funcwrite(x) { var result = func(x); document.write( func(, x, ) =, result, <br> ); function repeat(f, start, end) { var i; for(i = start; i <= end; i = i + 1) { f(i); // repeat(funcwrite, 1, 10); [ 8] 6 repeat 2.11 for if ( ) π = 4( ) ( ) n n S(n) n S(n) = n 1 n 4 = sig(i) 2i 1 i=1 10

11 { 1 (i ) sig(i) = 1 (i ) Σ S(n) function S(n) { var Sn = 0; var i; for (i = 1; i <= n; i++) { Sn = Sn + sig(i) * 4 / (2 * i - 1); return Sn; function sig(i) { if (i % 2 == 1) { return 1; else { return -1; S 1 S(n) Sn 0 Sn i 1 n for i Σ for sig sig if i Sn = Sn + sig(i) * 4 / (2 * i - 1); Σ Sn sig(i) * 4 / (2 * i - 1) Sn document.write(s(100000)) S [ 9] π 10 i i i JavaScript Math.pow(10, i) 11

12 3 HTML JavaScript Web 3.1 HTML button <button> </button> button onclick Hello <button onclick="alert( Hello )"> </button> alert JavaScript button " alert [ 10] <head> <title> </title> </head> <body> <button onclick="alert( )"> </button> alert <head> <title> </title> <script type="text/javascript"> function greet(x) { alert(" " + x + " "); </script> </head> 12

13 <body> <button onclick="greet( )"> </button> [ 11] (π) 3.2 HTML JavaScript document.write alert JavaScript HTML HTML <head> <title>span </title> </head> <body> <p> <span id="output"> </span></p> p span span span id output JavaScript id span JavaScript span <head> <title>span </title> <script type="text/javascript"> function test() { var output = document.getelementbyid("output"); output.innerhtml = " "; </script> </head> <body> <button onclick="test()"> </button> <p> <span id="output"> </span></p> 13

14 test test document.getelementbyid id output HTML span out out.innerhtml span test HTML <p> <span id="output"> </span></p> innerhtml HTML var output = document.getelementbyid("output"); output.innerhtml = "<b> </b>"; [ 12] (π) HTML input input HTML <head> <title>input </title> </head> <body> <p> : <input type="text" id="input" /></p> input type text type text checkbox JavaScript id input value <head> <title>input </title> <script type="text/javascript"> function test() { var input = document.getelementbyid("input"); 14

15 // input var text = input.value; var output = document.getelementbyid("output"); output.innerhtml = text; </script> </head> <body> <p><button onclick="test()"> </button></p> <p> : <input type="text" id="input" /></p> <p> : <span id="output"></span></p> [ 13] <head> <title>input </title> <script type="text/javascript"> function greet() { var input = document.getelementbyid("input"); // input value var text = input.value; var output = document.getelementbyid("output"); output.innerhtml = " " + text + " "; </script> </head> <body> <p><button onclick="greet()"> </button></p> <p> : <input type="text" id="input" /></p> <p><span id="output"></span></p> JavaScript (Number) Number 15

16 <head> <title> </title> <script type="text/javascript"> var str = "10"; var num = Number(str); document.write(" : ", str + 1, "<br/>"); document.write(" : ", num + 1, "<br/>"); </script> </head> <body> "10" Number "10" (= ) Number NaN(Not a Number) Number("10.0.1") NaN 10 NaN <head> <title> </title> <script type="text/javascript"> function add() { var input1 = document.getelementbyid("input1"); // input1 value var text1 = input1.value; // var num1 = Number(text1); // input2 var input2 = document.getelementbyid("input2"); var text2 = input2.value; var num2 = Number(text2); // var sum = num1 + num2; // var output = document.getelementbyid("output"); output.innerhtml = sum; </script> </head> <body> <p><button onclick="add()"> </button></p> <p><input type="text" id="input1" /> + <input type="text" id="input2" /> = <span id="output"></span></p> 16

17 NaN [ 14] select option <select id="op"> <option value="+"> </option> <option value="*"> </option> </select> JavaScript id op HTML value option value (+, * ) <head> <title> </title> <script type="text/javascript"> function calculate() { var input1 = document.getelementbyid("input1"); // input1 value var text1 = input1.value; // var num1 = Number(text1); // input2 var input2 = document.getelementbyid("input2"); var text2 = input2.value; var num2 = Number(text2); // HTML var op = document.getelementbyid("op"); // var optext = op.value; // NaN var result = NaN; if (optext == "+") { result = num1 + num2; else if (optext == "*") { result = num1 * num2; // var output = document.getelementbyid("output"); output.innerhtml = result; </script> </head> 17

18 <body> <p><button onclick="calculate()"> </button></p> <p><input type="text" id="input1" /> <select id="op"> <option value="+"> </option> <option value="*"> </option> </select> <input type="text" id="input2" /> = <span id="output"></span></p> [ 15] (+, -, *, /) settimeout settimeout ( ) <head> <title>settimeout </title> <script type="text/javascript"> function test() { var input = document.getelementbyid("input"); // input value var text = input.value; var output = document.getelementbyid("output"); // text output.innerhtml = " " + text + " "; function testdelay() { settimeout(test, 1000); </script> </head> <body> <p><button onclick="testdelay()"> </button></p> <p> : <input type="text" id="input" /></p> <p><span id="output"></span></p> testdelay testdelay test 1 (= 1000 ) settimeout test 18

19 id input id output [ 16] input value 1000 <head> <title> </title> <script type="text/javascript"> function test() { var input = document.getelementbyid("input"); // input value var text = input.value; var output = document.getelementbyid("output"); // text output.innerhtml = " " + text + " "; function testdelay() { // var delay = document.getelementbyid("delay"); var delaytime = Number(delay.value); settimeout(test, delaytime); </script> </head> <body> <p><button onclick="testdelay()"> </button> <input type="text" id="delay" value="1000" />( )</p> <p> : <input type="text" id="input" /></p> <p><span id="output"></span></p> 4.2 settimeout settimeout <head> <title> </title> <script type="text/javascript"> function countdown() { 19

20 // var delaynode = document.getelementbyid("delay"); var delay = Number(delayNode.value); // var countnode = document.getelementbyid("count"); var count = Number(countNode.value); var output = document.getelementbyid("output"); function next() { // output.innerhtml = count; if (count > 0) { // count = count - 1; settimeout(next, delay); // next next(); </script> </head> <body> <p> : <input type="text" id="count" value="10" /> : <input type="text" id="delay" value="100" />( )</p> <p><button onclick="countdown()"> </button></p> <p><span id="output"></span></p> countdown countdown next next 0 settimeout next next (count, output ) [ 17] 1 5 JavaScript 5.1 ( ) span 20

21 HTML JavaScript style position: absolute HTML (x ) left, (y ) top px top <head> <title> </title> </head> <body> <span style="position:absolute; left: 0px; top: 0px"> </span> 5.2 HTML HTML HTML HTML 1/2 HTML clientwidth, clientheigth *1 left, top (px) ( ) <head> <title> </title> <script type="text/javascript"> function move(obj, x, y) { // var offsetx = obj.clientwidth / 2; var offsety = obj.clientheight / 2; // left top obj.style.left = (x - offsetx) + "px"; obj.style.top = (y - offsety) + "px"; function test() { var obj = document.getelementbyid("obj"); // move(obj, 0, 0); </script> *1 margin, border HTML 21

22 </head>  <body style="overflow: hidden"> <button onclick="test()"> </button> <span id="obj" style="position:absolute; vertical-align: middle; text-align: center"> </span> span vertical-align middle span body style overflow: hidden 5.3 settimeout <head> <title> ( )</title> <script type="text/javascript"> function move(obj, x, y) { var offsetx = obj.clientwidth / 2; var offsety = obj.clientheight / 2; obj.style.left = (x - offsetx) + "px"; obj.style.top = (y - offsety) + "px"; function start() { // var xpos = Number(document.getElementById("xpos").value); var ypos = Number(document.getElementById("ypos").value); // speed var speed = Number(document.getElementById("speed").value); // 40 ( 25 ) var delay = 40; // var delta = speed * delay / 1000; function next() { var obj = document.getelementbyid("obj"); // (xpos, ypos) move(obj, xpos, ypos); // xpos, ypos // && (AND) if ((xpos > 0) && (ypos > 0)) { xpos = xpos - delta; ypos = ypos - delta; settimeout(next, delay); // next next(); </script> </head> 22

23 <body style="overflow: hidden"> <p> : (<input type="text" id="xpos" value="200" />, <input type="text" id="ypos" value="200" />)</p> <p>x, y : <input type="text" id="speed" value="200" />(dot/sec)</p> <p><button onclick="start()"> </button></p> <span id="obj" style="position: absolute; left: -100px; top: -100px; vertical-align: middle; text-align: center"> </span> ( ) x, y window.innerwidth window.innerheight <head> <title> ( )</title> <script type="text/javascript"> function move(obj, x, y) { var offsetx = obj.clientwidth / 2; var offsety = obj.clientheight / 2; obj.style.left = (x - offsetx) + "px"; obj.style.top = (y - offsety) + "px"; function start() { // var xpos = Number(document.getElementById("xpos").value); var ypos = Number(document.getElementById("ypos").value); // speed var speed = Number(document.getElementById("speed").value); // 40 ( 25 ) var delay = 40; // 40 var delta = Math.abs(speed * delay / 1000); var xdelta = delta; var ydelta = delta; function next() { var obj = document.getelementbyid("obj"); // (xpos, ypos) move(obj, xpos, ypos); // var width = window.innerwidth; var height = window.innerheight; // if (xpos < 0) { xdelta = - delta; if (ypos < 0) { ydelta = - delta; 23

24 if (xpos > width) { xdelta = delta; if (ypos > height) { ydelta = delta; xpos = xpos - xdelta; ypos = ypos - ydelta; settimeout(next, delay); // next next(); </script> </head>  <body style="overflow: hidden"> <p> : (<input type="text" id="xpos" value="200" />, <input type="text" id="ypos" value="200" />)</p> <p>x, y : <input type="text" id="speed" value="200" />(px/sec)</p> <p><button onclick="start()"> </button></p> <span id="obj" style="position:absolute; left: -100px; top: -100px; vertical-align: middle; text-align: center"> </span> HTML HTML start HTML HTML JavaScript document.createelement("span") span document.body.appendchild HTML start span <head> <title> ( )</title> <script type="text/javascript"> function move(obj, x, y) { var offsetx = obj.clientwidth / 2; var offsety = obj.clientheight / 2; obj.style.left = (x - offsetx) + "px"; obj.style.top = (y - offsety) + "px"; function start() { // HTML var obj = document.createelement("span"); 24

25 obj.style.position = "absolute"; obj.style.verticalalign = "middle"; obj.style.textalign = "center"; obj.innerhtml = " "; // obj document.body.appendchild(obj); // var xpos = Number(document.getElementById("xpos").value); var ypos = Number(document.getElementById("ypos").value); // speed var speed = Number(document.getElementById("speed").value); // 40 ( 25 ) var delay = 40; // 40 var delta = Math.abs(speed * delay / 1000); var xdelta = delta; var ydelta = delta; function next() { // (xpos, ypos) move(obj, xpos, ypos); // var width = window.innerwidth; var height = window.innerheight; if (xpos < 0) { xdelta = - delta; if (ypos < 0) { ydelta = - delta; if (xpos > width) { xdelta = delta; if (ypos > height) { ydelta = delta; xpos = xpos - xdelta; ypos = ypos - ydelta; settimeout(next, delay); // next next(); </script> </head>  <body style="overflow: hidden"> <p> : (<input type="text" id="xpos" value="200" />, <input type="text" id="ypos" value="200" />)</p> <p>x, y : <input type="text" id="speed" value="200" />(px/sec)</p> <p><button onclick="start()"> </button></p> 25

26 5.4 (0, 0) v 0 θ t (x(t), y(t)) *2 x(t) = (v 0 cos θ)t y(t) = 1 2 gt2 + (v 0 sin θ)t g x(t) JavaScript posx y(t) posy v0 theta g // var v0 = 60; // var theta = 0; // var g = 9.8; // t x function posx(t) { return v0 * Math.cos(theta) * t; // t y function posy(t) { return - (1 / 2) * g * t * t + v0 * Math.sin(theta) * t; JavaScript sin, cos Math.sin, Math.cos (180 = π ) JavaScript π Math.PI (0, 0) y move y window.innerheight <head> <title> </title> <script type="text/javascript"> // Y function move(obj, x, y) { var offsetx = obj.clientwidth / 2; *2 JavaScript t 26

27 var offsety = obj.clientheight / 2; var height = window.innerheight; obj.style.left = (x - offsetx) + "px"; obj.style.top = (height - y - offsety) + "px"; function start() { var obj = document.createelement("span"); obj.style.position = "absolute"; obj.style.verticalalign = "middle"; obj.style.textalign = "center"; obj.innerhtml = " "; // obj document.body.appendchild(obj); // ( ) var v0 = Math.abs(Number(document.getElementById("speed").value)); // var theta = Number(document.getElementById("theta").value) / 180 * Math. PI; // var g = 9.8; // 40 ( 25 ) var delay = 40; // t x function posx(t) { return v0 * Math.cos(theta) * t; // t y function posy(t) { return - (1 / 2) * g * t * t + v0 * Math.sin(theta) * t; // var t = 0; // var x = 0; var y = 0; // function next() { x = posx(t); y = posy(t); move(obj, x, y); // y 0 if (y >= 0) { t = t + delay / 1000; settimeout(next, delay); // next next(); </script> </head>  <body style="overflow: hidden"> <p> : <input type="text" id="speed" value="60" /> : <input type="text" id="theta" value="45" /> </p> 27

28 <p><button onclick="start()"> </button></p> [ 18] 5.5 1/6 1.62m/s 2 1/3 3.71m/s 2 select <select id="place"> <option value="earth"> </option> <option value="moon"> </option> <option value="mars"> </option> </select> id place HTML value option value earth, moon, mars color <head> <title> ( )</title> <script type="text/javascript"> function move(obj, x, y) { var offsetx = obj.clientwidth / 2; var offsety = obj.clientheight / 2; var height = window.innerheight; obj.style.left = (x - offsetx) + "px"; obj.style.top = (height - y - offsety) + "px"; function start() { var obj = document.createelement("span"); obj.style.position = "absolute"; obj.style.verticalalign = "middle"; obj.style.textalign = "center"; obj.innerhtml = " "; // obj document.body.appendchild(obj); 28

29 // ( ) var v0 = Math.abs(Number(document.getElementById("speed").value)); // var theta = Number(document.getElementById("theta").value) / 180 * Math. PI; // var place = document.getelementbyid("place").value; // var g = 9.8; // var color = "black"; if (place == "moon") { // 1.62 m/s2 g = 1.62; color = "blue"; else if (place == "mars") { // 3.71 m/s2 g = 3.71; color = "red"; // obj.style.color = color; // 40 ( 25 ) var delay = 40; // t x function posx(t) { return v0 * Math.cos(theta) * t; // t y function posy(t) { return - (1 / 2) * g * t * t + v0 * Math.sin(theta) * t; // var t = 0; // var x = 0; var y = 0; // function next() { x = posx(t); y = posy(t); move(obj, x, y); // y if (y >= 0) { t = t + delay / 1000; settimeout(next, delay); // next next(); </script> </head>  <body style="overflow: hidden"> 29

30 <p> : <input type="text" id="speed" value="30" /> : <input type="text" id="theta" value="45" /> <select id="place"> <option value="earth"> </option> <option value="moon"> </option> <option value="mars"> </option> </select> </p> <p><button onclick="start()"> </button></p> [ 19] 5.6 ( addtrace ) HTML HTML style opacity( ) opacity function addtrace(obj) { // HTML var trace = document.createelement("span"); trace.style.position = "absolute"; trace.style.verticalalign = "middle"; trace.style.textalign = "center"; trace.innerhtml = " "; // trace.style.top = obj.style.top; trace.style.left = obj.style.left; trace.style.color = obj.style.color; // ( ) trace.style.opacity = 0.1; // trace document.body.appendchild(trace); checkbox input type checkbox <p> : <input type="checkbox" id="trace" /> </p> 30

31 JavaScript id trace HTML checked checked true <head> <title> ( )</title> <script type="text/javascript"> function move(obj, x, y) { var offsetx = obj.clientwidth / 2; var offsety = obj.clientheight / 2; var height = window.innerheight; obj.style.left = (x - offsetx) + "px"; obj.style.top = (height - y - offsety) + "px"; // obj function addtrace(obj) { // HTML var trace = document.createelement("span"); trace.style.position = "absolute"; trace.style.verticalalign = "middle"; trace.style.textalign = "center"; trace.innerhtml = " "; // trace.style.top = obj.style.top; trace.style.left = obj.style.left; trace.style.color = obj.style.color; // ( ) trace.style.opacity = 0.1; // trace document.body.appendchild(trace); function start() { var obj = document.createelement("span"); obj.style.position = "absolute"; obj.style.verticalalign = "middle"; obj.style.textalign = "center"; obj.innerhtml = " "; // obj document.body.appendchild(obj); // ( ) var v0 = Math.abs(Number(document.getElementById("speed").value)); // var theta = Number(document.getElementById("theta").value) / 180 * Math. PI; // var place = document.getelementbyid("place").value; // var g = 9.8; // var color = "black"; if (place == "moon") { // 1.62 m/s2 g = 1.62; 31

32 color = "blue"; else if (place == "mars") { // 3.71 m/s2 g = 3.71; color = "red"; // obj.style.color = color; // 40 ( 25 ) var delay = 40; // t x function posx(t) { return v0 * Math.cos(theta) * t; // t y function posy(t) { return - (1 / 2) * g * t * t + v0 * Math.sin(theta) * t; // var t = 0; // var x = 0; var y = 0; // function next() { x = posx(t); y = posy(t); move(obj, x, y); // var trace = document.getelementbyid("trace").checked; // true if (trace) { addtrace(obj); // y if (y >= 0) { t = t + delay / 1000; settimeout(next, delay); // next next(); </script> </head>  <body style="overflow: hidden"> <p> : <input type="text" id="speed" value="30" /> : <input type="text" id="theta" value="45" /> <select id="place"> <option value="earth"> </option> <option value="moon"> </option> <option value="mars"> </option> </select> 32

33 : <input type="checkbox" id="trace" /> </p> <p><button onclick="start()"> </button></p> [ 20] (0, 0) h (0, h) h 33

A JavaScript (JSWorkbench) JavaScript ( JSWorkbench ) URL http://jsw. semlab.

34 A JavaScript (JSWorkbench) JavaScript ( JSWorkbench ) URL semlab.jp/ Firefox 24 1 *3 ここにHTML (JavaScript)を書きますボタンをクリックするとHTMLの表示エリアに反映されますあらかじめ用意されている例題を読み込めますファイルの内容を編集エリアに読み込みます編集エリアの内容をファイルに書き出します 1 JSWorkbench HTML HTML HTML(JavaScript) HTML HTML HTML CodeMirror *4 HTML JavaScript HTML JavaScript *3 JSWorkbench *4 34

35 B Firefox JavaScript Mozilla Firefox Mozilla Firefox Mozilla Firefox Windows 7 Windows OS Mozilla Firefox MacOS Linux OS Internet Explorer Firefox 1. Mozilla Japan * [ (R)] : Mozilla Corporation [ (Y)] *5 Firefox 24 35

36 6. Mozilla Firefox [ ] 7. Firefox 36

8. Firefox Firefox Firefox 9. 10. Mozilla Firefox Mozilla Firefox ] [ ] 11.

37 8. Firefox Firefox Firefox Mozilla Firefox Mozilla Firefox ] [ ] 11. Firefox Firefox [ Internet Explorer 12. Firefox Mozilla Firefox Firefox 37

38 C Firefox Firefox HTML JavaScript JavaScript C.1 Firefox Web *6 JavaScript *6 Ctrl-Shift-J ( J ) 38

39 JS C.2 JavaScript JavaScript JSWorkbench JavaScript " "a = " JSWorkbench HTML unterminated string literal URL JSWorkbench URL 11 "a = " a "a = a 39

40 40

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

07_経営論集2010　小松先生.indd 19 1 2009 105 123 Web Web Web Web World Wide Web WWW OS 1990 WWW Web HTML CSS JavaScript Web 1 WWW 2 Web Web 3 Web 4 HTML5 5 Web Web 3 1970 WWW HTML Web WWW WWW WWW WWW WWW 105 Web WWW 2 Web 1 1 NTT NTT