学习「JavaScript高级设计语言」 ‘入门-深入‘ 一篇就够用「坚持学习」+「收藏」

最新推荐文章于 2024-04-03 00:50:20 发布

冯世昭

最新推荐文章于 2024-04-03 00:50:20 发布

阅读量814

点赞数

本文链接：https://blog.csdn.net/m0_47429092/article/details/122433710

版权

本文详细介绍了JavaScript的基础知识，包括计算机基础、变量、数据类型、运算符、流程控制、数组、函数等内容。JavaScript是一种运行在客户端的脚本语言，常用于网页特效、表单动态校验和服务端开发。文章还提到了JavaScript的数据类型，如Number、String、Boolean、Undefined、Null，以及数据类型转换的方法。此外，文章还讨论了浏览器的执行机制、DOM操作、事件处理和移动端开发特性，如触屏事件和移动端插件。

摘要由CSDN通过智能技术生成

JavaScript

在这里插入图片描述

计算机基础

编程语言

编程语言
编程：就是让计算机为解决某个问题而使用某个程序设计语言编写程序代码，并最终得到结果的过程。
计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出指令。

注意：上面所定义的计算机指的是任何能执行代码的设备，可能是智能手机、ATM机、黑莓pl、服务器等等
计算机语言
计算机语言指用于人与计算机之间通讯的语言，他是人与计算机之间传递信息的媒介。
计算机语言的种类非常多，总的来说可以分成机器语言，汇编语言和高级语言三大类
实际上计算机最终执行的都是机器语言，它是由“0”和“1”组成的二级制数，二进制计算机语言的基础。

编程语言
可以通过类似于人类语言的“语言”来控制计算机，让计算机为我们做事情，这样的语言叫做编程语言（programming Language）。
编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守。
汇编语言和机器语言实质是相同的，都是直接对硬件操作，只不过是采用了英文缩写的标识符，容易识别的记忆。
高级语言主要相对于低级语言而言，他并不是特质某一种具体的语言，而是包括了很多编程语言，常用的有C语言、C++、java、C#、python、PHP、javascript、go语言、objective-C、swift等。

翻译器
高级语言所编制的程序不能直接被计算机识别，必须经过转换才能被执行，为此，我们需要一个翻译器。
翻译器可以将我们所编写的源代码转换为机器语言，这也被称为二进制化。记住1和0.

编程语言和标记语言区别
编程语言有很强逻辑和行为能力。在编程语言里。你会看到很多if else、for、while等具有逻辑和行为能力的指令，这是主动的。
标记语言（html）不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的，他是被动的。

计算机基础

初始JavaScript

初始javascript

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

javascript的作用
表单动态校验
网页特效
服务端开发（Node.js）
桌面程序（Electron）
App（cordova）
控制硬件-物联网（Ruff）
游戏开发（cocos2d-js）

浏览器执行JS简介
浏览器分成两部分渲染引擎和js引擎
渲染引擎：用来解析html和css，俗称内核，比如chrome浏览器blink，老版本的webkit。
js引擎：也成为js解释器，用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的v8
浏览器本身并不会执行JS代码，而是通过内置JavaScript 引擎(解释器) 来执行J5代码。JS引擎执行代码时逐行解释
每—句源码（转换为机器语言），然后由计算机去执行，所以JaveScript 语言归为的脚本语言，会逐行解释执行.

JS的组成

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

ECMAScript：ECMAScript规定了JS编程语言和核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
2.DOM——文档对象模型
文档对象模型是W3C组织推荐的处理可扩展标记语言的标准编程接口。
通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等}
JS初体验
JS有三种书写位置，分别为行内、内嵌和外部。

