day04_前端常识之JavaScript

什么是JavaScript，有什么用？

JavaScript是运行在浏览器上的脚本语言。简称JS。它是网景公司（NetScape）的布兰登艾奇（JavaScript之父）开发的，最初叫做LiveScript。LiveScript的出现让浏览器更加的生动了，不再是单纯的静态页面了。页面更具有交互性。在历史的某个阶段，SUN公司和网景公司他们之间有合作关系，SUN公司把LiveScript的名字修改为JavaScript。JavaScript这个名字中虽然带有“Java”但是和Java没有任何关系，只是语法上优点类似。他们运行的位置不同，Java运行在JVM当中，JavaScript运行在浏览器的内存当中。avaScript程序不需要我们程序员手动编译，编写完源代码之后，浏览器直接打开解释执行。JavaScript的“目标程序”以普通文本形式保存，这种语言都叫做“脚本语言”。

JS 的组成

ECMAScript：ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JavaScript注释

单行注释： // 我是一行文字，不想被 JS引擎执行，所以注释起来
多行注释：/* */ 用来注释多行文字

HTML中嵌入JavaScript代码

方式一：行内式 JS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<!--
			1、要实现的功能：
				用户点击以下按钮，弹出消息框。

			2、JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。
			在JS中有很多事件，其中有一个事件叫做：鼠标单击，单词：click。并且任何
			事件都会对应一个事件句柄叫做：onclick。【注意：事件和事件句柄的区别是：
			事件句柄是在事件单词前添加一个on。】，而事件句柄是以HTML标签的属性存在
			的。

			3、onclick="js代码"，执行原理是什么？
				页面打开的时候，js代码并不会执行，只是把这段JS代码注册到按钮的click事件上了。
				等这个按钮发生click事件之后，注册在onclick后面的js代码会被浏览器自动调用。
			
			4、怎么使用JS代码弹出消息框？
				在JS中有一个内置的对象叫做window，全部小写，可以直接拿来使用，window代表的是浏览器对象。
				window对象有一个函数叫做:alert，用法是：window.alert("消息");这样就可以弹窗了。
			
			5、JS中的字符串可以使用双引号，也可以使用单引号。

			6、JS中的一条语句结束之后可以使用分号“;”，也可以不用。
		-->
		<input type="button" value="点击我" onclick="window.alert('吓死你')" />
		<!-- window. 可以省略。-->
		<input type="button" value="点击我" onclick="alert('在吓你一次')" />
	</body>
</html>

方式二：内嵌 JS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	<!--
	javascript的脚本块在一个页面当中可以出现多次。没有要求。
	javascript的脚本块出现位置也没有要求，随意。
	-->
	<script type="text/javascript">
		/*
				暴露在脚本块当中的程序，在页面打开的时候执行，
				并且遵守自上而下的顺序依次逐行执行。（这个代
				码的执行不需要事件）
		*/
		window.alert("Hello World!"); // alert函数会阻塞整个HTML页面的加载。
			
			/*
				JS代码的多行注释。和java一样。
			*/
		window.alert("Hello JavaScript!");
	</script>
	
	</body>
</html>

方式三：外部 JS文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--在需要的位置引入js脚本文件-->
		<!--引入外部独立的js文件的时候，js文件中的代码会遵循自上而下的顺序依次逐行执行。-->
		<!-- 引用外部 JS文件的 script 标签中间不可以写代码-->
		<script type="text/javascript" src="js/Demo.js">
			
		</script>
		<!--同一个js文件可以被引入多次。但实际开发中这种需求很少。-->
		<!--一个HTML可以同时使用多种方式引入js文件-->
	</body>
</html>

标识符

标识(zhi)符：就是指开发人员为变量、属性、函数、参数取的名字。

命名规则及规范

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能以数字开头。 18age 是错误的
不能是关键字、保留字。例如：var、for、while
变量名必须有意义。 MMD BBD nl → age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName

变量

什么是变量

通俗：变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。本质：变量是程序在内存中申请的一块用来存放数据的空间。
变量在使用时分为两步： 1. 声明变量 2. 赋值

声明变量

