JavaScript入门

JavaScript 概述

教学目标t

知识目标

1.了解JavaScript基础语法，包括语句赋值、注释和引入等基本知识。

技能目标

1.能掌握JavaScript基础语法，能完成语句赋值、注释和引入。

1、 JavaScript 初识

​ JavaScript 概述

JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言，简称为 JS。

创始人 布兰登·艾奇(Brendan Eich) ，用10天完成JS设计。

JS 最初命名为 LiveScript，后来在与 Sun 合作之后将其改名为 JavaScript。

JavaScript属于脚本语言，不需要编译，运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行，也可以基于 Node.js 技术进行服务器端编程 。

JavaScript 应用范围：

1.表单动态校验(密码强度检测) ( JS 产生最初的目的 )

2.网页特效

3.服务端开发(Node.js)

4.桌面程序(Electron)

5.App(Cordova)

6.控制硬件-物联网(Ruff)

7.游戏开发(cocos2d-js)

​ JavaScript 与HTML、CSS关系

JS 脚本语言——编程类语言

实现业务逻辑和页面控制(决定功能)，相当于人的各种动作。

HTML/CSS 标记语言——描述类语言

HTML决定网页结构和内容(决定看到什么)，相当于人的身体 。

CSS决定网页呈现给用户的模样(决定好不好看)， 相当于给人穿衣服、化妆。

​ JavaScript 执行方式

浏览器本身不执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 。

JS 引擎执行代码时，逐行解释(转换为机器语言)，然后由计算机去执行。

浏览器分成两部分：渲染引擎和 JS 引擎

1.渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit

2.JS 引擎：称为 JS 解释器。 用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8 。

​ JavaScript 组成

JavaScript 由 3 部分内容组成：ECMA、DOM、BOM。

ECMAScript 是由ECMA 国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言，这种语言在万维网上应用广泛。

目前JavaScript 和 JScript，是 ECMAScript 语言的实现和扩展。

​ ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准

​ 文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言的标准编程接口

通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色） 。

1.JavaScript 能改变页面中的所有 HTML 元素

2.JavaScript 能改变页面中的所有 HTML 属性

3.JavaScript 能改变页面中的所有 CSS 样式

4.JavaScript 能删除已有的 HTML 元素和属性

5.JavaScript 能添加新的 HTML 元素和属性

6.JavaScript 能对页面中所有已有的 HTML 事件作出反应

7.JavaScript 能在页面中创建新的 HTML 事件

BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

2、JavaScript 语法基础

书写位置

​ JS 有3种书写位置，分别为：行内、内嵌和外部

行内

<input type="button" value="点我试试" onclick="alert('Hello World')" /> 

注意事项：

1.可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性)，如:onclick

2.注意单双引号的使用：在HTML中我们推荐使用双引号，JS 中我们推荐使用单引号

3.可读性差， 在html中编写JS大量代码时，不方便阅读;

4.引号易错，引号多层嵌套匹配时，非常容易弄混;

5.特殊情况下使用 。

内嵌

<script>
    alert('Hello World~!'); 
</script> 

注意事项：

1.可以将多行JS代码写到

2.内嵌 JS 是学习时常用的方式。

外部

<script src="./js/my.js"></script> 

注意事项：

1.有利于HTML页面代码结构化，将 JS代码独立到 HTML 页面之外，美观方便、文件级别的复用。

2.引用外部 JS文件的 script 标签中间不可以写代码。

3.适合于JS 代码量比较大的情况 。

​ 关键字和保留字符

关键字

break	new	continue	throw	with
do	var	for	delete	debugger
instanceof	catch	switch	in	false
typeof	finally	while	try	true
case	return	default	function	null
else	void	if	this	-

保留字符

break	new	continue	throw	with
do	var	for	delete	debugger
instanceof	catch	switch	in	false
typeof	finally	while	try	true
case	return	default	function	null
else	void	if	this	-

​ 标识符

​ 简单地理解，标识符就是一个名字，就好像我们每个人都有属于自己的名字，它的主要作用就是作为变量、函数、属性的名字，或者函数的参数

​ 标识符的要求 :

