JavaScript (JS基础)-优快云博客

本文详细介绍了JavaScript的基础知识，包括其作为面向对象的解释型语言的角色，如何与HTML结合使用，以及基本语法、数据类型、运算符、控制语句、数组、函数等内容。此外，还提到了JavaScript中的重要组成部分，如ECMAScript、DOM（文档对象模型）和BOM（浏览器对象模型），并展示了如何在浏览器的控制台进行交互和调试。

JavaScript (JS基础)

1 . 概述

在这里插入图片描述

2. JavaScript

2.1 简介

JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。
主要目的是，验证发往服务器端的数据、增加 Web互动、加强用户体验度等。

//JS  直接写入HTML输出流
document.write("<h2>测试 : 这是二级标题</h2>");
document.write("<p>这是一个测试段落</p>")

//JS  对事件的反应
<button type="button" onclick="alert('欢迎')">点击按钮</button>

//JS  改变HTML内容
var x = document.getElementById("demo");//根据id查找元素
x.innerHTML = "Hello World";           //改变内容

//JS 改变HTML图像 尝试笑脸图片
/*
<script>
function changeImage(s){
    s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
}
</script>
<img id="myimage" οnclick="changeImage(this)" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
*/

//JS  改变HTML样式
var y = document.getElementById("test");
y.style.color = "red";

//JS 验证输入
if isNaN(num){
    alert("不是数字");
}

2.1.1 JavaScript 的组成

在这里插入图片描述

ECMAScript(基础语法) 描述了该语言的语法和基本对象
DOM(文档对象模型) 描述了处理网页内容的方法和接口
BOM(浏览器对象模型) 描述了与浏览器进行交互的方法和接口

2.1.1 开发工具

浏览器：Chrome 或者火狐
开发工具：Hbuilder X
进入浏览器控制台 Console：F12

2.2 基本用法

JS需要和HTML一起使用才有效果，我们可以通过直接或间接的方式将JS代码嵌入在HTML页面中。

行内JS : 写在标签内部的js代码
内部JS : 定义在script标签内部的js代码
外部JS : 单独的js文件，在HTML中通过script标签引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本用法</title>
	</head>
	<body>
		<!-- 行内js -->
		<!-- onclick 点击事件,当点击元素时候触发
			 alert("内容") 弹出层
			 console.log();打印内容在控制台
		 -->
		<button type="button" onclick="alert('Hello JS...')">测试按钮</button>
	</body>
	
	<!-- 内部js -->
	<script type="text/javascript">
		//alert("你好 js 内部JS")
	</script>
	
	<!-- 外部js -->
	<script src="./test.js" type="text/javascript" charset="utf-8"></script>
</html>

console.log("你好,外部JS")

3 . JavaScript基础语法

3.1 JS输出

window.alert() 弹出警告框。
document.write() 方法将内容写到 HTML 文档中。
innerHTML 写入到 HTML 元素。
console.log() 写入到浏览器的控制台。

/* 四种输出方式测试*/
<p id="d">测试段落</p>

<script>
    //方式一 
    window.alert("这是一个弹出警告框");
 
	//方式二  写到HTML文档
	document.write("你好 JS");

//方式三  写到控制台
var num = 5;
console.log(num);

//方式四  操作HTML元素
document.getElementById("d").innerHTML = "测试修改段落";
</script>

3.2 语句和注释,标识符和关键字,变量

变量即一个带名字的用来存储数据的内存空间，数据可以存储到变量中，也可以从变量中取出数据。

<!--   这代表多行注释-->
<!-- 02基础语法
1. 语句
	1. 语句以分号结尾，一个分号即表示一个语句结束。多个语句可以写在一行内
2. 关键字
	关键字也称保留字，是被JavaScript征用来有特殊含义的单词
3. 标识符
	标识符就是一个名字，用来给变量和函数进行命名，有特定规则和规范
	规则：由`Unicode字母`、`_`、`$`、`数字`、`中文`组成
	  1. 不能以数字开头;2. 不能是关键字和保留字;3. 严格区分大小写
	规范：
      1. 见名知意;2.驼峰原则