1.行内式JS
input type=“button” value=“点我试试” οnclick=“alert('Hello world”)" />
可以将单行或少量JS代码写在html标签的事件属性中（以on开头的属性），如：onclick
注意单引号的使用：在html中我们推荐使用双引导，JS中我们推荐使用单引导
可读性差，在html中编写大量JS代码时，不方便阅读；
引号易错，引导多层嵌套匹配时，非常容易弄混；
特殊情况下使用

2.内嵌JS

可以将多行JS代码写到

3.外部JS文件

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

javascript注释

javascript输入输出语句

变量

变量概述

什么是变量？
白话：变量就是装东西的盒子。
通俗：变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。

变量的使用

变量的使用
变量在使用时分为两步：1.声明变量 2.赋值
1.声明变量
//声明变量
var age；//声明一个名称的变量
var 是一个JS关键字，用来声明变量（variable变量的意思）。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
age是程序员定义的变量名，我们需要通过变量名来访问内存中分配的空间
2.赋值
age=10；//给age这个变量赋值为10
=用来把右边的值赋给左边的变量空间中此处代表赋值的意思
变量值是程序员保存到变量空间里的值

变量的初始化
var age =18； //声明变量同时赋值为18
声明一个变量并赋值，我们称之为变量的初始化。

    //1.声明一个age的变量
    var age;
    //2.赋值 把值存入这个变量中
    age = 18;
    //3.输出结果
    console.log(age);
    //4.变量的初始化
    var myname ='pink老师';
    console.log(myname);

变量语法扩展

变量语法扩展
1.更新变量
一个变量重新赋值后，他原有的值就会被覆盖，变量值将以最后一次赋值为准。
var age = 18;
age = 81; //最后的结果就是81因为18被覆盖了
2.同时声明多个变量
同时声明多个变量，只需要写一个var，多个变量名之间用英文逗号隔开
var age = 10, name=‘zs’, sex=2;

3.声明变量的特殊情况

变量命名规范

变量命名规范
由宁字母(4-2a-2人数字(0-9)、下划结（）、美元符号(＄)組成，如：usrAge, num01, name
严格区分大小写。varapp;和 var App;是两个变量
不能以数字开头。18age 是错误的
不能是关键宇、保留字。例如：var. for、 while
变量名必须有意义。MMD BBD nl——age
遵守驼峰命名法。首字母小亏，后面单词的首字母需要大写。myFirstName
推荐翻译网站：有道爱词霸

小结

数据类型

数据类型简介

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

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

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

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

JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型：
var x = 6； //x为数字型
var x =“bill” //x为字符串型

简单数据类型

数据类型的分类
JS把数据类型分为两类：
简单数据类型（Number，String，Boolean，Undefined，Null）
复杂数据类型（object）

2.1简单数据类型（基本数据类型）
JavaScript中简单的数据类型如下：
简单的数据类型 | 说明 | 默认值
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.2数字型Number
JavaScript数字类型既可以用来保存整数值，也可以保存小数（浮点数）。
var age = 21; //整数
var Age = 21.3747 //小数
1.数字型进制
最常见的进制有二进制、八进制、十进制、十六进制。
//1.八进制数字序列范围：0-7
var num1 = 07; //对应十进制的7
var num2 = 019； //对应的十进制19
var num3 = 08； //对应的十进制的a
//2.十六进制数字顺序范围：0-9以及A-F
var num = 0xA；
现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加0x
2.数字型范围
JavaScript中数值的最大数和最小值
alert（Number .MAX_VALUE）; //1.7967931348623157e+308
alert (Number .MIN_VALUE); //5e-324
3.数字型三个特殊值
alert (Infinity); //Infinity
alert (-Infinity); //-infinity
alert (NaN); //NaN
lnfinity,代表无穷大，大于任何数据
-lnfinity，代表无穷大，小于任何数值
NaN，Not a number，代表一个非数值
4.isNaN()
用来判断一个变量是否为非数字的类型，返回true或者false

获取变量数据类型

字符串型 String
1.字符串引号嵌套
字符串型可以是引号的任意文本，其语法为双引号“”和单引号‘’

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

2.字符串转义符
类似html里面的特殊字符，字符串也有特殊字符，我们称之为转义符。
转义符都是\开头的，通常的转义符及其说明如下：

转义符 | 解释说明
\n | 换行符，n是newline的意思
\ | 斜杠
’ | ‘单引号
* | “双引号
\t | tab缩进
\b | 空格，b是blank的意思
3.字符串长度
字符串是由若干个字符组成的，这些字符的数量就是字符串的长度。通过字符串的lenght属性可以获取整个字符串的长度
var strMsg = “我是帅气多金的程序猿！”；
alert （strMsg.length）; //显示11
4.字符串拼接
多个字符串之间可以使用+进行拼接，其拼接方式为字符串+任何类型=拼接之后的新字符串
拼接前会把字符串相加的任何类型转成字符串，再拼接成一个新的字符串

+号总结口诀：数值相加，字符相连
5.字符串拼接加强

2.5布尔型 Boolean
布尔类型有两个值：true（1）和false（0），其中true表示真（对），而false表示假（错）。
2.6Undefined 和 Null
一个声明后没有赋值的变量会有一个默认值undefined（如果进行相连或者相加时，注意结果）

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

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

数据类型转换

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

//1.数字型转换成字符串型变量.toString()
var num = 10;
var str = num.toString();
console.log(str);
console.log(typeof str);
//2.我们利用 String（变量）
console.log(String(num));
//3.利用+拼接字符串的方法实现转换效果隐式转换
console.log(num+’’);
4.3转换为数字型（重点）

4.4转换为布尔型

方式 | 说明 | 案例
Boolean（）函数 | 其他类型转换成布尔型 | Boolean(‘true’)
代表空、否定的值会被转换为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(‘你好吗’));
console.log(Boolean(‘我很好’));
console.log(Boolean(‘123’));

扩展编译和解释语言区别

1.解释型语言和编译型语言
1.概述
计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。

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

2.标识符、关键字、保留字
1.标识符
标识（zhi）符：就是指开发人员为变量、属性、函数、参数取的名字。
标识符不能是关键字或保留字。
2.关键字
关键字：是指JS本身已经使用了的字，不能再用他们充当变量名、方法名。
包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with等。
3.保留字
保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同意不能使用他们当变量名或方法名。
包括：boolean. byte, chars，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等。

JavaScript运算符

运算符

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

JavaScript中常用的运算符有：
算数运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符

算术运算符

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

运算符 | 描述 | 实例

| 加 | 10+20=30

| 减 | 10-20=10

| 乘 | 10*20=200
/ | 除 | 10/20=0.5
% | 取余数（取模） | 返回除法的余数9%2=1
2.2浮点数的精度问题
浮点数的最高精度是17位小数，但在进行算术时其精确度远远不如整数。

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

1.我们怎么判断一个数能够被整除呢？
它的余数是0就说明这个数能被整除，这就是% 取余运算符的主要用途
2.请问1+2*3结果是？
结果是7，注意算数运算符的优先级，先乘除后加减，有小括号先算小括号里面的

表达式和返回值

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

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

递增和递减运算符

递增和递减运算符
如果需要反复给数字添加或减去1，可以使用递增（++）和递减（–）运算符来完成。
在JavaScript中，递增（++）和递减（–）既可以放在变量前面，也可以放在变量的后面。放在变量的前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称之为后置递增（递减）运算符。

3.2递增运算符
1.前置递增运算符
++num前置递增，就是自加1，类似于num=num+1，但是++num写起来更简单。
2.后置递增运算符
num ++后置递增，就是自加1，类似于num=num+1，但是num++写起来更简单
口诀先返回值后自加1
//前置自增
//1.想要一个变量自己加1 num=num+1 比较麻烦
var num=1;
num = num + 1; //++num
num = num + 1;
console.log(num); //3
//2.前置递增运算符 ++写在变量前面
var age = 10;
++age //类似于age = age + 1
console.log(age);
//3. 先加1 后返回值
var p = 10;
console.log(++p + 10);
//后置自增
var num= 10;
num++; //num = num + 1
console.log(num);
//1.前置自增和后置自增如果单独使用效果是一样的
//2.后置自增口诀：先返回值后自加1
var age = 10;
console.log(age++ + 10); //age++ 先返回原值10 10+10+20 然后age加1
console.log(age);

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

比较运算符

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

运算符名称 | 说明 | 案例 | 结果
< | 小于号 | 1<2 | true

| 大于号 | 1>2 | false
= | 大于等于号（大于或者等于） | 2>=2 | true
<= | 小于等于号（小于或者等于） | 3<=2 | false
== | 判等号（会转型） | 3737 | true
!= | 不等号 | 37！=37 | false
=== ! | 全等要求值和数据类型都一致 | 37===‘37’ | false
1.我们程序里面的等于符号是== 默认转换数据类型会把字符串型的数据转换为数字型只要求值相等就可以
2.我们程序里面会有全等一模一样要求两侧的值还有数据类型完全一致才可以 true

4.2 =小结

符号 | 作用 | 用法
= | 赋值 | 把右边给左边
== | 判断 | 判断两边值值是否相等（注意此时有隐式转换）
=== | 全等 | 判断两边的值和数据类型是否完全相同
console.log(18==‘18’); //true
console.log(18===‘18’) //false

逻辑运算符

逻辑运算符
5.1逻辑运算符概述
概念：逻辑运算符是用来进行布尔值运算的运算符，其返回也是布尔值。后面开发中常用于多个条件判断。

逻辑运算符 | 说明 | 案例
&& | “逻辑与”，简称“与”and | true&&false
| | | “逻辑或”，简称“或”or | true | | false
！ | “逻辑非”，简称“非”not | ！true
5.2 逻辑与&&
两侧都是true才返回ture，否则返回false

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

5.4 逻辑非！
逻辑非（!）也叫做去反符，用来取一个布尔值相反的值

5.4短路运算（逻辑中断）
短路运算的原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值。

1.逻辑与
语法：表达式1&&表达式2
如果第一个表达式为真，则返回表达式为2
如果第一个表达式的值为假，则返回表达式1
2.逻辑或
语法：表达式1 || 表达式2
如果第一个表达式的值为真，则返回表达式1
如果第一个表达式为假，则返回表达式2

    //1.用我们的布尔值参与的逻辑运算 true && false == false
    //2.123 && 456 是值 或者是 表达式 参与逻辑运算？
    //3.逻辑与短路运算 如果表达式1为真 则返回表达式2
    console.log(123 && 456);  //456
    console.log(0 && 456); //0
    console.log(0 && 1+2 && 456 * 56789); //0
    // 如果有空的或者否定的为假 其余都是真的 0 ''  null undefined NaN
    //4.逻辑或短路运算 如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 其返回的表达式2
    console.log(123 || 456); //123
    console.log(123 || 456 || + 123); //123
    console.log(0 || 456 || + 123); //456
    // 逻辑中断很重要 它会影响我们程序结果
    var num = 0;
    console.log(123||num++);
    console.log(num); //0

赋值运算符

赋值运算符
概念：用来把数据赋值给变量的运算符。

运算符的优先级

优先级 | 运算符 | 顺序
1 | 小括号 | （）
2 | 一元运算符 | ++ – ！
3 | 算数运算符 | 先* / 后±
4 | 关系运算符 | > >= < <=
5 | 相等运算符 | == != === !==
6 | 逻辑运算符 | 先&& 后 ||
7 | 赋值运算符 | =
8 | 逗号运算符 | ，
一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高

JavaScript 流程控制-分支

流程控制

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

顺序流程控制

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

分支流程控制if语句

3.分支流程控制if语句
3.1分支结构
由上到下执行代码过程中，根据不同的路径代码（执行代码多选一的过程），从而得到不同的结果

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

3.2 if语句
1.语法结构
//条件成立执行代码，否则什么也不做
if （条件表达式）{
//条件成立执行的代码语句
}
语句可以理解为一种行为，循环语句和分支语句就是典型的语句。一个程序由很多个语句组成，一般情况下，会分割成一个一个的语句。
2.执行流程

//1.if 语法结构如果if
// if (条件表达式) {
// //执行语句
// }
//2.执行思路如果if里面的条件表达式结果为真 true 则执行大括号里面的执行语句
//如果if 条件表达式结果为假则不执行大括号里面的语句则执行if 语句后面的代码
//3.代码体验
if(3 < 5) {
alert(‘我最帅’)
}

进入网吧案例
//弹出 prompt 输入框，用户输入年龄，程序把这个值取过来保存变量中
//使用if语句来判断年龄，如果怕年龄大于18 就执行if 大括号里面的输出语句
var age = prompt(‘请输入年龄’)
if (age >= 18) {
alert(‘我想带你去网吧偷耳机’)
}

3.3 if else语句（双分支语句）
//条件成立执行代码，否则什么也不做
if （条件表达式）{
//条件成立执行的代码语句
} else {
//[否则执行的代码
}

2.执行流程

//1.语法结构 if 如果 else否则
// if (条件表达式) {
// //执行语句
// } else {
// //执行语句2
// }
//2.执行思路如果表达式结果为真那么执行语句1 否则执行语句2
//代码验证
var age = prompt(‘请输入您的年龄’);
if (age >= 18) {
alert(‘我想带你去网吧偷耳机’)
} else {
alert('滚 ')
}
//5.if里面的语句1 和else 苦闷的语句2 最终只能有一个语句执行 2选1
//6. else后面直接跟大括号
判断闰年案例

var year = prompt(‘请输入年份：’)
if (year % 4 == 0 && year % 100 != 0 || year % 400== 0) {
alert(‘您输入的年份是闰年’)
} else {
alert(‘您输入的是平年’)
}
3.4 if else if 语句（多分支语句）
适合于检查多重条件
//1.多分支语句就是利用多个条件来选择不同语句执行得到不同的结果多选1的过程
//2.if else if 语句是多分支语句
//3.语法规范
if (条件表达式) {
//语句1；
} else if (条件表达式2) {
//语句2；
} else if (条件表达式3) {
//语句3
} else {
//最后语句
}
//4.执行思路
//如果条件表达式1 满足就执行语句1 执行完毕后，推出整个if 分支语句
//如果条件表达式1不满足，则判断条件表达式2 满足的话，执行语句2 以此类推
//如果上面的所有条件表达式都不成立，则执行else 里面的语句
//5.注意点
//(1)多分支语句就是多选1 最后只有一个语句执行
//(2)else if 里面的条件可以任意多个的
//(3)else if 中间有个空格
案例——判断成绩级别
//必须按照从大到小思路来写
var score = prompt(‘请输入分数：’)
if (score >= 90) { //大于等于90
alert(‘宝贝你是我的骄傲’)
} else if (score >= 80) {
alert(‘宝贝你已经很出色了’)
} else if (score >= 70) {
alert(‘你要加油了’)
} else if (score >= 60) {
alert (‘孩子很危险’)
} else
alert(‘熊孩子我不想和你说话你别学了’)
}

