Javascript基礎ppt

w3school：https://www.w3school.com.cn/js/index.asp

本章目標

●瞭解JavaScript起源、特徵
●掌握JavaScript程序的開發工具、運行環境、運行機制等
●掌握JavaScript語言規範:變量、常量、變量類型、流程處理語句、函數定義聲明、對象的創建等
●掌握JavaScript常用的API: JavaScript函數、JavaScript對象等
●瞭解事件相關的概念和作用
●掌握常用的事件類型、事件處理機制和原理以及三種註冊事件處理程序的方式
●能夠靈活的運用事件來實現HTML網頁中某些功能的擴展

JavaScript概述

●JavaScript的應用場景

表單數據合法性驗證
網頁特效
交互式菜單
動態頁面
數值計算

●JavaScript的特點

簡單性
動態性
跨平臺性
安全性

●JavaScript的開發 與運行

●選擇一款好的開發T具讓你事半功倍
文本編輯器(如: Notepad++)， IDE (如: Eclipse、DreamWeaver )
●JavaScript的運行環境
.客戶端瀏覽器。推薦:火狐瀏覽器(兼容性好)。
●將JavaScript嵌入網頁
使用<script>標籤將語句嵌入文檔
將avaScript源文件( .is )鏈接到HTML文檔中

JavaScript基本語法

●JavaScript語句和代碼塊

JavaScript語句是發給瀏覽器的命令，
JavaScript語句結束使用回車,但建議使用";"

<script>
        document.write("hello world");
        document.write("<p>hello inspur</p>");
</script>

JavaScript代碼塊是一段JavaScript代碼的集合。
以左花括號開始，右花括號結束。
代碼塊用於在函數或條件語句中把若干語句組合起來,作用是一併地執

<script>
        function mycheck()
        {
        }
</script>

●標識符

就是給變量、函數和對象等指定的名字
標識符的命名規則：
javascript區分大小寫
首字符可以是 _ $ 字母
其他字符可以 _ $ 字母 數字

●變量

var name;
name="tom";
name=20;  //是弱類型的語言，可以改變變量的數據類型

📕變量的數據類型：
基本的數據類型有：數字型、字符串型、布爾型
複雜的數據類型：數組、對象
特殊的數據類型：Null、Undefined
📕數字型：表示整數值和浮點數值
數字序列就是一個十進制的整數。如：123
十六進制的數字以“0x”或“0X”開頭，如：0x25ffff
浮點數，如：3.1415、0.66666、1.46783E-32
📕字符串：是使用單引號或雙引號包起來的零個至多個字符，單引號與雙引號必須成對出現，而且單雙引號可嵌套使用。

”abc”、’中文’

Var a=’’;     //a是空字符串，說明a是字符串類型的變量，長度爲0
Var b=null;     //b是等於null的變量，也可以認爲它的值是“無值”
Var c;          //c表示是一個沒有初始化的變量，訪問得到Undefined

●數組

var arr=[1,2,3];
var arr=[1,true,'a',[3,4]];
arr[1]=false;
'a'+'bc'=='abc'

●運算符

for(var i=1;i<10;i++){
	if(i%5==0){
		break;
	}
	document.write("i="+i+";<br/>");
}

●string對象

var myString="Hello inspur!";
var myString=new String("Hello inspur!");
charAt()：返回指定位置的字符。
indexOf() ：返回某個指定的字符串值在字符串中首次出現的位置。指定字符串在字符串中不存在時返回-1.
replace(oleStr,newStr) ：在字符串中用一些字符替換另一些字符語法。
toLocaleLowerCase()：把字符串轉換爲小寫。
substring(start,stop) ：提取字符串中介於兩個指定下標之間的字符,該方法返回的子串包括 start 處的字符，但不包括 stop 處的字符。

●Math對象

Math 對象用於執行數學任務。Math對象並不像Date和 String那樣是對象的類，因此沒有構造函數Math().

●Date對象

var now = new Date();
document.write("<p>當前年份:"+now.getFullYear()+"</p>");
document.write("<p>當前月份:"+now.getMonth()+"</p>");
document.write("<p>當前日期:"+now.getDate()+"</p>");
document.write("<p>今天星期:"+now.getYear()+"</p>");
document.write("<p>當前完整時間:"+now+"</p>");