1.由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如:usrAge, num01, _name。

2.不能以数字开头，如18age 是错误的。

3.不能是关键字、保留字，如不能使用 var、for、while。

4.严格区分大小写，如app 和 App 是两个变量

标识符的建议：

1.变量名必须有意义，如MMD BBD nl → age。

2.遵守驼峰命名法，即首字母小写，后面单词的首字母大写，如myFirstName 。

​ 注释

为了提高代码的可读性，JS提供注释功能。JS中的注释主要有两种，分别是单行注释和多行注释:

1.单行注释的注释方式如下：

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

2.多行注释的注释方式如下：

 /*   获取用户年龄和姓名 并通过提示框显示出来 
*/ 

​ 变量

变量是用于存放数据的容器。 我们通过 变量名 获取数据，甚至数据可以修改

变量，本质就是程序在内存中申请的一块用来存放数据的空间

简单来说，变量就是一个装东西的盒子。

变量在使用时分为三步：1. 声明变量、2. 变量赋值、3、变量使用。

​ 变量——变量声明

var ( variable 变量的意思 )是一个 JS关键字，用来声明变量。

使用该关键字声明变量后，计算机会自动为变量分配 内存空间，不需要程序员管。

以下例子，age 是定义的变量名，可以通过变量名来访问内存中分配的空间 。

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

​ 变量——变量赋值

变量赋值，即将数值装到变量里面（盒子）

JS中，使用“=” 将右边的值赋给左边的变量，下例表示将数值10赋给变量age。

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

变量初始化，即完成变量的声明和赋值。

 // 声明变量同时赋值为 18
var age = 10; 

 // 同时初始化多个变量
var age=10, name='zs',sex=2; 

注意：未经过赋值或初始化的变量，值为undefined。

​ 输入输出

为方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下:

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

注意：

1.alert() 主要用来显示消息给用户

2.console.log() 用来给程序员自己看运行时的消息。

总结

JavaScript 数据类型

教学目标

知识目标

1.了解JavaScript简单数据类型和复杂数据类型的使用以及转换方法。

技能目标

1.能掌握JavaScript各种数据类型的应用，能完成数据类型的转换。

1、数据类型概述

​ 数据类型概述

• 变量是用于存放数据的容器，因此变量具有 名字 和 数据类型。
• 变量的数据类型，决定了如何将数值的存储到计算机的内存中。
• JavaScript 是一种弱类型或者说动态语言，这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age = 10; // 这是一个数字型 
var areYouOk = '是的'; // 这是一个字符串 

在代码运行时，变量的数据类型是由 JS**引擎 根据 = 右边变量值的数据类型来判断 的，运行完毕之后，变量就确定 了数据类型。

• JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型。

var x = 6; //x为数字 
var x = "Bill"; // x 为字符串 

JS 把数据类型分为两类:

1.简单数据类型

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点值，如21、0.21	0
Boolean	布尔值类型，如true、false,等于1和0	false
String	字符串类型，如“张三”注意咱们JS里面，字符串都带引号	“”
Undefined	Var a; 声明了变量a但是没有给值，此时a = undefined	undefined
Null	Var a = null; 声明了变量a为空值	null

2.复杂数据类型 （object、array）

复杂数据类型	说明	默认值
object	对象类型，如{name:“张三”, sex:“男”, age:18};	[object Object]
array	数组类型，如var arr = new Array(3);	,

2、JavaScript 简单数据类型

​ 数字类型——定义与范围

JavaScript数字类型既可以用来保存整数值，也可以保存小数（浮点数）。

var age = 21; // 整数
var Age = 21.3747; // 小数 

JavaScript数字类型范围：

1.最大值：1.7976931348623157e+308，通过 Number.MAX_VALUE 获得

2.最小值： 5e-324，通过 Number.MIN_VALUE 获得

alert(Number.MAX_VALUE); // 1.7976931348623157e+308 
alert(Number.MIN_VALUE); // 5e-324 

​ 数字类型——数字判断方法与特殊值

isNaN()，用来判断一个变量是否为非数字的类型，返回 true 或者false。

1.如果是不数字，则返回 true

2.如果是数字，则返回 false

