コンピュータサイエンス 4. ウェブプログラミング

Size: px

Start display at page:

Download "コンピュータサイエンス 4. ウェブプログラミング"

まれあとみもと
9 years ago
Views:

1 4. Chris Plaintail / 43

2 1 HTML CSS 2 JavaScript DOM jquery 3 4 PHP SQL PHP SQL 2 / 43

3 HTML HTML CSS HTML Ajax (Asynchronous JavaScript + XML) PHP SQL 3 / 43

4 HTML, CSS http, https CSS HTML CSS.html file:// 4 / 43

5 HTML < =" "> </ > < =" "> style id class 5 / 43

6 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>

7 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

8 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

9 HTML sample-3.html <body> <h2> </h2> <ul> <li> <ul> <li> </li> <li> </li> </ul> </li> <li> </li> </ul> </body> 9 / 43

10 HTML sample-4.html <body> <h3> </h3> <form action="sample.php" methot="post"> <input type=" "><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

11 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

12 HTML sample-6.html <form action="sample.php" methot="post"> <select id="contact" name="contact" multiple size="5"> <option value=" " 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

value="email" selected> </option> <option value="tel" selected> </option> <option

13 style CSS <style> <link> <html lang="ja"> <head>... </head> <body> <p style="color:blue;font-size:10px;"> style </p> </body> </html> 13 / 43

14 style CSS <style> <link> <html lang="ja"> <head> <style> p {color:blue; font-size:10pt;} </style> </head> <body> <p> </p> </body> </html> 14 / 43

15 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

16 CSS { : ;} p {color:blue; font-size:10pt;} 16 / 43

17 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

18 script head body <!DOCTYPE html> <html lang="ja"> <head> <title>javascript </title> </head> <body> <script> alert("hello World!!"); </script> </body> </html> 18 / 43

19 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

20 ; <!DOCTYPE html> <html lang="ja"> <head> <title>javascript </title> </head> <body> <script> alert("hello World!!"); </script> </body> </html> 20 / 43

21 var x, y_1, X; var price, number; x = 1; var Y = 3; 21 / 43

22 Hello World! " " true false 22 / 43

23 var = [ 1, 2, 3,...]; var fruits = [ " ", " ", " " ]; var petbottle = [ 280, 350, 500, 900 ]; [ ] [ ]= ; 23 / 43

24 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

25 var Taro = { " " : 170, " " : 70, " " : " " }. 2 alert 25 / 43

26 a = a < 10 a < 10 && b < / 43

27 "Hello"+"World!" "HelloWorld!" * 3 * 2 6 / 10 / 3 3 % 10 * / 43

28 += 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

29 3 a, b alert 1 alert 2 alert alert 29 / 43

30 5 Taro Yuri Saburo Tulip Goro / 43

31 31 / 43

32 32 / 43

33 33 / 43

34 34 / 43

35 35 / 43

36 DOM 36 / 43

37 jquery 37 / 43

38 jquery 38 / 43

39 jquery 39 / 43

40 jquery 40 / 43

41 41 / 43

42 42 / 43

43 43 / 43

コンピュータサイエンス 1. ウェブの基本

コンピュータサイエンス 1. ウェブの基本 1. Chris Plaintail May 18, 2016 1 / 27 1 2 HTML HTML 3 CSS style 2 / 27 HTML HTML HTML HTML CSS HTML CSS 3 / 27 4 / 27 HTML HTML, CSS HTML, CSS http, https file CSS HTML CSS.html PC file:// PC.html 5 /