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
