笔触狂放9

这个屌丝很懒，什么也没留下！

热门标签

二：第二阶段--JavaScript基础（1）

作者：笔触狂放9 | 2024-04-06 13:37:48

踩

1: javascript基础语法

2:javascript高级（webapi /dom bom)

3:javascript框架（jquery)

4:数据可视化

一：计算机编程基础

1.1:目标

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

1.2: 目录

编程语言
计算机基础

1.3: 编程语言

1:编程

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

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

从事编程的人员，就是程序员。但是一般程序员都比较幽默，为了形容自己的辛苦工作，也成为“码农”，或者“程序猿”/“程序媛”

注意：上面所定义的计算机指的是任何能够执行代码的设备，可能是智能手机、ATM机、黑莓PI、服务器等等。

2:计算机语言

计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。计算机语言的种类非常的多，总的来说可以分成机器语言，汇编语言和高级语言三大类。实际上计算机最终所执行的都是机器语言，它是由“0”和“1”组成的二进制数，二进制是计算机语言的基础。

0=00000000 1=00000001 2=00000010 3=00000011 4=00000100

5=00000101 6=00000110 7=00000111 8=00001000 9=00001001

10=00001010

3:编程语言

可以通过类似于人类语言的”语言”来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言（ProgrammingLanguage）。编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守。如今通用的编程语言有两种形式：汇编语言和高级语言。

汇编语言和机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆。
高级语言主要是相对于低级语言而言，它并不是特指某一种具体的语言，而是包括很多编程语言，常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等。

C语言：puts("你好");

PHP：echo "你好";

Java：System.out.println("你好");

JavaScript：alert("你好"）;


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-编程语言</title>
 
    <script>
        // alter是弹出窗口
        alert("你好")
    </script>
</head>
 
<body>
 
</body>
 
</html>

4:翻译器

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

5:编程语言和标记语言区别

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

6:总结

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

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

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

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

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

1.4:计算机基础

1:计算机基础

2: 数据存储

3:数据存储单位

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

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

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

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

bit < byte < kb < GB < TB<.....

位(bit)：1bit 可以保存一个0 或者1（最小的存储单位）

字节(Byte)：1B= 8b

千字节(KB)：1KB= 1024B

兆字节(MB)：1MB= 1024KB

吉字节(GB): 1GB = 1024MB

太字节(TB): 1TB = 1024GB

......

4:程序运行

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

2.CPU执行内存中的代码

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

二：处识JavaScript

2.1:目标

能够说出JavaScript 是什么

能够知道JavaScript的发展历史

能够说出浏览器执行JavsScript的原理

能够说出JavaScript由哪三部分组成

能够写出JavaScript三个输入输出语句

2.2: 目录

初识JavaScript

JavaScript注释

JavaScript输入输出语句

2.3:处识JavaScript

1: javacsript历史

布兰登·艾奇（Brendan Eich，1961年～）。
神奇的大哥用10天完成JavaScript 设计。
最初命名为LiveScript，后来在与Sun合作之后将其改名为JavaScript。

2: javascript是什么？

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

为了阅读方便，我们后面把JavaScript 简称为 JS。

3:javascript的作用

表单动态验证(密码强度检测)：比如：表单中输入账户格式不对，会提示，一直输入正确后才能注册，并发送到服务器。 (JS 产生最初的目的)
网页特效：
服务端开发（node.js)
桌面程序（electron)
app(cordova)
控制硬件-物联网（ruff）
游戏开发（cocos2d-js)

4: HTML / CSS / JS的关系

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

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

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

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

5: 浏览器执行JS简介

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

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

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

6:js的组成

6.1:ECMAScript

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

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

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

6.2:DOM-----文档对象模型

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

6.3:BOM-浏览器对象模型

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

7:js初体验

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


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <met a name="viewport" content="width=device-width, initial-scale=1.0">
        <title>02-js初体验</title>
        <style></style>
        <!-- 2:内嵌式的js -->
        <script>
            // alert('沙漠骆驼')
        </script>
 
        <!-- 3:外部文件引入:script双标签中间不能输入任何呃逆人 -->
        <script src="my.js"></script>
</head>
 
<body>
    <!-- 1:行内式js,直接写到元素的内部 ；alert是弹出窗口-->
    <!-- <input type="button" value="唐伯虎" onclick="alert('秋香姐')"> -->
</body>
 
</html>

1: 行内式js

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

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

2:内嵌js


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

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

3:外部js文件

要创建.js文件，然后html引入

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

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

2.4:javascript注释

单行注释： ctrl + /

