初识JavaScript

最新推荐文章于 2022-05-20 10:12:11 发布

仲夏夜的开场

最新推荐文章于 2022-05-20 10:12:11 发布

阅读量171

点赞数

分类专栏：前端 # JavaScript

本文链接：https://blog.csdn.net/qq_33390700/article/details/119194402

版权

前端同时被 2 个专栏收录

39 篇文章 4 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

1.初识JavaScript

1.1 JavaScript历史

布兰登·艾奇(Brendan Eich , 1961年~)。
神奇的大哥在1995年利用10天完成JavaScript 设计。
网景公司最初命名为LiveScript，后来在与Sun合作之后将其改名为JavaScript.

1.2 JavaScript是什么

JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script是脚本的意思)
脚本语言：不需要编译，运行过程中由js解释器(js 引擎）逐行来进行解释并执行
现在也可以基于Node.js技术进行服务器端编程。

1.3 JavaScript的作用

表单动态校验(（密码强度检测）(JS产生最初的目的)
网页特效
服务端开发(Node.js)
桌面程序(Electron)
App(Cordova)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)

1.4 HTML/CSS/JS的关系

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

HTML决定网页结构和内容(决定看到什么)，相当于人的身体
CSS决定网页呈现给用户的模样(决定好不好看)，相当于给人穿衣服、化妆

JS脚本语言–编程类语言

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

1.5 浏览器执行JS简介

浏览器分成两部分：渲染引擎和JS引擎。
渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。
在这里插入图片描述

1.6 JS的组成

在这里插入图片描述
1.ECMAScript
ECMAScript是由ECMA国际（原欧洲计算机制造商协会)进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展。

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

更多参看MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/JlavaScript technologies overview

2.DOM———文档对象模型
文档对象模型(（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。

3.BOM——浏览器对象模型
BOM(Browser Object Model，简称BOM)是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

1.7 JS初体验

JS有3种书写位置，分别为行内、内嵌和外部。
1.行内式

<input type="button" value="唐伯虎" onclick="alert('秋香姐')">

可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性），如:onclick
注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号。
可读性差，在html中编写JS大量代码时，不方便阅读;
引号易错，引号多层嵌套匹配时，非常容易弄混; 特殊情况下使用

2.内嵌JS
写在<head>标签内部

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

可以将多行JS代码写到<script>标签中
内嵌JS是学习时常用的方式

3.外部JS文件
html文件中，写在<head>标签内部：

<script src="my.js"></script> //其中的“my.js”为引入的外部JS文件名

优点：

利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
引用外部JS文件的script标签，中间不可以写代码
适合于JS代码量比较大的情况

1.8 JS注释

在这里插入图片描述

1.9 JavaScript输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下:
在这里插入图片描述

2. 变量概述

1.1 什么是变量

变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。
在这里插入图片描述

1.2 变量在内存中的存储

本质:变量是程序在内存中申请的一块用来存放数据的空间。
类似我们酒店的房间，一个房间就可以看做是一个变量。
在这里插入图片描述

1.3 变量的使用

变量在使用时分为两步:

1.声明变量
2.赋值

1.声明变量

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

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

2.赋值

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

= 用来把右边的值赋给左边的变量空间中此处代表赋值的意思
变量值是程序员保存到变量空间里的值

3.变量的初始化

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

声明一个变量并赋值，我们称之为变量的初始化。

1.4 变量语法扩展

1.更新变量

一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

var age = 18;
age = 81;//最后的结果就是81因为18被覆盖掉了

2.同时声明多个变量

同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开。

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

在这里插入图片描述

3.声明变量特殊情况

在这里插入图片描述

1.5 变量命名规范

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

注意：name 这个单词不是关键字和保留字，但是在一些浏览器中有特殊的含义，也不能作为变量名。
（在不赋值的情况下，可以输出）

3. 数据类型简介

3.1 为什么需要数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间,于是定义了不同的数据类型。
简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18、这些数据的类型是不一样的。

3.2 变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。
变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。
JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会根据等号右边的值被自动确定。

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

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

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

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

3.3 数据类型的分类

JS把数据类型分为两类︰

简单数据类型(Number, string,Boolean , Undefined,Null)
复杂数据类型( object)

3.4 简单数据类型（基本数据类型)

