JavaScriptプログラミング入門

Size: px

Start display at page:

Download "JavaScriptプログラミング入門"

ことこおとべ
9 years ago
Views:

1 JavaScript JavaScript if : : JavaScript LightBox JQuery JQuery Wikipedia API

1.......................................... 12 4.2.................................. 13 4.3....................................... 13 5 : JavaScript 14 5.1 LightBox.................................... 14 5.2 JQuery.

2 1 1.1 JavaScript JavaScript HTML ( Hellow World 1 ) <html> <head> <title>javascript</title> </head> <body> <h1>javascript</h1> <p> <script> document.write("hellow World!"); </script> </p> </body> </html> : HTML HTML <script> document.write("hellow World!"); </script> <script> </script> document.write(" ") ; 1 JavaScript ( ) 2

write("hellow World!"); </script> </p> </body> </html> : HTML 1.

3 1.1.2 JavaScript Firefox Google Chrome JavaScript F TeraPad : TeraPad HTML document.write(" " " " " "); document.write(" " " " + ( ) + " "); : <p> <p> JavaScript var 2 var seireki = 2009; var seireki = 2009; document.write(" " + seireki + " " + (seireki ) + " "); 2 3

write(" " + 2009 + " " + (2009-1988) + " "); : <p> <p> 1.2.2 JavaScript var 2 var seireki = 2009; var seireki = 2009; document.