// 声明变量 
var age; // 声明一个 名称为age 的变量

var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管 age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

赋值

age = 10; // 给 age 这个变量赋值为 10

注意：

= 用来把右边的值赋给左边的变量空间中此处代表赋值的意思。
变量值是程序员保存到变量空间里的值。声明一个变量并赋值，我们称之为变量的初始化。
一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
javascript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行。

同时声明多个变量

var age = 10, name = 'zs', sex = 2;

声明变量特殊情况

函数

什么是函数？

在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然 for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JS 中的函数。 函数： 就是封装了一段可被重复调用执行的 代码块 。通过此代码块可以实现大量代码的重复使用。函数在使用时分为两步：声明函数和调用函数。

声明函数

function 是声明函数的关键字, 必须小写

由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如 getSum

调用函数

注意：

声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS函数初步</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				3、JS中的变量是一种弱类型的，那么函数应该怎么定义呢？
					语法格式：
						第一种方式：
							function 函数名(形式参数列表){
								函数体;
							}
						第二种方式：
							函数名 = function(形式参数列表){
								函数体;
							}
						
						JS中的函数不需要指定返回值类型，返回什么类型都行。
			*/
		   function sum(a, b){
			   // a和b都是局部变量,他们都是形参(a和b都是变量名，变量名随意。)
			   alert(a + b);
		   }
		   
		   // 函数必须调用才能执行的.
		   //sum(10, 20);
		   
		   // 定义函数sayHello
		   sayHello = function(username){
			   alert("hello " + username);
		   }
		   
		   // 调用函数
		   sayHello("zhangsan");
		   
		</script>
		
		<input type="button" value="hello" onclick="sayHello('jack');" /> 
		<input type="button" value="计算10和20的求和" onclick="sum(10, 20);" />
		
	</body>
</html>

形参和实参

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。

参数的作用 : 在 函数内部 某些值不能固定，我们可以通过参数在 调用函数时传递 不同的值进去。

调用的时候实参值是传递给形参的

形参简单理解为：不用声明的变量

实参和形参的多个参数之间用逗号（,）分隔

函数形参和实参个数不匹配问题

注意： 在JavaScript中，形参的默认值是 undefined。

return 语句

有的时候，我们会希望函数将值返回给调用者，此时通过使用 return 语句就可以实现。return 语句的语法格式如下：

在使用 return 语句时，函数会停止执行，并返回指定的值，如果函数没有 return ，返回的值是 undefined。return 语句之后的代码不被执行。 return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。

arguments的使用

当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。 arguments展示形式是一个伪数组 ，因此可以进行遍历。伪数组具有以下特点：

具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS函数初步</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				java中的方法有重载机制，JS中的函数能重载吗？
					JS当中的函数在调用的时候，参数的类型没有限制，并且参数的个数也没有限制，JS就是这么随意。（弱类型）
				
				重载的含义：
					方法名或者函数名一样，形参不同（个数、类型、顺序）
			*/
		   function sum(a, b){
			   return a + b;
		   }
		   
		   // 调用函数sum
		   var retValue = sum(1, 2);
		   alert(retValue);
		   
		   var retValue2 = sum("jack"); // jack赋值给a变量,b变量没有赋值系统默认赋值undefined
		   alert(retValue2); // jackundefined
		   
		   var retValue3 = sum();
		   alert(retValue3); // NaN (NaN是一个具体存在的值，该值表示不是数字。Not a Number)
		   
		   var retValue4 = sum(1, 2, 3);
		   alert("结果=" + retValue4); // 结果=3
		   
		   function test1(username){
			   alert("test1");
		   }
		   
		   /*
		   在JS当中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声明的同名函数覆盖。
		   */
		   function test1(){
			   alert("test1 test1");
		   }
		   
		   test1("lisi"); // 这个调用的是第二个test1()函数.
		   
		</script>
	</body>
</html>

