1. JS的簡介
概述: JavaScript, 是一門弱類型語言, 用來給頁面增加動態功能的.
* 弱類型語言: 對數據的數據類型劃分不精細(不明確).
* html是人的骨骼, css是給人化妝, js是讓人的局部動起來.
* 弱類型語言:JS,PHP
特點:
A. JavaScript 是一種輕量級的編程語言。
B. JavaScript 是可插入 HTML 頁面的編程代碼。
C. JavaScript 插入 HTML 頁面後，可由所有的現代瀏覽器執行。
D. JavaScript 很容易學習。
歷史: //瞭解
JS的組成: //掌握
ECMAScript: 定義了JS的基本對象和語法.
BOM: Browser Object Model, 瀏覽器對象模型.
DOM: Document Object Model, 文檔對象模型.
2. JS的引入方式:
A: 直接嵌入到HTML頁面中. //相當於我們昨天講解的: 內部樣式
寫在<head>標籤中的<script>
<script>
//JS代碼
</script>
B: 寫在.js文件中,然後再頁面中引入該.js文件. //相當於我們昨天講解的: 外部樣式
寫在<head>標籤中的<script>
<script src="引入的.js文件的路徑"></script>
3. ECMAScript的核心語法
基礎語法:
A: JS是區分大小寫的.
B: JS是弱類型語言, 所有的變量值都用var類型的變量接收.
var v1 = "abc";
var v2 = 123;
var v3 = false;
var v4 = null;
var v5;
var v6 = new Array(1,2,3);
C: 每行語句末尾的分號可寫可不寫, 建議寫上.
D: JS中的註釋方式和Java中的註釋方式類似.
//單行註釋
/*多行註釋*/
E: 由{}括起來的內容是代碼塊.
變量的命名規則:
A: 變量名的組成必須是: 數字, 大小寫字母, _, $四部分中組成.
B: 數字不能開頭.
JavaScript中值的數據類型:
原始值: //可以理解爲Java中基本類型的值
//存儲在棧中, null除外(存儲在堆中)
String: //JS中沒有字符的概念, 字符串用''或者""括起來效果是一樣的.
Number: //所有的小數和整數
Boolean: //值只有兩個: false, true
Null: //值只有一個: null
Undefined: //值只有一個: undefined
我們可以通過typeof關鍵字, 來校驗變量或者值是什麼類型的值:
格式: typeof 值或者變量名
如果返回值是string, 說明是String類型的原值值.
如果返回值是number, 說明是Number類型的原始值.
如果返回值是boolean, 說明是Boolean類型的原始值.
如果返回值是undefined, 說明是Undefined類型的原始值.
如果返回值是object, 說明是一個引用類型的值或者Null類型的原始值.
引用值: //可以理解爲Java中的引用類型的值.
//存儲在堆中.
/*
JS中是沒有類的, JS是基於對象的.
可以理解爲是: 面向對象.
*/
var b1 = false; //原始值
var b2 = new Boolean(true); //引用值, Boolean 對象是 Boolean 原始類型的引用類型。
var s1 = "abc"; //原始值
var s2 = new String("abc"); //引用值, String 對象是 String 原始類型的引用類型。
var n1 = 123; //原始值
var n2 = new Number(123) //引用值, Number 對象是 Number 原始類型的引用類型。
和Java中的代碼對比:
int a = 10; //Java中的基本類型
Integer ii = new Integer(10); //Java中的引用類型
Integer ii2 = 10; //JDK1.5的新特性: 自動裝箱.
4. JavaScript中的類型轉換
轉成字符串:
變量名.toString();
轉成數字: 從值的第一個字符開始匹配,如果不合法就結束了,如果第一個就不合法返回NaN(not a number)
parseInt(值), parseFloat(值);
強制類型轉換:
Boolean(給定的值); //把給定的值轉成boolean類型, 值是非空字符串, 非零數字, 非null的情況下返回true, 其他返回false.
String(給定的值); //把給定的值轉成字符串.
//類似於 值.toString()這種方式.
Number(給定的值); //把給定的值轉成數字. 如果給定的值是false和true, 那麼則分別轉成0和1.
5. JavaScript中的運算符
JavaScript中的運算符和Java運算符基本一致.
算術運算符:
+, -, *, /, %, ++, --
賦值運算符:
=, +=, -=, *=, /=, %=
比較運算符:
>, <, >=, <=, != , ==, ===(全等於)
/*
==和===解釋:
==: 只校驗值是否相等.
===(全等於): 既校驗值是都相等, 也校驗值的類型是否相同.
*/
邏輯運算符:
&&, ||, !
條件運算符: //和Java中的三元運算符一樣.
var num = num1 > num2 ? num1 : num2;
逗號運算符:
//相當於同時聲明多個變量.
var num1 = 1, num2 = 2, num3 = 3;
6. JavaScript中的語句
和Java中非常類似, 需要注意的是: for循環的初始化條件的類型要寫成var.
7. JavaScript的事件的概述
概述: 前面編寫的JS代碼都是直接在<script>標籤中直接寫的, 按照執行的順序來講, 只要頁面加載到代碼, 就會執行.這樣寫不夠靈活, 一般JS的代碼是由 用戶某些行爲 的觸發來執行的.這些用戶的行爲, 就是事件.
常用事件:
onclick: //鼠標單擊事件
ondblclick: //鼠標雙擊事件
onmouseover: //鼠標懸浮事件
onmousemove: //鼠標移動事件
onmouseout: //鼠標移除事件
onkeyup: //鍵盤擡起事件
onfocus: //獲取鼠標焦點事件
onblur: //失去鼠標焦點事件
onchange: //改變事件. 一般用於下拉列表, 可以用來做菜單聯動.
onsubmit: //提交事件. 可以用來做表單數據校驗.
onload: //頁面加載事件
//記憶: JS事件一般結合 JS函數一起使用.
8. JavaScript的自定義函數
函數的定義格式:
格式一: 普通定義格式, 直接寫.
//注意: 直接寫參數即可, 不需要寫數據類型.
function 函數名(參數1, 參數2){
}
//示例: 計算兩個數字的和
function sum(a,b){
return a + b;
}
格式二: 匿名函數
//把函數綁定到事件上.
onload = function() {
}
9. JavaScript的全局函數
eval(): 將字符串當成腳本來執行. //後邊將Ajax會用到.
var s = "alert('aaa')";
eval(s);
parseInt(); 轉成整數
parseFloat(); 轉成小數
toString(); 轉成字符串
encodeURIComponent(); 把字符串編碼爲 URI 組件。
decodeURIComponent(); 解碼一個編碼的 URI 組件。
//後邊講Cookie的時候會用到, 登陸頁面的時候, 緩存數據可以存在Cookie裏邊, 但是Cookie默認是不能存中文的, 就可以通過這兩個方法對字符串進行編碼和解碼.
10. JavaScript的對象及數組
RegExp: 正則對象.
正則的校驗有兩種方式:
String#match();
//字符串.match("正則表達式");
RegExp#test();
//正則表達式.test(字符串);
數組的定義:
直接定義:
var arr = [1,2,3,"abc",true];
對象方式定義:
var arr = new Array();
arr[0] = 1;
arr[1] = 2;
var arr2 = new Array(3);
//下邊只能是0,1,2
var arr3 = new Array("a","b","c");
11. JavaScript的BOM對象
BOM的概述: //Browser Object Model, 瀏覽器對象模型.
瀏覽器對象的分類:
Window:
Window是瀏覽器對象中最頂層的對象, 使用這個對象的時候可以window.xxx也可以將window省略.
//即: window.alert()和alert()效果一樣.
alert(); 警告框
confirm(); 確認框
open(); 打開一個新的瀏覽器窗口或查找一個已命名的窗口
close(); 關閉瀏覽器窗口。
prompt(); //提示用戶錄入數據
setInterval(); 設置定時, 循環執行.
//用法: setInterval("表達式", 間隔時間-毫秒);
setTimeOut(); 設置定時, 執行一次.
//用法: setTimeOut("表達式", 間隔時間-毫秒);
clearInterval(); 清除定時
clearTimeOut(); 清除定時
History:
瀏覽器的歷史對象.
back():加載 history 列表中的前一個 URL.
forward():加載 history 列表中的下一個 URL.
go(數字):加載 history 列表中的某個具體頁面.
Location:
瀏覽器的控制頁面跳轉對象.
href
Navigator: //瞭解
Screen: //瞭解
12. 案例一: 文字變大效果
13. 案例二: 表單的簡單校驗
HTML下_之JS基本是使用
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章