JavaScript
結合方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js結合方式</title>
</head>
<body>
<!--引入方式1，使用script標簽，在標簽內容里寫代碼-->
<script type="text/javascript">
alert("hello world");
</script>
<!--引入方式2，導入js文件，注意，script標簽內容需要為空-->
<script type="text/javascript" src="hello.js"></script>
</body>
</html>
hello.js
alert("哈哈");
打開瀏覽器，會依次彈出兩條警告。
數據類型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js數據類型</title>
</head>
<body>
<script type="text/javascript">
/* Java數據類型
1、基本數據類型 (8種)
2、引用數據類型 */
/* js數據類型
1、原始類型
number 數字 不分整型和浮點型
string 字符串 在java中是引用類型，js中是原始類型
boolean 布爾
null 一般是人為賦值，對象數據類型的占位符
undefined null的衍生值，通常是系統自動賦值，當我們創建一個變量但是沒有初始化時，默認為undefined
2、對象類型 */
var a;
var b = null;
alert(a); // 彈出undefined
alert(b); // 彈出null
</script>
</body>
</html>
運算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js運算符</title>
</head>
<body>
<script type="text/javascript">
var a = "123";
alert(typeof a);
a = +a; // 變成了數字類型，因為“+”是數字運算符，所以需要a是數字類型，于是自動轉換
alert(typeof a);
// 除了+0, -0和NaN之外，所有其他number轉為boolean時候都是true
// NaN是錯誤的數據，比如 var c = +"abc";字母無法轉為數字
// number -> bool 除了+0, -0和NaN之外都是true
// string -> bool 只要不為空，就是true
// null -> false
// undefined -> false
// Object -> true
if (-1) {
alert("true"); // 執行這條
} else {
alert("false");
}
// 使用“+”時，如果右字符串，則和java一樣，轉換為字符串
var e = "33" + 1;
alert(e); // 彈出331
// 在其他運算符中，字符串會轉換成數字
var f = "33" - 1; // 彈出32
alert(f);
/*
alert("2" > 1); // 優先往數字轉，true
alert("2" > "1") // 字符串的比較規則比較ASCII碼
alert(1 == true); // true
alert(2 == true); // false
alert(0 == false); // true
alert(null == undefined); // true
alert(NaN == NaN); // false, 凡是NaN參與運算符，除了 ! 和 !=,其他都是false
*/
/* === 在比較的時候回包含類型，類型不一樣直接false*/
</script>
</body>
</html>
對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>對象</title>
</head>
<body>
<script type="text/javascript">
// Function是一個特殊的對象
function fun() {
alert("hello1");
}
alert(fun.toString());
// 1、對象的創建
var fun2 = function() {
alert("hello2");
};
fun2();
// 2、對象屬性
alert(fun2.length) // length表示函數的參數個數
// 3、對象的方法
//toString()會打印函數定義
function fun3(a, b) {
alert("和為"+ (a + b));
// arguments.length表示函數運行時實際傳入的參數個數
alert("實際傳入參數個數"+arguments.length);
}
// 只要函數名對了就行，不管參數
fun3(1, 2);
fun3(1, 2, 3); // 只用前兩個
fun3(); // 兩個undefined，返回NaN
</script>
</body>
</html>
函數進階
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
function fun(a, b) {
alert(a + b);
return a + b;
}
</script>
<!--使用void將函數包起來，用于攔截方法的返回值，可以避免新加載頁面-->
<a href="javascript:void(fun(1, 2));">點我</a>
<a href="javascript:void(0)" onclick="alert('haha')">再點我</a>
</body>
</html>
三個包裝類
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三個包裝對象</title>
</head>
<body>
<script type="text/javascript">
/* Java的八大基本數據類型都有對應的包裝類，自動拆裝箱機制
js中5個原始類型，有3個包裝類，Number、String、Boolean
js中的偽對象概念，原始類型可以直接調用對應包裝類型的方法和屬性
*/
// 創建，填寫任何類型的參數都可以，也即是說有強制類型轉換的功能
var str = new String("Hello");
alert(str.length);
alert("hello".length);
alert(str instance String); // true
alert("hello" instance String); //false,"hello"不是對象而是基本數據類型
</script>
</body>
</html>
Global對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
// parseInt 轉換成整數 => 從左到右依次轉換.轉換到遇到不能轉換的字符為止
// parseFloat 轉換成浮點數
var str = "123";
var num1 = parseInt(str);
var num2 = +str;
var num3 = new Number(str);
alert(typeof num);
//------------------------------------------
var str2 = "123a";
alert(+str2); // NaN
alert(parseInt(str2));//123
//-------------------------------------------
var str3 = "a123";
alert(parseInt(str3));//NaN
//-------------------------------------------
var str4= "3.14";
alert(parseFloat(str4));//3.14
alert(parseInt(str4));//3
</script>
<script type="text/javascript">
//isNaN() 判斷一個值是否是NaN
var num = NaN;
/* if(isNaN(num)){
alert("是NaN");
}else{
alert("不是NaN");
} */
//-------------------------------------------------
//eval() 傳入字符串，當成表達式來使用并返回
alert(eval("1+1"));//2
alert(eval("new String('abc')"));// abc
</script>
</body>
</html>
數組對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array對象</title>
</head>
<body>
<script type="text/javascript">
//數組
//對象的功能
//表達數組,類似于java中的數組. 可以存取值
//對象的創建
var arr1 = [1,2,3,4];
var arr2 = new Array(1,2,3,4);
var arr3 = new Array(4);// 如果調用數組構造,只傳遞一個參數,并且參數的值是數字.那么該值將作為數組初始化長度
//對象的屬性
// length 長度
//alert(arr1.length);//4
//alert(arr2.length);//4
//alert(arr3.length);//4
//對象的方法
//pop 彈棧 將0索引 的變量移除并返回
//push 壓棧 將一個值放入數組的0索引位置
//reverse 將數組反轉 => 會對數組本身順序進行調整
//alert(arr1.reverse());
//sort 排序 => 默認會按照字符串比較的方式排序.而不是數字.
var arr5 = [100,1,5,9,2,3,8,7];
//alert(arr5.sort(abc));
// sort 可以傳入一個比較器 => 比較器決定排序規則
function abc(a,b){
return a-b;
}
//----------------------------------------------------------------------
//進階 js中的array沒什么原則
//1 數組中元素的類型可以任意
//2 數組的長度是可以隨時變化的.
var arr6 = ["haha",3.14,true,null,undefined,new Object()];
alert(arr6.length);
arr6[10] = "itcast";
alert(arr6[10]);//itcast
alert(arr6.length);// 11
alert(arr6[9]);//undefined
</script>
</body>
</html>
2017.3.8
by @sunhaiyu
