課程介紹

Table of Contents

1 HTML 基本格式

<html>  <head>
<title>基本的 HTML CSS Javascript </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<!-- CSS 放在 <style> </style> 中間 -->
<style>

</style>
</head>

<!-- HTML 主要內容在 <body> </body> 中間 -->
<body>

</body>

<!--JavaScript (JS) 放在 <script> </script> 內-->
<script>

</script>
</html>

2 在網頁中放入小程式

<h1>第一課-變數(裝著其他東西的容器)</h1>

<!-- 這是註解,你看不到我 -->

<p>我們設定 <br />
x = 5,<br /> 
y = 5,<br />
 計算  z = x + y, 我們會得到 z的值是:</p>

<p id="demo"></p>

<script>
var x = 5;
var y = 5;
var z = x + y;

document.getElementById("demo").innerHTML = z;
</script>

3 迴圈:金字塔

例子:金字塔 http://aeae.tv/CCR/bestowed/2017-02-15_grade2_Javascript_for_loop_example.html

<center>

<p id="demo"></p>

</center>

<script>

//宣告變數
var i;
var k;
var z="";

//外圈開始=====================================
for ( i=1; i<30 ; i=i+1 ){

  //內圈開始--------------------------------------------------
  for (k=1 ;  k<=i ; k=k+1){
  
    z = z + "△ ";
  
  }
  //內圈開始--------------------------------------------------

z = z + "</br>";

}
//外圈結束=====================================


document.getElementById("demo").innerHTML = z;

</script>

4 陣列:一個一個 列印班級學生

<html><head>
<title>201-張三-寫程式-第三課陣列</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head><body>
<h1>201-張三-寫程式-第三課-陣列</h1>
<p id="PRINT-HERE">結果會列印在這裡</p>
<script>
//跳出訊息
alert("請按一下,程式就會開始執行。");

//宣告陣列
var people = ["林零", "丁一元", "王二角", "張三毛", "吳伍佰", "陸十元"];

//在上面的 "PRINT-HERE"  列印出 "text" 中的文字
document.getElementById("PRINT-HERE").innerHTML = people[0] + "," + people[1] + "," + people[2] ;

alert("程式執行結束。");
</script>

</body></html>

5 陣列:列印班級學生

例子:列印班級學生 http://aeae.tv/CCR/bestowed/2017-02-22_grade2_JavaScript_array_example.html

<html>
<head>

<title>201-張三-寫程式-第三課:陣列</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

</head>
<body>
 

<h1>201-張三-寫程式-第三課:陣列</h1>


<p id="PRINT-HERE"></p>

<script>

//宣告陣列
var people = ["林零", "丁一元", "王二角", "張三毛", "吳伍佰", "陸十元"];
var text = "";
var i;

//蒐集每一個陣列元素到變數 "text" 中
for (i = 0; i < people.length; i++) {
    text = text + people[i] ; 
    text = text + "<br>";
}

//在上面的 "PRINT-HERE"  列印出 "text" 中的文字
document.getElementById("PRINT-HERE").innerHTML = text;

</script>


</body>
</html>

6 輸入使用者資料

Created: 2017-04-18 Tue 00:26

Emacs 25.1.1 (Org mode 8.2.10)

Validate