学习javascript这一篇就够了超详细笔记(建议收藏)上

发布于:2022-12-29 ⋅ 阅读:(999) ⋅ 点赞:(0)

学习javascript这一篇就够了超详细笔记(建议收藏)上

1.初识

计算机基础导读

***学完应掌握的知识点

  • 能够说出什么是编程语言
  • 能够区分编程语言和标记语言的不同
  • 能够说出常见的数据存储单位机器换算关系
  • 能够说出内存的主要作用以及特点

***本章学习的知识点

  • 编程语言
  • 计算机基础

编程语言

编程:

​ 就是让计算机为解决某个问题而使用每种程序设计语言编写程序代码,并最终得到结果的过程。

计算机程序:

​ 就是计算机所执行的一系列的指令集和,而程序全部都是用我们所掌握的语言来编写的,所以人们要控制计算机一定要通过计算机语言向计算机发出命令。

计算机语言:指用于人与计算机之间通讯的语言,它是人与计算机之间传递消息的媒介。

计算机语言的种类非常多,总的来说可以分成机器语言,汇编语言和高级语言三大类。

​ 实际上计算机最终所执行的都是机器语言,它是由0 和 1 组成的二进制数,二进制是计算机语言的基础。

编程语言:

​ 可以通过类似于人类语言的“语言”来控制计算机,让计算机来为我们做事情,这样的语言就叫做编程语言。

​ 编程语言是用来控制计算机的一系列指令,它有固定的格式和词汇(不同的编程语言的格式和词汇不一样),必须遵守。

​ 如今通用的编程语言有两种形式:汇编语言和高级语言。

​ 汇编语言和机器语言实质是相通的,都是直接对硬件操作,只不过指令采用了英文缩写的标识符,容易识别和记忆。

高级语言注意是相对于低级语言而言,他并不是特指某一种具体的语言,而是他包括了很多编程语言,程永德有c语言,c++,java,c#,python,javascript,go语言,objective-c,swift等。

翻译器:

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

​ <!-- * 编程语言和标记语言区别:

​ - 编程语言有很强的逻辑和行为能力。在编程语言里,你会看到很多if else、for、while等具有逻辑性和行为能力的指令,这是主动的。

​ - 标记语言不用于向计算机发出指令,常用语格式化和连接。标记语言的存在就是用来被读取的,他是被动的。

总结

1.计算机可以帮助人类解决某些问题

2.程序员利用编程语言编写程序发出指令控制计算机来实现这些任务

3.编程语言有机器语言、汇编语言、高级语言

4.高级语言需要一个编译器转换为计算机识别的机器语言

5.逻辑语言是主动的有很强的逻辑性

计算机基础

1.计算机组成

电脑:

​ - 硬件

​ ·输入设备:鼠标键盘手写板摄像头

​ ·输出设备:显示器打印机投影仪

​ · CPU:负责处理数据与运算

​ ·硬盘&内存:负责存储数据,硬盘永久存储数据,内存暂时存储数据

​ - 软件

​ ·系统软件:windows、linux、macOs

​ ·应用软件:浏览器、qq

2.数据存储

​ 1.计算机内部使用二进制0和1来表示数据。

​ 2.所有数据,包括文件,图片等最终都是以二进制数据(0和1)的形式存放在硬盘中的。

​ 3.所有程序,包括操作系统,本质都是各种数据,也就是二进制数据的形式存放在硬盘中。平时我们所说的 安装软件,其实就是把程序文件复制到硬盘中。

​ 4.硬盘、内存都是保存二进制数据。

数据存储单位

​ bit < byte < kb < mb < gb < gb < tb<…

​ - 位(bit):1bit可以存储一个0或者1(最小的存储单位)

​ - 字节(Byte):1B = 8b

​ - Kb:1Kb = 1024B

​ - MB:1MB = 1024KB

​ - GB:1GB = 1024MB

​ - TB:1TB = 1024GB

程序运行

​ 1.打开某个程序时,先从硬盘中把程序的代码加载到内存中

​ 2.cpu执行内存中的代码

​ 注意:之所以要内存的一个重要原因,是因为cpu运行太快了,如果只从硬盘中读取数据,会浪费cpu性能,所以,才使用存取速度更快的内存来保存运行时的数据。(内存十点,硬盘是机械)

初识js

js是世界上最流行的语言之一,是一种运行在客户端的脚本语言(scrip是脚本的意思)

脚本语言:不需要解释,运行过程中由js解释器(js引擎)逐行来进行解释并执行

- 现在也可以基于Node.js技术进行服务端编程

html/css标记语言-描述类语言

- html决定网页结构和内容(决定看到什么),相当于人的身体

- css决定网页呈现给用户的墨阳(决定好不好看),相当于给人家穿衣服、化妆

js脚本语言-编程类语言

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

浏览器执行

浏览器分为两部分:渲染引擎和js引擎

​ - 渲染引擎:用来解释html和css,俗称内核,比如chrome浏览器的blink,老版本的webkit

​ - js引擎:也成为了js解释器。用来读取网页中的javascript代码,对其处理后运行,比如chrome浏览器的v8

​ 注意:浏览器本身并不会执行js代码,而是通过内置javascript引擎(解释器)来执行js代码。js引擎执行代码时逐行解释每一句源码(转换机器语言),然后由计算机去执行,所以javascript语言归为脚本语言,会逐行解释执行。

js组成

javascript

​ - ECMAScript:是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,他往往被称为javascript或JScript,但实际上后者是ECMAscript语言的实现和拓展。

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

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

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

js初体验-三种书写位置

1.行内js 直接写到元素的内部

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

2.内嵌式的js

<script>
        alert('我是风中的余烬!')
    </script>

3.外部js

<script src="my.js">这里不可以写代码!</script>

外部创建了一个.js文件 并引入

js注释

//1.单行注释 ctrl+ /

​ /* 2.多行注释 默认快捷键shift+alt+a

​ 2.多行注释 vscode可以修改快捷键 */

js输入输出语句

<script>
        // * 这三个都归属于浏览器
        // 这是一个输入框
        prompt('请输入你的年龄?');
        // alert弹出警示框 输出的 展示给用户的
        alert('成年可以,未成年不可浏览该网站!');
        //console 控制台输出 给程序员测试用的
        console.log('我是程序员能看到的');
    </script>