全局变量和局部变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS的局部变量和全局变量</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				全局变量：
					在函数体之外声明的变量属于全局变量，全局变量的生命周期是：
						浏览器打开时声明，浏览器关闭时销毁，尽量少用。因为全局变量会一直在浏览器的内存当中，耗费内存空间。
						能使用局部变量尽量使用局部变量。
				局部变量：
					在函数体当中声明的变量，包括一个函数的形参都属于局部变量，
					局部变量的生命周期是：函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。
					局部变量生命周期较短。
			*/
		   
		   // 全局变量
		   var i = 100;
		   
		   function accessI(){
			   // 访问的是全局变量
			   alert("i = " + i);
		   }
		   
		   accessI();
		   
		   // 全局变量
		   var username = "jack";
		   function accessUsername(){
			   // 局部变量
			   var username = "lisi";
			   // 就近原则:访问局部变量
			   alert("username = " + username);
		   }
		   // 调用函数
		   accessUsername();
		   // 访问全局变量
		   alert("username = " + username);
		   
		   function accessAge(){
			   var age = 20;
			   alert("年龄 = " + age);
		   }
		   
		   accessAge();
		   
		   // 报错(语法不对)
		   // alert("age = " + age);
		   
		   // 以下语法是很奇怪的.
		   function myfun(){
			   // 当一个变量声明的时候没有使用var关键字,那么不管这个变量是在哪里声明的,都是全局变量.
			   myname = "dujubin";
		   }
		   
		   // 访问函数
		   myfun();
		   
		   alert("myname = " + myname); // myname = dujubin
		   
		</script>
	</body>
</html>

数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。在代码运行时，变量的数据类型是由 JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。 JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

JS 把数据类型分为两类：

简单数据类型（Number,String,Boolean,Undefined,Null）

复杂数据类型（object)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Object类型</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				Object类型：
					1、Object类型是所有类型的超类，自定义的任何类型，默认继承Object。
					2、Object类包括哪些属性？
						prototype属性（常用的，主要是这个）：作用是给类动态的扩展属性和函数。
						constructor属性
					3、Object类包括哪些函数？
						toString()
						valueOf()
						toLocaleString()
					4、在JS当中定义的类默认继承Object，会继承Object类中所有的属性以及函数。
					换句话说，自己定义的类中也有prototype属性。
					
					5、在JS当中怎么定义类？怎么new对象？
						定义类的语法：
							第一种方式：
								function 类名(形参){
									
								}
							第二种方式：
								类名 = function(形参){
									
								}
						创建对象的语法：
							new 构造方法名(实参); // 构造方法名和类名一致。
			*/
		   function sayHello(){
			   
		   }
		   
		   // 把sayHello当做一个普通的函数来调用.
		   sayHello();
		   
		   // 这种方式就表示把sayHello当做一个类来创建对象.
		   var obj = new sayHello(); // obj是一个引用,保存内存地址指向堆中的对象.
		   
		   // 定义一个学生类
		   function Student(){
			   alert("Student.....");
		   }
		   
		   // 当做普通函数调用
		   Student();
		   
		   // 当做类来创建对象
		   var stu = new Student();
		   alert(stu); // [object Object]
		   
		   // JS中的类的定义,同时又是一个构造函数的定义
		   // 在JS中类的定义和构造函数的定义是放在一起来完成的.
		   function User(a, b, c){ // a b c是形参,属于局部变量.
			   // 声明属性 (this表示当前对象)
			   // User类中有三个属性:sno/sname/sage
			   this.sno = a;
			   this.sname = b;
			   this.sage = c;
		   }
		   
		   // 创建对象
		   var u1 = new User(111, "zhangsan", 30);
		   // 访问对象的属性
		   alert(u1.sno);
		   alert(u1.sname);
		   alert(u1.sage);
		   
		   var u2 = new User(222, "jackson", 55);
		   alert(u2.sno);
		   alert(u2.sname);
		   alert(u2.sage);
		   
		   // 访问一个对象的属性,还可以使用这种语法
		   alert(u2["sno"]);
		   alert(u2["sname"]);
		   alert(u2["sage"]);
		   
		   // 定义类的另一种语法
		   /*
		   Emp = function(a, b){
			   this.ename = a;
			   this.sal = b;
		   }
		   */
		  
		  Emp = function(ename,sal){
			  // 属性
			  this.ename = ename;
			  this.sal = sal;
		  }
		  
		  var e1 = new Emp("SMITH", 800);
		  alert(e1["ename"] + "," + e1.sal);
		  
		   Product = function(pno,pname,price){
			   // 属性
			   this.pno = pno;
			   this.pname = pname;
			   this.price = price;
			   // 函数
			   this.getPrice = function(){
				   return this.price;
			   }
		   }
		   
		   var xigua = new Product(111, "西瓜", 4.0);
		   var pri = xigua.getPrice();
		   alert(pri); // 4.0
		   
		   // 可以通过prototype这个属性来给类动态扩展属性以及函数
		   Product.prototype.getPname = function(){
			   return this.pname;
		   }
		   
		   // 调用后期扩展的getPname()函数
		   var pname = xigua.getPname();
		   alert(pname)

			// 给String扩展一个函数
		   String.prototype.suiyi = function(){
			   alert("这是给String类型扩展的一个函数，叫做suiyi");
		   }
		   
		   "abc".suiyi();
		   
		</script>
	</body>