4. 变量
   变量即一个带名字的用来存储数据的内存空间，数据可以存储到变量中，也可以从变量中取出数据。
    1. JavaScript是一种弱类型语言，在声明变量时不需要指明数据类型，直接用var修饰符进行声明。
   		a. 先声明，后赋值
		b. 声明并赋值
	2. 变量的注意点
		a. 若只声明而没有赋值，则该变量的值为undefined。
		b.  变量要有定义才能使用，若变量未声明就使用，JavaScript会报错，告诉你变量未定义
		c. var可以同时声明多个变量
		d.  若使用var重新声明一个已经存在的变量，是无效的。
		e. 若使用var重新声明一个已经存在的变量且赋值，则会覆盖掉前面的值
		f. JavaScript是一种动态类型、弱类型语言，也就是说，变量类型没有限制，可以赋予各种类型的值。
	变量提升:
		js引擎工作的方式,先解析代码,获取所有被声明的变量,再一行一行运行.
        这造成结果,就是所有变量声明语句,会被提升到代码头部,这就叫做变量提升.
        注意:只有用var声明的变量,才会变量提升.
            -->
		  
		  <script type="text/javascript">
		  	var name = "zs";
			var age = 18;
			console.log(name);
			console.log(age);
			//这代表一个单行注释
			var _a = 2; //数值类型
			var $name = "2" //字符串类型
			var userName = true; //布尔类型
			var user_name = new Date(); //日期类型
			console.log(_a); //若变量只声明未赋值,则变量值为underfined;
			console.log($name);//若变量未申明就使用,会报错is not defined
			console.log(userName);
			console.log(user_name);
			var _a ="4"  ;  //重新声明并赋值,会覆盖前面的值
			console.log(_a,userName);
			
		  </script>

★ JavaScript 变量

变量是用于存储信息的"容器",变量的值可以在整个程序中被修改。

变量是一个名称。字面量是一个值。

变量声明

使用一个变量之前应先声明, 变量是使用关键字 var 来声明的.

var num;
/*   上面的例子中，声明了变量 num
     如果没有在 var 声明语句中给 num 指定初始值， 在 num 存入一个值之前， num 的初始值为 undefined
拓展:JavaScript 使用 var 声明变量, 在支持ES6语法的JavaScript环境中还可以使用 let 声明变量.*/

注意: JavaScript区分大小写。例如，变量 lastName 和 lastname 是两个不同的变量。

赋值运算符

在JavaScript中，等号 = 称为**“赋值”**运算符，而不是“等于”运算符。

例如，x = y 表示将 y 的值赋给 x。

var x = 3;
var y = 7;
x = y; //此时x的值是7

使用变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用变量</title>
	</head>
	<body>
		<script type="text/javascript">
			var i = "你好 JS变量";
			document.write(i);
		</script>
	</body>
</html>

变量的命名

JavaScript是区分大小写的。例如，变量useName和usename是两个不同的变量。

			var test1 = 100;
			document.write(typeof Test1);//此时打印结果是undefined
//tips:  typeof  运算符，用来检测一个变量的类型, 返回一个字符串

typeof "Bob" //返回string
typeof 3.14  //返回number
typeof false //返回boolean
typeof [1,2] //返回object
typeof {naem:"Bob",age:18} //返回object

变量命名规则和规范

规则：

由字母、数字、下划线、$符号组成，不能以数字开头
不能是关键字和保留字，例如：for,while,this,name...
区分大小写
不能是算数运算符

规范：

变量名必须有意义
遵守驼峰命名法
建议不要用$作为变量名

变量命名不允许使用连字符（-），它被保留用于减法。

注意:不能使用任何特殊符号，如我的#num，%num等

JavaScript 保留关键字

引用来源:https://www.runoob.com/js/js-reserved.html

abstract	arguments	boolean	break	byte
case	catch	char	class*	const
continue	debugger	default	delete	do
double	else	enum*	eval	export*
extends*	false	final	finally	float
for	function	goto	if	implements
import*	in	instanceof	int	interface
let	long	native	new	null
package	private	protected	public	return
short	static	super*	switch	synchronized
this	throw	throws	transient	true
try	typeof	var	void	volatile
while	with	yield

Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。

*标记的关键字是 ECMAScript5 中新添加的。

变量提升

JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。

//下面打印的结果是undefined,因为存在变量提升,变量a已经申明,但还未赋值
			console.log(a);
			var a = 1;