2.变量

变量导读

***学完掌握的知识点

- 能够说出变量的主要作用

- 能够写出变量的初始化

- 能够说出变量的命名规范

- 能够画出变量是如何在内存中存储的

- 能够写出交换变量的案例

**学习的知识点

* 变量概述

* 变量的使用

* 变量的语法拓展

* 变量的命名规范

* 交换变量的案例

什么是变量?

什么是变量?

​ 白话:变量就是一个装东西的盒子。

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

变量在内存中的存储

​ 本质:变量是程序在内存中申请的一块用来存放数据的空间。类似于我们酒店的房间,一个房间就可以看做是一个变量。

简单来说:

​ 酒店就是内存,申请变量就是开房(可以开很多房,房间(内存)只要够),变量名就是房间门牌号(我们可以从变量名找到变量)

变量的使用

<script>
        // 变量在使用的时候分为两步:1.声明变量 2.赋值


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


        // 2.赋值 把值存到这个变量当中
        age = 18;
        // - = 用来把右边的值付给左边的变量空间中 此处代表赋值的意思
        // - 变量值是程序员保存到变量空间的值


        // 3.输出结果
        console.log(age);
        // 4.声明变量并赋值 我们称之为 《变量的初始化》
        var myname = '风向巴巴';
        console.log(myname);
    </script>

案例

<script>
        var myname = '亚索';
        var age = '30岁';
        var address = '居无定所';
        var gz = 300;
        console.log(myname);
        console.log(age);
        console.log(address);
        console.log(gz);
    </script>

变量案例弹出用户名

<script>
        // 1.用户输入姓名,存储到一个myname的变量里
        var myname = prompt('请输入你的名字:');
        // 2.输出这个用户名
        alert(myname);
    </script>

变量的扩展

1.更新变量-一个变量被重新赋值后,他原有的值就会被覆盖,变量值将以最后一次赋的值为准。

var myname = ('fx');
        console.log(myname);
        myname = '刘亦菲';
        console.log(myname);

2.声明多个变量

// var age = 18;
        // var address = '火影村';
        // var gz = 2000;
        var age = 18,
            address = '火影村',
            gz = 2000;
        console.log(age);
        console.log(address);
        console.log(gz);

3.声明变量的特殊情况

​ 3.1只声明不复制 结果是? 程序也不知道里面存的啥 所以结果是underfined(未定义的)

var sex;
        console.log(sex); //underfined

​ 3.2不声明 不赋值 直接使用某个变量会报错的 报错的话下面的代码也不会执行了 停止了

 console.log(tel);

​ 3.3不声明直接赋值使用 (不推荐使用)

qq = 110;
        console.log(qq);

变量的命名规范

1.变量名可以由字母、数字、下划线(_)、美元符号($)组成。

2.变量名严格区分大小写

var app = 10;
        var App = 100;
        console.log(app);
        console.log(App);

3.变量名不能以数字开头

var 18age;

4.不能是关键字 保留字 例如:var for while (后有详细介绍)

var var;

5.变量名必须有意义 比如 nl–age (尽量使用英文单词 一眼得知什么意思)

6.遵守驼峰命名法 首字母小写 后面单词的首字母需要大写 myFirstName

7.推荐翻译网站:有道 爱词霸

8.尽量不要使用name变量名

console.log(tel);不会报错
console.log(name);会报错

交换两个临时变量的值

js 是编程语言 有很强的逻辑性在里面: 实现这个要求的思路 要先怎样后怎样

1.我们需要一个临时变量
2.我们把apple1 给我们的临时变量temp
3.然后把apple2 给我们的apple1
4.最后把temp 给我们的apple2

var temp;//声明了一个变量为空
        var apple1 = 'zuo';
        var apple2 = 'you';
        // 程序给值 都是右给左
        var temp = apple1;
        var apple1 = apple2;
        var apple2 = temp;
        console.log(apple1);
        console.log(apple2);

变量小结

为什么需要变量?

​ -因为我们一些数据需要保存 所以需要变量

* 变量是什么?

​ -变量就是一个容器 用来存放数据的 方便我们以后使用里面的数据

* 变量的本质是什么?

​ -变量是内存的一块空间 用来存放数据的

* 变量怎么使用的?

​ -我们使用变量的时候 一定要声明变量 然后赋值

​ -声明变量的本质是去内存申请空间

* 什么是变量的初始化?

​ -声明变量并赋值我们称之为变量的初始化

* 变量命名规范有哪些?

​ -变量名尽量要规范 闻名知意——驼峰命名法

​ -区分哪些变量名不合法

* 交换2个变量值得思路?

​ -学会交换2个变量

3.数据类型

数据类型导读

**学完要掌握的知识点

- 能够说出5种简单数据类型

- 能够使用typeof获取变量的类型

- 能够说出1~2种转换为数值型的方法

- 能够说出1~2种转换为字符型的方法

- 能够说出什么是隐式转换

**学习的知识点

* 数据类型简介

* 获取变量数据类型

* 获取变量数据类型* 数据类型转换

变量的数据类型

// int num = 10; Java写法 直接定义称整型 右边值非整型就会报错

// var num; //这里的num 我们是不确定属于那种数据类型的
        var num = 10; //num属于数字型 (输入的值是什么类型 就是什么数据类型)
        var str = 'fx'; //str 字符类型
        // (重要)js 的变量数据类型是只有程序在运行过程中 根据等号右边的值来确定的

        // js 是动态语言 变量的数据类型是可以变化的
        var x = 10; // x 是数字型
        x = 'pink'; // x 是字符串型

数字型Number

<script>
        var num = 10; //num 数字型
        var PI = 3.14; //PI 数字型
        // 1.八进制 0 ~ 7 我们程序里面数字前面加 0 表示八进制
        var num1 = 010;
        console.log(num1); // 010 八进制 转换为10进制 就是8
        var num2 = 012;
        console.log(num2);
        // 2.十六进制 0 ~ 9  a ~ f      #ffffff 数字的前面加 0x 表示十六进制
        var num3 = 0x9;
        console.log(num3);
        var num4 = 0xa;
        console.log(num4);
        // 3.数字型的最大值
        console.log(Number.MAX_VALUE);
        // 4.数字型的最小值
        console.log(Number.MIN_VALUE);
        // 5.无穷大
        console.log(Number.MAX_VALUE * 2); //     Infinity 无穷大
        // 6.无穷小
        console.log(-Number.MAX_VALUE * 2); //     I-nfinity 无穷小
        // 7.非数字
        console.log('fx' - 100);  //NAN
    </script>

