JS基础语法

1、js常用输出语句有三个

1.1 document.write("内容") 把指定内容输出到body标签中 可以解析HTML标签

1.2 console.log("内容") 把指定内容输出到浏览器调试工具的控制台中 无法解析HTML标签 我们经常会使用console.log调试bug

1.3 window.alert("内容") 以弹窗的形式输出内容 无法解析HTML标签 window对象的属性或者方法都可以省略window对象 也就是window.alert()可以直接写成alert()

1.4 注意: 如果"内容"是纯数字或者js中的关键字 可以不加引号, 其他内容都需要加一对双引号或者单引号包裹

2、js一般写在script标签, script也属于HTML标签, 所以script标签可以出现页面文档的任何地方和出现任意次。但是, script标签一般都是写在head标签中。

3、书写位置

3.1 嵌入式

3.1.1 JavaScript的书写位置-嵌入式就是把js代码写script标签中

3.1.2 另外, console.log()可以同时输出多个值, 每个值之间使用"逗号"隔开 多个值会在控制台中同一行显示

3.2 外链式

3.2.1 JavaScript的书写位置-外链式就是把js代码写在单独的js文件中

3.2.2 外链式js文件是通过script标签的src属性引入

3.2.3 注意: 不要在引入js文件的script标签中,写js代码; 因为写的js代码不会生效

3.3 行内式

3.3.1 JavaScript的书写位置-行内式,就是把js代码写在标签的事件属性中, onclick, onmouseover和onmouseout就是事件属性, 事件属性里面对应的代码,需要事件被触发以后才会执行 比如onclick需要鼠标左键点击才可以触发

4、JavaScript介绍

4.1 为什么要学习Javascript

我们之前学的HTML只能完成页面的结构,CSS完成页面的样式, HTML+CSS静态页面,没有任何页面效果的，页面也没有行为，如果想要页面有行为，比如某个元素可以被点击, 那么就需要学习JS,给页面某个元素添加行为。

4.2 JavaScript是什么

4.2.1 官方概念:这是一个跨平台的脚本语言

4.2.1.1 平台这里指的是操作系统(window系统, mac系统 , linux系统)

4.2.1.2 跨平台的意思就是在不同的操作系统下, 都可以运行

4.2.1.3 脚本语言意思是js不能单独运行,需要有一个运行环境,这个运行环境就是js的运行环境,比如浏览器环境,node.js环境

4.2.1.4 为什么js可以跨平台,因为在不同操作系统下, 都有浏览器, 有浏览器就可以运行JS代码

4.3 Javascript的发展历史

1995年,由一个名为布莱登·艾奇创造的脚本语言,原名livescript; 以前js为了验证表单信息

4.4 JavaScript现在的意义(应用场景)

4.4.1 网页特效 比如图片轮播,选项卡....

4.4.2 服务端开发(Node.js)

4.4.3 命令行工具(Node.js)

4.4.4 桌面程序(Electron)

4.4.5 App(Cordova)

4.4.6 控制硬件-物联网(Ruff)

4.4.7 游戏开发(cocos2d-js , 贪吃蛇 , 微信打飞机....)

4.4.8 表单验证

4.4.9 与服务器进行交互(ajax->谷歌于2005年推出的)

5、JavaScript和HTML、CSS的区别

5.1 HTML：提供网页的结构，提供网页中的内容

5.2 CSS: 用来美化网页

5.3 JavaScript: 可以用来控制网页内容，控制样式, 给网页增加动态的效果

6、JavaScript的组成

ECMAScript - JavaScript的核心

ECMA 欧洲计算机制造联合会

网景：JavaScript

微软：JScript

定义了JavaScript的语法规范

JavaScript的核心，描述了语言的"基本语法"和"数据类型"，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

7、DOM - 文档对象模型

7.1 一套操作页面元素的API

7.2 DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

8、BOM - 浏览器对象模型

8.1 一套操作浏览器功能的API

8.2 通过BOM可以操作浏览器窗口，比如：控制浏览器跳转、获取分辨率、获取浏览器的可视区域大小等

9、注释

9.1 // JS注释分为单行注释与多行注释(块注释)

9.2 // 被JS注释的代码,不会执行

9.3 // 单行注释 ctrl+/

9.4 /* 多行注释 */

10、JS代码的语法规则

10.1 JavaScript严格区分英文字母大小写

10.2 JavaScript脚本程序需嵌入在HTML文件中才可以执行代码(当然现在也可以用node.js执行单独的js文件)

10.3 JavaScript脚本程序可以独立保存为一个外部文件 这个文件是不能自己运行的它必须要依赖于HTML文件或者node.js环境

10.4 JavaScript脚本程序中不能包含HTML标记代码

10.5 每条语句末尾如果加分号一定是"英文"状态下的分号(;),最好加分号,不要省略