多行注释：shift + alt + a (vscode里面可以改）

1 单行注释

为了提高代码的可读性，JS与CSS一样，也提供了注释功能。JS中的注释主要有两种，分别是单行注释和多行注释。单行注释的注释方式如下：

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

//用来注释单行文字（快捷键 ctrl + /）

2 多行注释

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

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

/* */用来注释多行文字（默认快捷键 alt + shift+ a）

快捷键修改为： ctrl + shift + /

vscode -- > 首选项按钮 -- > 键盘快捷方式 -- > 查找原来的快捷键 -- > 修改为新的快捷键 -- > 回车确认

2.5: javascript输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：
注意：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1:这是个输入框
        prompt('请输入您的年龄')
 
        // 2:alter弹出警示框 输出的 展示给用户的
        alert('计算的结果是')
 
        // 3:console 控制台输出 给程序员测试用的
        console.log('我是程序员能看到的')
    </script>
</head>
 
<body>
 
</body>
 
</html>

三：变量

3.1:目标

能够说出变量的主要作用
能够写出变量的初始化
能够说出变量的命名规范
能够画出变量是如何在内存中存储的
能够写出交换变量案例的

3.2:目录

变量概述
变量的使用
变量语法扩展
变量命名规范
交换变量案例

3.3: 变量概述

1:什么是变量？

变量相当于一个房间，装数据的，就好比人，房间名就是变量名。

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

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

2:变量在内存中的存储

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

类似我们酒店的房间，一个房间就可以看做是一个变量。

3.3:变量的使用

变量在使用时分为两步：1. 声明变量2. 赋值

1:声明变量

//声明变量

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

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

2:赋值

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

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

3:变量的初始化

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

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


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量</title>
 
    <script>
        // 1；声明一个age的变量
        var age;
        // 2:赋值  把值存入这个变量中
        age = 18;
        // 3:输出结果
        console.log(age);
 
        // 4:变量的初始化
        var myname = 'pink老师';
        console.log(myname);
 
 
    </script>
</head>
 
<body>
 
</body>
 
</html>

4: 案例-变量的使用

有个叫卡卡西的人在旅店登记的时候前台让他填一张表，这张表里的内容要存到电脑上，表中的内容有：姓名、年龄、邮箱、家庭住址和工资，存储之后需要把这些信息显示出来，所显示的内容如下：我叫旗木卡卡西，我住在火影村，我今年30岁了，我的邮箱是kakaxi@itcast.cn，我的工资2000


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
 
        var myname = '棋木卡卡西';
        var address = '火影村';
        var age = 30;
        var email = '123qq.com';
        var salary = 2000;
        console.log(myname);
        console.log(address);
        console.log(age);
        console.log(email);
        console.log(salary);
 
    </script>
</head>
 
<body>
 
</body>
 
</html>

1.弹出一个输入框，提示用户输入姓名。

2.弹出一个对话框，输出用户刚才输入的姓名。


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1:弹出用户输入姓名  
        prompt('请用户输入姓名')
 
        // 2:把用户输入的名字存储到一个myname的变量里面
        // 步骤1，2合并
        var myname = prompt('请输入您的名字')
 
        // 3:输出这个用户的名字
        alert(myname);
 
 
    </script>
</head>
 
<body>
 
</body>
 
</html>

3.4: 变量的语法扩展

1:更新变量

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

var age = 18;

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

2:声明多个变量

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

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

3:声明变量的特殊情况

js从上到下依此解析代码；


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1;变量更改
        var myname = 'pinkl老师';
        console.log(myname);
        myname = '胡歌';
        console.log(myname);
 
        // 2:声明多个变量
 
        // var myname = '赵丽颖';
        // var age = 36;
        // var address = '上海';
 
        var myname = '赵丽颖',
            age = 36,
            address = '上海';
 
 
        // 3:声明变量的特殊情况
        // 3.1:只声明不赋值  结果是？  程序也不知道里面存的是啥  所以结果是 undefined 未定义的
        var sex;
        console.log(sex); //undefined
 
        // 3.2:不声明  不赋值  直接使用某个变量会报错
        console.log(tex);
        // 3.3:不声明直接复制使用
        qq = 110;
        console.log(qq);
 
    </script>
</head>
 
<body>
 
</body>
 
</html>

3.5: 变量命名规范

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

严格区分大小写。var app; 和var App; 是两个变量

不能以数字开头。18age是错误的

不能是关键字、保留字。例如：var、for、while

变量名必须有意义。MMDBBDnl→age

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

推荐翻译网站：有道爱词霸

3.6:综合练习

要求：交换两个变量的值( 实现思路：使用一个临时变量用来做中间存储)


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交换两个变量值</title>
 
    <script>
        // js 是编程语言有很强的逻辑性在里面；实现这个思路，先怎么做后怎么做；
        // 1: 我们需要一个临时变量帮我们
        // 2: 把apple1 给我们的临时变量 temp
        // 3: 把apple2 里面的苹果给 apple1
        // 4: 把临时变量里面的值 给apple
        var temp; //声明临时变量
        var apple1 = '青苹果';
        var apple2 = '红苹果';
 
        temp = apple1;
        apple1 = apple2;
        apple2 = temp;
 
        console.log(apple1);
        console.log(apple2);
    </script>
</head>
 
<body>
 
</body>
 
</html>

3.7:小结

为什么需要变量？  因为我们一些数据需要保存，所以需要变量
变量是什么？  变量就是一个容器，用来存放数据的。方便我们以后使用里面的数据
变量的本质是什么? 变量是内存里的一块空间，用来存储数据。
变量怎么使用的？我们使用变量的时候，一定要声明变量，然后赋值声明变量本质是去内存申请空间。
什么是变量的初始化？声明变量并赋值我们称之为变量的初始化
变量命名规范有哪些？变量名尽量要规范，见名知意——驼峰命名法
交换2个变量值的思路？   区分哪些变量名不合法学会交换2个变量

四：数据类型

4.1:目标

能够说出5种简单数据类型
能够使用typeof获取变量的类型
能够说出1～2种转换为数值型的方法
能够说出1～2种转换为字符型的方法
能够说出什么事隐式转换

4.2：目录

数据类型简介
简单数据类型
获取变量数据类型
数据类型转换

4.3:数据类型简介

1:为什么需要数据类型？

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。

2:变量的数据类型

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

var age = 10; // 这是一个数字型

var areYouOk= '是的';//这是一个字符串

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

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

var x = 6; //x 为数字

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

3:数据类型的分类

JS 把数据类型分为两类：

简单数据类型（Number,String,Boolean,Undefined,Null）
复杂数据类型（object)