isNaN判断

isNaN() 这个方法用来判断非数字 并且返回一个值 如果是数字返回的是-false 如果不是数字返回的是ture

console.log(isNaN(12)); //false  是个数字  不是一个非数字
        console.log(isNaN('fx')); //turn 不是数字  是一个非数字

字符串型

1.字符串型元素

‘ture’ ‘哒哒’ ‘66’ 在引号内统一是字符串型

1.字符串引号嵌套 js 可以用单引号嵌套双引号 或者用双引号嵌套单引号(内单外双)(外单内双)
        var str = '我是一个"幽默"的程序员';
        console.log(str);

2.转义字符

// * \n 换行

​ // * \t 缩进

​ // * \ 斜杠\

​ // * ’ 单引号

​ // * " 双引号

​ // * \b 空格 b是blank的意思

​ // 我们先记住换行和空格 缩进就行

弹出网页警示框

alert('有志者事竟成,破釜沉舟,百二秦关终属楚;"嗨嘿嘿"\n苦心人天不负,卧薪尝胆,三千越甲可吞吴;');  ((alert 警示框)

字符串长度和拼接

1.检测获取字符串长度 length

var str = '我就是风暴!';
        console.log(str.length);//6 

2.(重要) 字符的拼接 + 只要有字符串和其他类型拼接 最终结果是字符串类型

console.log('近水' + '楼台');
        console.log('我才' + 18);
        console.log('fx' + true);
        console.log(12 + 12);
        console.log('12' + 12);
        // (重要)数值相加 字符相连

字符串加强

// - 我们惊常会将字符串和变量来拼接 因为变量可以很方便的修改里面的值

// - 变量是不能添加引号的 因为加引号的变量会变成字符串

// - 如果变量两侧都有字符串拼接 口诀“引引加加” 删除数字 变量写加号中间

console.log('破釜' + 18); //破釜18
        console.log('破釜' + 18 + '元'); //破釜18元
        var age = 18;
        console.log('破釜age元');
        //我们变量不要写到字符串里面 是通过和字符串相连的方式实现的
        console.log('破釜' + age + '元');
        // 变量和字符串相连的口诀 - 引引加加
        console.log('破釜 ' + age + ' 元');

显示年龄案例

<script>
        // 弹出一个输入框(pompt) 让用户输入年龄(用户输入)
        // 用户输入的值用变量保存起来 把刚才输入的年龄与所要输出的字符串拼接 (用户输入)
        // 使用alert语句弹出警示框(输出结果)
        var age = prompt('请输入你的年龄');
        var str = '你已经' + age + '岁了';
        alert(str);
    </script>

Boolean-undefined-null

boolean型

var flag = true; //flag 布尔型   代表真(对)
        var flag1 = false; //flag 布尔型  代表假(错)
        console.log(flag + 1); //true 参与加法运算当1来看
        console.log(flag1 + 1); //falese 参与加法运算当0来看
        console.log(flag + 'pink');  (相连)

undefined

// 如果一个变量声明未赋值 就是 undefined 未定义数据类型
        var str;
        console.log(str);
        var varible = undefined;
        console.log(varible + 'fengx'); //undefinedfengx
        console.log(varible + 1); //NaN  undefined 和数字相加 最后结果是NaN

null

// null 空值 (一个声明变量给null值 里面存储的值为空)(学习对象时,再研究null)
        var space = null;
        console.log(space + 'fengx'); //nullfengx
        console.log(space + 1); // 1

结:任何类型只要加 字符串都是相连

typeof检测变量数据类型

<script>
        var num = 10;
        console.log(typeof num); //number(数字型)
        var str = 'pink';
        console.log(typeof str); //string(字符型)
        var flag = true;
        console.log(typeof flag); //boolean
        var vari = undefined;
        console.log(typeof undefined); //undefined
        var timer = null;
        console.log(typeof null); //object
        // prompt 取过来的值是 字符型的   后续我们需要知道变量是什么类型 才方便运算 所以很重要
        var age = prompt('请输入你的年龄');
        console.log(age);
        console.log(typeof age);
    </script>

字面量

字面量是在源代码中的一个固定值得表示法 通俗来讲 就是字面量表示如何表达这个值 一眼看出这个是什么类型的变量

我们可以通过控制台字体颜色 分辨数据类型

console.log(18);
        console.log('18');
        console.log(true);
        console.log(undefined);
        console.log(null);

数据类型转换之转换为字符串

    <script>
        // 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 + '');
    </script>

数据类型转换之转换为数字型

    <script>
        // var age = prompt('请输入您的年龄');
        // 1. parseInt(变量)  可以把 字符型的转换为数字型 得到的是整数
        // console.log(parseInt(age));
        console.log(parseInt('3.14')); // 3 取整
        console.log(parseInt('3.65')); // 3 取整
        console.log(parseInt('120px')); // 120 会去掉这个px单位
        console.log(parseInt('rem120px')); // NaN 


        // 2. parseFloat(变量) 可以把 字符型的转换为数字型 得到的是小数 浮点数
        console.log(parseFloat('3.65')); // 3.65
        console.log(parseFloat('120px')); // 120 会去掉这个px单位
        console.log(parseFloat('rem120px')); // NaN 


        // 3.利用Number(变量)
        var str = '123';
        console.log(Number(str));
        console.log(Number('123'));

        
        // 4. 利用了算数运算 - * / 隐式转换
        console.log('12' - 0); //12
        console.log('123' - '120'); //3
        console.log('12' * 1); // 12

    </script>

计算年龄案例

伪代码(步骤):

​ // 弹出一个输入框(pompt) 让用户输入出生年份(用户输入)

​ // 把用户输入的值用变量保存起来 然后用今年的年份减去变量值 结果就是现在的年龄 (程序内部处理)

​ // 弹出警示框(alert) 把计算的结果输出(输入结果)

var year = prompt('哪年出生?');
        var age = 2022 - year; //year 取过来的是字符串型 但是这里用的减法 有隐式转换 如果是加 先转换数据类型
        alert('今年' + age + '岁');

简单加法器制作

伪代码:

​ // 弹出一个输入框 提供用户输入第一个值 保存起来

​ // 再弹出一个输入框 提供用户输入第一个值 保存起来

​ // 再把这两个值相加 并将结果赋给新变量 (注意数据类型转换)

​ // 弹出警示框(alert) 把计算的结果输入(输出结果)

var num1 = prompt('请输入第一个值:');
        var num2 = prompt('请输入第二个值:');
        var result = parseFloat(num1) + parseFloat(num2);
        alert('结果是:' + result);

转换为布尔型

<script>
        // 代表空、否定的值会被转换为false 如 0 NaN null undefined 
        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('-----------------------');
        // 其余值都会呗转换为true
        console.log(Boolean('123'));
        console.log(Boolean('你好吗'));
        console.log(Boolean('我很好'));
    </script>

编译语言和解释语言的区别

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gIhwfThW-1662275838756)(assets/1660546462116.png)]