var userAge = 21;
console.log(isNaN(userAge)); // false ，21 不是一个非数字 
var userName = "andy";
console.log(isNaN(userName)); // true ，"andy"是一个非数字 

JavaScript数字类型特殊值：

1.Infinity ，代表无穷大，大于任何数值

2.-Infinity ，代表无穷小，小于任何数值

3.NaN ，代表一个非数值（ Not a number ）

​ 字符串类型——定义

JavaScript字符串类型可以是引号中的任意文本：

1.双引号“”，如 var strMsg = “我爱北京天安门~”;

2.单引号‘’，如 var strMsg2 = ‘我爱吃猪蹄~’;

3.因为 HTML 标签里面的属性使用的是双引号，JS 中更推荐使用单引号。

JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单 ，外单内双）。

var strMsg = ‘我是“高帅富”程序猿’; // 可以用‘’包含“”
var strMsg2 = “我是‘高帅富’程序猿”; // 也可以用“” 包含‘’
var badQuotes = “What on earth?’; // 报错，不能 单双引号搭配 

​ 字符串类型——长度与拼接

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。

var strMsg = '我是高帅富程序猿'; 
alert(strMsg.length)

多个字符串之间可以使用 + 进行拼接，其拼接方式为：

字符串 + 任何类型 = 拼接之后的新字符串

拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

alert('hello' + ' ' + 'world'); // hello world 
			
var age = 18;
alert('老师' + age + '岁啦') ; //老师18岁啦

​ 字符串类型——转义字符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。

转义符都是 \ 开头的，常用的转义符及其说明如下：

转义符	解释说明
\n	换行符，n 是 newline 的意思
\	斜杠 \
’	’ 单引号
"	”双引号
\t	tab 缩进
\b	空格 ，b 是 blank 的意思

var strMsg = '我是\n高帅富程序猿'; 
alert(strMsg)

​ 布尔类型

布尔类型有两个值：true 和 false ，其中 true 表示真(对)，而 false 表示假(错)。

布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0 。

console.log(true + 1); // 2 
console.log(false + 1); // 1 

​ null类型

一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null）。

null 值分别与数字、字符串运算如下：

var vari = null;

console.log(11 + vari); 	 //null 值与数字运算，null 当做 0
console.log(true + vari); 	//null 值与bool值运算，null 当做 0
console.log('你好' + vari); 	//null 值与字符串拼接，null 当做字符串

​ undefined类型

一个声明后没有被赋值的变量会有一个默认值 。

undefined 值分别与数字、字符串运算如下：

var variable;
console.log(variable); 		// undefined
console.log('你好' + variable); 	// 你好undefined
console.log(11 + variable); 	// NaN
console.log(true + variable);	 // NaN 

3、 JavaScript 复杂数据类型

​ 对象类型

Object类型，我们也称为对象类型，是JavaScript中的引用数据类型。

对象是一种复合值，它将很多值聚合到一起，可以通过名字访问这些值。对象也可以看做是属性的无序集合，每个属性都是一个名/值对。

除了字符串、数字、true、 false、 null和undefined之外，JS中的值都是对象。

​ 数组类型

数组也是对象的一种，用于表达有顺序关系的值的集合的数据结构。

Array用于表示一个有序的数组。JS的数组中可以保存任意类型的数据。

创建一个数组的方式有两种:

1.使用构造器，关键字 new。

var arr = new Array(数组的长度);
var arr = new Array(123, 'hello', true);

2.使用 [ ] 来创建。

var arr =[];
var arr =[123, 'hello', false];

4、 JavaScript 数据类型转换

​ 数据类型检测

typeof 可用来获取检测变量的数据类型。

var num = 18;
console.log(typeof num) 	// 结果 number 

不同类型的返回值：

类型	用例	结果
String	typeof“小白”	“string”
Number	typeof 18	”number“
Boolean	typeof true	”boolean“
Underfined	typeof undefined	”undefined“
Null	typeof null	”object“

​ 数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

通常会实现3种方式的转换:

1.转换为字符串类型

2.转换为数字型

3.转换为布尔型

​ 数据类型转换——转为字符串类型