4 var seireki = 1993; document.write(" " + seireki + " " + (seireki ) + " "); : 1.3 if if if ( ) { 1989 var seireki = 2009; if (seireki >= 1989) { document.write(" " + seireki + " " + (seireki ) + " "); >= <= > x > y x y >= x >= y x y < x < y x y <= x <= y x y == x == y x y if ( ) { else { 4

5 if ( 1) { 1 else if ( 2) { 1 2 else { : : document.write(2 + 3); ( ) document.write(" " + " "); document.write(" " + " " ); JavaScript document.write(" " + " " + (2 + 3)); document.write("2" + "3"); 5

6 Alt + TAB Ctrl + v Ctrl + c Ctrl + x Ctrl + z Ctrl + F HOME Ctrl + HOME END Ctrl + END ( ) ( ) Windows Alt + TAB 2.2 if && 1 &&

7 function () { (); // (); // ( ) : function calc() { var seireki = 2009; document.write(" " + seireki + " " + (seireki-1988) + " "); calc(); calc(); : <form name="input"> <input type="text" name="seireki"> <input type="button" value=" " onclick="calc();"> </form> input Form seireki calc() :

write(" " + seireki + " " + (seireki-1988) + " "); calc(); calc(); : 2.4

8 var seireki = document.input.seireki.value; input ( Form) seireki ( ) (value) seireki : 2.5 document.write kekka p <p id="kekka"></p> document.write var kekka_p = document.getelementbyid("kekka"); kekka_p.innerhtml = " " document.getelementbyid("kekka") kekka kekka_p kekka_p.innerhtml kekka 2.6 if 8

write var kekka_p = document.getelementbyid("kekka"); kekka_p.

9 <html> <head> <title> </title> </head> <body> <h1> </h1> <form name="input"> <input type="text" name="seireki"> <input type="button" value=" " onclick="calc();"></p> </form> <p id="kekka"></p> <script> function calc() { var seireki = document.input.seireki.value; var kekka_p = document.getelementbyid("kekka"); if (seireki >= 1989) { kekka_p.innerhtml = " "+seireki+" "+(seireki-1988)+" "; </script> </body> </html> :

$function calc() { var seireki = document.input.seireki.value; var kekka_p = document.$

10 id 3 HTML kekka ID HTML : <p id="kekka"></p> : p#kekka { font-size: 220%; color: red; p#kekka <p> kekka ID p kekka # : ( ) input autofocus <form name="input"> <input type="text" name="seireki" autofocus> <input type="button" value=" " onclick="calc();"> </form> : Date Date now now ( Wiki ) 10

2 ( ) input autofocus <form name="input"> <input type="text" name="seireki" autofocus> <input

11 var now = new Date(); var year = now.getfullyear(); var month = now.getmonth() + 1; var date = now.getdate(); var hour = now.gethours(); var min = now.getminutes(); var sec = now.getseconds(); document.write(year+" "+month+" "+date+" "+hour+" "+min+" "+sec+" "); : HTML ( ) : function func(a, b) { document.write(a + b) func(2, 3) // calc function calc(seireki, place) { // var seireki = document.in.seireki.value; <-- var kkk = document.getelementbyid(place); <-- ID... onclick 11

write(year+" "+month+" "+date+" "+hour+" "+min+" "+sec+" "); : HTML 3.3 3.3.1 ( ) : function func(a, b) { document.

12 <input type="button" value=" " onclick="calc(document.in.seireki.value, kekka );"> Date <p id="now"></p> <script> var now = new Date(); var year = now.getfullyear(); calc(year, now ); </script> : 4 : 4.1 ( ) for : for (i=0; i< 10; i++){ document.write(i) i 0 (i=0) 1 (i++) 4 10 (i<10) 4 i = i

year = now.getfullyear(); calc(year, now ); </script> : 4 : 4.

13 4.2 for (seireki=1868; i<2011; i++){ calc(); seireki calc function calc(seireki) { document.write(" " + seireki + " " + (seireki-1988) + " "); for (i=1868; i<2011; i++){ calc(i); 13

14 5 : JavaScript API API LightBox JQuery Wikipedia API 5.1 LightBox LightBox LightBox LightBox public_html Google LightBox index.html js css images 3 public_html HTML 1. HEAD JavaScript 2. rel="lightbox" <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <head> <script src="js/jquery min.js"></script> <script src="js/lightbox.js"></script> <link href="css/lightbox.css" rel="stylesheet" /> </head> <body> <a href="image_small.jpg" rel="lightbox"><img src="image.jpg"></a> </body> </html> 14

01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <head> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/lightbox.

15 5.2 JQuery JQuery Light- Box JQuery head JQuery LightBox JQuery <script type="text/javascript" src=" </script> var kekka_p = document.getelementbyid( kekka ); kekka_p.innerhtml = " "; $("#kekka").html(" "); ID # $( ). ( ); 15

2/jquery.min.js"> </script> 5.2.2 var kekka_p = document.

16 5.2.4 $("#kekka").css("color", "red"); // $("#kekka").show(); // $("#kekka").hide(); // $("h1").slidedown(); // $("h1").slideup(); // $("#list").fadein(); // $("#list").fadeout(); // $("#kekka").html.(" ").css("color", "red").fadein(); 5.3 JQuery Wikipedia API JQuery JavaScript JSON JSON Wikipedia API Wikipedia JSON JQuery HTML HTML 1. HEAD JavaScript jquery-latest.min.js wikipedia.js public_html 2. wikipedia ID 3. <div> <P> 16

(" ").css("color", "red").fadein(); 5.3 JQuery Wikipedia API 5.3.1 JQuery JavaScript JSON JSON Wikipedia API Wikipedia JSON JQuery 5.

17 <html> <head> <script src=" <script src="wikipedia.js"></script> </head> <body> <h1> </h1> <form name="input"> <input type="text" name="seireki"> <input type="button" value=" " onclick="wikipedia(document.input.seireki.value, info );"> </form> <div id="info"></div> </body> </html> JavaScript JavaScript wikipedia.js public_html function wikipedia(seireki, id) { var e = document.getelementbyid(id); e.innerhtml = "" var url = " $.getjson(url, {"keyword": seireki+" ", function(data){ $.each(data, function(i, data){ e.innerhtml += "<h3>"+data.title+"</h3>"; e.innerhtml += data.body; ); ); 17

$3.3 JavaScript JavaScript wikipedia.js public_html function wikipedia(seireki, id) { var e = document.getelementbyid(id); e.innerhtml = "" var url = "http://wikipedia.simpleapi.$

18 5.3.4 function wikipedia(seireki, id) { var e = document.getelementbyid(id); e.innerhtml = "" HTML ID e HTML innerhtml API URL Wikipedia API URL URL Wikipedia API var url = " getjson getjson JQuery 1) API URL 2) API 3) $.getjson(url, {"keyword": seireki+" ", function(data){ $.each(data, function(i, data){ e.innerhtml += "<h3>"+data.title+"</h3>"; e.innerhtml += data.body; ); ); 1. URL 2. seireki+" " 3. HTML 18

3.6 getjson getjson JQuery 1) API URL 2) API 3) $.getjson(url, {"keyword": seireki+" ", function(data){ $.

JavaScript¥×¥í¥°¥é¥ß¥ó¥°ÆþÌç

JavaScript¥×¥í¥°¥é¥ß¥ó¥°ÆþÌç JavaScript 2009 5 28 1 2 1.1 JavaScript.................................. 2 1.2..................................... 3 1.3 if................................... 4 2 6 2.1.....................