拓展阅读标识符关键字 保留字

* 标识符

​ 标识符就是指开发人员为变量、属性、函数、参数取得名字。

​ 标识符不能是关键字或保留字。

* 关键字

​ 关键字是指js本身已经使用了的字 不能再用他们充当变量名 方法名。

​ 包括:break、case、catch、continue、defaul、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with等。

* 保留字

​ 保留字实际上就是预留的“关键字” 意思是现在虽然还不是关键字 但是未来可能会成为关键字 统一不能使用他们当变量名或方法名。

​ 包括:boolea、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、throw、transient、

​ volatile等。

课后作业

// 进入浏览器 依次弹出输入框 输入年龄 姓名 性别 并打印

<script>
        var name = prompt('请输入你的名字:');
        var age = prompt('请输入你的年龄:');
        var sex = prompt('请输入你的性别:');
        alert('名字:' + name + '\n' + '年龄:' + age + '\n' + '性别:' + sex);
    </script>

4.操作符

运算符导读

**学完要掌握的知识点

- 能够使用常用运算符

- 能够说出前置递增和后置递增的区别

- 能够说出运算符的优先级

***本章学习的知识点

* 运算符

* 算数运算符

* 递增和递减运算符

* 比较运算符

* 逻辑运算符

* 赋值运算符

* 运算符优先级

算数运算符

<script>
        console.log(1 + 1); //2
        console.log(1 - 1); //0
        console.log(1 * 1); //1
        console.log(1 / 1); //1


        // 1.% 取余 (取模)
        console.log(4 % 3); //1
        console.log(5 % 3); //1
        console.log(3 % 6); //0


        // 2.浮点数 算数运算里面会有问题
        console.log(0.1 + 0.2); //0.30000000000000004
        console.log(0.05 * 100); //7.000000000000001


        // 3.我们不能直接拿着浮点数来进行相比较 是否相等
        var num = 0.1 + 0.2;
        console.log(num == 0.3);//false


        //% 取余运算符主要用于判断一个数是否能够被整除
        //算数运算符的优先级 
    </script>

表达式和返回值

<script>
        // 是由数字、运算符、变量等组成的式子 我们成为表达式 1+1
        console.log(1 + 1); // 2就是返回值
        // 普通数学是式子等于结果
        // 1 + 1 = 2
        // 在我们程序里面 2 = 1 + 1 把我们的右边表达式计算完毕把返回值赋给左边
        var num = 1 + 1;
    </script>

前置自增运算符

<script>
        // <!-- 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);

        // 自增自减只能搭配变量使用
    </script>

后置自增运算符

<script>
        var num = 10;
        num++; //num = num + 1   ++num
        console.log(num);
        // 1.前置自增和后置自增如果单独使用 效果是一样的
        // 2.后置自增 口诀:先返回值 后自加1
        var age = 10;
        console.log(age++ + 10);
        console.log(age);
    </script>

递增运算符练习

<script>
        var a = 10;
        ++a; // ++a = 11   a = 11
        var b = ++a + 2; // a = 12  ++a = 12
        console.log(b); //14

        var c = 10;
        c++; //c++ = 11  c = 11
        var d = c++ + 2; //c++ = 11  c = 12
        console.log(d); // 13

        var e = 10;
        var f = e++ + ++e; //1.e++ = 10  e = 11  2.e = 12  ++e = 12
        console.log(f); //22
        // 后置自增 先表达式返回原值 后面变量再自加1
    </script>

前置递增和后置递增小结

<!-* 前置递增和后置递增运算符可以简化代码的编写 让变量的值+1 比以前写法更简单

* 单独使用时 运行结果相同

* 与其他代码联用时 执行结果会不同

* 后置:先原值运算 后自加(先人后己)

* 前置: 先自加 后运算(先己后人)

* 开发时 大多使用后置递增/减 并且代码独占一行 例如 num++ 或num–

比较运算符

<script>
        console.log(3 >= 5);//false
        console.log(3 <= 5);//true
        // 1.我们程序里面的等于符号 是 == 默认转换数据类型 会把字符串的数据类型转换为数字型 只要求值相等就可以
        console.log(3 == 5);//false
        console.log('风向' == "张学友");//false
        console.log(18 == '18');//true
        console.log(3 != 5);//true  (!= 不等于)
        // 2.我们程序里面有全等 一模一样 要求两侧的值 还有 数据类型完全一致才可以 true
        console.log(3 === 5);//false
        console.log('5' == 5);//false

        // 等号小结
        // * = :赋值  把右边给左边
        // * ==:判断 判断两边值是否相等(注意此时有隐式转换)
        // * ===:全等 判断两边的值和数据类型是否完全相同
    </script>

逻辑运算符

<script>
        //1.逻辑与 && (and):两侧都为true 结果才是true 只要有一侧为false 结果就位false
        console.log(3 > 5 && 3 > 2);//false
        console.log(3 < 5 && 3 > 2);//true
        //2.逻辑或 || (or):两侧都为false 结果才是假false 只要有一侧为true 结果就是true
        console.log(3 > 5 || 3 > 2);//true
        console.log(3 > 5 || 3 < 2);//false
        // 3.逻辑非 !(not)
        console.log(!true); //false
    </script>

