javascript - hitachi-ac.co.jp
TRANSCRIPT
1 JavaScript
(c) Hitachi Information Academy Co., Ltd. 2013. All rights reserved.
JavaScript
JavaScript Web WebWeb Web
Web WebWeb
Web JavaScriptJavaScript
WebJavaScript
JavaScript WebWeb
1-2 JavaScript
3 DOM
(c) Hitachi Information Academy Co., Ltd. 2013. All rights reserved.
DOM
Document Object Model( DOM) HTML XMLW3C 2004 4 Level3 DOM
level1 level2 level3 DOM Web
DOM HTML XML DOM
DOM HTML
DOMSample.html
1: <html>
2: <head>
3: <title>DOM </title>
4: </head>
5: <body>
6: <h1>JavaScript</h1>
7: <p>JavaScript </p>
8: <ol>
9: <li>DOM</li>
10: </ol>
11: </body>
12: </html>
HTML DOM
3-1 HTML
“D O M ”
<head> <body>
<title> <h1> <p> <ol>
“D O M ” <li> “J avaS cript” “JavaS cript ”
D ocum ent
<htm l>
3 DOM
(c) Hitachi Information Academy Co., Ltd. 2013. All rights reserved.
3-1 DocumentHTML Document <html> <head> <body> HTML
HTML Element ElementHTML Text
Document HTML htmlhtml body head HTML
DOM 3-2
JavaScript DOM 3-3 DOM
3-3 DOM
3-2
Document
Element
Text
“D O M ”
<head> <body>
<title> <h1> <p> <ol>
“D O M ” <li> “JavaS cript” “J avaS cript ”
D ocum ent
<htm l>
JavaScript
[Web ] [DOM ]
“D O M ”
<head> <body>
<title> <h1> <p> <ol>
“D O M ” <li> “J avaS cript” “JavaS cript ”
D ocum ent
<htm l>
DOM
4 JavaScript
(c) Hitachi Information Academy Co., Ltd. 2013. All rights reserved.
4.1.1
Web JavaScript
JavaScript
JavaScript
Web
4.1.2
4.1.1
JavaScript 3
clickmouseover
4.1.1
Click!
4-1
4 JavaScript
(c) Hitachi Information Academy Co., Ltd. 2013. All rights reserved.
( )
JavaScript
4-2
4-2
[ ]
Click!
click
[ ]
Button
click
4 JavaScript
(c) Hitachi Information Academy Co., Ltd. 2013. All rights reserved.
4.2.1
HTML
onclick onclick
button clickAction()
button click
clickAction() button click clickAction()
button eventSample.html
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2: <html>
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
5: <meta http-equiv="Content-Script-Type" content="text/javascript">
6: <title>Event </title>
7: <script type="text/javascript">
8: function clickAction(){
9: alert("Click ");
10: }
11: </script>
12: </head>
13: <body>
14: <div> <br>
15: <button id="button" onclick="clickAction();">Click!</button>
16: </div>
17: </body>
18: </html>
=" "
<button onclick="clickAction();">
6 JavaScript Ajax
(c) Hitachi Information Academy Co., Ltd. 2013. All rights reserved.
Ajax
6.1.1 Ajax
Ajax Asynchronous Ja
vaScript + XML 2005 Adaptive Path Jesse James Garrett
XHTML CSS DOM XML XSLT XMLHttpRequest JavaScript
Ajax JavaScriptAjax JavaScript
Ajax Ajax Web
6.1.2 Ajax
6-1
…
6 JavaScript Ajax
(c) Hitachi Information Academy Co., Ltd. 2013. All rights reserved.
AjaxWeb
6.1.3 Ajax
Ajax
Ajax
6-3
6-2
6 JavaScript Ajax
(c) Hitachi Information Academy Co., Ltd. 2013. All rights reserved.
6.2.3 XMLHttpRequest Ajax
Ajax
pageLoad.html 1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2: <html>
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
5: <meta http-equiv="content-Script-type" content="text/javascript">
6: <title>JavaScript </title>
7: <script type="text/javascript" src="../../jQuery/jquery-1.8.2.js"></script>
8: <script type="text/javascript">
9:
10: var index = 0;
11: var urlArray = [
12: "data1.txt","data2.txt","data3.txt","data4.txt","data5.txt","data6.txt"
13: ]
14: // URL
15: var documentRoot = document.URL.replace(/\/[^\/]+$/, "/");
16:
17: //
18: function main(){
19: //
20: $("#prev").click(prevPage);
21: $("#next").click(nextPage);
22: sendRequest();
23: }
24:
25: //
26: function prevPage(){
27: if(index > 0){
28: index--;
29: sendRequest();
30: }
31: }
6 JavaScript Ajax
(c) Hitachi Information Academy Co., Ltd. 2013. All rights reserved.
32:
33: //
34: function nextPage(){
35: if(index < urlArray.length -1 ){
36: index++;
37: sendRequest();
38: }
39: }
40:
41: //
42: function sendRequest(){
43: //XMLHttpRequest
44: var xhr = new XMLHttpRequest();
45:
46: //
47: var url = documentRoot + urlArray[index];
48: xhr.open("GET",url);
49:
50: //
51: xhr.onreadystatechange = function(){
52: //
53: if(xhr.readyState == 4 && xhr.status == 200){
54: //
55: $("#textarea").html(xhr.responseText);
56: }
57: }
58:
59: //
60: xhr.send(null);
61:
62: }
63: </script>
64: </head>
65:
66: <body onload="main();">
67: <h1>JavaScript </h1>
68: <div id="textarea"></div>
69: <button id="prev"> </button><button id="next"> </button>
70: </body>
71: </html>