//等于下面这段代码
//var a;console.log(a);
//a = 1;

引用地址:https://www.w3cschool.cn/javascript/js-variables.html#&gid=1&pid=4

3.3 数据类型

		  <!--
			03 数据类型
				1. undefined
					undefined类型的值是undefined。
					undefined 是一个表示"无"的原始值，表示值不存在。
				2. null
					null类型是只有一个值的数据类型，即特殊的值null。
				　　undefined派生自null，所以等值比较返回值是true。
				　　它表示空值，即该处的值现在为空，它表示一个空对象引用。
				3. 布尔类型
					布尔类型有两个值：true、false。常用来做判断和循环的条件。
				4. 数值
					数值型包含两种数值：整型和浮点型。
				5. 字符串类型
					　使用'' 或 ""引起来，如：'sxt'，"good"。
					　使用加号`+`可以进行字符串的拼接
                6.对象(object)(引用) : 各种值组成的集合
                	a. 对象(object){name:"kaka",age:"18"}
					b. 数组(array) [1,2,3]
					c. 函数(function) function test(){}
			 -->
			 <script type="text/javascript">
			 	var a;
				console.log(a);  //underfined
				var b = null;
				console.log(b);
				console.log( a == b); // null == underfined is true
				console.log(1 == b);  // false
				var c = true;         //布尔类型
				console.log(true);
				var d = 1;
				var e = 1.23;
				console.log(d+e);     //数值类型
				var f = "1";
				var g = "hello"
				console.log(f + '' + g);//字符串
				console.log(d + '' + f);
				
				var obj ={
					"name":"kobe",
					"test":{"king":"James"}
				}
				console.log(obj);
				console.log(obj.name);
				console.log(obj.test.king);				
			 </script>
//tips Symbol是ES6引入的新的原始数据类型,表示独一无二的值

3.4 类型转换

 <!-- 04 类型转换 
		数值
		parseInt()
		parseInt()在转换之前，首先会分析该字符串，判断位置为0处的字符，判断它是否是个有效数字，如果不是，则直接返回NaN，不再继续，如果是则继续，直到找到非字符。
							
		parseFloat()
		parseFloat()方法与parseInt()方法的处理方式相似，从位置 0 开始查看每个字符，直到找到第一个非有效的字符为止，然后把该字符之前的字符串转换成数字。不过，对于这个方法来说，第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的，parseFloat()方法会把这个小数点之前的字符串转换成数字。
						 
		字符串
        几乎每个数对象都提供了toString()函数将内容转换为字符串形式。
        最为简单的转换为字符串的方式，直接在任意数据后面 + ''或""即可。
        注：toString()不能对null和undefined使用
			-->
			<script type="text/javascript">
				console.log(parseInt("123blue"));  //pareInt   123
				console.log(parseInt("0xA"));       //10
				console.log(parseInt("blue"));      //NaN
				console.log(parseInt("-0.14"));     // -0
				var num = "10";
				console.log(num + 10)               //1010
				console.log(parseInt(num));         //10
				console.log(parseInt(num) + 10);    //20
				
				console.log("-----------------")
				console.log(parseFloat("1234blue")); // 1234
				console.log(parseFloat("2.34.456")); // 2.34
				console.log(parseFloat("2.14")); // 2.14
				console.log(parseFloat("blue")); // NaN
				
				console.log("-----------------")
				var a1 = 10;
				var a2 = true;
				console.log(a1);
				console.log(a2);
				console.log(a1.toString());
				console.log(a2.toString());
				console.log(a1 + '');
				console.log(a1 + "");
				var a3;
				 //console.log(a3.toString()); // Uncaught TypeError: Cannot read properties of undefined (reading 'toString')
				var a4 = null;
				 //console.log(a4.toString()); // Uncaught TypeError: Cannot read properties of null (reading 'toString')
				console.log(a3 + '');
				console.log(a4 + "");
				
			</script>

<!--显示转换
				Number提供了toFixed()函数根据小数点后指定位数将数字转为字符串,四舍五入-->
					<script type="text/javascript">
						// toFixed()
						var data = 1.4;
						console.log(data);//1.4
						console.log(data.toFixed(0));//1
						var data1 = 1.46;
						console.log(data1);//1.46
						console.log(data1.toFixed(1));//1.5
						
						console.log("=========");
						//Number
						console.log(Number('5.5'));//5.5
						console.log(Number('56'));//56
						console.log(Number('5.5.6'));//NaN
					</script>