逻辑运算练习

<script>
        var num = 7;
        var str = '风中传来苦咸~';
        console.log(num > 5 && str.length >= num);//true

        console.log(num < 5 && str.length >= num);//false

        console.log(!(num < 10));//false

        console.log(!(num < 10 || str.length == num));//false


    </script>

逻辑中断值逻辑与 和 逻辑或

<script>
        // 逻辑中断(短路运算)的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时 就不再继续运算右边的值

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


    </script>

赋值运算符

<script>
        var num = 10;
        // num = num + 1;  num++
        // num = num + 2; //num +=2;
        // 每次加个2再赋值  自增2
        //num += 2;
        // 每次加个5再赋值  自增5
        num += 5;
        console.log(num);
        // 每次乘以3 再赋值 自乘3
        var age = 2;
        age *= 3;
        console.log(age);
    </script>

运算符优先级

​ <!-- 1. 小括号 ()

​ 2.一元运算符 ++ – !

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

​ 4.关系运算符 > >= < <=

​ 5.相等运算符 == != === !==

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

​ 7.赋值运算符 =

​ 8.逗号运算符 , -->

<注意:

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

​ 逻辑与比逻辑或优先级高 -->

        // 练习
        var a = 3 > 5 && 2 < 7 && 3 == 4;
        console.log(a);

        var b = 3 <= 4 || 3 > 1 || 3 != 2;
        console.log(b);

        var c = 2 === "2";
        console.log(c);

        var d = !c || b && a;
        console.log(d);

5.流程控制及案例

流程控制导读

**学完要掌握的知识点

- 能够使用if分支语句

- 能够使用switch 分支语句

- 能够使用三元表达式

**本章学习内容

* 流程控制

* 顺序流程控制

* 分支流程控制if语句

* 三元表达式

* 分支流程控制switch 语句

流程控制

< * 在一个程序执行的过程中 各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能 -->

顺序流程控制

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

if分支语句

// 分支结构:由上到下执行代码的过程中 根据不同条件 执行不同的路径代码(执行代码多选一的过程) 从而得到不同的结果

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

​ // * if语句

​ // * switch语句

​ // 1.if 的语法结构 如果 if

​ // if(条件表达式) {

​ //执行语句

​ // }

​ // 2.执行思路 如果 if 里面的条件表达式结果为真 true 则执行大括号里面的 执行语句

​ // 如果 if 条件表达式结果为假 则不执行大括号里面的语句 则执行if 语句后面的代码

​ // 3.代码体验

var age = prompt('请输入你的年龄:');
        if (age >= 18) {
            alert('你成年了');
        }

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

案例-网吧

// 弹出prompt 输入框 用户输入年龄 程序把这个值取过来保存到变量中

// 使用if 语句来判断年龄 如果年龄大于18 就执行if 大括号里面的输出语句

var age = prompt('请输入你的年龄:');
        if (age >= 18) {
            alert('先生请进~');
        }

if-else 双分支语句

        // 1.语法结构 if 如果 else 否则
        // if (条件表达式) {
        //     执行语句1
        // } else {
        //     执行语句2
        // }
        // 2.执行思路 如果表达式结果为真 那么执行语句1 否则 执行语句2
        // 3.代码验证
        var age = ('请问你的年龄?');
        if (age >= 18) {
            alert('先生请进~');
        } else {
            alert('滚,回家写作业去!')
        }
        // 5.if 里面的语句1 和 else 里面的语句2 最终只能有一个语句执行 2选1
        // 6.else 后面直接跟大括号

案例-判断闰年

// 算法:能够被4整除且不能被100整除的为瑞年(如2004年就是闰年 1901年不是闰年)或者能被400整除的也是闰年

// 弹出prompt 输入框 让用户输入年份 把这个值取过来保存到变量中

// 使用if 语句来判断是否是闰年 如果是闰年 就执行if 大括号里面的输出语句 否则就执行else里面的输出语句

// 一定要注意里面的且 && 还有或者 || 的写法 同时注意判读能整除的方法是取余为0

var year = prompt('请输入年份:');
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            alert('你输入的年份是闰年');
        } else {
            alert('你输入的年份是平年');
        }

案例-张学友

var yourname = prompt('请输入你的名字');
        if (yourname == '陈冠希') {
            alert('给你五块钱');
        } else {
            alert('走开');
        }

if-else 多分枝语句

// 1.多分枝语句 就是利用多个条件来选择不同的语句执行 得到不同的结果 多选一 的过程
        // 2.if  else if 语句就是多分枝语句
        // 3.语法规范
        if (条件表达式1) {
            //语句1
        } else if (条件表达式2) {
            //语句2
        } else if (条件表达式3) {
            //语句3
        } else {
            //最后的语句;
        }
        // 4.执行思路
        // 如果条件表达式1 满足就执行 语句1 执行完毕后 退出整个if 分支语句
        //如果条件表达式1 不满足 则判断条件表达式2 满足的话 执行语句2 以此类推
        // 如果上面的所有条件表达式都不成立 则执行else 里面的语句
        // 5.注意点
        // (1)多分枝语句还是多选一 最后只能有一个语句执行
        // (2)else if 里面的条件理论上是可以任意多个的
        // (3)else if 中间有个空格了

案例-成绩

var mark = prompt('请输入你的成绩:');
        if (mark >= 90) {
            alert('包包,真棒!');
        } else if (mark >= 70) {
            alert('包包,你已经很出色了!');
        } else if (mark >= 60) {
            alert('孩子,,你很危险!');
        } else {
            alert('熊孩子,我不想跟你说话,我只想用皮鞭跟你说话!');
        }

三元表达式

// 1.有三元运算符组成的式子称为三元表达式
        // 2.++num   3+5   ? :
        // 3.语法结构
        // 条件表达式 ? 表达式1 : 表达式2
        // 4.执行思路 
        // 如果条件表达式结果为真 则 返回 表达式1 的值 如果条件表示结果为假 则返回 表达式2 的值
        // 5.代码体验
        var num = 10;
        var result = num > 2 ? 'yes' : 'no'; //我们知道表达式是有返回值的
        console.log(result);
        // if (num > 5) {
        //     result = '是的';
        // } else {
        //     result = '不是的';
        // }
        // console.log(result);