4.4: 简单数据类型

1:简单数据类型（基本数据类型）

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

2:数字型 Number

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

var age = 21; //整数

var Age= 21.3747;//小数

2.1:数字型进制

最常见的进制有二进制、八进制、十进制、十六进制。

//1.八进制数字序列范围：0~7

var num1 = 07;//对应十进制的7

var num2 = 019;//对应十进制的19

var num3 = 08;//对应十进制的8

//2.十六进制数字序列范围：0~9以及A~F

var num = 0xA;

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

2.2:数字型范围

JavaScript中数值的最大和最小值

alert(Number.MAX_VALUE);// 1.7976931348623157e+308

alert(Number.MIN_VALUE);// 5e-324

最大值：Number.MAX_VALUE，这个值为：1.7976931348623157e+308
最小值：Number.MIN_VALUE，这个值为：5e-32

2.3: 数字型三个特殊值

alert(Infinity) ; // Infinity

alert(-Infinity); // -Infinity

alert(NaN); // NaN

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


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <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  #fffff 数字的前面加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);
 
        // 6:非数字
        console.log('pink老师' - 100); //NaN
 
 
    </script>
</head>
 
<body>
 
</body>
 
</html>

2.4:isNaN()

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

var usrAge = 21;

var isOk = isNaN(userAge);

console.log(isNum); // false，21不是一个非数字

var usrName = "andy";

console.log(isNaN(userName)); //true，"andy"是一个非数字


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>isNaN</title>
 
    <script>
        // isNaN() 这个方法用来判断是非数字  并且返回一个值 如果是数字返回的是 false 如果不是数字返回的是true
        console.log(isNaN(12));  //false
 
        console.log(isNaN('pink'));  //true
    </script>
</head>
 
<body>
 
</body>
 
</html>

3；字符串型String

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

var strMsg = "我爱北京天安门~"; //使用双引号表示字符串

var strMsg2 = '我爱吃猪蹄~'; //使用单引号表示字符串

//常见错误

var strMsg3 =我爱大肘子; //报错，没使用引号，会被认为是js代码，但js没有这些语法

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

3.1: 字符串引号嵌套

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

var strMsg = '我是"高帅富"程序猿'; //可以用''包含""

var strMsg2 = "我是'高帅富'程序猿"; //也可以用"" 包含''

//常见错误

var badQuotes = 'What on earth?"; //报错，不能单双引号搭配

3.2: 字符串转义字符

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

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


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符串型</title>
 
    <script>
 
        //1: 外单内双； 外双内单
        var str = '我是一个"白富美"的程序员';
        console.log(str);
        var str1 = "我是一个'白富美'的程序员";
        console.log(str1);
 
        // 2:字符串转义字符  都是用 \ 开头  但是这些转义字符写到引号里面
        var str2 = "我是一个'白富美'的\n程序员"
        console.log(str2);
    </script>
</head>
 
<body>
 
</body>
 
</html>

3.3:案例-弹出网页警示框

酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最为独特的风景。我审视四周，这里，是我的舞台，我就是天地间的王者。这一刻，我豪气冲天，终于大喊一声："收破烂啦～"


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例-弹出网页警示框</title>
 
    <script>
        // 外单内双
        alert(' 酷热难耐，火辣的太阳底下，网盘挺拔的身姿，成为了最为独特的风景。我审视四周 ,这里,是我的舞台，我就是天地间的王者。\n这一刻，我豪气冲天，终于大喊一声："收破烂啦～～"')
    </script>
</head>
 
<body>
 
</body>
 
</html>

3.3: 字符串长度

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

var strMsg = "我是帅气多金的程序猿！";

alert(strMsg.length);//显示11

3.4: 字符串的拼接

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

//1.1字符串"相加"

alert('hello' + ' ' + 'world'); // hello world

//1.2数值字符串"相加"

alert('100' + '100'); // 100100

//1.3数值字符串+ 数值

alert('11' + 12); // 111

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


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <script>
        // 1:字符串长度获取用lenth
        var str = 'my name is hello';
        console.log(str.length);
 
        // 2；字符串拼接  +  只有有字符串和其他的类型相拼接， 最终的结果是字符串类型
        console.log('沙漠' + '骆驼'); //沙漠骆驼
        console.log('pink老师' + 18);
        console.log('pink老师' + true);
        console.log( 12 +12 );  //24
        console.log('12' + 12); //'1212'
    </script>
</head>
 
<body>
 
</body>
 
</html>

3.5: 字符串拼接加强

console.log('pink老师'+ 18); //只要有字符就会相连

var age = 18;

// console.log('pink老师age岁啦') ; //这样不行哦

console.log('pink老师'+ age); // pink老师18

console.log('pink老师'+ age + '岁啦'); // pink老师18岁啦

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


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log('pink老师' + 18 + '岁');
        // 加强：我们变量不要写到字符串里面，是通过和 字符串相连的方式实现的
        var age = 19;
        console.log('pink老师' + age + '岁');
    </script>
</head>
 
<body>
 
</body>
 
</html>

3.6:显示年龄--案例分析

弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示“您今年xx 岁啦”（xx 表示刚才输入的年龄）