3.5 运算符

<!-- 
			 05 运算符
			 	1. 算术运算符
			 	2. 赋值和扩展运算符
			 	3. 比较运算符
			 	4. 逻辑运算符  &&  ||   ！
			 	5. 三目运算符  ? :
			 -->
			 <script type="text/javascript">
			 	var y = 5;   //算术运算符
				console.log(y+2);//7
				console.log(y-2);//3
				console.log(y*2);//10
				console.log(y/2);//2.5
				console.log(y%2);//1
				console.log(++y);//6
				console.log(--y);//5,因为上行已经执行自增,因此结果是5
				var y = 10;
				console.log(y++);//10,返回的值不一样。++i 返回的是 i=i+1 等式左边的值，即加一后的值。i++ 返回的是 i=i+1 等式右边的值，即加一前的值。
				console.log(y--);//10,但是如果执行自增后就是11;???
				
				console.log("--------赋值和扩展运算符-------------")
				var a = 10;
				var b = 5;
				//a = b;//将b的值给a
				//a += b;//a=a+b
				//a -= b;//a =a-b
				//a *= b;
				//a /= b;
				//a %= b;
				console.log(a,b);
				
				console.log("---------比较运算符------------")
				var c =5;
				console.log(c == "5");//true,等于,值比较
				console.log(5 === "5");//false全等,值和类型
				console.log(c != "5");//false,不等于,还有>< >= <=几种
				console.log(a>9 && c < 9);//true且
				console.log(a>9 && c > 9);//false  且=and
				console.log(a>9 || c > 9);//true   或=or
				console.log(!(a>c));//false        取反
				
				//三目运算符   ? :
				var score = 59;
				var result = score >= 60 ? "恭喜你及格了！" : "你个小渣渣！";
				console.log(result);
				var score = 60;
				var result = score >= 60 ? "恭喜你及格了！" : "你个小渣渣！";
				console.log(result);
			 </script>

3.6 控制语句

			 <!--
			 	06 控制语句
			 		1. 单选泽
			 			if (判断条件) {
			 				满足条件执行的语句
			 			}
			 			注：如果执行的语句只有一条，可以不写大括号，但建议写上
			 		2. 双选择
			 			if (判断条件) {
			 				满足条件执行的语句
			 			} else {
			 				当条件不满足时执行的语句
			 			}
			 		3. 多选择
			 			if (判断条件) {
			 				满足条件执行的语句
			 			} else if (判断条件) {
			 				满足当前条件执行的语句
			 			} else if (判断条件) {
			 				满足当前条件执行的语句
			 			} else {
			 				当条件不满足时执行的语句
			 			}
			 	2. 循环语句
			 		for循环
			 			for (初始化语句; 判断条件语句; 控制条件语句 ) {
			 				循环执行的语句
			 			}
			 			
			 			break与continue
			 			　　break: 停止本层循环
			 			　　continue: 暂停本次循环，继续下一次
			  			  -->
			 
			 <script type="text/javascript">
			 	var score = 80;
				if (score >= 60) {
					console.log("分不在高,及格就行");//单选择
				}
				console.log("执行完条件之后的后续代码!");
				
				console.log("-------分割线------")
				if (score >= 60){
					console.log("分不在高,及格就行!");//双选择
				} else{
					console.log("革命尚未成功,同志仍需努力!");
				}
				console.log("--------分割线--------")
				
				if (score < 60){
					console.log("革命尚未成功,同志仍需努力!");
				} else if(60 < score <= 80){
					console.log("表现不错,继续努力!");
				} else {
					console.log("哎呦不错奥!")
				} 
				
				console.log("--------举例for循环,打印数字1-10--------")
				for (var i = 0;i < 10 ; ++i){
				
					console.log(i);//i++显示0到9,++i同理.但是i加引号成字符串,就变成10个i
				}
				
				
			 </script>

		<div id="demo" style="color: blue;">
			
		</div>
		<script type="text/javascript">
			var d = new Date().getDay();
			switch (d) 
			{ 
			  case 0:x="今天是星期日"; 
			  break; 
			  case 1:x="今天是星期一"; 
			  break; 
			  case 2:x="今天是星期二"; 
			  break; 
			  case 3:x="今天是星期三"; 
			  break; 
			  case 4:x="今天是星期四"; 
			  break; 
			  case 5:x="今天是星期五"; 
			  break; 
			  case 6:x="今天是星期六"; 
			  break; 
			}
			console.log(d);//3
			console.log(x);//今天是星期三
			
			var d1=new Date().getDay();
			switch (d1)
			{
			    case 6:x="今天是星期六";
			    break;
			    case 0:x="今天是星期日";
			    break;
			    default:
			    x="期待周末";
			}
			document.getElementById("demo").innerHTML=x;
			var x = 1;
			var i = 1 ;
			while (  i < 5)
			{
			    x=x + "The number is " + i + "<br>";
			    i++;
				console.log(x);
			}
		</script>