数字补零案例

// 用户输入0 ~ 59之间的一个数字

// 如果数字小于10 则在这个数字前面补0 (加0拼接) 否则 不做操作

// 用一个变量接收这个值 然后输出

var time = prompt('请输入一个数字');
        //三元表达式  表达式 ? 表达式1 :表达式2;
        var result = time < 10 ? '0' + time : time; // 把返回值赋值给一个变量
        alert(result);

switch语句

 // 1.switch 语句也是多分枝语句 也可以实现多选一 他是基于不同的条件来执行不同的代码 当然要针对变量设置一系列的特定值的选项时 就可以使用switch
        // 2.语法结构 switch 转换 开关   case 小例子作者选项的意思
        // switch (表达式) {
        //     case value1:
        //         执行语句1;
        //         break;
        //     case value2:
        //         执行语句2;
        //         break;
        //         可以写很多个
        //     default:
        //         执行最后的语句;
        // }
        // 3.执行思路 利用我们的表达式的值 和case 后面的选性值相匹配 如果匹配上 就执行case里面的语句 如果都没有匹配上 那么就执行default 里面的语句
        // 4.代码验证
        switch (1) {
            case 1:
                console.log('我是1');
                break;
            case 2:
                console.log('我是2');
                break;
            default:
                console.log('没有结果');
        }

switch注意事项

// 1.我们开发里面 表达式我们经常写成变量

// 2.我们 num的值 和case里面的值 相匹配的时候是 全等 必须是值和数据类型一致才可以 num === 1

// 3.break 如果当前的case里面没有break 则不会退出switch 是继续执行下一个case 直到遇见break停止

var num = 1;
        switch (num) {
            case 1:
                console.log(1);
                break;

            case 2:
                console.log(2);
                break;

            case 3:
                console.log(3);
                break;
        }

案例-查询水果

// 弹出prompt 输入框 让用户输入水果名称 把这个值取过来保存到变量中
        // 将这个变量作为switch 括号里面的表达式
        // case 后面的值写几个不同的水果名称 注意一定要加引号 因为必须是全等匹配
        // 弹出不同的价格即可 同样注意每个case 之后加上break 以便退出 switch 语句
        // 将default 设置为没没有此水果
        var fruit = prompt('请输入查询水果名称:');
        switch (fruit) {
            case '苹果':
                alert('苹果35/斤');
                break;
            case '榴莲':
                alert('榴莲3.5/斤');
                break;
            default:
                alert('没有此水果');
        }

案例-问候机器人

// 判断时间阶段
        // 用户输入12点之前 弹出中午好 18点之前 弹出傍晚好 23点之前 弹出深夜好
        var time = prompt('主人,请输入时间:');
        if (time <= 12) {
            alert('主人,中午好!');
        } else if (time <= 18) {
            alert('主人,傍晚好!');
        } else if (time <= 23) {
            alert('主人,深夜好!');
        } else if (time == 24) {
            alert('主人,该睡了!');
        } else {
            alert('主人,请输入正确时间!');
        }

案例-比较最大值

// 比较两个最大值 (用户以此输入2个值 最后弹出最大的那个值)
        var one = prompt('请输入第一个值');
        var two = prompt('请输入第二个值');
        if (one > two) {
            alert(one + '比较大');
        } else {
            alert(two + '比较大');
        }

案例-奇偶判断

// 用户输入一个数 来判断是奇数还是偶数
        var num = prompt('请输入一个数字');
        if (num % 2 != 0) {
            alert('奇数');
        } else {
            alert('偶数');
        }

案例-判断周几

// 根据用户输入的值(数字1~7) 返回星期几
        var num = prompt('请输入1~7');
        switch (num) {
            case '1':
                alert('今天周一');
                break;
            case '2':
                alert('今天周二');
                break;
            case '3':
                alert('今天周三');
                break;
            case '4':
                alert('今天周四');
                break;
            case '5':
                alert('今天周五');
                break;
            case '6':
                alert('今天周六');
                break;
            case '7':
                alert('今天周日');
                break;
            // default:
            //     alert('熊孩子,乱输什么玩意');
        }

案例-班长口袋有多少钱

// 接收班长口袋里的钱数 若大于等于2000 请大家吃西餐 若小于2000 大于等于1500 请大家吃快餐 
        // 若小鱼1500 大于1000 请大家喝饮料 若小于1000 大于等于500 请大家吃棒棒糖 否则提醒班长 下次把钱带够
        var money = prompt('班长你带了多少钱?');
        if (money > 2000) {
            alert('带大家去吃海底捞吧!');
        } else if (money >= 1500) {
            alert('那请大家吃快餐吧!');
        } else if (money >= 1000) {
            alert('只能请大家喝饮料了!');
        } else if (money >= 500) {
            alert('那棒棒糖吧!');
        } else {
            alert('那就请大家吃屁吧哈哈哈哈哈!!!!!!!!!');
        }

6.循环及案例

循环导读

**学完要掌握的知识点

- 能够说出循环的目的

- 能够说出for循环的执行过程

- 能够使用断点调试来观察代码的执行过程

- 能够使用for循环完成累加求和等案例

- 能够使用双重for循环完成乘法表案例

- 能够说出break 和 continue 的区别

**要学的知识点

* 循环

* for循环

* 双重for循环

* while循环

* do while循环

* continue break

循环的目的

// 在实际问题中 有许多具有规律性的重复操作 因此程序中要完成这类操作就需要重复执行某些语句
        //循环的目的 可以重复执行某些代码
        console.log('媳妇我对了');
        console.log('媳妇我对了');
        console.log('媳妇我对了');
        console.log('--------------------');
        for (var i = 1; i <= 100; i++) {
            console.log('媳妇你错了');
        }

for循环语法结构

// 1.for 重复执行某些代码 通常跟计数有关系
        // 2.for 语法结构
        // for (初始化变量; 条件表达式; 操作表达式){
        //循环体
        // }
        // 3.初始化变量 就是用var 声明一个普通变量 通常用于作为计数器使用
        // 4.条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
        // 5.操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新(递增或者递减)
        // 6.代码体验 我们重复打印100句 你好
        for (var i = 1; i <= 100; i++) {
            console.log('你好代码');
        }

