JavaScript <yendo@soka.ac.jp> 2015 8 15 1 2 1.1 JavaScript.................................. 2 1.2..................................... 3 1.3 if................................... 4 2 6 2.1..................... 6 2.2..................................... 6 2.3....................................... 6 2.4..................... 7 2.5............................... 8 2.6.................................... 8 3 9 3.1.......................... 9 3.2..................................... 10 3.3....................................... 11 4 : 12 4.1.......................................... 12 4.2.................................. 13 4.3....................................... 13 5 : JavaScript 14 5.1 LightBox.................................... 14 5.2 JQuery..................................... 15 5.3 JQuery Wikipedia API........................ 16 1
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 1.1.1 HTML <script> document.write("hellow World!"); </script> <script> </script> document.write(" ") ; 1 JavaScript ( ) 2
1.1.2 JavaScript Firefox Google Chrome JavaScript F12 1.1.3 TeraPad : TeraPad HTML 1.2 1.2.1 document.write(" " + 2009 + " " + 21 + " "); document.write(" " + 2009 + " " + (2009-1988) + " "); : <p> <p> 1.2.2 JavaScript var 2 var seireki = 2009; var seireki = 2009; document.write(" " + seireki + " " + (seireki - 1988) + " "); 2 3
var seireki = 1993; document.write(" " + seireki + " " + (seireki - 1988) + " "); : 1.3 if if if ( ) { 1989 var seireki = 2009; if (seireki >= 1989) { document.write(" " + seireki + " " + (seireki - 1988) + " "); >= <= > x > y x y >= x >= y x y < x < y x y <= x <= y x y == x == y x y if ( ) { else { 4
if ( 1) { 1 else if ( 2) { 1 2 else { : : 2 + 3 document.write(2 + 3); ( ) document.write(" " + " "); document.write(" " + " " + 2 + 3); JavaScript document.write(" " + " " + (2 + 3)); document.write("2" + "3"); 5
2 2.1 2.1.1 Alt + TAB Ctrl + v Ctrl + c Ctrl + x Ctrl + z Ctrl + F HOME Ctrl + HOME END Ctrl + END ( ) ( ) 2.1.2 Windows Alt + TAB 2.2 if && 1 && 2 1 2 1 2 1 2 2.3 6
function () { (); // (); // ( ) : function calc() { var seireki = 2009; document.write(" " + seireki + " " + (seireki-1988) + " "); calc(); calc(); : 2.4 2.4.1 <form name="input"> <input type="text" name="seireki"> <input type="button" value=" " onclick="calc();"> </form> input Form seireki calc() : 2.4.2 7
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
<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> : 3 3.1 1 9
3.2 3.2.1 id 3 HTML kekka ID HTML : <p id="kekka"></p> : p#kekka { font-size: 220%; color: red; p#kekka <p> kekka ID p kekka # : 3.2.2 ( ) input autofocus <form name="input"> <input type="text" name="seireki" autofocus> <input type="button" value=" " onclick="calc();"> </form> : 3.2.3 Date Date now now 0 1 3 http://home.soka.ac.jp/~yendo/clb/web/stylesheet.html ( Wiki ) 10
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 3.3 3.3.1 ( ) : function func(a, b) { document.write(a + b) func(2, 3) // 2 3 3.3.2 calc function calc(seireki, place) { // var seireki = document.in.seireki.value; <-- var kkk = document.getelementbyid(place); <-- ID... onclick 11
<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 : 10 0 9 for (i=0; i< 10; i++){ document.write(i) i 0 (i=0) 1 (i++) 4 10 (i<10) 4 i = i + 1 12
4.2 for (seireki=1868; i<2011; i++){ calc(); seireki calc 4.3 11 function calc(seireki) { document.write(" " + seireki + " " + (seireki-1988) + " "); for (i=1868; i<2011; i++){ calc(i); 13
5 : JavaScript API API LightBox JQuery Wikipedia API 5.1 LightBox 5.1.1 LightBox LightBox 5.1.2 LightBox public_html Google LightBox index.html js css images 3 public_html 5.1.3 HTML 1. HEAD JavaScript 2. rel="lightbox" <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.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.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
5.2 JQuery JQuery Light- Box JQuery 5.2.1 head JQuery LightBox JQuery <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> 5.2.2 var kekka_p = document.getelementbyid( kekka ); kekka_p.innerhtml = " "; $("#kekka").html(" "); ID # 5.2.3 $( ). ( ); 15
5.2.4 $("#kekka").css("color", "red"); // $("#kekka").show(); // $("#kekka").hide(); // $("h1").slidedown(); // $("h1").slideup(); // $("#list").fadein(); // $("#list").fadeout(); // 5.2.5 $("#kekka").html.(" ").css("color", "red").fadein(); 5.3 JQuery Wikipedia API 5.3.1 JQuery JavaScript JSON JSON Wikipedia API Wikipedia JSON JQuery 5.3.2 HTML HTML 1. HEAD JavaScript jquery-latest.min.js wikipedia.js public_html 2. wikipedia ID 3. <div> <P> 16
<html> <head> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <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> 5.3.3 JavaScript JavaScript wikipedia.js public_html function wikipedia(seireki, id) { var e = document.getelementbyid(id); e.innerhtml = "" var url = "http://wikipedia.simpleapi.net/api?output=json&callback=?"; $.getjson(url, {"keyword": seireki+" ", function(data){ $.each(data, function(i, data){ e.innerhtml += "<h3>"+data.title+"</h3>"; e.innerhtml += data.body; ); ); 17
5.3.4 function wikipedia(seireki, id) { var e = document.getelementbyid(id); e.innerhtml = "" HTML ID e HTML innerhtml 5.3.5 API URL Wikipedia API URL URL Wikipedia API var url = "http://wikipedia.simpleapi.net/api?output=json&callback=?"; 5.3.6 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