转换为字符串类型的三种方式：

方式	说明	案例
toString()	转成字符串	var num=1; alert(num.toString());
String()强制转换	转成字符串	var num =1; alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num =1 ; alert(num+”我是字符串“);

说明：

1.toString()和String() 使用方式不一样。

2.三种转换方式，更倾向于用第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换。

​ 数据类型转换——转为数字类型

转换为数字类型的三种方式：

方式	说明	案例
parselnt(string)函数	将string类型转成整数数值型	parseInt(‘78’)
parseFloat(string)函数	将string类型转成浮点数数值型	parseFloat(‘78.21’)
Number()强制转换函数	将string类型转换为数值型	Number(‘12’)
js隐式转换(- * / )	利用算术运算隐式转换为数值型	‘12’-0

说明：

1.注意 parseInt 和 parseFloat 单词的大小写，这2个是重点；

2.隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型 。

​ 数据类型转换——转为布尔类型

转换为布尔类型的方式：

方式	说明	案例
Boolean()函数	其他类型转成布尔值	Boolean(‘true’);

说明：

1.代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined

其余值都会被转换为 true

console.log(Boolean('')); 
console.log(Boolean(0)); console.log(Boolean(NaN)); console.log(Boolean(null)); console.log(Boolean(undefined)); 
console.log(Boolean('小白')); console.log(Boolean(12)); 

总结

JavaScript 流程控制语句

教学目标

知识目标

1.了解JavaScript流程控制语句和运算符的使用方法。

技能目标

1.能掌握JavaScript过程式编程，通过语句控制页面内容输出。

1、JavaScript 条件语句

条件语句，即代码由上到下执行过程中，根据预设条件决定“是否执行代码”或“执行哪些代码”，从而得到不同的结果。

条件语句分为以下三种：

1.单if 语句

2.if else 组合语句

3.if 分支语句

单if 语句

q单if 语句，即仅根据判断条件，决定是否执行“代码语句”。

if( 判断条件 ){ 
  代码语句
 } 

​ if else 组合语句

if( 判断条件1 ){ 
	执行语句A
 } 
else {
	执行语句B
}

​ if 分支语句

if( 判断条件1 ){ 
	执行语句1
 } 
else if ( 判断条件2 ){
	执行语句2
}
else {
	执行语句n
}

案例

接收用户输入的分数，根据分数输出对应的等级字母 A、B、C、D、E。其中:

1. 90分(含)以上 ，输出:A
   2. 80分(含)~ 90 分(不含)，输出:B

2. 70分(含)~ 80 分(不含)，输出:C

3. 60分(含)~ 70 分(不含)，输出:D

4. 60分(不含) 以下，输出: E

var score = prompt('请您输入分数:');
if (score >= 90) { 
	alert('A');
} 
else if (score >= 80) { 
	alert('B'); 
	} 
else if (score >= 70){ 
	alert('C');
	} 
else if (score >= 60) {
	alert('D'); 
	} 
else { 
	alert('E')
	};

​ 三元表达式

三元表达式，主要做一些简单的条件选择，由三元运算符组成的式子称为三元表达式。

语法结构：

表达式1 ? 表达式2 : 表达式3

执行思路：

1.如果表达式1为 true ，则返回表达式2的值

2.如果表达式1为 false，则返回表达式3的值

简单理解，就类似于 if else (双分支) 的简写。

​ JavaScript switch语句

​ switch 语句概述

switch 语句是多分支语句，用于基于不同的条件来执行不同的代码。

当要针对变量设置一系列的特定值的选项时，就可以使用 switch。

switch( 表达式 ){  
    case value1: 
    	// 表达式 等于 value1 时要执行的代码 
    	break;
    case value2: 
	// 表达式 等于 value2 时要执行的代码 
    	break;
    default: 
	// 表达式 不等于任何一个 value 时要执行的代码 
}

用户在弹出框里面输入一个水果，如果有就弹出该水果的价格， 如果没有就弹出“没有此水果”。

			var fruit = prompt('请您输入查询的水果:'); 
			switch (fruit) {
				case '苹果':
					alert('苹果的价格是 3.5/斤'); 
					break;
				case '榴莲': 
					alert('榴莲的价格是 35/斤');
					break;
				default: 
					alert('没有此水果');
			}