●數組對象

new Array();創建了一個數組對象
new Array(size);規定了數組對象的大小
new Array(element0, element1, ..., elementn);聲明數組對象的同時，爲數組對象增加了元素

concat()：連接兩個或多個數組。
join() ：把數組中的所有元素放入一個字符串。
sort() ：對數組的元素進行排序。
toString () ：把數組轉換爲字符串，並返回結果。

JavaScript函數

●內置函數

eval(String) 計算某個字符串，並執行其中的的 JavaScript 代碼

eval("x=10;y=20;document.write(x*y)")

isNaN(String)函數用於檢查其參數是否是非數字值。如果函數的參數是非數字值，返回的值就是 true。如果參數是數字值,則返回 false。

var a=10;
var b=20
document.write("isNaN(a+b):"+isNaN(a+b)+"<br>");
document.write("isNaN(a+''a''):"+isNaN(a+'a')+"<br>");

●自定義函數

funciton 函數名（參數1，參數2，…）{
	函數體；
}

函數調用格式：事件名=“函數名”

<input name="add" type="button" value="add" onClick="sum(2,5)">
註釋： 
/*
哈哈
*/

常用API

●全局函數

●數組函數

●Boolean對象函數

●Date對象函數

●Math對象函數

●number對象函數

●string對象函數

JavaScript 事件概述

事件是可以被 JavaScript 偵測到的行爲，可以是瀏覽器行爲，也可以是用戶行爲.
通過使用JavaScript，可以監聽特定事件的發生，來實現某些功能的擴展。

●事件類型

UI(User Interface,用戶界面)事件，當用戶與頁面上的元素交互時觸發；
焦點事件，當元素獲得或失去焦點時觸發；
鼠標事件，當用戶通過鼠標在頁面執行操作時觸發；
滾輪事件，當使用鼠標滾輪（或類似設置）時觸發；
文本事件，當在文檔中輸入文本時觸發；
鍵盤事件，當用戶通過鍵盤在頁面上執行操作時觸發；
合成事件，當爲IME（Input MethodEditor，輸入法編輯器）輸入字符時觸發；
變動（mutation）事件，當底層DOM結構發生變化時觸發；

●UI 事件

UI事件指的是那些不一定與用戶操作有關的事件

●焦點事件

焦點事件會在頁面得到焦點或失去焦點時觸發。鼠標點擊可獲得光標（即獲得焦點），Tab鍵可按照設置的Tabindex進行切換焦點。

●鼠標事件和滾輪事件

單擊類觸發順序： mousedown 、mouseup 、click 、mousedown 、mouseup 、click 、dbclick

●事件處理

相關概念
事件類型（event type）：前面一節已經介紹，在此處不再贅述。
事件目標（event target）：是發生事件或與之相關的對象。window、document和element（元素）對象是最常見的事件目標，當然，AJAX中的XMLHttpRequest對象也是一個事件目標。
事件處理程序（event handler）：是處理或響應事件的函數，它也叫事件監聽程序（event listener）。事件處理程序的名字以“on”開頭，如：click事件的事件處理程序就是onclick。
事件對象（event object）：是與特定事件相關且包含有關該事件詳細信息的對象。
事件句柄


註冊事件處理程序的方式有三種
設置HTML標籤屬性爲事件處理程序
設置JavaScript對象屬性爲事件處理程序。
使用addEventListener和attachEvent函數綁定

設置HTML標籤屬性爲事件處理程序
語法爲： onXXX="JavaScript Code“
XXX 爲事件名稱。例如，鼠標單擊事件 onclick ，鼠標雙擊事件 ondouble，鼠標移入事件 onmouseover，鼠標移出事件 onmouseout 等。
JavaScript Code 爲處理事件的JavaScript代碼，一般是函數。

<div onclick="alert(div1)">
    <div onclick="alert(div2)">
        <div onclick="alert(div3)">div3</div>
    </div>
</div>

設置JavaScript對象屬性爲事件處理程序
通過設置某一事件目標的事件處理程序屬性來爲其註冊相應的事件處理程序。
事件處理程序屬性名字由“on”後面跟着事件名組成