这是利用JS 编写的一个非常简单的交互效果程序。

交互编程的三个基本要素：

1.你喜欢我吗？→ 这是用户输入

2.女孩想了想 → 这是程序内部处理

3.最后给了你一巴掌 → 这是输出结果

那么在程序中要如何实现呢？

①弹出一个输入框（prompt)，让用户输入年龄（用户输入）

②把用户输入的值用变量保存起来,把刚才输入的年龄与所要输出的字符串拼接（程序内部处理）

③使用alert语句弹出警示框（输出结果）

// 弹出一个输入框（prompt)，让用户输入年龄（用户输入）

// 把用户输入的值用变量保存起来,把刚才输入的年龄与所要输出的字符串拼接（程序内部处理）

// 使用alert语句弹出警示框（输出结果）

var age=prompt('请输入您的年龄');

var str='您今年已经'+age+'岁了';

alert(str);


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例-显示年龄</title>
 
    <script>
        // 弹出一个输入框（prompt)，让用户输入年龄（用户输入）
        // 把用户输入的值用变量保存起来，把刚才输入的年龄与所要输出的字符串拼接（程序内部处理）
        // 使用alert语句弹出警示框（输出结果）
        var age = prompt('请输入您的年龄');
        var str = '您今年已经' + age + '岁了';
        alert(str);
    </script>
</head>
 
<body>
 
</body>
 
</html>

4: 布尔型Boolean

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

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

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


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布尔型</title>
 
    <script>
        var flag = true; //flag布尔型
 
        var flag1 = false; //flag1布尔型
 
        console.log(flag + 1); //true 参与加法运算当1来看
        console.log(flag1 +1); //flase参与加法运算当1来看
 
    </script>
</head>
<body>
    
</body>
</html>

5: Undefined和Null

undefied + 任何数字都是 NaN;

一个声明后没有被赋值的变量会有一个默认值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


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>undefined和null</title>
 
    <script>
        //1: undefined
        var flag = true; //flag布尔型
        var flag1 = flase; //flag1布尔型
        console.log(flag + 1); //true参与加法运算当1来看
        console.log(flag1 + 1); //flase参与加法运算当0来看
 
        // 2: 如果一个变量声明未赋值 就是undefiend 未定义数据类型
        var str;
        console.log(str);
 
        var variable = undefined;
        console.log(variable + 'pink'); //undefinedpink
 
        console.log(variable + 1); //NaN undefined 和数字相加 最后的结果是 NaN
 
        //3；null
        var space = null;
        console.log(space + 'pink');  //nullpink
 
        console.log(space + 1); //1
 
 
 
    </script>
</head>
 
<body>
 
</body>
 
</html>

4.5: 获取变量数据类型

1:获取检测变量的数据类型typeof

var num = 18;

console.log(typeof num) //结果numbe

不同类型的返回值

2:还可以通过控制台的颜色判断：

数字型：蓝色

字符型：黑色

布尔型：深蓝

undefined和null：浅灰色


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取变量数据类型</title>
 
    <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 vari); //undefined
 
        var timer = null;
        console.log(typeof timer); //object
 
        // prompt 输入的数字一定是数字型吗？不是。是字符型
        var age = prompt('请输入您的年龄');
        console.log(age);
        console.log(typeof age);  //string
 
 
    </script>
</head>
 
<body>
 
</body>
 
</html>√

2: 字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

数字字面量：8, 9, 10
字符串字面量：'黑马程序员', "大前端"
布尔字面量：true，false

4.6: 数据类型转换

1: 什么是数据类型转换

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

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

2 转换为字符串

toString() 和String()使用方式不一样。
三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>转换成字符串型</title>
 
    <script>
        // 1: 把数字型转换成字符串型 变量.toString()
        var num = 10;
        var str = num.toString();
        console.log(str);
 
        // 2:强转换 String(变量)
        console.log(String(str));
 
        // 3: 利用 + 拼接字符串的方法实现转换效果 隐私转换(用的最多)
        console.log(num + '');
    </script>
</head>
 
<body>
 
</body>
 
</html>

2:转换成数字型（重点）

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


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
 
        // var age = prompt('请您输入年龄');
        // 1:parseInt(变量) 可以把 字符型的转换为数字型  得到的是整数
        // console.log(parseInt(age));
        console.log(parseInt('3.14'));  //3 取整   
        console.log(parseInt('3.94'));  //3 取整
        console.log(parseInt('120px'));  //120 会去掉这个px
        console.log(parseInt('rem120px')); //NaN 因为第一个读取的不是数字
 
        // 2: parseFloat(变量) 可以把 字符型的转换为数字型  得到是小数 浮动数
        console.log(parseFloat('3.12')); //3.14
        console.log(parseFloat('120px')); //120
        console.log(parseFloat('rem120px')); //NaN
 
        // 3：利用Number(变量)
        var str = '123';
        console.log(Number(str));  //123
        console.log(Number('12'));  //12
 
        // 4: 利用了算数运算 - * / 隐试转换
        console.log('12' - 0); //12
        console.log('123' - '120'); //3
        console.log('123' * 1); //123
 
    </script>
 
    <script>
 
    </script>
</head>
 
<body>
 
</body>
 
</html>

4:案例1-计算年龄

此案例要求在页面中弹出一个输入框，我们输入出生年份后，能计算出我们的年龄。

①弹出一个输入框（prompt)，让用户输入出生年份（用户输入）

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

③弹出警示框（alert) ，把计算的结果输出（输出结果）

