【JavaScript】知识点总结

JavaScript

是基于对象和事件驱动的脚本语言，应用于客户端。

• 基于对象：提供了好多对象，可以直接使用
• 事件驱动：html做网站静态效果，JavaScript可以实现动态效果
• 客户端：专门指的浏览器

JavaScript组成

1. ECMAScript
   ECMA：组织（欧洲计算机协会），由该组织制定的语法，语句……
2. BOM
   Browser Object Model（浏览器对象模型）
   
3. DOM
   Document Object Model（文档对象模型）
   

javascript和html的结合方式

• 第一种：直接在html中嵌入javascript代码

<script type = “text/javascript”>
/*javascript代码*/
</script>

• 第二种：使用script标签，引入一个外部的js文件

<script type = “text/javascript” src = "js文件路径">
</script>

数据类型和声明变量

javascript原始类型：string、number、boolean、null、undefined
定义变量：都是用关键字var

var str = "abc";
var m = 123;
var flag = true;
var aa;	//undefined

可以使用typeof();查看当前变量的类型。

js语句

if语句、switch语句、while语句、for语句、do-while语句和java语句相同
不同就在于变量类型的声明。

运算符

这里只说和java有所不同的地方

数值运算

var j = 123 / 1000 * 1000;

该运算在java中应该是0，而因为js不区分整数和小数，所以结果为123.。

字符串的相加相减运算

var str = "456";
alert(str + 1);		//结果为4561
alert(str - 1);		//结果为455

如果相加，则字符串连接；如果相减，则做数值减法，如果str不是数值，则NaN表示不是数值。

boolean类型相加减

var flag1 = true;
var flag2 = false;

做数值加减时，true为1，false为0。

==和===

var a = "5";
if (a == 5) {
	alert(5);
} else {
	alert("other");
}

==比较只是值；而===还比较类型，如果上面的==换为===，则不等于5，因为string和number类型不同，所以不等。

js的数组

定义方式

数组元素允许不同

• 第一种：

var arr = [1, "5", true];

• 第二种：

var arr = new Array(3);	//数组长度为3
arr[0] = xxx;

• 第三种：

var arr = new Array(1, 2, 3);	//数组元素为1， 2， 3

Array常用属性和方法

属性：length——数组的长度
方法：

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];

document.write(arr1.join("-"));	//1-2-3
document.write(arr2.push("abc"));	//4
document.write(arr2);	//4,5,6,abc
document.write(arr2.pop());	//abc
document.write(arr2);	//4,5,6
arr1.reverse();
document.write(arr1);	//1,2,3

正常打印数组，以‘，’间隔，而join可以使用其他符号间隔
push是在数组末尾添加元素，并返回新的长度，也可以push一个数组，但是是把push的数组当成一个字符串添加的，长度增加1
pop删除末尾元素，返回被删元素
reverse删除元素

js的函数

定义函数（三种）

js函数的参数是不需要声明类型的

1. 使用关键字function

function 方法名 (参数列表) {
	方法体；
	返回值；（有无视场景而定）
}

2. 匿名函数

var 变量名 = function（参数列表） {
	方法体和返回值；
}

3. 使用js的一个内置对象——Function

var 变量名 = new Function（“参数列表”， “方法体和返回值”）;

js的全局变量和局部变量

全局变量：在script标签里面定义的变量，这个变量可以在页面中js部分都可以使用（包括其他script标签内）。
局部变量：在方法内部定义一个变量，只能在方法内部使用。

js的全局函数

由于不属于任何一个对象，直接写名称使用

var str = "alert(123)";
eval(str);	//执行js代码

//encodeURI对字符进行编码
var str1 = "测试中文aaa123";
var encode1 = encodeURI(str1);
document.write(encode1);

//decodeURI		
var decode1 = decodeURI(encode1);
document.write(decode1);

//isNaN	如果是数字返回false，否则返回true
var str2 = "123";
document.write(isNaN(str2));

//parseInt 将字符串转int
var str3 = "123";
document.write(parseInt(str3) + 1);

js函数重载

js中是不存在重载的，如果函数名相同，会调用最后一个方法
可以通过其他方式模拟重载
方法传入的参数都会保存在arguments数组中，所以参数可以很多，就看方法体怎么处理了

function add(a, b) {
	alert("length:" + arguments.length);
	var sum = 0;
	for (var i = 0; i < arguments.length; ++i) {
		sum += arguments[i];
	}
	return sum;
}

alert(add(1, 2));		
alert(add(1, 2, 3));	
alert(add(1, 2, 3, 4));	

js的String对象

与html相关的方法

与java相似的方法

js的Date对象

var date = new Date();
document.write(date);	//Sat May 09 2020 10:46:00 GMT+0800 (中国标准时间)
//使用toLocaleString方法转换为中国习惯的格式
document.write(date.toLocaleString());	//2020/5/9 上午10:46:00
//获取当前的年
document.write(date.getFullYear());	
//获取当前的月	返回值0～11
document.write(date.getMonth() + 1);	
//获取当前的星期	返回值0～6，周日是0
document.write(date.getDay());	
//获取当前的天
document.write(date.getDate());	
//获取当前的小时
document.write(date.getHours());	
//获取当前的分钟
document.write(date.getMinutes());	
//获取当前的秒
document.write(date.getSeconds());	
//获取毫秒数，从1970-1-1开始算起的毫秒数
document.write(date.getTime());	

注意：getMoth()返回的是0～11，所以要加1，getDay()返回的0～6,周日返回0，其他正常。

js的BOM对象

• navigator：获取客户机的信息（浏览器的信息）
  navigator.appName;//浏览器的名字
• screen：获取屏幕的信息
  screen.width;//屏幕宽度
• location：请求url地址
  location.href;//获取到请求url的地址、也可以设置url的地址

<input type = "button" value = "跳转" onclick = "href1();" />
<script type = "text/javascript">
	function href1() {
		location.href = "xxxx.html";	//跳转到新的url
	}
</script>

• history：请求url的记录
  访问上一个页面：history.back(); || history.go(-1);
  访问下一个页面：history.forward(); || history.go(1);
• window：窗口对象、顶层对象（所有bom对象都是在window对象里面操作的）
  常用方法：

alert(str);	//弹出一个对话框
prompt("please input", "输入框默认内容");	//弹出一个输入对话框
confirm(“是否删除”);	//弹出一个确认框
open("url", "", "窗口特征 宽度和高度");		//打开一个新的窗口
close();	//关闭窗口，浏览器兼容性差

setInterval("js的代码"，毫秒数)；	//每隔指定毫秒后，执行一次js代码
setTimeout("js的代码", 毫秒数)；	//在指定毫秒后，只执行一次js代码

js的DOM对象

document对象

Element对象