​ switch 语句与 if 分支语句对比

switch 语句与 if 分支语句对比如下：

1.一般情况下，它们两个语句可以相互替换。

2.switch…case 语句通常比较固定值（高、中、低）的情况；而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)。

3.switch 语句进行条件判断后直接执行到程序的条件语句，效率更高；而if…else 语句有几种条件，就得判断多少次。

4.当分支比较少时，if… else语句的执行效率比 switch语句高。

5.当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

2、JavaScript 循环语句

​ JavaScript 循环语句概述

循环语句，即代码由上到下执行过程中，根据预设条件（执行的次数 或 超过某个阈值），重复执行相同的代码。

循环语句分为以下四种：

1.for - 循环代码块一定的次数（重点）

2.for/in - 循环遍历对象的属性

3.while - 当指定的条件为 true 时循环指定的代码块（重点）

4.do/while - 同样当指定的条件为 true 时循环指定的代码块

​ JavaScript for循环语句

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

​ JavaScript while循环语句

while (循环条件)

{
  被执行的代码块
}

​ break和continue语句

break语句：

跳出 for 和 while 的循环体，不再执行循环及循环体剩余语句，任何对应的循环 else 块将不执行。

for(var i=0; i <= 5; i = i + 1){
	alert(i);
	if (i == 3){
		break;
	}
}

continue语句：

跳出 for 和 while 的当前循环体，然后继续进行下一轮循环。

for(var i=0; i <= 5; i = i + 1){
	if (i == 3){
		continue;
	}
	alert(i);
}

3、JavaScript 运算符

​ 运算符概述

运算符(operator)也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript中常用的运算符有:

1.算数运算符

2.递增和递减运算符

3.比较运算符

4.逻辑运算

5.赋值运算符

​ 算数运算符

算术运算使用的符号，用于执行两个变量或值的算术运算。

运算符	描述	实例
+	加	10 + 20 = 30
-	减	10 - 20 = -10
*	乘	10 * 20 = 200
/	除	10 / 20 = 0.5
%	取余数（取模）	返回除法的余数 9 % 2 = 1

算术运算符优先级：先乘除，后加减，有小括号先算小括号里面的。

​ 算数运算符——浮点精度问题

浮点数值的最高精度是17位小数，但是进行算术计算时其精确度远远不如整数。

var result = 0.1 + 0.2;  // 结果不是 0.3，而是:0.30000000000000004 
console.log(0.07 * 100);  // 结果不是 7， 而是:7.000000000000001 

注意：不要直接判断两个浮点数是否相等！

​ 递增和递减运算符

递增(++)和递减( – )运算符，可以反复给数字变量添加或减去1 。

var i= 1;  
i++;  ++i
i--; 

递增(++)和递减( – )既可以放在变量前面，也可以放在变量后面。

1.放在变量前面时， 我们可以称为前置递增(递减)运算符。

2.放在变量后面时，我们可以称为后置递增(递减)运算符。

因此，递增和递减运算符必须和变量配合使用。

​ 递增和递减运算符——前置与后置

前置运算符，即递增（递减）运算符放在变量前面。

前置运算符执行逻辑：先计算，后返回。

var i= 1;  
alert(++i);

后置运算符，即递增（递减）运算符放在变量后面（实际开发过程多使用这种，并独占一行）

后置运算符执行逻辑：先返回，后计算。

var i= 1;  
alert(i++);

​ 比较运算符

比较运算符(关系运算符)是两个数据进行比较时所使用的运算符，比较运算后会返回一个布尔值 (true / false)作为比较运算的结果。

运算符名称	说明	案例	结果
<	小于号	1<2	true
>	大于号	1>2	false
>=	大于等于号(大于或者等于)	2 >= 2	true
<=	小于等于号(小于或者等于)	3<= 2	false
==	判等号（会转型)	37 == “37”	true
!=	不等号	37!= 37	false
=== !==	全等要求值和数据类型都一致	37 === ‘37’	false