// 1.弹出输入框，输入出生年份，并存储在变量中

var year = prompt('请输入您的出生年份：'); //用户输入

// 2.用今年减去刚才输入的年份

var result = 2019-year; //程序内部处理

// 3.弹出提示框

alert('您的年龄是:'+ result + '岁'); //输出结果


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例-计算年龄</title>
 
    <script>
        // 1:输入出生的年份
        var brithYear = prompt('请输入您的出生年份');
        // 2:用隐式转换
        var age = 2023 - brithYear;
        // 3:提示alter
        alert('您今年已经' + age + '岁了')
    </script>
</head>
 
<body>
 
</body>
 
</html>

4:案例2-简单加法器

计算两个数的值，用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果。

分析：①先弹出第一个输入框，提示用户输入第一个值保存起来

②再弹出第二个框，提示用户输入第二个值保存起来

③把这两个值相加，并将结果赋给新的变量（注意数据类型转换）

④弹出警示框（alert) ，把计算的结果输出（输出结果）

案例代码：

// 1. 先弹出第一个输入框，提示用户输入第一个值

var num1 = prompt('请输入第一个值：');

// 2. 再弹出第二个框，提示用户输入第二个值

var num2 = prompt('请输入第二个值：');

// 3. 将输入的值转换为数字型后，把这两个值相加，并将结果赋给新的变量

var result = parseFloat(num1) + parseFloat(num2)

// 4. 弹出结果

alert('结果是:'+ result);


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1:输入第一个值
        var num1 = prompt("请输入第一个值");
        // 2:输入第二值
        var num2 = prompt('请输入第二个值');
        // 3:相加(要转换成数字型)
        var total = parseInt(num1) + parseInt(num2);
        //4: 提示
        alert(total);
  
    </script>
</head>
 
<body>
 
</body>
 
</html>

5: 转换成布尔型

代表空、否定的值会被转换为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


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <script>
        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('----------------------------');
        console.log(Boolean('123')); //true
        console.log(Boolean('你好吗')); //true
        console.log(Boolean('我很好')); //true
 
 
 
    </script>
</head>
 
<body>
 
</body>
 
</html>

4.7: 扩展阅读

1:目标

能够知道解释性语言和编译型语言的特点
能够知道标识符不能是关键字或保留字
能够独立完成课后作业

2:目录

解释型语言和编译型语言
标识符、关键字、保留字
课后作业

3:解释型语言和编译型语言

3.1:概述

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

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

3.2:执行过程

4:标识符、关键字、保留字

4.1: 标识符

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

4.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 等。

4.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等。

注意：如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。当浏览器将其实现后，该单词将被看做关键字，如此将出现关键字错误。

5:课后作业

1. 给同桌讲讲交换两个变量的值算法（不管他愿不愿听）

2.依次询问并获取用户的姓名、年龄、性别，并打印用户信息如图


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课后作业</title>
    <script>
        var myname = prompt('请输入您的姓名');
        var age = prompt('请输入您的年龄');
        var sex = prompt('请输入您的性别');
        var pname = '您的姓名' + myname;
        var page = '您的年龄' + age;
        var psex = '你的性别' + sex;
 
        // 还没实现换行
        alert(pname + page + psex);
 
 
    </script>
</head>
 
<body>
 
</body>
 
</html>

五：JavaScript运算符

5.1:目标

能够使用常用运算符
能够说出前置递增和后置递增的区别
能够说出运算符的优先级

5.2:目录

运算符
算数运算符
递增和递减运算符
比较运算符
逻辑元素符
赋值运算符
运算符优先级

5.3: 运算符（操作符）

1: 运算符的分类

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

JavaScript中常用的运算符有：

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

5.4: 算数运算符

1:算术运算符概述

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

2: 浮点数的精度问题

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

varresult=0.1+0.2;//结果不是0.3，而是：0.30000000000000004

console.log(0.07*100);//结果不是7，而是：7.000000000000001

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


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <script>
        //1: + - * /
        console.log(1 + 1); //2
        console.log(1 - 1); //0
        console.log(1 * 1); //1
        console.log(1 / 1); //1
 
        // 2: % 取余（取模）
        console.log(4 % 2); //0
        console.log(5 % 3); //2
        console.log(3 % 5);  //3
 
        // 3:我们不能直接拿着符点数进行相比较  是否相等
        var num = 0.1 + 0.2;
        console.log(num == 0.3); //false
 
    </script>
</head>
 
<body>
 
</body>
 
</html>

3:课堂提问

3.1:我们怎么判断一个能够被整除？

3.2:请问1 + 2 * 3结果是？

4:表达式和返回值

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

简单理解：是由数字、运算符、变量等组成的式子

表达式最终都会有一个结果，返回给开发者，称为返回值


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <script>
        // 是由数字、运算符、变量等组成的式子  我们称为表达式
        console.log(1 + 1);  //2 就是返回值
 
        // 我们程序里面  2 = 1 + 1  把我们的右边表达式计算完毕后把返回值给左边
        var num = 1 + 1;
    </script>
</head>
 
<body>
 
</body>
 
</html>

5.5: 递增和递减运算符

5.1:递增和递减运算符概述

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

在JavaScript中，递增（++）和递减（--）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。

注意：递增和递减运算符必须和变量配合使用。

5.2: 递增运算符

1:前置递增运算符

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

var num=10;

