4. Chris Plaintail 2014 1 / 43
1 HTML CSS 2 JavaScript DOM jquery 3 4 PHP SQL PHP SQL 2 / 43
HTML HTML CSS HTML Ajax (Asynchronous JavaScript + XML) PHP SQL 3 / 43
HTML, CSS http, https CSS HTML CSS.html file:// 4 / 43
HTML < =" "> </ > < =" "> style id class 5 / 43
1 meta 6 / 43 HTML sample-0.html <!DOCTYPE html> <html lang="ja"> <head> <title> </title> <meta charset="utf-8"> <link rel="stylesheet" href="example.css"> <script src="example.js"></script> </head> <body>... </body> </html>
HTML sample-1.html <!DOCTYPE html> <html lang="ja"> <head>... </head> <body> <h1> </h1> <p> <a href="hyperlink.html"> </a> <img src="gazou.jpg" alt=" "> </p> </body> </html> 7 / 43
HTML sample-2.html <!DOCTYPE html> <html lang="ja"> <head>... </head> <body> <h2> </h2> <table> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> </table> </body> </html> 8 / 43
HTML sample-3.html <body> <h2> </h2> <ul> <li> <ul> <li> </li> <li> </li> </ul> </li> <li> </li> </ul> </body> 9 / 43
HTML sample-4.html <body> <h3> </h3> <form action="sample.php" methot="post"> <input type="email"><br> <input type="password"><br> <input type="tel"><br> <input type="text"><br> <input type="submit" value=" "> <input type="reset" value=" "> </form> <button> </button> </body> 10 / 43
HTML sample-5.html <form action="sample.php" methot="post"> <select id="language" name="language"> <option value="en"> </option> <option value="de"> </option> <option value="fr"> </option> <option value="ja" selected> </option> <option value="zh"> </option> </select> </form> 11 / 43
HTML sample-6.html <form action="sample.php" methot="post"> <select id="contact" name="contact" multiple size="5"> <option value="email" selected> </option> <option value="tel" selected> </option> <option value="fax" selected> </option> <option value="postal" selected> </option> <option value="office"> </option> </select> </form> 12 / 43
style CSS <style> <link> <html lang="ja"> <head>... </head> <body> <p style="color:blue;font-size:10px;"> style </p> </body> </html> 13 / 43
style CSS <style> <link> <html lang="ja"> <head> <style> p {color:blue; font-size:10pt;} </style> </head> <body> <p> </p> </body> </html> 14 / 43
style CSS <style> <link> <html lang="ja"> <head> <link rel="stylesheet" href="example.css"> </head> <body> <p> </p> </body> </html> example.css p {color:blue; font-size:10pt;} 15 / 43
CSS { : ;} p {color:blue; font-size:10pt;} 16 / 43
CSS p {color:blue;} * * {color:bule;} class. p.xxx {color:blue;} id #id p#yyy {color:blue;} :link a:link {color:blue;} :visited a:visited {color:blue;}, h1, h2 {color:blue;} p li{color:blue;} > ul > li {color:blue;} + h1 + p {color:blue;} 17 / 43
script head body <!DOCTYPE html> <html lang="ja"> <head> <title>javascript </title> </head> <body> <script> alert("hello World!!"); </script> </body> </html> 18 / 43
script head body <!DOCTYPE html> <html lang="ja"> <head> <title>javascript </title> <script src="example.js"></script> </head> <body> </body> </html> example.js console.log("hello World!!"); 19 / 43
; <!DOCTYPE html> <html lang="ja"> <head> <title>javascript </title> </head> <body> <script> alert("hello World!!"); </script> </body> </html> 20 / 43
var x, y_1, X; var price, number; x = 1; var Y = 3; 21 / 43
10 1.5 Hello World! " " true false 22 / 43
var = [ 1, 2, 3,...]; var fruits = [ " ", " ", " " ]; var petbottle = [ 280, 350, 500, 900 ]; [ ] [ ]= ; 23 / 43
var matrix = [ [1, 2, 3], [10, 20, 30], [100, 200, 300]]; console.log(matrix[0][0]); console.log(matrix[0][1]); console.log(matrix[0][2]); console.log(matrix[1][0]); console.log(matrix[1][1]); console.log(matrix[1][2]); console.log(matrix[2][0]); console.log(matrix[2][1]); console.log(matrix[2][2]); 24 / 43
var Taro = { " " : 170, " " : 70, " " : " " }. 2 alert 25 / 43
a = 3 3 + 1 a < 10 a < 10 && b < 10 26 / 43
+ 1 + 1 2 + "Hello"+"World!" "HelloWorld!" - 3-1 2 * 3 * 2 6 / 10 / 3 3 % 10 * 3 1 27 / 43
+= a += b; a = a + b; -= a -= b; a = a - b; *= a *= b; a = a * b; /= a /= b; a = a / b; %= a %= b; a = a % b; ++ a++; a = a + 1; -- a--; a = a - 1; 28 / 43
3 a, b alert 1 alert 2 alert 4 3 + 2 7 alert 29 / 43
5 Taro 170 70 Yuri 180 75 Saburo 175 80 Tulip 160 60 Goro 185 90 30 / 43
31 / 43
32 / 43
33 / 43
34 / 43
35 / 43
DOM 36 / 43
jquery 37 / 43
jquery 38 / 43
jquery 39 / 43
jquery 40 / 43
41 / 43
42 / 43
43 / 43