10.6 一行写了多条JS语句 这个时候每一条语句就必须要加分号(最后一条语句可以不加分号)

11、变量

11.1 变量就是可以变化的量, 变量是一个容器, 方便存取数据

11.2 创建变量(定义变量,声明变量)

11.2.1 语法一: 定义单个变量, 变量不赋值

// var 变量名;

var a;

// 使用变量,就是直接使用变量名即可,变量名就可以代表这个变量的值

11.2.2 语法二 :定义多个变量, 变量不赋值

// var 变量名1, 变量名2, 变量名3 ... ;

11.2.3 语法三: 定义单个变量, 变量并赋值

// var 变量名 = 值;

11.2.4 语法四 :定义多个变量, 变量并赋值

// var 变量名1 = 值1, 变量名2 = 值2, 变量名3 = 值3 ...;

11.2.5 注意: 如果变量名声明了,但是没有赋值,那么这个变量的值是会undefined

11.2.6 注意: = 号是赋值运算符, 把=号右边的值,赋值给左边的变量; 那么以后这个变量名就可以代表这个值

11.2.7 修改变量的值, 就是更新变量的值, 通过 =号 赋值运算符

11.3 变量的命名规则和规范

11.3.1 规则 - 必须遵守的，不遵守会报错

11.3.1.1 由字母(A~Za~z)、数字(0~9)、下划线(_)、$符号组成，不能以数字开头

11.3.1.2 多个单词可以使用驼峰法

11.3.1.3 多个单词可以使用下划线连接法

11.3.1.4 不能是JS中关键字和保留字，例如：for、while等(其中变量名为name需要注意,不会报错,但是不推荐使用,因为name是window对象下的一个属性, 不管设置的属性值是什么, 都会被加上双引号,成为字符串类型)

11.3.1.5 区分大小写

11.3.2 规范 ( 建议遵守的，不遵守不会报错)

11.3.2.1 变量名需要有意义,希望大家在声明变量的时候变量名要做到"见名知意"

11.3.2.2 变量名可以由多个英文单词组成 建议使用下划线连接法 或者是驼峰法

11.3.2.3 下划线连接法 每一个单词之间使用下划线进行连接 比如:get_user-name

11.3.2.4 驼峰法 第一个英文单词的首字母全部小写 第二个开始其它的英文单词首字母大写 比如:getUserName

12、变量的数据类型

12.1 为什么变量需要有数据类型

12.1.1 变量主要是用于存储数据的，现实生活中的数据有很多种比如有数值、有字母等等 那么为了将这些数据进行分门别类，所以就引出了变量的数据类型。

12.1.2 JavaScript是一种弱类型的语言。 在声明变量的时候不需要指定变量的数据类型强类型的语言，在声明变量的时候一定要先指明这个变量的数据类型是什么 并且值也是这个数据类型

12.1.3 因为JS是一门弱类型的脚本语言，"在声明变量的时候不需要先声明变量的类型"。但是它也是有类型，JS变量的类型是由"变量的值"来决定 。

12.2 变量的数据类型分为：两大类、七小种 

12.2.1 两大类：

12.2.1.1 基本数据类型(标量数据类型,值类型)

12.2.1.2 复合数据类型(引用数据类型,对象类型)！

12.2.2 七小种:

12.2.2.1 基本数据类型: 字符串,数值,布尔,未定义型,空型

// 基本数据类型：只能存储一个值

基本(标量)数据类型包括如下:

1. 字符串(string)

// 只要值被一对引号(不管双引号还是单引号)包裹, 那么就是字符串

2. 数值(number)

// 数值包括 整数(正整数,负整数), 小数(正小数,负小数), 0, 以及 NaN关键字

// 备注: NaN当数据类型强制转换数值类型失败的时候,就会得到NaN(not a number)关键字

3. 布尔(boolean)

// 布尔值 只有两个 true(表示真,成立) 和 false(表示假,不成立)

4. 未定义(undefined)

// 得到未定义的情况有很多,列几个常见情况给大家

// 4.1 定义变量,不赋值,那么变量的值就为undefined

// 4.2 定义变量,赋值为undefined

// 4.3 访问不存在的数组元素值

// 4.4 访问不存在的对象属性

// 4.5 函数没有返回值

5. 空型(null)

// 得到空型的方式主要给变量赋值一个null 或者 dom对象获取失败也会返回null

// 注意: typeof null的结果不是null, 而是object

12.2.2.2 复合数据类型: 数组,对象

// 复合数据类型：至少存储一个值，可以存储多个值

12.2.3 在JavaScript中有一个内置的函数可以检测变量的数据类型

12.2.3.1 语法一: typeof( 值或者变量名 )

12.2.3.2 语法二: typeof 值或者变量名

12.2.4 字符串类型细节