三元表达式

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

三元表达式案例——数字补0

2.3for循环重复不同的代码
for循环还可以重复不同的代码，这主要是因为使用了计数器，计数器在每次循环过程中都会改变。
//for循环重复不同的代码因为我们有计数器变量i的存在i每次循环值都会变化
//我们想要输出一个人 1~100岁
// for (var i = 1;i <= 100;i++) {
// console.log(‘宋佳硕这个人今年’+ i +‘岁了’);
// }
for (var i = 1; i <= 100; i++) {
if (i == 1) {
console.log(‘宋佳硕这个人今年1岁了，他出生了’);
} else if (i == 100) {
console.log(‘宋佳硕今年100岁了，他挂掉了’);
} else {
console.log(‘这个人今年’ + i + ‘岁了’);
}
}
2.4for循环重复某些相同操作
for循环因为有了计数器的存在，我们还可以重复执行某些操作，比如做一些算数运算。
案例1 求1-100之间所有整数的累加和
需要循环100次，我们需要一个计数器
我们需要一个存储结果的变量sum，但是初始值一定是0
核心算法：1+2+3+4… ，sum = sum + i
//for 循环重复执行某些操作比如说我们做了100次加法运算
var sum = 0;
for (var i = 1; i <= 100; i++) {
// sum = sum + 1
sum += i;
}
console.log(sum);
for循环案例