3.7 数组Array

		<!--
			数组
				数组定义
					var arr = [值1,值2...];
					var arr = new Array(值1,值2...);
					var arr = new Array(size)
				1.长度可变
				2.数组中数据类型任意
				3.索引从0开始
				4.可以使用任意字符当作数组索引,如果索引非正整数,称为数组属性,属性不影响数组长度
				
				基本操作
				  1.数组长度可以通过length属性获取,长度可以任意修改
				    获取长度: 数组.length
					设置长度: 数组.length = 新长度
				  2.获取数组元素通过索引获取,索引可以越界
				    获取元素:数组[下标]
					设置元素:数组[下标] = 值
		 -->
		 <script type="text/javascript">
			 // 隐式创建
		 	var arr = [];
			console.log(arr);
			var arr1 = [1,2.2,false];
			console.log(arr1);
			
			//直接实例化
			var arr2 = new Array(1,2,3);
			console.log(arr2);
			
			//创建数组并指定长度
			var arr3 = new Array(5);
			console.log(arr3);//empty*5
			
			//获取数组长度
			console.log(arr1.length);//3
			//设置数组长度
			arr1.length = 8;
			console.log(arr1.length);//8
			
			//获取数组元素
			console.log(arr1[0]);//1
			console.log(arr1[10]);//undefined
			//设置元素,设置属性
			arr1[5] = '新设置元素';
			console.log(arr1);// [1, 2.2, false, empty × 2, '新设置元素', empty × 2]
			arr1['no'] = 'kk';
			console.log(arr1);//[1, 2.2, false, empty × 2, '新设置元素', empty × 2, no: 'kk']
			console.log(arr1.length);//8
		 </script>

	<script type="text/javascript">
	//数组的遍历
		var arr = [1,2.2,true,'你好'];
		//普通for循环 -->不遍历属性
		for(var i = 0;i < arr.length;i++){
			console.log(arr[i]);
		}
		console.log("===================");
		//for...in -->不便利属性和索引中的underfined
		for(var index in arr){
			console.log(index);
			console.log(arr[index]);
			console.log("-----");
		}
		console.log("=============");
		//forEach  -->不便利索引中的underfined
		arr.forEach(function(element,index){
			console.log(element);
			console.log(index);
			console.log("-----");
		})
		
	</script>

数组提供的操作方法

push 添加元素到最后
unshift 添加元素到最前
pop 删除最后一项
shift 删除第一项
reverse 数组翻转
join 数组转成字符串
indexOf 数组元素索引
slice 截取（切片）数组，原数组不发生变化
splice 剪接数组，原数组变化，可以实现前后删除效果
concat 数组合并

3.8 JS函数

函数，即方法。就是一段预先设置的功能代码块，可以反复调用，根据输入参数的不同，返回不同的值。函数也是对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>FunctionTest</title>
		<script type="text/javascript">
			function myFunction(){
				alert("Hello world...")
			}
		</script>
	</head>
	<body>
		<button type="button" onclick="myFunction()">点击函数</button>
	</body>
</html>

