JavaScript 的使用

OUTLINE

  • Javascript介紹
  • Javascript教學

JavaScript 介紹

JavaScript是什麼

  • JavaScript十分常見於網頁設計，是一種用來呈現網頁動態效果的程式語言

 

  • JavaScript 與 Java 其實並沒有直接的關係，是完全不一樣的東西。

 

  • JavaScript設計是一種直譯式(Interpreted language)、物件導向(Object-based)的程式語言

JavaScript是什麼

用途：

  • 做動態網頁(+後端)
  • 驗證資料
  • 控制cookie
  • 事件處理

 

網頁設計的前端？後端？

前端 (Front-end)

是網頁本身的前台，是直接面對使用者對網站的動作。屬於客戶端上運仍的部份。

後端 (Back-end)

則是網頁的後台，也就是伺服器端上運作的私部份。

網頁設計的前端？後端？

前端語言 後端語言
HTML PHP
CSS Java
JavaScript JavaScript (Node.js)

以下是一些常見的例子

JavaScript 入門

JavaScript 使用方式

內部使用

<script>
    function ClickMe(){
        alert("Surprise");
    }
</script>

在HTML中，透過<script>標籤包起來

JavaScript 使用方式

外部嵌入

<script src='text.js'></script>

透過<script>標籤，讀取在外而的 .js 檔

JavaScript 的語法

var x = 1;
let y = 2;
const z = 3;

變數

JavaScript是動態定型語言。

並不需要事先決定存入資的的型別。

var = 動態變數

let = 區域變數

const = 常數

JavaScript 的語法

//String
var s1 = "string";
var s2 = 'string';
        
//number
var num = 123;
        
//boolean
var bool1 = true;
var bool2 = false;
        
//array
var arr1 = {1, 2, 3};
var arr2 = {'A', 'B', 'C'};

資料類型

JavaScript 所包括的型別

string、number、boolean、array、object、null、undefined

JavaScript 的語法

//object
var someone = {
    "name": "Sheep", 
    "age": 20, 
    "favorite": "Sleeping"
}    
    
//null
var x = null;
    
//undefined
var y;

資料類型

JavaScript 所包括的型別

string、number、boolean、array、object、null、undefined

JavaScript 的語法

//object
var someone = {
    "name": "Sheep", 
    "age": 20, 
    "favorite": "Sleeping"
}    
    
//null
var x = null;
    
//undefined
var y;

資料類型

JavaScript 所包括的型別

string、number、boolean、array、object、null、undefined

JavaScript 的運算子

算術運算子

  • 「+」 加
  • 「-」 減
  • 「*」 乘
  • 「/」 除
  • 「**」 指數(冪次)
  • 「%」 餘數

JavaScript 的運算子

比較運算子

  • 「==」 是否等於
  • 「!= 」是否不等於
  • 「=== 」是否 全 等於 (比較資料型態)
  • 「!== 」是否 不全 等於 (比較資料型態)
  • 「> 」大於
  • 「>= 」大於等於，大於等於不得寫 「=>」
  • 「< 」小於
  • 「<= 」小於等於

JavaScript 的運算子

邏輯運算子

  • 「&&」  Logical AND : 邏輯 且
  • 「||」   Logical OR : 邏輯 或
  • 「!」      Logical NOT : 邏輯 非

JavaScript 的保留字

保留字

break case catch continue
default delete do else
finally for function if
in instanceof new return
switch this throw try
typeof var void while
with

JavaScript 的保留字

保留字

break case catch continue
default delete do else
finally for function if
in instanceof new return
switch this throw try
typeof var void while
with

JavaScript 的常用函式

document.getElementById()

Document 的getElementById()會回傳一表示符合指定id的Element物件

JavaScript 的常用函式

console.log()

通常用於Debug
顯示在主控台

window.close()

直接關閉視窗

JavaScript 的自訂函式

寫法：

function FunctionName(){
    // CODE
}

應用：

  • <button onclick = "function_name()">
  • <input type="submit" onclick="function_name()"
  • <input type="button" onclick="function_name()"