<script>
        var div1 = document.getElementById('div1');
        var div2 = document.getElementById('div2');
        var div3 = document.getElementById('div3');
        div1.onclick=function(){
            alert('div1');
        };
        div2.onclick=function(){
            alert('div2');
        };
        div3.onclick=function(){
            alert('div3');
        };
</script>

使用addEventListener和attachEvent函數綁定
任何能成爲事件目標的對象都定義了一個名叫addEventListener()的方法，使用這個方法可以爲事件目標註冊事件處理程序。
其中： bool參數可省略，默認爲flase，當其爲true時，就是在事件捕獲過程中註冊事件處理程序。

addEventListener(事件類型,事件處理函數[bool])

<script>
        /*獲取id巍div1元素的對象和attachEvent函數綁定*/
        var div1 = document.getElementById('div1');
        /*調用div1對象的addEventListener函數*/
        div1.addEventListener(click,function(){alert('div1-bubble');},flase);
        div1.addEventListener(click,function(){alert('div1-capturing');},true);
</script>

獲得焦點（focus）和失去焦點（blur）事件

<Form name="form1">
     姓名：<input type="text" name="name"><br/><br/>
     <!--設置HTML標籤屬性爲事件處理程序，onblur失去焦點事件，對應的事件處理函數爲checkData
      onFocus獲取焦點事件，對應的事件處理函數爲clearData-->
     年齡：<input type="text" name="age" value="年齡必須在20~40之間" onBlur="checkData()" onFocus="clearData()"/>
</form>

鼠標移動和鼠標按下事件

<form name="form1">
        姓名：<input type="text" name="name"
        onMouseOver = "fn_onMouseOver(this) “
        onMouseDown="fn_onMouseDown(this)“
        onMouseOut="fn_onMouseOut(this)">
        <br/><br/>
        年齡：<input type="text" name="age“
        onMouseOver="fn_onMouseOver(this)" 
        onMouseDown="fn_onMouseDown(this)" 
        onMouseOut="fn_onMouseOut(this)"/>
    </form>

●UI事件

UI事件中的load事件通常用於檢測文檔內容或者圖片是否加載完畢。
事件目標爲window對象，通過給window對象的onload屬性進行賦值，賦值爲事件處理函數
當文檔加載完畢後，會觸發window對象的onload事件，執行事件處理函數體裏面代碼

<script>
        window.onload=function()
        {
            //事件處理
        }
</script>

●表單事件

submit事件
通常監測是否提交表單元素，當提交表單元素時會觸發，也就是form元素對象.onsumit事件。
需要注意的是，動態表單提交（form.submit()）無法觸發onsubmit事件。submit事件常用來進行表單數據驗證。

<form name="myForm" action="ch9-8(1).html" onSubmit="return check()">
	    <p>賬號：<input type="text" name="loginId"></p>
	    <p>密碼：<input type="password" name="password"></p>
	    <p><input type="submit" value="登錄">&nbsp;&nbsp;<input type="reset" value="清除"></p>
</form>

change事件
作用域的內容被改變時觸發，該事件是在內容改變時還必須使得當前元素失去焦點(onblur)纔可以激活。
change 事件會被HTML的<input>、<select>和<textarea> 元素觸發。

<form action="" method="post" name="myform">
        <p><font>我是一名大學生</font></p>
        <p>字體：	<select name="myFontFace" onChange="changeFont()">
            <option value="宋體">宋體</option>	
            <option value="黑體">黑體</option>
            <option value="楷體">楷體</option>
        </select>	</p>
</form>

總結

1、JavaScript事件的概念和作用，包含事件、事件類型、事件目標、事件對象和事件處理程序等概念。
2、事件類型（UI事件、焦點事件、鼠標事件、鍵盤事件、滾輪事件、文本事件等
3、註冊事件處理程序，3中常用方式：設置HTML標籤屬性爲事件處理程序、設置JavaScript對象屬性爲事件處理程序、使用addEventListener和attachEvent函數綁定。
4、JavaScript常用事件：獲取焦點事件、失去焦點事件、鼠標移動事件、鼠標按下事件、load事件、submit事件、change事件等。