求学生成绩案例
要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩以及平均成绩。
案例分析
弹出输入框总的班级人数(num)
依次输入学生的成绩（保存起来score），此时我们需要用到for循环，弹出的次数跟班级总人数有关系条件表达式 i <= num
进行业务处理：计算成绩。先求总成绩（sum），之后求平均成绩（average）
弹出结果
var num = prompt(‘请输入班级的总人数：’) //num班级的总人数
var sum = 0; //求和的变量
var average = 0; //求平均值的变量
for (var i = 1; i <= num; i++) {
var score = prompt(‘请输入第’ + i + ‘个学生成绩’);
sum = sum + parseFloat(score); //因为从prompt取过来的数据是字符串型的需要转换为数字型
}
average = sum / num;
alert(‘班级总的平均成绩是’ + sum);
alert(‘班级平均分是：’ + average);

案例一行打印五个星星
//一行打印5个星星
// console.log(‘⭐⭐⭐⭐⭐’;

    // 我们采取追加字符串的方式
    // var str = '';
    // for(var i =1;i<=5;i++) {
    //     str =str + '⭐'
    // }
    // console.log(str);
   
    var num = prompt('请输入星星的个数')
    var str = '';
    for (var i = 1; i <= num; i++) {
        str = str + '⭐';
    }
    alert(str);