JavaScript中的简单数据类型及其说明如下:

3.4.1 数字型 NUMBER

1.数字型进制
最常见的进制有二进制、八进制、十进制、十六进制。

//1.八进制数字序列范围:0~7
var num1 = 07;//对应十进制的7
var num2 = 023; //对应十进制的19
var num3 = 010;//对应十进制的8
//2.十六进制数字序列范围:0~9以及A~F
var num = OxA;

现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加0x

2数字型范围
JavaScript中数值的最大和最小值

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

3.数字型三个特殊值

alert ( Infinity);  //Infinity
alert (-Infinity) ; //-Infinity
alert (NaN);        // NaN

Infinity，代表无穷大，大于任何数值
-Infinity，代表无穷小，小于任何数值
NaN，Not a number，代表一个非数值

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

var usrAge = 21;
var isok = isNaN (userAge) ;
console.log (isNum ) ;
1/ false , 21 不是一个非数字
var usrName = "andy" ;
console.log(isNaN (userName) ) ; ll/ true , "andy"是一个非数字

3.4.2 字符串型String

字符串型可以是引号中的任意文本，其语法为双引号"“和单引号”"

var strMsg ="我爱北京天安门~"; //使用双引号表示字符串
var strMsg2=·我爱吃猪蹄~';    //使用单引号表示字符串
//常见错误
var strMsg3 =我爱大肘子;      //报错，没使用引号，会被认为是js代码，但js没有这些语法

因为 HTML标签里面的属性使用的是双引号，JS这里我们更推荐使用单引号。

1.字符串引号嵌套
JS可以用单引号嵌套双引号，或者用双引号嵌套单引号(外双内单，外单内双)

var strMsg = '我是"高帅富"程序猿';  //可以用''包含""
var strMsg2 = "我是'高帅富'程序猿";//也可以用""包含''
//常见错误
var badQuotes = ' what on earth?";//报错，不能单双引号搭配

引号之间有就近原则。

⒉字符串转义符
类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。
转义符都是\开头的，常用的转义符及其说明如下:

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

var strMsg="我是帅气多金的程序猿!";
alert (strMsg.length);//显示11

4.字符串拼接
多个字符串之间可以使用＋进行拼接，其拼接方式为字符串＋任何类型=拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