​ 逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断。 && 同时为真 结果为真 ||同时为假 结果为假

逻辑运算符	说明	案例
&&	逻辑与，简称"与” and	true && false
||	逻辑或，简称"或”or	true || false
!	逻辑非，简称"非"not	! true

​ 逻辑运算符——逻辑与 &&

逻辑与 &&，两边都是 true才返回 true，否则返回 false。

​ 逻辑运算符——逻辑或 ||

逻辑或 ||，两边都为 false 才返回 false，否则都为 true。

​ 逻辑运算符——逻辑非 !

逻辑非 !，也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是false。

var isOk = !true; 
alert(isOk); // false 

​ 逻辑运算符——短路运算符

短路运算符，当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值。

逻辑运算符	说明	案例
表达式1 && 表达式2	如果表达式1的值为真，则返回表达式2 如果表达式1的值为假，则返回表达式1	123 && 456; 0 && 456;
表达式1 || 表达式2	如果表达式1的值为真，则返回表达式1 如果表达式1的值为假，则返回表达式2	123 || 456; 0 || 456;

​ 赋值运算符

赋值运算符，用来把数据赋值给变量的运算符。

赋值运算符	说明	案例
=	直接赋值	var usrName = ‘我是值’;
十=、-=	加、减一个数后再赋值	var age = 10; age+=5; // 15
*=、/=、%=	乘、除、取模后再赋值	var age = 2; age*=5; //10

​ 运算符优先级

优先级	运算符	顺序
1	小括号	（）
2	一元运算符	++ – ！
3	算数运算符	先*/%后±
4	关系运算符	>>= < <=
5	相等运算符	== ！= === ！==
7	赋值运算符	=
8	逗号运算符	，

说明：

1.一元运算符里面的逻辑非优先级很高。

2.逻辑与比逻辑或优先级高。

3. 可以通过加小括号“()”控制运算符优先级。

​ 表达式和返回值

表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得组合。 简单理解就是是由数字、运算符、变量等组成的式子。

表达式最终都会有一个结果， 返回给我们，称为返回值。

总结

JavaScript 函数与对象

教学目标

知识目标

1.了解JavaScript函数式编程的基本要求，了解函数的定义与调用，了解对象和数组的创建与访问方法。

技能目标

1.能掌握JavaScript函数式编程的方法，能实现页面的动态交互。掌握JavaScript对象和数组的创建与访问。

1、 JavaScript 函数应用

​ JavaScript 函数声明——语法说明

函数是由一连串的子程序(语句的集合)所组成的，可以被外部程序调用。向函数传递参数之后，函数可以返回一定的值。

JavaScript代码是自上而下执行的，不过函数体内部的代码则不是这样。如果只是对函数进行了声明，其中的代码并不会执行。只有在调用函数时才会执行函数体内部的代码。

函数声明语句以关键字function开始，其后跟有函数名参数列表和函数体。其语法如下所示：

function 函数名([形参1,形参2...形参n]) {
	函数体（执行语句）
}

​ JavaScript 函数声明——return 语句

若需要函数将值返回调用它的地方，可以通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

function myFunction()
{
    var x=5;
    return x;
}

注意： 整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。

​ JavaScript 函数调用

函数调用时，只需通过函数名称，将参数值放到括号内即可。若函数存在返回值（return 语句），可以将返回值赋给变量。

函数声明：

	function fun(a, b){
		return a + b;
	}

函数调用：

	var c = fun(10, 20);
	alert(c);

​ JavaScript 函数表达式

JavaScript 函数可以通过一个表达式定义，即将函数表达式存储在变量中。

以上函数也称为匿名函数(函数没有名称)。

var x = function (a, b) {return a * b};

注意：匿名函数，即关键字 function 后面没有函数名称。

​ JavaScript Function() 构造函数

函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义。

var myFunction = new Function("a", "b", "return a * b");

“a” 和 “b” 均是字符串，为函数参数

“return a * b” 是字符串，为函数体

2、JavaScript 函数参数

​ 函数参数概述

在调用函数时，可以向其传递值，这些值被称为参数。

这些参数可以在函数中使用，可以发送任意多的参数，由逗号 (,) 分隔：