双重for循环

3.双重for循环概述
很多情况下，单层for循环并不能满足我们的需求，比如我们要打印5行5列的图形、打印一个倒直角三角形等，此时我们就可以通过循环嵌套来实现。

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以在嵌套一个for循环，这样的for循环我们称之为双重for循环。
//1.双重for循环语法结构
for (外层的初始化; 外层的条件表达式; 外层的操作表达式) {
for (里层的初始化; 里层的条件表达式; 里层的操作表达式) {
//执行语句
}
}
//2.我们可以把里面的循环看做是外层循环的语句
//3.外层循环一次，里面的循环执行全部
//4.代码验证
for (var i = 1; i <= 3; i++) {
console.log(‘这是外层循环第’ + i + ‘次’);
for(var j=1;j<=3;J++){
console.log(‘这是里层的循环第’+j+‘次’);
}
}
3.4案例打印5行5列星星
核心&

最低0.47元/天解锁文章

冯世昭

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
学习「JavaScript高级设计语言」 ‘入门-深入‘ 一篇就够用「坚持学习」+「收藏」

JavaScript计算机基础编程语言编程语言编程：就是让计算机为解决某个问题而使用某个程序设计语言编写程序代码，并最终得到结果的过程。计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出指令。注意：上面所定义的计算机指的是任何能执行代码的设备，可能是智能手机、ATM机、黑莓pl、服务器等等计算机语言计算机语言指用于人与计算机之间通讯的语言，他是人与计算机之间传递信息的媒介。计算机语言的种类非常多，
复制链接

扫一扫