//1.1字符串“相加"
alert ('hello'+ '' + 'world' ); /l hellogworld
//1.2数值字符串"相加”
alert( '100’+ '100'); // 100100
//1.3 数值字符串＋数值
alert ( '11' +12);// 1112

+ 号总结口诀：数值相加，字符相连

5.字符串拼接加强

console.log ( 'pink老师' + 18) ;// 只要有字符就会相连
var age = 18;
//console. log ( 'pink老师age岁啦");// 这样不行哦
console.log ( 'pink老师' + age);       // pink老师18
console.log ( 'pink老师+ age + '岁啦');// pink老师18岁啦

我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值
变量是不能添加引号的，因为加叼号的变量会变成字符串
如果变量两侧都有字符串拼接，口诀“引引加加”，删掉数字，变量写加中间

3.4.3 布尔型Boolean

布尔类型有两个值：true和false ，其中 true表示真(对），而false表示假（错）。
布尔型和数字型相加的时候，true的值为1 ,false的值为0。

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

3.4.4 Undefined和Null

一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或者相加时，注意结果)

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

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

var vari = null;
console.log ('你好·+vari);   // 你好null
console. log (11 + vari);   // 11
console.log(true + vari) ;  // 1

3.5 获取变量的数据类型

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

字面量
字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。
数字字面量:8,9,10
字符串字面量:"黑马程序员,"大前端”
布尔字面量:true , false

3.6 数据类型转换

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

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

转换为字符串类型
转换为数字型
转换为布尔型

3.6.1 转换为空符电

在这里插入图片描述 toString0和String(使用方式不一样。
三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。

3.6.2 转换为数字型（重点)

在这里插入图片描述
注意parselnt和parseFloat单词的大小写，这2个是重点
隐式转换是我们在进行算数运算的时候，JS自动转换了数据类型

3.6.3 转换为布尔型

在这里插入图片描述

代表空、否定的值会被转换为false ，如""、0、NaN、 null、undefined
其余值都会被转换为true

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

3.7 扩展阅读之解释型语言和编译型语言

1.概述
计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。
程序语言翻译成机器语言的工具，被称为翻译器。
在这里插入图片描述

翻译器翻译的方式有两种:一个是编译，另外一个是解释。
两种方式之间的区别在于翻译的时间点不同。
编译器是在代码执行之前进行编译，生成中间代码文件
解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)

2.执行过程
在这里插入图片描述
类似于请客吃饭:
编译语言:首先把所有菜做好，才能上桌吃饭
解释语言:好比吃火锅，边吃边涮，同时进行

3.8 扩展阅读之标识符、关键字、保留字

1.标识符
标识(zhi)符:就是指开发人员为变量、属性、函数、参数取的名字。标识符不能是关键字或保留字。

2.关键字
关键字:是指JS本身已经使用了的字，不能再用它们充当变量名、方法名。
包括:break、case、catch、continue、default、delete、do、else、finally、for、function、if、in.instancedr、new、return、switch、this、throw. try、typeof、var、void、while、with等。

3.保留字
保留字∶实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。
包括: boolean、byte、char、class、const、debugger、double、enum、export、extends,fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized,throws、transient,volatile等。

4.运算符

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

算数运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符

4.1 算术运算符

概念：算术运算使用的符号，用于执行两个变量或值的算术运算。
在这里插入图片描述

4.1.1 浮点数的精度问题

浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数。
var result = 0.1 + 0.2;//结果不是0.3，而是:0.3000000o0o0o00004
console.log(0.07 * 100);//结果不是7，而是:7.0000000o0000001
在这里插入图片描述

4.1.2 表达式和返回值

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

4.2 递增和递减运算符

如果需要反复给数字变量添加或减去1，可以使用递增（++)和递减(–)运算符来完成。

在JavaScript中，递增（++）和递减(–）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变曩后面时，我们可以称为后置递增（递减）运算符。
注意∶递增和递减运算符必须和变量配合使用。

1.前置递增运算符
++num 前置递增，就是自加1，类似于num = num + 1，但是＋+num 写起来更简单。
使用口诀:先自加，后返回值

2.后置递增运算符
num++ 后置递增，就是自加1，类似于num = num + 1，但是 num++写起来更简单。
使用口诀:先返回原值，后自加

3.前置递增和后置递增小结
前置递增和后置递增运算符可以简化代码的编写，让变量的值+1比以前写法更简单
单独使用时，运行结果相同
与其他代码联用时，执行结果会不同
后置:先原值运算，后自加（先人后己)
前置:先自加，后运算(先已后人)
开发时，大多使用后置递增/减，并且代码独占一行，例如:num++;或者num–;

4.3 比较运算符

比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值( true & false )作为比较运算的结果。
在这里插入图片描述
>= 也存在隐式转换,prompt函数输入的“18”为字符串类型，但是可以直接与数字用>= 进行对比。

4.2 =小结
在这里插入图片描述

4.4 逻辑运算符

概念∶逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断
在这里插入图片描述

4.4.1 逻辑与&&

两边都是true才返回true，否则返回false
在这里插入图片描述

4.4.2 逻辑或Ⅱ

两边都为false 才返回false，否则都为true
在这里插入图片描述

4.4.3 逻辑非！

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

var isOk = !true;
console.log(isOk);// false

4.4.4 短路运算（逻辑中断)

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

1.逻辑与

语法∶表达式1 && 表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1

如果有空的或者否定的为假，其余的是真的。