for循环的执行过程

 // for 循环的执行过程
        for (var i = 1; i <= 100; i++) {
            console.log('hellow word!');
        }
        // 1.首先执行里面的计数器变量 var i = 1 .但是这句话在for 里面只执行一次 index
        // 2.去i <= 100 来判断是否满足条件 如果满足条件 就去执行 循环体 不满足条件退出循环
        // 3.最后去执行 i++ i++是单独写的代码 递增 第一轮结束
        // 4.接着去执行i <= 100 如果满足条件 就去执行 循环体 不满足条件退出循环 第二轮

断点调试

for (var i = 1; i <= 100; i++) {
            console.log('hellow word!');
        }
        // 断点调试:
        // * 断点调试是指自己在程序的某一行设置一个断点 调试时 程序运行到这一行就会卡住 然后你可以一步步往下调试 调试过程可以看到各个变量的值 出错的话 调试到出错的代码行即显示错误 停下
        // * 断点调试可以帮我们观察程序运行的过程
        // 浏览器中按f12-->sources-->找到需要调试的文件-->在程序的某一行设置断点
        // Watch:监视 通过watch可以监视变量的值得变化 非常的常用
        // f11:程序单步执行 让程序一行一行的执行 这个时候 观察watch中变量的值得变化
        // 代码调试的能力非常重要 只有学会了代码调试 才能学会自己解决bug的能力 初学者不要觉得调试代码麻烦就不去调试 知识点花点功夫肯定学的会 但是代码调试这个东西 自己不去练 永远学不会

for循环重复执行相同的代码

for (var i = 1; i <= 10; i++) {
            console.log('卡塞痛');
        }
        // 我们可以让用户控制输出的次数
        var num = prompt('请您输入次数');
        for (i = 1; i <= num; i++) {
            console.log('哈塞给');
        }

for循环重复执行不同的代码

// for 循环可以重复执行不同的代码 因为我们有计数器变量 i 的存在 i每次循环值都会变
        // 我们想输入一个人的一生1~100岁
        // for (i = 1; i <= 100; i++) {
        //     console.log('他今年' + i + '岁了');
        // }
        for (i = 1; i <= 100; i++) {
            if (i == 1) {
                console.log('这个人一岁了,出生了');
            } else if (i == 100) {
                console.log('这个人一百岁了,死了');
            } else {
                console.log('这个人' + i + '岁了');
            }
        }  

for循环重复某些操作

// for 循环重复执行某些操作 比如我们做了一百次加法运算
        // 求1~100 之间的整数累加和
        // 需要循环100次 我们需要一个计时器 i
        // 我们需要一个存储结果的变量 sum 但是初始值一定是0
        // 核心算法:1+2+3+4+5+...   sum = sum + i;
        var sum = 0; // 求和 的变量
        for (var i = 1; i <= 100; i++) {
            // sum = sum + i;
            sum += i;
        }
        console.log(sum);

for循环案例

// 1.求1~100之间所有数和的平均数 需要一个和的变量 sum 还需要一个平均值 average 变量
        var sum = 0;
        var average = 0;
        for (var i = 1; i <= 100; i++) {
            sum = sum + i;
        }
        average = sum / 100;
        console.log(average);
        // 2.求1~100之间奇数和偶数的和 我们需要一个偶数的和变量 even 还有奇数和变量 odd
        var even = 0;
        var odd = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 2 == 0) {
                even = even + i;
            } else {
                odd = odd + i;
            }
        }
        console.log('偶数和为' + even);
        console.log('奇数和为' + odd);
        // 3.求1~100之间能被三整除的数的和
        var result = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 3 == 0) {
                result = result + i;
            }
        }
        console.log(result);

案例-学生成绩

// 弹出输入框输入总的班级人数(num)
        // 依次输入学生的成绩(保存起来score) 此时我们需要用到for循环 弹出的次数跟班级总人数有关系 条件表达式i <= num
        // 进行业务处理:计算成绩 先求总成绩 (sum) 之后求出平均成绩(average)
        // 弹出结果
        var sum = 0;
        var average = 0;
        var num = prompt('请输入班级总人数:');
        for (var i = 1; i <= num; i++) {
            var score = prompt('请输入第' + i + '个学生成绩');
            //因为从prompt取过来的数据是 字符串型需要转换为数字型
            sum = sum + parseFloat(score);
        }
        average = sum / num;

        alert('学生总成绩为' + sum + '分');
        alert('学生平均成绩为' + average + '分');

一行打印多个小星星

 // 一行打印多个小星星
        // console.log('✈✈✈✈✈✈');
        // for (var i = 1; i <= 5; i++) {
        //     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 + '✈';
        }
        console.log(str);

双重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 + '次');
            }
        }

打印五行五列星星

// 打印五行五列小飞机
        var str = '';
        for (var i = 1; i <= 5; i++) {
            for (j = 1; j <= 5; j++) {
                str = str + '✈';
            }
            // 如果一行打印完毕五个小飞机 就要另起一行 加\n
            str = str + '\n';
        }
        console.log(str);

打印n行n列小飞机

var rows = prompt('请输入打印行数:');
        var cols = prompt('请输入打印列数:');
        var str = '';
        for (i = 1; i <= rows; i++) {
            for (j = 1; j <= cols; j++) {
                str = str + '✈';
            }
            str = str + '\n';
        }
        console.log(str);

案例-打印倒三角形

var str = '';
        for (var i = 1; i <= 10; i++) {  //外层循环控制行数
            for (var j = i; j <= 10; j++) {  // 里层循环打印的个数不一样 j = i
                str = str + '✈';
            }
            str = str + '\n';
        }
        console.log(str);

案例-打印正三角形

var str = '';
        for (var i = 1; i <= 10; i++) {
            for (var j = 1; j <= i; j++) {
                str = str + '✈';
            }
            str = str + '\n';
        }
        console.log(str);

案例-九九乘法表