alert ( ++num + 10); //21


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <script>
        // 1: 想要一个变量自己加1 num = num +1 比较麻烦
        var num = 1;
        num = num + 1; //++num
        console.log(num); //2
 
        // 2:前置递增运算符  ++ 写在变量的前面
        var age = 10;
        ++age;    //类似于 age = age + 1;
        console.log(age);
 
        // 3: 先加1 后赋值
        var p = 10;
        console.log(++p + 10);  //21
    </script>
</head>
 
<body>
 
</body>
 
</html>

2:后置递增运算符

num++后置递增，就是自加1，类似于num = num + 1，但是num++写起来更简单。

使用口诀：先返回原值，后自加

var num=10;

alert (10 + num++); //20


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <script>
        var age = 10;
        age++;    //age = age + 1    ++num
        console.log(age); //11
 
        // 1;前置自增和后置自增如果单独使用  效果是一样的
        // 2: 后置自增  口诀：先赋值  后自加1
        var num = 10;
        console.log(num++ + 10); //20
        console.log(num); //11
    </script>
</head>
 
<body>
 
</body>
 
</html>

3:练习


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <script>
        // 1:前置递增
        var a = 10;
        ++a;      // 11
        var b = ++a + 2;  //12+2 
        console.log(b);  //14
 
 
        // 2:后置递增
        var c = 10;
        c++;    //11
        var d = c++ + 2; //d = 11+2  ; c++ = 12
        console.log(d); //13
 
 
        // 3:综合 后置递增  先表达式返回值  后面变量再自加1
        var e = 10;
        // 1: e++ = 10 ;  f = 10 + ++e ; e++ = 11;
        // 2: f = 10 + ++e ;e=11 ,++e = 12;
        // 3: f = 10 + 12 =22
        var f = e++ + ++e;   //1: e++ = 10 e=11 ; 2: e = 11  ++e = 12
        console.log(f); //22
    </script>
</head>
 
<body>
 
</body>
 
</html>

4: 前置递增和后置递增小结

5.3: 递减

5.6:比较运算符

1: 比较运算概述

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

2: 等号比较

console.log(18=='18');

console.log(18==='18');


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        console.log(3 >= 5); // false
        console.log(2 <= 4); // true
        //1. 我们程序里面的等于符号 是 ==  默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相等就可以
        console.log(3 == 5); // false
        console.log('pink老师' == '刘德华'); // flase
        console.log(18 == 18); // true
        console.log(18 == '18'); // true
        console.log(18 != 18); // false
        // 2. 我们程序里面有全等 一模一样  要求 两侧的值 还有 数据类型完全一致才可以 true
        console.log(18 === 18);
        console.log(18 === '18'); // false
    </script>
</head>
 
<body>
 
</body>
 
</html>

2：小结

5.7:逻辑运算符

1:逻辑运算符概述

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

2:逻辑与&&

两边都是true才返回true，否则返回false

3:逻辑或｜｜

两边都是true才返回true，否则返回false

4:逻辑非

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

varis Ok=!true;

console.log(isOk); //false


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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>
</head>
 
<body>
 
</body>
 
</html>

5: 短路运算（逻辑中断）

短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

5.1: 逻辑与

语法：表达式1&&表达式2

如果第一个表达式的值为真，则返回表达式2

如果第一个表达式的值为假，则返回表达式1

console.log ( 123 && 456); //456

console.log( 0 && 456); //0

console.log(123 && 456 && 789); //789

数字里面0是假的

5.2:逻辑或

语法：表达式1||表达式2

-如果第一个表达式的值为真，则返回表达式1

-如果第一个表达式的值为假，则返回表达式2

console.log(123||456); //123

console.log( 0 || 456 ); //456

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


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <script>
        var num = 0;
        console.log(123 || num++);  //123
        console.log(num);  //0 因为123为真，后面就不再执行
    </script>
</head>
 
<body>
 
</body>
 
</html>

5.3:代码


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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 && 1 + 2 && 456 * 56789); // 0
        console.log('' && 1 + 2 && 456 * 56789); // ''
        // 如果有空的或者否定的为假 其余是真的  0  ''  null undefined  NaN
        // 4. 逻辑或短路运算  如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2
        console.log(123 || 456); // 123
        console.log(123 || 456 || 456 + 123); // 123
        console.log(0 || 456 || 456 + 123); // 456
        // 逻辑中断很重要 它会影响我们程序运行结果思密达
        var num = 0;
        console.log(123 || num++); //123
        console.log(num); // 0  因为123为真，后面就不再执行
    </script>
</head>
 
<body>
 
</body>
 
</html>

5.8: 赋值运算符

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

varage=10;

age+=5;//相当于age=age+5;

age-=5;//相当于age=age-5;

age*=10; //相当于age=age* 10;


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var num = 10;
        // num = num + 1;   num++
        // num = num + 2; // num += 2;
        // num += 2;
        num += 5;
        console.log(num);
        var age = 2;
        age *= 3;
        console.log(age);
    </script>
</head>
 
<body>
 
</body>
 
</html>

5.9: 运算符优先级

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

逻辑与比逻辑或优先级高

先按照最低等级（权重）划分开来，然后再算每块内容（计算）

六；JavaScript 流程控制-分支

6.1: 目标

能够使用if分支语句

能够使用switch分支语句

能够使用三元表达式

6.2:目录

流程控制
顺序流程控制
分支流程控制if语句
三元表达式
分支流程控制switch语句

6.3: 流程控制

1: 流程控制概念

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

简单理解：**流程控制就是来控制代码按照一定结构顺序来执行**