2.逻辑或

语法：表达式1 || 表达式2
如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2

console.log( 123 || 456 );// 123
console.log( 0 || 456 ) ;// 456
console.log( 123 || 456 || 789 ); // 123
console.log(0 || 456 || 456 + 123);// 456

“逻辑或”会影响程序的运行结果，举例如下：

var num = 0;
console.log(123 || num++); // num++ 被短路
console.log (num) ;// num 的值为0

4.5 赋值运算符

用来把数据赋值给变量的运算符。
在这里插入图片描述

var age = 10;
age += 5;//相当于age = age + 5;
age -= 5;//相当于age = age - 5;
age *= 10; //相当于age = age * 10;

4.6 运算符优先级

在这里插入图片描述

一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高

5 流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
简单理解:流程控制就是来控制我们的代码按照什么结构顺序来执行
流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。
在这里插入图片描述

5.1 顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的.

5.2 分支流程控制

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果

JS语言提供了两种分支结构语句：

if语句
switch语句

5.2.1 if语句

1.语法结构

//条件成立执行代码，否则什么也不做
if (条件表达式) {
	//条件成立执行的代码语句
}

语句可以理解为一个行为，循环语句和分支语句就是典型的语句。一个程序由很多个语句组成，一般情况下，会分割成一个一个的语句。

2.执行流程
在这里插入图片描述

5.2.2 if else 语句（双分支语句）

1.语法结构

//条件成立，则执行if里面代码；否则，执行else里面的代码
if (条件表达式) {
	//[如果]条件成立执行的代码
}
else {
	//[否则]执行的代码
}

2.执行流程
在这里插入图片描述
案例：
能被4整除且不能整除100的为闰年（如2004年就是闰年，1901年不是闰年）或者能够被400整除的就是闰年

var year = prompt("请输入年份：");
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
    alert("闰年！");
}       
else {
    alert("平年！");
}

5.2.3 if else if 语句（多分支语句）

1.语法结构