// 九九乘法表
        // 一共有九行 但是每行的个数不一样 因此需要用到双重 for 循环
        // 外层的 for 循环控制行数 i 循环九次 可以打印九行
        // 内层的 for 循环控制每行公式 j
        // 核心算法: 每一行 公式的个数正好和行数一致 j <= i;
        // 每行打印完毕 都需要重新换一行
        var str = '';
        for (var i = 1; i <= 9; i++) {  //外层循环控制的行数
            for (var j = 1; j <= i; j++) {  //里层循环控制每一行的个数 j <= i
                //1 × 1 = 2;
                // str = str + '✈';
                str += j + '×' + i + '=' + i * j + '\t';
            }
            str = str + '\n';
        }
        console.log(str);

for循环小结

< * for 循环可以重复执行某些相同代码

* for 循环可以重复执行些许不同的代码 因为我们有计数器

* for 循环可以重复执行某些操作 比如算数运算符加法操作

* 随着需求增加 双重for循环可以做更多 更好看的效果

* 双重for循环 外层循环一次 内层for 循环全部执行

* for 循环是循环条件和数字直接相关的循环

* 分析要比写代码更重要

* 一些核心算法想不到 但是要学会 分析他执行过程

* 举一反三 自己经常总结 做一些相似的案例 -->

while循环

// 1.while 循环语法结构 while 当....的时候
        // while (条件表达式){
        //    // 循环体
        // }
        // 2.执行思路 当条件表达式结果为true 则执行循环体 否则 退出循环 
        // 3.代码验证
        var num = 1;
        while (num <= 100) {
            console.log('hao');
            num++;
        }
        // 4.里面应该也有计数器 初始化变量
        // 5.里面应该也有操作表达式 完成计数器的更新 防止死循环

案例-while循环

// while 循环案莉
        // 1.打印人的一生 一到一百岁
        var i = 1;
        while (i <= 100) {
            console.log('这个人今年' + i + '岁了');
            i++;
        }
        // 2.计算1~100之间所有整数的和
        var sum = 0;
        var j = 1;
        while (j <= 100) {
            sum = sum + j;
            j++;
        }
        console.log(sum);
        // 3.弹出一个提示框 你爱我吗?如果输入我爱你 就结束 否则 一直问
        var message = prompt('你爱我吗?');
        while (message !== '我爱你') {
            message = prompt('你爱我不爱我?');
        }
        alert('我也爱你啊 笔芯');

do while 循环

// 1.do while 循环 语法结构
        // do {
        //     //循环体 
        // } while (条件表达式)
        // 2. 执行思路 跟while 不同的地方在于 do while 先执行一次循环体 再判断条件 如果条件表达式结果为真 则继续执行循环体 否则退出循环
        // 3.代码验证
        var i = 1;
        do {
            console.log('how are you ?');
            i++;
        } while (i <= 100)
        // 4.我们的的do while至少执行一次

案例-do while循环

// 1.打印一个人的一生
        var i = 1;
        do {
            console.log('how are you?');
            i++;
        } while (i <= 100)
        //2.计算1~100之间整数的和
        var sum = 0;
        var j = 1;
        do {
            sum = sum + j;
            j++;
        } while (j <= 100);
        console.log(sum);
        // 3.弹出一个框问 你爱我吗?如果不爱 一直弹 否则结束
        do {
            message = prompt('你爱我吗?');
        } while (message !== '我爱你');
        alert('我也爱你');

循环小结

< * js中循环有for、双for、while、do while -->

continue关键字

// continue 关键字 退出本次循环(当前次的循环)  继续执行剩余次数循环
        for (var i = 1; i <= 5; i++) {
            if (i == 3) {
                continue;// 只要遇见 continue 就退出本次循环 直接跳到i++
            }
            console.log('我正在吃第' + i + '个包子');
        }
        // 1.求1~100之间 除了能被7整除之外的整数和
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 7 == 0) {
                continue;
            }
            sum = sum + i;
        }
        console.log(sum);

break关键字

//break 退出整个循环
        for (var i = 1; i <= 5; i++) {
            if (i == 3) {
                break;
            }
            console.log('第' + i + '个包子');
        }

命名规范及语法格式

< * 变量 函数的命名必须要有意义 -->

< * 变量的名称一般用名词 -->

< * 函数的名称一般用动词 -->

< 注意操作符和注释等空格使用 -->

循环作业

求一到一百所有数的和和平均数

var sum = 0;
        var average = 0;
        for (var i = 1; i <= 100; i++) {
            sum = sum + i;
        }
        average = sum / 100;
        console.log('总和为:' + sum);
        console.log('平均数为:' + average);

求一到一百所有偶数的和

var sum = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 2 == 0) {
                sum = sum + i;
            }
        }
        console.log(sum);

求一百以内七的倍数的总和

var sum = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 7 == 0) {
                sum = sum + i;
            }
        }
        console.log(sum);

使用for循环打印三角形

var str = ''
        for (var i = 1; i <= 5; i++) {
            for (var j = 1; j <= i; j++) {
                str = str + '♠';
            }
            str = str + '\n';
        }
        console.log(str);

for循环完成99乘法表

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

简易atm

var money = 100;
        while (true) {
            var items = prompt('欢迎光临风向银行~' + '\n' + '请输入序列号执行以下服务~' + '\n' + '1.存钱' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出银行');
            switch (parseFloat(items)) {
                case 1:
                    var cun = prompt('请输入存款金额~');
                    money = money + parseFloat(cun);
                    alert('账户余额' + money + '元');
                    break;
                case 2:
                    var qu = prompt('请输入取款金额');
                    if (parseFloat(qu) > money) {
                        alert('抱歉穷光蛋,你的余额不足~');
                    } else {
                        money -= parseFloat(qu);
                        alert('账户余额' + money + '元');
                    }
                    break;
                case 3:
                    if (money > 50000) {
                        alert('账户余额' + money + '元' + '富婆抱抱我');
                    } else {
                        alert('账户余额' + money + '元' + '没多少马内了哦');
                    }
                    break;
                case 4:
                    alert('先生慢走~');
                    break;
                default:
                    alert('把眼睛睁开~');
                    break;
            }
            // 用户选择 4 跳出循环
            if (parseFloat(items) == 4) {
                break;
            }
        }

js(上)结束…

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到