流程控制主要有三种结构，分别是**顺序结构**、**分支结构**和**循环结构**，代表三种代码执行的顺序。

6.4:顺序流程控制

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

6.5: 分支流程控制if语句

1: 分支结构

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

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

1.2: if 分支语句

1:语法结构

//条件成立执行代码，否则什么也不做

if(条件表达式){//条件成立执行的代码语句}

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

2: 执行流程

2:代码展示


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1. if 的语法结构   如果if
        // if (条件表达式) {
        //     // 执行语句
        // }
 
        // 2. 执行思路  如果 if 里面的条件表达式结果为真 true 则执行大括号里面的 执行语句 
        // 如果if 条件表达式结果为假 则不执行大括号里面的语句 则执行if 语句后面的代码
        // 3. 代码体验
        if (3 < 5) {
            alert('沙漠骆驼');
        }
    </script>
</head>
 
<body>
 
</body>
 
</html>

3:案例-进入网吧


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <script>
        var age = prompt('请输入你的年龄');
        var int = parseInt(age);
        if (int >= 18) {
            alert('允许进入网吧');
        }
    </script>
</head>
 
<body>
 
</body>
 
</html>

1.3: if else语句（双分支语句）

1:语法结构

// 条件成立执行 if 里面代码，否则执行 else 里面的代码

if(条件表达式) {

// [如果] 条件成立执行的代码

}else{

//[否则]执行的代码

}

2:执行流程


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1. 多分支语句   就是利用多个条件来选择不同的语句执行 得到不同的结果  多选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) 多分支语句还是多选1 最后只能有一个语句执行
        // (2) else if 里面的条件理论上是可以任意多个的
        // (3) else if 中间有个空格了
    </script>
</head>
 
<body>
 
</body>
 
</html>

3:案例-判断闰年


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <script>
        var year = prompt("输入年份")
 
        if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
 
            alert('是闰年')
        }else {
 
            alert('不是闰年')
        }
    </script>
</head>
<body>
    
</body>
</html>

1.4: if else if 语句（多分支语句）

0: 语法结构

//适合于检查多重条件。

if (条件表达式1) {

语句1；

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

语句2；

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

语句3；

....

} else {

//上述条件都不成立执行此处代码

}

1:语法规范

if(条件表达式1){

//语句1

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

// 语句2

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

// 语句3

}else {

// 最后的语句

}

//执行思路：

1: 如果条件表达式1。满足就执行。语句1 执行完毕后，退出整个if分支语句

2:如果条件表达式2。不满足则判断条件表达式2 满足的话，执行语句2 以此类推

3:如果上面的所有条件表达式不成立，则执行else里面的语句

//注意点

1:多分支语句还是多选择1 最后只能有一个语句执行

2:else if 里面的条件理论上是可以任意多个的

3:else if 中间有个空格了

2:执行流程

3：案例-判断成绩级别


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //  伪代码       按照从大到小判断的思路
        // 弹出prompt输入框，让用户输入分数（score），把这个值取过来保存到变量中
        // 使用多分支 if else if 语句来分别判断输出不同的值
        var score = prompt('请您输入分数:');
        if (score >= 90) {
            alert('宝贝，你是我的骄傲');
        } else if (score >= 80) {
            alert('宝贝，你已经很出色了');
        } else if (score >= 70) {
            alert('你要继续加油喽');
        } else if (score >= 60) {
            alert('孩子，你很危险');
        } else {
            alert('熊孩子，我不想和你说话，我只想用鞭子和你说话');
        }
    </script>
</head>
 
<body>
 
</body>
 
</html>

6.6:三元表达式

1: 语法结构

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

2:执行思路

如果表达式1为true，则返回表达式2的值，如果表达式1为false，则返回表达式3的值
简单理解：就类似于if else（双分支）的简写


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1. 有三元运算符组成的式子我们称为三元表达式
        // 2. ++num     3 + 5     ? :
        // 3. 语法结构 
        // 条件表达式 ？ 表达式1 ： 表达式2
        // 4. 执行思路
        // 如果条件表达式结果为真 则 返回 表达式1 的值 如果条件表达式结果为假 则返回 表达式2 的值
        // 5. 代码体验
        var num = 10;
        var result = num > 5 ? '是的' : '不是的'; // 我们知道表达式是有返回值的
        console.log(result);
        // if (num > 5) {
        //     result = '是的';
        // } else {
        //     result = '不是的';
        // }
    </script>
</head>
 
<body>
 
</body>
 
</html>

2:案例


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //         用户输入0~59之间的一个数字
        // 如果数字小于10，则在这个数字前面补0,（加0 拼接） 否则  不做操作
        // 用一个变量接受这个返回值，输出
        var time = prompt('请您输入一个 0 ~ 59 之间的一个数字');
        // 三元表达式   表达式 ？ 表达式1 ：表达式2 
        var result = time < 10 ? '0' + time : time; //   把返回值赋值给一个变量
        alert(result);
    </script>
</head>
 
<body>
 
</body>
 
</html>

6.7: 分支流程控制switch语句

1:语法规范

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

switch(表达式) {

case value1:

// 表达式等于 value1 时要执行的代码

break;

case value2:

// 表达式等于 value2 时要执行的代码

break;

default:

// 表达式不等于任何一个value时要执行的代码

}

switch：开关转换，case：小例子选项

