I can 前端-04 JavaScript

JavaScript特點

簡單

語法和C#幾乎相近

動態執行

事件驅動，無需經過Web服務器，直接相應

跨平臺

瀏覽器解析

減輕服務器壓力

驗證、圖片輪換客戶端實現

主要應用方向

Ajax
JQuery

變量

以var開頭定義，以；號結尾

//① 
var name;
name = "abc";
//② 
var name = "abc";
//③ --只有num3賦值
var num1, num2, num3 = "3";

全局變量
定義在函數外面，可以被其他函數使用

局部變量
定義在函數裏面，只有自己函數可以用

<script type="text/javascript">
    var userName = "1"; //全局變量
    function test(){
        var userName2 = "2"; //局部變量
    }
</script>

注意的問題

多個js文件，變量衝突！
區分大小寫
首字母不能是數字
不能用關鍵字
camel命名：totalMoney

常見對話框

alter 提示對話框

confirm 選擇對話框

<script type="text/javascript">
    if(confirm("選擇確定嗎？"))
    {
        alter("你選擇了確定！");
    }else
    {
        alter("你沒有選擇確定");
    }
</script>

數據類型及轉換

數據類型

6中數據類型，常見前4種

string 字符串
數值類型
boolean類型
undefined —變量創建後沒有給賦值就
null
object

運算符

算數運算符–返回數值

+、-、*、/、%、++、–、-（求反）

比較運算符–返回true/false

==、！=、>、>=、<、<=

邏輯運算符–返回true/false

&&、||、！

賦值運算符 =

表達式

var num = 10;

var name = "小王";

var result = true;

var num2 = num;

數據類型轉換

字符串轉整數 parseInt()
字符串轉浮點 parseFloat()

函數

形式

function 函數名（參數1，參數2）
{
    //函數體
}

函數必須以function開頭
函數參數可以沒有，有的話直接寫名稱，以逗號分隔
如果有返回值，使用return
函數體用分號分隔

調用

事件不區分大小寫，這裏onclick和onClick是一樣的

<script type="text/javascript">
    function Add(a,b)
    {
        return a+b;
    }
</script>

<input type="button" value="開始計算" onclick="Add(1,2)" />

註釋

單行註釋 //
當行註釋 /* */

邏輯控制

if

if(a<b)
{}
else
{}

for

for(var i; i < 10; i++)
{}

while

while(i<4)
{}

switch

switch(day)
{
    case "1":
        r = "5";
        break;
    case "2":
        r = "45";
        break;
    default:
        r = 44;
}

常用事件

鼠標單擊事件 onClick

鼠標放上事件 onMouseOver

鼠標移出事件 onMouseOut

表單加載事件 onLoad

表單提交事件 onSubmit

超鏈接使用事件

需求：a標籤根據js方法是否要跳轉

js方法
function Test(a,b)
{
    var r = a+b;
    if(r>10)
    {
        return ture;
    }
    else
    {
        return false;
    }
}

a標籤

<a href="www.baidu.com" onclick="return Test(2,5)"/>