<!-- 函数的定义 
		 	1. 函数声明语句
		 		function 函数名(参数1,参数2) {
		 			需要执行的代码
		 			// return;
		 			// return 返回值;
		 		}
		 	2. 函数声明表达式
		 		var 函数名 = function(参数1,参数2) {
		 			需要执行的代码
		 			// return;
		 			// return 返回值;
		 		}
		 函数的调用
		 	没有返回值：函数名();
		 		如果没有返回值，接收的是undefined
		 	有返回值：var 变量名 = 函数名();
		 		如果有返回值，接收的是return的结果
		 函数的参数
		 		a.	实参可以省略，那么对应形参为undefined
		 		b.	若函数形参同名（一般不会这么干），在使用时以最后一个值为准。
		 		c.	可以给参数默认值：当参数为特殊值时，可以赋予默认值。
		 		d.	参数为值传递，传递副本；引用传递时传递地址，操作的是同一个对象。
		 	
		 return语句
		 	　作用：
		 		- 在没有返回值的方法中，用来结束方法。
		 		- 有返回值的方法中，一个是用来结束方法，一个是将值带给调用者。
		 函数的作用域
		 	直接定义的变量，是全局变量；定义在函数内部的变量，是局部变量。
		 	无法在函数外使用函数内部定义的局部变量。
		-->
		<script type="text/javascript">
			function t1(){//无参数的函数
				console.log('Hello KB');//函数申明语句
			}
			t1();//调用方法
			
			var t2 = function (){
				console.log('' == 0);//函数声明表达式
			}
			t2();//调用方法
			
			function f1(a,b){
				console.log(a + '*' + b + '=' + (a*b));
			}
			
			f1(3,4,4);//3*4=12
			f1(3);//3*undefined=NaN
			f1();//undefined*undefined=NaN
			
			function f2(a=1,b=2){
				return a + b;//函数调用,存在返回值可以变量接收,若接收无返回值函数为undefined
			}
			console.log(f2());//3
			console.log(f2(5,7));//12
			
			//参数为值传递，传递副本；引用传递时传递地址，操作的是同一个对象。
			
		</script>

3.9 内置对象

String

<script type="text/javascript">
			// charAt(idx)：返回指定位置处的字符
			var msg = 'IT is very good!';
			var result = msg.charAt(1); // T
			console.log(result, result.length);
			// indexOf(Chr)：返回指定子字符串的位置，从左到右。找不到返回-1
			var result = msg.indexOf("very");// 6
			console.log(result);
			// substr(m, n)：返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾。
			result = msg.substr(1, 8); // T is ver
			console.log(result, result.length);
			// substring(m,n)：返回给定字符串中从m位置开始，到n位置结束，不包含n位，如果参数n省略，则意味着取到字符串末尾。
			result = msg.substring(1, 8); // T is ve
			console.log(result, result.length);
			// toLowerCase()：将字符串中的字符全部转化成小写。
			result = msg.toLowerCase(); // it is very good!
			console.log(result, result.length);
			// toUpperCase()：将字符串中的字符全部转化成大写。
			result = msg.toUpperCase(); // IT IS VERY GOOD!
			console.log(result, result.length);
			// replace(s1, s2)：将s1字符串替换为s2字符串
			result = msg.replace('IT', 'it');
			console.log(result, result.length);
		</script>

Math

var num = Math.random(); // 生成大于0小于1的浮点数
console.log(num);
num = Math.ceil(3.11223); // 向上取整 4
console.log(num);
num = Math.floor(3.55667); // 向下取整 3
console.log(num);
num = Math.round(3.11223); // 四舍五入 3
console.log(num);

Date

// 获取日期时间
getFullYear()年, getMonth()月, getDate()日, getDay()周,
getHours()时,getMinutes()分,getSeconds()秒
// 设置日期时间
setFullYear(), setMonth(), ...
toLoacaleString()
// 获取日期时间
var current_date = new Date(); // 创建一个日期对象
console.log(current_date);
current_date_time = current_date.getFullYear(); // 年
console.log(current_date_time);
current_date_time = current_date.getMonth() + 1; // 月，返回的是0~11
console.log(current_date_time);
current_date_time = current_date.getDay(); // 周
console.log(current_date_time);
current_date_time = current_date.getDate(); // 日
console.log(current_date_time);
current_date_time = current_date.getHours(); // 时
console.log(current_date_time);
current_date_time = current_date.getMinutes(); // 分
console.log(current_date_time);
current_date_time = current_date.getSeconds(); // 秒
console.log(current_date_time);
// 返回一个本地时间的字符串
currrent_date_time = current_date.toLocaleString();
console.log(currrent_date_time);
// 设置日期时间
current_date.setFullYear(2008);
current_date.setMonth(7);
current_date.setDate(8);
current_date.setHours(20);
current_date.setMinutes(8);
current_date.setSeconds(8);
console.log(current_date.toLocaleString());