12.2.4.1 字符串中不允许双包双,单包单; 但是允许双包单, 允许单包双

12.2.4.2 也可以使用转义符 转义符是反斜杠\ 进行一些符号的转义

12.2.4.3 获取字符串的长度:

通过字符串变量名.length 可以获取字符串的总字符个数

12.2.4.4 字符串拼接:

// 字符串拼接就是把小字符串拼成大字符串, 每次拼接都会拼接到后面

// 字符串拼接是使用+号,但是在js中的+号会分情况:

// 情况1: 如果加号左右两个都是数值,那么+号就是加法运算

// 情况2: 如果加号左右两个有一个是字符串,那么+号就是字符串连接运算符

12.2.4.5 运算符

运算符就是可以运算的符号

13、运算符分类

1. 算术运算符 + - * / %(求余数, 取模)

2. 自操作运算符 ++ --

// 自加运算符(自己加1) ++

// 分为前加加跟后加加

// 自减运算符(自己减1) --

// 分为前减减跟后减减

// 自加运算符和自减运算符的用法几乎一样

结论:

1. 不管前加加还是后加加,最终结果都会加1

2. 如果有其他代码跟加加一起使用, 后加加, 把值先拿去参与运算, 自己再加1

3. 如果有其他代码跟加加一起使用, 前加加, 把值先进行加1以后, 再参与运算

3. 赋值运算符 = += -= *= /= %=

// 赋值运算符主要作用就是赋值