关键字switch后面括号内可以是表达式或值，通常是一个变量
关键字case ,后跟一个选项的表达式或值，后面跟一个冒号
switch表达式的值会与结构中的case的值做比较
如果存在匹配全等(===)，则与该case关联的代码块会被执行，并在遇到break时停止，整个 switch语句代码执行结束
如果所有的case的值都和表达式的值不匹配，则执行default里的代码

注意：执行case里面的语句时，如果没有break，则继续执行下一个case里面的语句。

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

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

switch适合特定值；if适合判断等表达式

3；展示


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1. switch 语句也是多分支语句 也可以实现多选1
        // 2. 语法结构 switch 转换、开关  case 小例子或者选项的意思
        // switch (表达式) {
        //     case value1:
        //         执行语句1;
        //         break;
        //     case value2:
        //         执行语句2;
        //         break;
        //         ...
        //         default:
        //             执行最后的语句;
        // }
        // 3. 执行思路  利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上，就执行该case 里面的语句  如果都没有匹配上，那么执行 default里面的语句
        // 4. 代码验证
        switch (8) {
            case 1:
                console.log('这是1');
                break;
            case 2:
                console.log('这是2');
                break;
            case 3:
                console.log('这是3');
                break;
            default:
                console.log('没有匹配结果');
 
        }
    </script>
</head>
 
<body>
 
</body>

4:注意事项


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // switch注意事项
        var num = 1;
        switch (num) {
            case 1:
                console.log(1);
 
            case 2:
                console.log(2);
 
            case 3:
                console.log(3);
                break;
 
 
        }
        // 1. 我们开发里面 表达式我们经常写成变量
        // 2. 我们num 的值 和 case 里面的值相匹配的时候是 全等   必须是值和数据类型一致才可以 num === 1
        // 3. break 如果当前的case里面没有break 则不会退出switch 是继续执行下一个case
    </script>
</head>
 
<body>
 
</body>
 
</html>

5:案例-查询水果


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <script>
        var fruit = prompt('请输入水果名称');
 
        switch (fruit) {
            case '苹果':
                // console.log(8.8);
                alert('8.8元/斤');
                break;
 
            case '橘子':
                alert('6.6元/斤');
                break;
 
            case '香蕉':
                alert('5.5元/斤');
                break;
            default:
                alert('没有此水果')
        }
    </script>
</head>
 
<body>
 
</body>
 
</html>

6.8:switch语句和 if else if语句的区别

作业

七：JavaScript 流程控制-循环

7.1:目标

能够说出循环的目的
能够说出for循环的执行过程
能够使用断点调试来观察代码的执行过程
能够使用for循环我能吃累加求和和等案例
能够使用双重for循环完成乘法表案例
能够说出while循环和do while循环的区别
能够说出break 和 continue的区别

7.2: 目录

循环
for循环
双重for循环
while循环
do while循环
continue break

7.3:循环

1: JS中的循环

7.4: for循环

1:循环结构


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1. for 重复执行某些代码， 通常跟计数有关系
        // 2. for 语法结构
        // for (初始化变量; 条件表达式; 操作表达式) {
        //     // 循环体
        // }
        // 3. 初始化变量 就是用var 声明的一个普通变量， 通常用于作为计数器使用 
        // 4. 条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
        // 5. 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）
        // 6. 代码体验 我们重复打印100局 你好
        for (var i = 1; i <= 100; i++) {
            console.log('你好吗');
        }
    </script>
</head>
 
<body>
 
</body>
 
</html>


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // for 循环的执行过程
        for (var i = 1; i <= 100; i++) {
            console.log('你好吗');
        }
        // 1. 首先执行里面的计数器变量  var i = 1 .但是这句话在for 里面只执行一次  index
        // 2. 去 i <= 100 来判断是否满足条件， 如果满足条件  就去执行 循环体  不满足条件退出循环 
        // 3. 最后去执行 i++   i++是单独写的代码 递增  第一轮结束 
        // 4. 接着去执行 i <= 100 如果满足条件  就去执行 循环体  不满足条件退出循环   第二轮
    </script>
</head>
 
<body>
 
</body>
 
</html>cs

2:语法结构-断点调试

3:for循环执行相同的代码


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // for 循环可以执行相同的代码
        for (var i = 1; i <= 10; i++) {
            console.log('媳妇我错了');
 
        }
        // 我们可以让用户控制输出的次数
        var num = prompt('请您输入次数');
        for (var i = 1; i <= num; i++) {
            console.log('媳妇我错了');
 
        }
    </script>
</head>
 
<body>
 
</body>
 
</html>

4；for循环重复不相同的代码


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // for 循环可以重复执行不同的代码  因为我们有计数器变量 i 的存在 i每次循环值都会变化
        // 我们想要输出1个人 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 + '岁了');
 
            }
        }
    </script>
</head>
 
<body>
 
</body>
 
</html

5: for循环重复相同的操作

6:案例-求1～100之间的和


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // for 循环重复执行某些操作 比如说我们做了100次加法运算
        // 求 1~100 之间的整数累加和
        //         需要循环100次，我们需要一个计数器  i  
        // 我们需要一个存储结果的变量 sum ，但是初始值一定是 0
        // 核心算法：1 + 2 + 3 + 4 ....   ，sum  =  sum + i;
        var sum = 0; // 求和 的变量
        for (var i = 1; i <= 100; i++) {
            // sum = sum + i;
            sum += i;
        }
        console.log(sum);
    </script>
</head>
 
<body>
 
</body>
 
</html>

7:案例

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/372225