//当声明函数时，请把参数作为变量来声明：
function 函数名(var1, var2) {
	函数体（执行语句）
}

注意：变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

​ 显式参数与默认参数

函数显式参数，指的是在函数定义时已经在函数名后的括号内列出。

//当声明函数时，函数名后括号内的var1 和 var2 是显式参数：
function 函数名(var1, var2) {
	函数体（执行语句）
}

默认参数，即在函数定义时设置参数的默认值。

function myFunction(x, y = 10) {
	return x + y;
}
alert(myFunction(0, 2)); 	// 输出 2
alert(myFunction(5)); 	// 输出 15, y 参数的默认值

​ 不同参数传递方式影响

通过值传递参数

1.在函数中调用的参数是函数的隐式参数。

2.JavaScript 隐式参数通过值来传递：函数仅仅只是获取值。

3.如果函数修改参数的值，不会修改显式参数的初始值（在函数外定义）。

4.隐式参数的改变在函数外是不可见的。

通过 对象 传递 参数

1.在JavaScript中，可以引用对象的值。

2.因此我们在函数内部修改对象的属性就会修改其初始的值。

3.修改对象属性可作用于函数外部（全局变量）。

4.修改对象属性在函数外是可见的。

3、JavaScript 对象

​ JavaScript 对象创建

Object类型，我们也称为对象类型，是JavaScript中的引用数据类型。

对象是一种复合值，它将很多值聚合到一起，可以通过名字访问这些值。对象也可以看做是属性的无序集合，每个属性都是一个名/值对。

除了字符串、数字、true、 false、 null和undefined之外，JS中的值都是对象。

方式一

var obj = new Object();
obj.name = "张三";
obj.sex ="男";
obj.age = 20;

方式二

var obj = {
	name:"张三", 
	sex:"男", 
	age:18
	};

​ JavaScript 对象属性访问

访问对象属性有两种方式

1.第一种使用 . 访问属性：对象.属性名

2.第二种使用[]访问属性：对象[‘属性名’]

// 创建对象
var obj = {
	name:"张三", 
	sex:"男", 
	age:18
	};
// 访问对象属性
alert(obj.name);

​ JavaScript 对象方法调用

调用对象属性的方式：使用 . 调用方法：对象.方法名称()。

var person = {
	firstName: "John",
	lastName : "Doe",
	fullName : function() {
	   return this.firstName + " " + this.lastName;
	}
};
alert(person.fullName());

​ 4、JavaScript 数组

​ JavaScript 数组创建

数组也是对象的一种，用于表达有顺序关系的值的集合的数据结构。

Array用于表示一个有序的数组。JS的数组中可以保存任意类型的数据。

创建一个数组的方式有两种:

1.使用构造器，关键字 new。

var arr = new Array(数组的长度);
var arr = new Array(123, 'hello', true);

2.使用 [ ] 来创建。

var arr =[];
var arr =[123, 'hello', false];

​ JavaScript 数组访问

数组内的各个值被称作元素。每一个元素都可以通过索引(下标)来快速读取。

索引是从零开始的整数。

// 数组元素访问
var arr =[123, 'hello', false];
alert(arr[0]);
// 数组元素修改
arr[2] = true;
alert(arr);
// 数组元素增加
arr[3] = "china";
alert(arr);
// 数组元素删除
delete arr[3];
alert(arr)

​ JavaScript 数组访问——循环遍历

通过循环语句（for 循环或 while 循环），结合数组长度属性（length），可以遍历数组元素。

var arr =[123, 'hello', false];
for(var i=0; i < arr.length; i++){
	alert(arr[i]);
}

总结

JavaScript DOM与BOM

1、HTML DOM（文档对象模型）

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

HTML DOM（文档对象模型） document :表示html文档

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为对象树：

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

• JavaScript 能改变页面中的所有 HTML 元素
• JavaScript 能改变页面中的所有 HTML 属性
• JavaScript 能改变页面中的所有 CSS 样式
• JavaScript 能删除已有的 HTML 元素和属性
• JavaScript 能添加新的 HTML 元素和属性
• JavaScript 能对页面中所有已有的 HTML 事件作出反应
• JavaScript 能在页面中创建新的 HTML 事件