//适合于检查多重条件。
if (条件表达式1) {
	//语句1;
else if (条件表达式2) {
	//语句2;
else if (条件表达式3) {
	//语句3 ;
	...
} else {
//上述条件都不成立执行此处代码
)

2.执行流程
在这里插入图片描述

5.2.4 三元表达式

三元表达式也能做一些简单的条件选择。有三元运算符组成的式子称为三元表达式。

// 如果“？”前面的表达式为真，则返回表达式1；否则，返回表达式2
表达式 ? 表达式1 :表达式2

5.2.5 分支流程控制 switch 语句

switch语句也是多分支语句，它用于基于不同的条件来执行不同的代码。
当要针对变量设置一系列的特定值的选项时，就可以使用switch。
1.语法结构

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

2.执行思路
利用表达式的值，和case 后面的选项值相匹配。如果匹配，就执行该case里面的语句；如果都没有匹配上，就执行default里面的语句。
注意：

表达式的值和 case里面的值相匹配的时候是全等，必须是值和数据类型一致才可以 num === 1。
如果当前的 case 里面没有 break ，则不会退出 switch ，而是执行下一个case。

5.2.6 switch 语句和 if else if 语句的区别

一般情况下，它们两个语句可以相互替换
switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)
switch语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else语句有几种条件，就得判断多少次。
当分支比较少时，if…else语句的执行效率比switch语句高。
当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

5.3 循环结构

循环目的：在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句。

在Js 中，主要有三种类型的循环语句:

for循环
while循环
do…while循环

5.3.1 for 循环

在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句。

1.语法结构
for循环主要用于把某些代码循环若干次，通常跟计数有关系。其语法结构如下:

// 3．初始化变量 就是用var声明的一个普通变量，通常用于作为计数器使用
//4．条件表达式 就是用来决定每一次循环是否继续执行就是终止的条件
//5．操作表达式 是每次循环最后执行的代码经常用于我们计数器变量进行更新（递增或者递减)
for (初始化变量;条件表达式;操作表达式) {
	//循环体
)

2.执行过程

首先执行里面的计数器变量var i = 1 .但是这句话在for里面只执行一次
去 i 〈<100来判断是否满足条件，如果满足条件﹐就去执行循环体︰不满足条件退出循环。
最后去执行i++， i++是单独写的代码，递增，第一轮结束
接着去执行 i <= 100。如果满足条件，就去执行循环体；不满足条件，则退出循环。

断点调试︰
断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。
断点调试可以帮我们观察程序的运行过程
浏览器中按F12–> sources -->找到需要调试的文件–>在程序的某一行设置断点
Watch:监视，通过watch可以监视变量的值的变化，非常的常用。-- 点击watch部分的“+”号，输入想要监视的表达式即可。
在这里插入图片描述

F11:程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

双重for循环

        
        for (var i = 1; i <= 9; i++) {
            var str = "";
            for (var j = 1; j <= i; j++) {
                str += j + "×" + i + "=" + i*j +"\t";
            }
            console.log(str);
        }

for循环小结

for循环可以重复执行某些相同代码
for循环可以重复执行些许不同的代码，因为我们有计数器
for循环可以重复执行某些操作，比如算术运算符加法操作
随着需求增加，双重for循环可以做更多、更好看的效果
双重for循环，外层循环一次，内层for循环全部执行
for循环是循环条件和数字直接相关的循环
分析要比写代码更重要
一些核心算法想不到，但是要学会，分析它执行过程

5.3.2 for 循环

while语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。
while语句的语法结构如下:

while(条件表达式){
	//循环体代码

执行思路:
①先执行条件表达式，如果结果为true，则执行循环体代码;如果为false，则退出循环，执行后面代码
②执行循环体代码，循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为false时，整个循环过程才会结束

5.3.3 do while 循环

do… while语句其实是while语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。

do {
	//循环体
} while (条件表达式);

执行思路：
①do while先执行一次循环体，
②再判断条件。如果条件表达式结果为真，则继续执行循环体，否则退出循环
注意∶先执行循环体，再判断，我们会发现do…while循环语句至少会执行一次循环体代码

循环小结

JS中循环有for . while、do while
三个循环很多情况下都可以相互替代使用
如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用for
while和do…while可以做更复杂的判断条件，比for循环灵活—些
while和do…while执行顺序不一样，while先判断后执行，do…while先执行一次，再判断执行
while和do…while执行次数不一样，do…while至少会执行一次循环体，而while可能一次也不执行
实际工作中，我们更常用for循环语句，它写法更简洁直观，所以这个要重点学习

5.3.3 continue break

5.3.3.1 continue 关键字

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中continue之后的代码就会少执行一次)。

5.3.3.2 break 关键字

break 关键字用于立即跳出整个循环（循环结束)。
例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了，其代码实现如下:

JavaScript 命名规范

1.标识符命名规范

变量、函数的命名必须要有意义
变量的名称一般用名词
函数的名称一般用动词

2.操作符规范

//操作符的左右两侧各保留一个空格
for (var i = 1; i <= 5; i++) {
	if (i == 3){
		break; //直接退出整个for循环，跳到整个for循环下面的语句
	}
	console.log('我正在吃第' + i + '个包子呢');
}

3.单行注释规范

for (var i = 1; i <= 5; i++) {
	if (i == 3) {
		break;// 单行注释前面注意有个空格
	)
console.log('我正在吃第‘ + i ＋ ’个包子呢');
)

4.其他规范
在这里插入图片描述

仲夏夜的开场

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初识JavaScript

1.初识JavaScript1.1 JavaScript历史布兰登·艾奇(Brendan Eich , 1961年~)。神奇的大哥在1995年利用10天完成JavaScript 设计。网景公司最初命名为LiveScript，后来在与Sun合作之后将其改名为JavaScript.1.2 JavaScript是什么JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script是脚本的意思)脚本语言：不需要编译，运行过程中由js解释器(js 引擎）逐行来进行解释并执行
复制链接

扫一扫