</html>
<!--
	java语言怎么定义类，怎么创建对象？（强类型）
		public class User{
			private String username;
			private String password;
			public User(){
				
			}
			public User(String username,String password){
				this.username = username;
				this.password = password;
			}
		}
		User user = new User();
		User user = new User("lisi","123");
		
	JS语言怎么定义类，怎么创建对象？（弱类型）
		User = function(username,password){
			this.username = username;
			this.password = password;
		}
		var u = new User();
		var u = new User("zhangsan");
		var u = new User("zhangsan","123");
-->

JS中的常用事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS的常用事件</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				JS中的事件：
				
					blur失去焦点	
					focus获得焦点
					
					click鼠标单击
					dblclick鼠标双击
					
					keydown键盘按下
					keyup键盘弹起
					
					mousedown鼠标按下
					mouseover鼠标经过
					mousemove鼠标移动
					mouseout鼠标离开
					mouseup鼠标弹起
					
					reset表单重置
					submit表单提交
					
					change下拉列表选中项改变，或文本框内容改变
					select文本被选定
					load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生。）
				
				任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。
				onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在。）
			*/
		   // 对于当前程序来说,sayHello函数被称为回调函数(callback函数)
		   // 回调函数的特点:自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数.
		   function sayHello(){
			   alert("hello js!");
		   }
		</script>
		
		<!--注册事件的第一种方式，直接在标签中使用事件句柄-->
		<!--以下代码的含义是：将sayHello函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用。我们称这个函数为回调函数。-->
		<input type="button" value="hello" onclick="sayHello()"/>
		
		
		<input type="button" value="hello2" id="mybtn" />
		<input type="button" value="hello3" id="mybtn1" />
		<input type="button" value="hello4" id="mybtn2" />
		<script type="text/javascript">
			function doSome(){
				alert("do some!");
			}
			/*
				第二种注册事件的方式，是使用纯JS代码完成事件的注册。
			*/
		   // 第一步:先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表整个HTML页面)
		   var btnObj = document.getElementById("mybtn");
		   // 第二步:给按钮对象的onclick属性赋值
		   btnObj.onclick = doSome; // 注意:千万别加小括号. btnObj.onclick = doSome();这是错误的写法.
									// 这行代码的含义是,将回调函数doSome注册到click事件上.
		   
		   var mybtn1 = document.getElementById("mybtn1");
		   mybtn1.onclick = function(){ // 这个函数没有名字,叫做匿名函数,这个匿名函数也是一个回调函数.
			   alert("test.........."); // 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
		   }
		   
		   document.getElementById("mybtn2").onclick = function(){
			   alert("test22222222.........");
		   }
		</script>
		
	</body>
</html>

<!--
	java中也有回调函数机制：
		public class MyClass{
			
			public static void main(String[] args){
				// 主动调用run()方法，站在这个角度看run()方法叫做正向调用。
				run();
			}
			
			// 站在run方法的编写者角度来看这个方法，把run方法叫做回调函数。
			public static void run(){
				System.out.println("run...");
			}
		}
-->