3、您将学到什么

在本教程下面的章节中，您将学到：

• 如何改变 HTML 元素的内容
• 如何改变 HTML 元素的样式（CSS）
• 如何对 HTML DOM 事件作出反应
• 如何添加和删除 HTML 元素

4、查找 HTML 元素

文档对象代表您的网页。

如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。

下面是一些如何使用 document 对象来访问和操作 HTML 的实例。

常用的 DOM 属性如下表所示：

属性	描 述
document.title	获取文档的 title 元素。
document.body	获取文档的 body 元素。
document.URL	获取文档的 URL。
document.forms	获取文档的 form 元素。
document.images	获取文档的 img 元素。
document.links	获取文档的 a 元素。
document.cookie	获取文档的 cookie。
document.referrer	返回来用户当前浏览页面的 URL。

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素
document.querySelector(CSS selectors)	返回指定选择器的第一个元素对象
document.querySelectorAll(CSS selectors)	返回指定选择器的所有元素对象集合

5、给HTML绑定事件

HTML 事件可以是浏览器或用户做的某些事情。

下面是 HTML 事件的一些例子：

• HTML 网页完成加载
• HTML 输入字段被修改
• HTML 按钮被点击

通常，当事件发生时，用户会希望做某件事。

常见的 HTML 事件

下面是一些常见的 HTML 事件：

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

在下面的例子中，onclick 属性（以及代码）被添加到 元素：

事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素

    <button id="btn">唐伯虎</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1. 
        //(1) 事件源 事件被触发的对象   谁  按钮
        var btn = document.getElementById('btn');
        //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        //(3) 事件处理程序  通过一个函数赋值的方式 完成
        btn.onclick = function() {
            alert('点秋香');
        }
		//同一个标签可以添加多个事件
        btn.addEvenetListener("click",function(){
			
        });
// 添加事件  
    </script>

实例

<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是？</button>

在上面的例子中，JavaScript 代码改变了 id=“demo” 的元素的内容。

在接下来的例子中，代码（使用 this.innerHTML）改变了其自身元素的内容：

实例

<button onclick="this.innerHTML=Date()">现在的时间是？</button>

JavaScript 代码通常有很多行。事件属性调用函数更为常见：

实例

<button onclick="displayDate()">现在的时间是？</button>

6、操作元素

改变元素内容

innerHTML和innerText的使用和区别

document对象中有innerHTML、innerText这两个属性，都是获取document对象文本内容，但使用起来还是有区别的；

1） innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)

2） outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身）

3） innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）

常用元素的属性操作

1、src href

2、id alt title

表单属性操作

type、value、checked、selected、disabled

样式属性操作

我们可以通过js修改元素的大小、颜色、位置

1、对象.style 行内样式操作

2、element.className 类名样式操作

注意：1、样式采用的是驼峰命名法 比如 fontSize、backgroundColor

​ 2、修改style样式产生的是行内样式、css权重较高

7.BOM

BOM（Browser Object Mode）是浏览器对象模型，通过操作对象的属性和方法来实现与浏览器的交互。

BOM 的构成如下所示：

在 window 下面有：

• document 是 DOM 对象。

• location 是用于获取或设置窗体。

• navigation 包含浏览器配置相关的信息。

• history 浏览器的历史记录。

• screen 用于显示设备信息。

window 对象的方法如下所示：

方法	描 述
alert()	显示一个警告框。
prompt()	显示可提示用户输入的对话框。
confirm()	显示一个有确认和取消按钮的对话框。
open()	打开一个新的浏览器窗口。
close()	关闭浏览器。
print()	打印当前窗口内容。

confirm()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>点击按钮，显示确认框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var r=confirm("按下按钮!");
	if (r==true){
		x="你按下了\"确定\"按钮!";
	}
	else{
		x="你按下了\"取消\"按钮!";
	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

open()

function openWin(){
    myWindow=window.open('','','width=200,height=100');
    myWindow.document.write("<p>这是'我的窗口'</p>");
    myWindow.focus();
}