/* var a; // 声明变量,但是不给变量赋值,那么这个变量默认的值为undefined

// 对a进行赋值操作 把 = 号右边的值赋予给左边的变量名

4. 字符串连接运算符 + +=

// +和+= 需要左右两个运算符至少有一个是字符串类型, 那么+和+=才会是字符串连接运算符

5. 比较运算符 > < >=

> 大于

< 小于

>= 大于等于

== 等于

!= 不等于

=== 全等

!== 不全等

5.1 比较运算符的结果是布尔值(true或者false)

5.2 == 等于, "比较值是否相等"

5.3  进行比较时，运算符==会考虑其操作数（要比较的两个值）的类型。如果两个值的类型相同，就直接进行比较，如果两个值的类型不同，则尝试将它们转换为相同的类型，再进行比较

5.4 注意: 等于判断不要用= , 因为=号是赋值运算符

5.5 === 全等于, 先比较"数据类型"是否相同, 如果不相同, 直接返回false; 如果"数据类型"相同,再进行值的比较

5.6 === 全等于,需要类型和值都相等,才会返回true

!= 不等于

!== 不全等

6. 逻辑运算符 && || !

6.1 逻辑与&& 表示并且的关系 需要&&左右两边都为true的时候,最终得到true

6.2 逻辑或|| 表示或者的关系 ||左右只有一个为true的时候,最终得到true

6.3 逻辑非! 表示取反的关系 !true=>false !false=>true

7. 三目运算符 条件表达式 ? 语句1:语句2

语法:

// 条件表达式 ? 语句1 : 语句2;

// 如果条件表达式成立,执行语句1;

// 如果条件表达式不成立,执行语句2;

// 说明: 条件表达式就是可以得到布尔值的式子

8. 运算符的优先级

为什么会有运算符的优先级这个问题？

在一个式子里面出现了"多种运算符" 需要考虑哪一个运算符优先运行。

优先级从高到底:

❤1. () 优先级最高

2. 一元运算符 ++ -- !

3. 算数运算符 先* / % 后 + -

4. 关系(比较)运算符 > >= <

5. 相等(比较)运算符 == != === !==

6. 逻辑运算符 先&& 后||

❤7. 赋值运算符 = 优先级最低

14、 流程控制

控制流程（也称为流程控制）是计算机运算领域的用语，意指在"程序运行"时，个别的指令（或是陈述、子程序）运行或求值的"顺序"。

不论是在声明式编程语言或是函数编程语言中，都有类似的概念。

流程控制分为三种结构:顺序结构、分支结构、循环结构

14.1 顺序结构: 代码从上到下, 按顺序执行

14.2 分支结构: 代码有选择的执行, 选择某个分支的代码执行

14.2.1 分支结构又可以分为单分支,双分支以及多分支

条件表达式就是可以得到布尔值的式子

14.2.1.1 单分支:只有一种选择, if语句实现

语法:

if( 条件表达式 ){

条件表达式成立时,执行的代码块;

}

14.2.1.2 双分支,有两种选择, if...else语句实现

语法:

if( 条件表达式 ){

条件表达式成立时,执行的代码块;

}else{

条件表达式不成立时,执行的代码块;

}

14.2.1.3 多分支,有多种选择, if...else if...else语句, switch语句

语法:

if( 条件表达式1 ){

条件表达式1成立时,执行的代码块;

}else if( 条件表达式2 ){

条件表达式1不成立时,条件表达式2成立,执行的代码块;

}else if( 条件表达式3 ){

条件表达式1和2都不成立时,条件表达式3成立,执行的代码块;

}else if( 条件表达式4 ){

条件表达式1,2,3都不成立时,条件表达式4成立,执行的代码块;

}else{

以上条件表达式都不成立,执行的代码块

}

14.2.1.4 Switch语法实现多分支:

14.2.1.4.1 语法:

switch(变量名){

case 值1:

代码块1;

break; ​

case 值2:

代码块2;

break; ​

case 值3:

代码块3;

break;

​ case 值n:

代码块n;

break; ​

default:

如果给定default 子句，这条子句会在 表达式 的值与任一 case 语句都不匹配时执行

}

14.2.1.4.2 运算规则:

1. 拿到switch()里面的变量名的值跟 case后面值进行"全等全等全等"比较, 如果比较成功, 则执行对应的代码块, 执行完代码块以后, 检查是否存在break关键字; 如果有break关键字,则结束switch分支; 如果没有break关键字,会一直往下执行代码块,直到遇到break关键字为止

2. 变量值跟case所有的所有值比较的时候,都不成立, 如果存在default语句,就会执行default默认的代码块

14.2.1.4.3 扩展知识: 如果多个case 值的代码块是相同的情况下,可以把多个case值写在一起

switch(变量名){

case 值1:

case 值2:

case 值3:

满足case值1或者case值2或者case值3,都会执行的代码块;

break;

case 值4:

代码块4;

break;

case 值5:

代码块5;

break; ​

default:

如果给定default 子句，这条子句会在 表达式 的值与任一 case 语句都不匹配时执行

}

14.2.1.5 if多分支语句与switch之间的区别

1. switch语句它在功能上和if语句多分支很相似

2. 如果是"范围"的判断推荐使用if语句多分支

3. 如果是"固定值"之间的比较 推荐使用switch语句

4. 因为switch能够实现的功能 我们其实完全可以使用if语句多分支来实现！

14.3 循环结构: 满足一定条件的时候,代码重复执行

14.3.1 循环结构的循环四要素:

1. 初始化变量, 循环从什么值开始

2. 循环条件, 循环什么时候结束

3. 循环体, 重复执行的代码块就是循环体

4. 变量更新, 更新变量的值,如果不更新变量的值,那么循环会一直成立,就会造成死循环

14.3.2 实现循环结构的几种语句:

14.3.2.1 while循环:

语法:

初始化变量;

while( 循环条件 ){

循环体;

变量更新;

}

14.3.2.2 do...while循环 (了解):

语法:

初始化变量;

do{

循环体;

变量更新;

}while( 循环条件 );

14.3.2.3 while和do...while的区别:

while先判断再执行循环体, do...while先执行一次循环体,再判断 所以 do...while执行会执行一次循环体

14.3.2.4 for循环:

语法:

for(①初始化变量; ②循环条件; ④变量更新 ){

③循环体;

}

①②③④ => ②③④ => ②③④ ...

eg:九九乘法表

  var str = "";
  str += "<table border='1'>";
  for (var i = 1; i <= 9; i++) { // 外层循环控制行
       str += "<tr>";
       for (var j = 1; j <= i; j++) { // 内层循环控制列
         str += "<td>" + j + " &times; " + i + " = " + i*j + "</td>";
             }
         str += "</tr>";
        }
  str += "</table>";
  document.write(str);

14.3.3循环中断关键字:

// 典型的，当条件表达式不成立了，那么循环体就会终止执行。也可以称之为循环它寿终正寝了。

// 循环提前终止:本来条件表达式是成立了，循环体还可以继续的往下执行，但是我们可以使用一些关键字让其提前终止。

// break和continue 循环终止的关键字 都需要配合 if语句来实现 主要的作用是为了提升循环的效率！

// 注意: break和continue这个两个关键字,只能在"循环语句"中使用

14.3.3.1 break

// break打断的意思，当在循环体中遇到了break关键字以后，"立即跳出整个循环"

14.3.3.2 continue

// continue继续的意思，"立即跳出当前本次循环，继续下一次循环"

15、window.prompt() 用户输入对话框

// 这个方法是属性window对象的方法 所以window可以省略

// 这个方法是用来向浏览器中弹出一个用户输入对话框

15.1 语法:

// window.prompt(text,defaultText)

// 第一个参数:text表示提示信息

// 第二个参数:defautlText 表示输入框的中默认文本 默认值

15.2 注意:这两个参数都可以省略不写！

// 这个方法有两个按钮 :确定按钮、取消按钮

// 当用户点击"确定"按钮时会得到一个"String类型"的数据

// 当用户点击"取消"按钮会得到一个关键字 null