javascript進階一
阿新 • • 發佈：2019-01-06
4/24/2018 8:31:55 AM
JavaScript
晨測：
1. 簡述CSS樣式表的使用方式。 2. 簡述你知道的CSS選擇器： 3. CSS中margin和padding的區別？ 4. 行內元素和塊級元素的具體區別是什麼？行內元素的padding和margin可設定嗎？ 塊級元素width,height,margin,padding都可以設定 行內元素width,height,margin-top/bottom,padding-top/bottom都固定 左右內外邊距是可以控制的。 行內塊元素：width,height,但是不會自動換行 <textarea> <input><img>等等
回顧
CSS
CSS選擇器
CSS樣式和屬性
DIV+CSS
今日概要
一、JavaScript概述
二、JavaScript的語法
三、JavaScript的內建物件
一、JavaScript的概述
<1>JavaScript的概念
又稱ECMAScript，和java沒有任何關係
嵌入在HTML元素中的 被瀏覽器解釋執行的 一種指令碼語言。
<2>特點
操作方便：任何文字編輯器都可以編寫，有瀏覽器就可以執行
面向物件：內建了大量的物件
指令碼語言：解釋執行，事先不編譯，逐行執行
<3>作用（使用HTML動態效果）
實現客戶端資料格式的驗證 處理瀏覽器的事件 製作特殊動態效果（輪播圖,廣告設計，特效等等）
<4>使用方式
1. 直接在HTML中使用（內聯方式）
2. 定義在html的head標籤中的script子標籤中（內部方式）
3. 定義在外部的js檔案中，然後在需要使用的頁面中引入（外部方式）
建立一個.js的檔案
<script type="text/javascript" src="外部檔案的位置"></script>
<5>組成
1. ECMAScript,是js的核心內容：js的語法，資料型別，變數，關鍵字，函式等等
2. DOM,文件物件模型，整個HTML頁面內容
3. BOM,瀏覽器物件模型，整個瀏覽器頁面內容
二、JavaScript的ECMAScript
<1>變數的定義
注意：所有的變數都使用var來申明，var 變數名 [= 值]；
弱型別，沒有強制的型別申明
語句的分號可以不寫（建議寫）
var 也可以省略（方法內部寫和不寫是有區別）
不要去使用js中的關鍵字來作為變數名稱
語法格式：var 變數名稱 [=變數值];
例如：
var age;
var x = 10;
var name="老王";
註釋：//
/**/
<2>資料型別
var testnum = 10;//資料型別是動態定義的
alert("型別："+typeof(testnum))
基本資料型別：
Number ： 可以使用各種進位制
String
Boolean
複雜的資料型別：
Array
Object
特殊的資料型別：
null
undefined
<3>運算
布林型別參與運算時，轉換成數值型。
資料型別的隱式轉換 ：
數值型+字串 ：字串
數值型+布林型 ：數值型 （true:1 ; fasle:0）
字元型+布林型 ：字串
布林型+布林型 ：數值型
轉換函式：
parseint(需要轉換的字串，需要轉換的字串的進位制)
toString()
== 和 ===的區別
==：僅僅比較內容
===：比較型別和資料內容
<4>分支和迴圈結構
語法格式和java一樣
<5>驗證資料的格式
<script type="text/javascript">
function checkNum() {
alert("驗證")
//1.獲取輸入框物件
var username = document.getElementById("user").value;
var pwd = document.getElementById("pwd").value;
var pwd2 = document.getElementById("pwd2").value;
alert("username:"+username)
//2.判斷
if(username==""){
alert("使用者名稱不能為空");
return ;
}
if(pwd==""){
alert("密碼不能為空");
return ;
}
if(pwd!=pwd2){
alert("密碼輸入不一致");
return ;
}
alert("輸入正確")
}
</script>
三、JavaScript的內建物件
1. String
屬性：length
方法：split()
subString()
indexOf()
charAt()
2. Array
屬性：length
方法：sort()
reverse()
3. Math
方法：round()：四捨五入
random():生成隨機數
math()
abs()
4. Number
toFixed(小數位)：將數值轉換成字串，保留指定的小數位（四捨五入）
5. RegExp (重點) ：https://regexper.com/
使用者名稱和密碼的格式進行限定：只能包含英文字母，數字，"_",必須以英文字母開頭，分割槽大小寫
1. 建立正則物件/建立正則字面值
var nameReg = /^$/;
var pwdReg = new RegExp("/^$/");
2. 呼叫test方法驗證
var flag = nameReg/pwdReg.test(驗證的資料);
[a-zA-Z][a-zA-Z0-9_]{5}
/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
注意：某些符號需要轉譯
6. Date
var date = new Date(); //當前系統時間
setDate()/setHour()/setMonth()...
7. function物件（重點）
方式一：函式的定義：
function 方法名稱(引數列表){
方法體
return 結果；
}
呼叫：方法名稱(實參列表);
方式二：匿名函式定義的語法格式：
function (){
方法體
return 結果；
}
呼叫：匿名函式結構塊(實參列表);
函式的呼叫和引用：
呼叫：函式名稱()
引用：函式名稱
例如：
arry.sort(function (){ //匿名方式引用
方法體
return 結果；
});
arry.sort(函式名稱); //實名方式引用
8. 引數物件
函式的實參會被封裝到arguments物件中，陣列物件
屬性：length，獲取實參的個數
方法：argument[index]，獲取某個具體的實參
9. 全域性函式
parseInt/parseFloat
isNaN
eval
decodeURI/encodeURI等
四、JavaScript的瀏覽器物件
BOM
五、JavaScript的文件物件（HTML的資訊）
DOM
六、JavaScript的自定義物件
JSON
作業
編寫註冊頁面
驗證使用者輸入的資料格式