3.10 对象

window对象

BOM的核心对象是window，它表示浏览器的一个实例。window对象有双重角色，它既是通过
JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象，因此有权访parseInt()等方法。如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引（从0开始，从左至右，从上到下）或者框架的名称来访问相应的window对象。

A 系统对话框

a. 消息框:alert，常用。

b. 输入框:prompt，返回提示框中的值。

c. 确认框:confirm，返回 true/false.

<div id="dv">this is a div</div>
<button onclick="test_alert();">消息框</button>
<button onclick="test_prompt();">输入框</button>
<button onclick="test_comfirm();">确认框</button>
<script type="text/javascript">
 // 消息框
  function test_alert() {
    alert('消息框！');
 }
  // 输入框
  function test_prompt() {
    var item = prompt('请输入年龄');  // item得到输入的值
    alert(item);
    alert(prompt('请输入年龄', 18));  // 将输入的值输出
 }
  /*
 确认框
 返回值：boolean（true|false）
  */
  function test_comfirm() {
    var result = confirm('真的要改吗？');
    if (result) {
      // DOM操作
      var ele = document.getElementById("dv");
      ele.style.color = "red";
      ele.innerHTML = "<span>div is red</span>";
   } else {
      alert("没事别瞎点");
   }
 }
</script>

B 打开窗口

window.open() 方法既可以导航到一个特定的URL也可以用来打开一个新的窗口

<input type="button" onclick='openBaidu();' />
<script type="text/javascript">
  function openBaidu() {
    window.open('http://www.baidu.com', '_blank');// 新窗口打开百度
    window.open("http://www.baidu.com", "_self");// 当前窗口打开百度
    // window.open(); // 空白窗口
 }
</script>

C 时间函数

setTimeout() ：在指定的毫秒数后调用函数或计算表达式，只执行一次。
setInterval() ：在指定的毫秒数后不停的调用函数或计算表达式，多次执行。

<h1 id="h1"></h1>
<input type="button" value="停止显示时间" onclick='stopShow();' />
<script type="text/javascript">
  // 延迟3 秒后出现 alert
  /*
function hello() {
alert("对不起, 久等了！");
}
window.setTimeout("hello()", 3000);
*/
  // 不停的打印当前时间，当时间秒数为0时显示为红色
  function showTime() {
    // 拿到当前时间
    var date = new Date();
    var time = date.toLocaleString();
    // 拿到相应对象
    var h1 = document.getElementById('h1');
    h1.innerHTML = time;
    console.log(date.getSeconds());
    var sec = date.getSeconds();
    sec = sec % 10; // 对10取余
    // 根据需求添加样式
    if(0 == sec) { // 当时间的秒数变成0时，显示红色字体
      h1.innerHTML = '<span style="color:red">' + time + '</span>';
   }
 }
  /*
* 定时操作
* 第一个参数：执行的方法；
* 第二个参数：定时，单位是毫秒
*/
  // 接收setInterval()返回的标识值
  var timeout = window.setInterval(showTime, 1000);
  // 停止操作
  function stopShow() {
    window.clearInterval(timeout); // 返回的标识值用来停止函数
 }
</script>

location对象

location对象是window对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。也可通过 window.location 属性来访问。
location 对象的属性 href ：设置或返回完整的 URL；
location 对象的方法 reload() ：重新加载当前文档。

<input type="button" value="刷新" onclick="window.location.reload();" />
<input type="button" value="百度" onclick="openBaidu();" />
<script type="text/javascript">
  function openBaidu() {
    // 用新的文档替换当前文档
    window.location.href = "http://www.baidu.com";
 }
</script>

document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，也可通过window.document 属性对其进行访问。


 **说在结尾的话**

这篇笔记如果对你有用先收藏（别忘了顺便给个大拇指，你们的鼓励也是我尽力写好每一篇笔记的动力一部分），以后用到里面的东西更方便瞅一瞅。