JavaScript 的警示框

寫法：

alert("THIS IS AN ALERT");

應用：

  • 多用於測試漏洞
  • 一些網頁上的彈出式通知

JavaScript 的基礎語法

if…else

if (condition){
  ...
}
else if(condition){
  ...
}
else{
  ...
}

例子︰

n saySomething( msg ) {
  if ( msg === 'Hello' ) {
    console.log('Hello there');
  } else if ( msg === 'Yo' ) {
    console.log('Yo dawg');
  }
}

JavaScript 的基礎語法

switch…case

switch(arg) {
     case n:
        ...
        break;
     case n:
        ...
        break;
     default:
        ...
}

例子︰

switch (new Date().getDay()) {
    case 0:
        day = "星期日";
        break;
    case 1:
        day = "星期一";
         break;
    case 2:
        day = "星期二";
         break;
    case 3:
        day = "星期三";
         break;
    case 4:
        day = "星期四";
         break;
    case 5:
        day = "星期五";
         break;
    case 6:
        day = "星期六";
}

JavaScript 的基礎語法

for

for ( i = 0 ; i < n ; i++ ) {
　...
}

例子︰

for(i=0;i<5;i++){
　document.write(i);
}

JavaScript 的基礎語法

while

while (condition) {
  ...
}

例子︰

while (i < 10) {
  text += "The number is " + i;
  i++;
}

Lab 01 BMI

Lab 01 BMI

Step 1: 把HTML的部份寫出來

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>BMI計算器</title>
</head>

<body>
	<form method=post>
		你的身高(cm):<input type="text" name="height"><br>
		<br/>
		你的體重(kg):<input type="text" name="weight"><br>
		<br/>
		<input type="button" value="開始計算" onclick="Cal(this.form)">
		<br/>
		<br/>
		您的BMI:<input type="text" name="BMI">
	</form>
</body>
</html>

Lab 01 BMI

step 2: JavaScript

<script>
  var BMI={};
  BMI.getBMI=function(a,b){
    var bmi=b/((a/100)*(a/100));
    return bmi;
  };

  function Cal(form){
    var a=eval(form.height.value);
    var b=eval(form.weight.value);
    var bmi=eval(form.BMI.value);
    var bmiValue =BMI.getBMI(a,b);
    BMI.disp_alert(bmiValue );
    form.BMI.value= bmiValue ;

    BMI.disp_alert = function(bmi){
      if (bmi < 18.5){
        alert("太輕");
      }
      else if (bmi >= 18.5 && bmi < 25){
        alert("正常!");
      }
      else if (bmi >= 25 && bmi< 30){
        alert("過重!");
      }
      else{
        alert("痴肥!");
      }
    }
	</script>

Lab 01 BMI

完整的code

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>BMI計算器</title>
	<script>
		var BMI={};
		BMI.getBMI=function(a,b){
			var bmi=b/((a/100)**2);
			return bmi;
		};
		function Cal(form){
			var a=eval(form.height.value);
			var b=eval(form.weight.value);
			var bmi=eval(form.BMI.value);
			var bmiValue =BMI.getBMI(a,b);
			BMI.disp_alert(bmiValue );
			form.BMI.value= bmiValue ;
		}
		BMI.disp_alert = function(bmi){
			if (bmi < 18.5)
			{
			alert("太輕");
			}
			else if (bmi >= 18.5 && bmi < 25)
			{
			alert("正常!");
			}
			else if (bmi >= 25 && bmi< 30)
			{
			alert("過重!");
			}
			else
			{
			alert("痴肥");
			}
		}
	</script>
</head>

<body>
	<form method=post>
		你的身高(cm):<input type="text" name="height">
		<br/>
		<br/>
		你的體重(kg):<input type="text" name="weight">
		<br/>
		<br/> 
		<input type="button" value="開始計算" onclick=Cal(this.form)>
		<br/>
		<br/>
		您的BMI:<input type="text" name="BMI">
	</form>
	</body>
</html>
Made with Slides.com