Veam
文章20
标签4
分类10
Javascript

Javascript

JavaScript基础md文档

基础的第一天

JavaScript组成

ECMAscriptWeb Apis组成(它是由DOM("网页文档对象模型")和BOM("浏览器对象模型")组成)

初步认识JavaScript的写法

//按照button形成一个按钮的切换

<style>

  .pink{

      background-color: pink;

      border: 0;

     

  }

  button{

        width: 100px;

      height: 100px;

  }

</style>
<script>

      let but = document.querySelectorAll(\'button\')

      for (let i=0;i\<but.length;i++ ){

          but\[i\].addEventListener(\'click\',function(){

              document.querySelector(\'.pink\').className = \'\'

              this.className = \'pink\'

          })

      }

</script>
<body>

<button class="pink">btn1</button>

  <button>btn2</button>

  <button>btn3</button>

  <button>btn4</button>

</body>

JavaScript三种书写位置

内部

外部

行内

JavaScript注释

单行注释 ctrl + /

多行注释 shift +alt +a

JavaScript结束符 就是分号 在js中可加可不加

例如:

alert(\'第一句话\');

alert(\'第一句话\')

输入和输出

输出:
第一种写法 document.write
作用:向body内输出内容注意:如果输出的内容写的是标签,也会被解析成网页元素document.write(\'这是一段输入语法\')还可以直接输出html结构document.write(\'\<h1\>我在测试\</h1\>\')
第二种写法 alert

作用:页面弹出警告对话框alert(\'我直接给你输出一部分内容\')
第三种写法 console.log

作用:控制台输出语法,程序员调试使用console.log(\"控制台输出\");
输入:
输入 prompt
prompt(\'请输入你的年龄\')
作业测试

在页面中输出显示” JS 你好!”,”Javascript我来了!”,”它~会魔法吧!” 三种方法

alert(\'你好 JS\~\')

document.write(\'\<h1\>Javascript我来了!\</h1\>\')

console.log(\'它\~会魔法吧!\');

变量
变量不是数据本身,他们仅仅是一个用于存储数值的容器。可以理解为是用来装东西的纸箱子

声名变量 要想使用变量,首先要创建变量

let abc(变量名) = var abc(变量名)

变量赋值号 : =

let age = 18 //变量初始化

console.log(age);

案例一

请声明一个年龄age为18岁,userName叫张三的同学的名字

let age = 18

let userName = \'张三\'

console.log(age,userName)

更新变量 (注意变量只能存储一个值)

更新age的年龄

let age = 18

age = 19

console.log(age) //控制台显示是19(注意变量只能存储一个值)

声明多个变量(不建议使用多变量)

let age = 18,userName = \'赵四\'

console.log(age,userName)   //控制台打印出来的结果是18,赵四

案例二

使用输入prompt输出用户名userName

具体的操作步骤:
分两种写法
  • 一/第一种写法

1.用户的输入

prompt(\'请输入用户名\')

2.内容处理存储数据

let userName = prompt('请输入用户名')

3.打印输出数据

console.log(userName)       //控制台显示的就是你输入的用户名

document.write(\'userName\')   //网页中就会显示你输入的用户名

  • 二/第二种写法

1.直接声明用户的输入处理存储数据

let userName = prompt('请输入用户名')

2.打印输出数据

console.log(userName)       //控制台显示的就是你输入的用户名

document.write(\'userName\')   //网页中就会显示你输入的用户名

交换变量

把两个值进行一个交换 num1和num2

let num1 = 10

let num2 = 20

let temp   //这个是用于存储num1的值

temp = num1

//然后把num2的值给num1

num1 = num2

//接着把temp的值给num2,这样就完成了一个交换变量

num2 = temp

//接着打印一下这个num1,num2

consolo.log(num1,num2)   //显示的结果就是 20,10

案例三

需求:输入姓名(userName),年龄(age),性别(gender)然后输出到页面上或者控制台

定义三个变量名 然后在后面接上prompt

let userName = prompt(\'请输入你的姓名\')

let age = prompt(\'请输入你的年龄\')

let gender = prompt(\'请输入你的性别\')

document.write(userName,age,gender)     //页面输出就是你的姓名,年龄,性别

console.log(userName,age,gender)     //控制台输出就是你的姓名,年龄,性别

let和var的区别

var声明:

可以先使用 在声明中(不合理)

var声明过的变量可以重复声明(不合理)多次声明

比如变量提升、全局变量、没有块级作用域等等

let声明:

不允许多次声明

规则和规范

规则

不能用关键字

关键字:有特殊含义的字符,JavaScript内置的一些英语词汇。例如:let,var ,if,for

只能用下划线、字母、数字、$组成,且数字不能和开头

字母严格区分大小写,如Age和age是不同的变量

只能出现下划线或者$符号

规范

起名要有意义

遵守小驼峰命名法 第一个单词首字母小写,后面每个单词字母大写例如:userName

**数组的基本使用 **

**数组Array—一种将多个数据存储在单个变量下 **

let arr=['数组一','数组二','数组三','数组四']

数组下有多个数据,每个数据都有自己的

编号/下标/

数组可以存储任意类型的数据

取值的语法 数组名[下标]/序号[索引号] 下标是从0开始

元素:数组中保存的每个数据都叫元素
下标:数组中数据的编号
长度:数组中数据的个数,通过数组的length属性获得

使用数组的好处: 数组可以保存多个数据

数组字面量用 [] / 中括号表示

  • 1.声明数组

let arr = \[\"张三\",\"李四\",\"王五\",\"赵六\"\]

console.log(arr)    

//控制台输出为  

Array-\> 0:张三

1:李四

2:王五

3:赵六

2.使用数组

(如果单独只要王五这个值)

console.log(arr\[2\])

案例一

定义一个数组里面存放从星期一到星期天的数据,需要打印出星期天这个数据

let arr = \[\"星期一\", \"星期二\", \"星期三\", \"星期四\", \"星期五\", \"星期六\", \"星期日\"\]

console.log(arr\[6\]);   //星期天的下标为6 所以表达方式为arr\[6\]

常量

概念:使用const声明的变量叫做 “常量”

使用场景当某个变量永远不会改变的时候,就是用const 不要使用let

常量const不允许重新赋值,声明的时候必须赋值(初始化)

小技巧:不需要重新赋值的数据就使用const

1.常量不允许更改值

2.常量声明的时候必须赋值

const Ip = 3.14

console.log(Ip)   //结果就是3.14

数据类型

JS数据类型整体分为两大类

基本数据类型 和 引用数据类型

基本数据类型:使用()提高优先级
number/数字型

数字型可以是整数、小数、正数、负数

1.1. 数字型又分整数、小数、正数、负数1.2. 算数运算符

string / 字符串型

通过单引号('')双引号("")或者反引号(``)包裹的数据都叫字符串

let abc = \'13131313\' //这个也是字符串型

let set = \'abc\'  //字符串

console.log(set)  //这个set是变量

console.log(\'set\')  //这个set是字符串

 注意事项:

无论单引号或者是双引号必须成对使用

单引号/双引号可以互相嵌套,但是不以自己嵌套自己(口诀是外双内单,或者外单内双)

比如:console.log("我是谁你能看见'我这个人吗?'")

必要时可以使用转义字符\ ,输出单引号或者双引号

比如console.log('收到请\'回答\'')

boolean / 布尔型

只有两个固定的值 true 和 false // 真 和 假

console(3\>4)   //false

undefined / 未定义型

出现:只声明变量,不赋值的情况下,变量的默认值为undefined,一般很少【直接】为某个变量赋值为undefined

未定义类型 弱数据类型  声明一个变量为赋值就是 undefined

let num

console.log(num)   //undefined

null / 空类型 仅仅只是代表的无,空 或者 值未知的特殊值

let  obj = null

console.log(obj)    //控制台打印就是 null    

官方解释:把null作为尚未创建的对象

undefined  和 null区别

console.log(undefined + 1)  // NaN

console.log(null + 1)       // 1

 结论:先乘除后加减,有括号先算括号里面的···

开发场景:%判断某个数字是否能被整除

特殊值:NaN not a number //翻译:这个不属于数字类型

undefined/未定义型

出现:只声明变量,不赋值的情况下,变量的默认值为undefined,一般很少【直接】为某个变量赋值为undefined

未定义类型 弱数据类型 声明一个变量为赋值就是 undefined
let num
console.log(num) //undefined

null/空类型 仅仅只是代表的无,空 或者 值未知的特殊值
``let obj = null console.log(obj) //控制台打印就是 null
官方解释:把null作为尚未创建的对象

undefined 和 null区别
console.log(undefined + 1) // NaN
console.log(null + 1) // 1

引用数据类型
object对象
字符串拼接:

场景:+运算符 可以实现字符串的拼接。

口诀:数字相加,字符相连

console.log(1+1)            //输出是2

console.log(\'我是\'+\'神仙\')   //输出是 我是神仙

####### 案例:

let age = 18

document.write(\'我今年\'+age+\'岁了\')  //是输出是 我今年18岁了

document.write(\'我今年\'+age+\'岁了\') //输出也是 我今年18岁了

模板字符串 (通常是用来拼接变量和字符串的)

 语法: ``(反引号)  内容拼接变量的时候。用 ${变量名} 包住变量

 let age = 80

 document.write(\我今年${age}岁了`)`

算数运算符:

*+ 求和*

- 求差

* 求积   乘除取余同级  乘除取余大于加减

/ 求商

% 取模(取余数)

赋值运算符  对变量进行赋值的运算符   =

使用场景:计数

一元运算符 符号  正负号  + -

自增  ++

作用:让变量的值+1

//////////////////

前置自增

++num //让num的值加1变2,也就是每次只+1

后置自增

num++  //作用和前置自增一致

//////////////////

区别:

        前置自增:先自加再使用(口诀:++在前 先加)

        后置自增:先使用再自加(口诀:++在后 后加)

自减  --

作用:让变量的值-1

////////////////

前置自减

--num //让num的值加1变0,也就是每次只-1

后置自减

num++  //作用和前置自减一致

/////////////////

区别:

前置自减:先自减再使用(口诀:++在前 先加)

后置自减:先使用再自减(口诀:++在后 后加)       

比较运算符 //有隐式转换

使用场景:比较两个数据大小,是否相等

 >:左边是否大于右边

<:左边是否小于右边

>=:左边是否大于或等于右边

<=:左边是否小于或等于右边

==:左右两边值是否相等

===:左右两边数据类型和值都相等

!==:左右两边是否不全等

比较结果为boolean类型 即只会得到true或false

对比

= 单等是赋值

== 是判断  

=== 是全等

开发种判断是否相等,强烈推荐使用 ===

字符串比较,是比较的字符对应的ASCII码

从左往右一次比较

如果第一位一样在比较第二位,以此类推

比较的少,了解即可

尽量不要比较小数,因为小数有精度

不同类型之间会进行隐式转换

最终把数据隐式转换转成number类型

逻辑运算符

使用场景:逻辑运算符用来解决多重条件判断

案例:

            如果我向判断一个变量num是否大于且小于10

            我们就要用到逻辑运算符:

            num  \> 5 && num \< 10

符号   名称    日常读法     特点                          口诀

&&   逻辑与    并且     符号两边都为true结果才是true   一假则假

||   逻辑或    或者     符号两边有一个true就为true     一真则真

!   逻辑非    取反     true变false false变true        真变假,假变真

 --------------------------

逻辑与 &&  一假则假

console.log(true && true)  // true

console.log(false && true)  //false

console.log(3\<5 && 2\<3)    // true

console.log(3\>5 && 3\<2)    //false

--------------------------

逻辑或  ||  一真则真  

console.log(true \|\| true)  //true

console.log(false \|\| true)  //true

console.log(false \|\| false)  //false

--------------------------

逻辑非   !  真变假,假变真  一元运算符

console.log(!true)  //false

console.log(!false)  //true

---------------------------

运算符优先级

 优先级        运算符          顺序

    1            小括号           ()

    2           一元运算符      ++ -- !

    3           算术运算符    先 * / 后 + -

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

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

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

    7           赋值运算符         =

    8           逗号运算符         ,

面试题

let i = 1

console.log(i++ + ++i + i); // 7

练习

作业题目

        /*

        判断一个数是4的倍数,但是不能被100的倍数

        需要:用户输入一个数,判断这个数能被4整除,但是不能被100整除,满足条件,页面弹出true,否则弹出false

        */

// 用户输入

let num =prompt(\'除数\')

// // 判断条件,看余数是不是0,如果是0就被整除,不是就不是被整除

alert(num % 4 === 0 && num % 100 !== 0 )

let  a = 3\>5 && 2\<7 && 3==4  //先算比较运算符(大小于),再算相等运算符

console.log(a);  //false

let  b= 3\<=4 \|\| 3\>1 \|\| 3!=2  //先算比较运算符(大小于) ,再算相等运算符

console.log(b);       //true

let c = 2 === \'2\'  //先算相等运算符 再算赋值

console.log(c);  //false

let d = !c \|\| b && a  //先算! 然后在比较&& 在比较 \|\|  

console.log(d);  //true

还有其他的  +=  -=  *= /=  %=

使用方式  num = num+1   简易写法  num += 1

练习

 <script>

        //计算圆的面积

       /*

        1.面积的数学公式π*r²

        2.转换为javascript写法:变量圆的半径(3.14) *r*r

       */

        // 1.页面弹出输入框

        let r = prompt('请输入圆的半径')

        // 2.计算圆的面积(内部处理)

         let resule = 3.14 *r *r

        // 3.页面输出

        document.write(resule)

</script>

数据类型转换

显示转换
转换成数字型:Number(数据)

 let str = \'123\'

console.log(Number(str),typeof Number(str));

let num = Number(prompt(\'输入数字\'))

console.log(num);

parseInt:取数字整数

console.log(parseInt(\'12.11314px\'))  //显示的数据就是12

parseFloat:取数字全部包括小数点后面的

console.log(parseFloat(\'12.11314px\')); //显示的数据就是12.11314

隐式转换

+号两边只要有一个是字符,都会把另外一个转成字符串

除了+意外的运算符 比如- * / 等都hi吧数据转成数字类型

缺点

转换类型不明确,靠经验才能总结

小技巧

+号作为正好解析可以转换成数字型

数据和字符串相加结果都是字符串

console.log(+\'123\');  //显示的不是字符串是数字

检测数据类型  关键字 typeof

作为运算符: typeof x  (常用的写法)

函数形式:  typeof(x)

注意:prompt,表单里头的数据都是string字符串型

let age = 10

console.log(typeof age);   //number

let abc = \'123\'

console.log(typeof abc);   //string

综合案例

 <script>

        // 题目 用户订单信息案例

        // 需求 用户输入商品价格和商品数量,以及收货地址,可以自动打印订单信息

        /\*

            分析:

            1.需要输入3个数据,所以需要3个变量来存储

            price num address

            2.需要计算总的价格 total

            3.页面打印生成表格,里面填充数据即可

            4.记得最好使用模板字符

        \*/

      //新增一个小需求就是改变产品名称咋办

          // 重新声明 shop 就可以了

        let shop = prompt(\'请输入用户的产品\')

        // 2.用户输入

        let price = +prompt(\'请输入价格\')

        let num = +prompt(\'请输入数量\')

        let address = prompt(\'请输入地址\')

        // 2.计算总额

        let total = price \* num

        console.log(total);

        //3.页面打印渲染

        `document.write(``

         \<table border=\"1px soli \#000\" width=\"700\" height=\"100\" cellspacing=\"0\" cellpadding=\"10px\" class=\"abc4\"\>

              \<caption\>

                \<h3\>订单确认\</h3\>

                \</caption\>

            \<tr\>

                \<td\>商品名称\</td\>

                \<td\>商品价格\</td\>

                \<td\>商品数量\</td\>

                \<td\>总价\</td\>

                \<td\>收货地址\</td\>

                \</tr\>

                \<tr\>

                \<td\>\${shop}\</td\>

                \<td\>\${price}元\</td\>

                \<td\>\${num}\</td\>

                \<td\>\${total}元\</td\>

                \<td\>\${address}\</td\>

                \</tr\>

            \</table\>

        \)`

</script>

表达式

表达式是可以被求值的

表达式 num = 3+4

语句

语句  不一定有值

是一段可以执行的

语句: alert() 弹出对话框 console.log() 控制台打印输出

----------------------------------------------------------------------

区别:

因为表达式可被求值,所以它可以写在赋值语句的右侧而语句不一定有值,所以alert() for 和break等语句就不能被用于赋值。

分支语句

程序三大流程流程控制语句

顺序结构
分支结构
if分支语句
三元运算符

使用场景:其实比if双分支 更简单的方法 ,可以使用 三元表达式

符号: ? 与 : 配合使用

语法: 条件 ? 满足条件执行的代码 : 不满足条件执行的代码

一般用来取值

例如:

3 > 5 ? 3 : 5   //3>5这个是条件 如果为真就返回3 为假就给5

<script>

      例子  3 > 5 ? 3 : 5

      console.log(3>5 ? 3 : 5);   // 5

      对比if双分支

      if( 3 <5){

          alert('真的')

      }

      else{

          alert('假的')

      }

      对比三元运算表达式   适合简单的if else

      3 < 5 ? alert('真的') : alert('假的')

作业1

      判断2个数的最大值

      有两种方式  if else // 三元表达式

      if else

      定义用户的输入

        let num1 = +prompt("请输入数字1");

        let num2 = +prompt("请输入数字2");

      // 判断输出

      if(num1 > num2){

          alert(`最大值:${num1}`)

      }

      else{

           alert(`最大值:${num2}`)  //运行的是这个 因为 1 < 2

      }

      --------------------------------------------------------------------------------

三元运算符

        num1 > num2 ? alert(`最大值:${num1}`) : alert(`最大值:${num2}`); // 对于这种小的判断 三元表达式更加方便 但对于大的判断 那还是用if else吧 ok作业1完成了!!!每日都要进步 加油加油

      数字补0

      作业 需求:用户输入1个数,如果数字小于10,则前面进行补0,比如09 03 等 分析:1:为后期页面限时时间做铺垫 2:利用三元运算符补0计算

      用户输入

        let num1 = prompt("请输入数字");

        // 判断输出 小于10才补0

        num = num1 < 10 ? 0 + num1 : num1;

        alert(num);

</script>

switch语句
循环结构
if分支语句  单分支 双分支 多分支
单分支if语法

    使用的语法:

        if(条件){

            满足条件要执行的代码

        }

双分支if语法

        if(条件){

            满足条件执行的代码

        }

        else{

            不满足条件执行的代码

        }

多分支if语句:(适合于有多个结果的时候,比如学习成绩可以分为:优 良 中 差)

        if(条件){

            代码1

        }

        else if(条件2){

            代码2

        }else{

            代码3

        }

注意点:

括号内的条件为true时,进入大括号里执行代码

小括号内的结果若不是布尔类型时,会发生隐式转换 转为布尔类型

如果大括号只有一个语句,大括号可以省略,但是,我们不会这么做

案例

 <script>

        // //单分支if语法

        // if(true){

        //     console.log('我被执行了')

        // }

        // // -------------------

        // // 除了0所有数字都为真

        // if(0){

        //     console.log('不会被执行');

        // }

        // // --------------------

        // // 除了''(空字符串)所有的字符串都为真

        // if(''){

        //     console.log('我也不会被执行');

        // }

        //双分支if语法

       

        // 判断用户登录案例

        // 需求:用户输入,用户名pink,密码:123456,提示登陆成功,否则提示登陆失败

        /*

        分析:

        弹出输入框,分别输入用户名和密码

        通过if语句判断,如果用户名是pink,并且密码是123456,则执行if的语句,否则执行elese的语句

        */

            // 1.用户输入

        // let username = prompt('请输入管理员的用户名')

        // let password = prompt('请输入管理员的密码')

        //     // 2.判断输出

        // if(username === 'pink' && password === '123456' ){

        //     alert('恭喜你登录成功')

        // }

        // else{

        //     alert('用户名或者密码错误')

        // }

       

作业

// // 用户输入成绩,如果分数大于700,则提示恭喜进入课程

// // 1.用户输入

// let promes = prompt('请输入你的成绩')

// // 2.进行判断输出

// if(promes>=700){

//     alert('恭喜进入本学校')

// }

// 1用户输入,如果工龄大于1年,年底奖金+2000 否则年底没奖金

// // 1.用户输入

// let pro = prompt('请输入你得工龄')

// // 2.输出奖金

// if(pro >= 365){

//     alert('奖励2000')

// }

// else{

//     alert('继续努力')

// }

判断闰年案例

// 需求:让用户输入年份,判断这一年是闰年还是平年并弹出对应的警示框

// 分析

// 1.能被4整除但不能被100整数,或者被400整除的年费是闰年其他都是平年

// 2.需要用到逻辑运算符

// 1.用户输入

// let year = +prompt('输入年份')

// // 2.判断输出

// if(year % 4 === 0 && year % 100 !== 0 || year % 400 === 0){

//     alert(`${year}为闰年`)

// }else{

//     alert(`${year}为平年`)

// }

输入成绩案例

/*

注:

成绩90以上是 优秀

成绩70-90是  良好

成绩60-70是  及格

成绩60以下是  不及格

*/

// 1.输入成绩

// let sub = +prompt('请输入你的成绩')

// // 2.判断输出

// if(sub>=90){

//     alert('你的成绩是优秀')

// }else if(sub>=70 && sub<90){

//     alert('你的成绩是良好')

// }

// else if(sub>=60 && sub<70){

//     alert('你的成绩是及格')

// }

// else{

//     alert('你的成绩不及格')

// }

// 根据不同的时间输出不同的问候语

// 用户输入

let time = +prompt('请输入时间')

// 输出

if(time === 2){

    alert('现在是下午2点不是早上2点')

}else if( time === 3){

    alert('现在是下午3点不是早上3点')

}

else if(time === 4){

    alert('现在是下午4点不是早上4点')

}

else{

    alert('时间还在加载请您休息一下')

}

// 刚刚这里不是全等所以我犯了一个很重要的错误! 书写的时候要用全等比较好 请注意一下

// 而这种是因为'' 里面包含的是字符串 你输入的数字是无效的 注意一下

    </script>

**while语句 **

循环:重复执行一些操作,while:在...期间,所以while循环就是在满足条件期间,重复执行某些代码

while 循环基本语法:

   while(循环条件){

要重复执行的代码(循环体)

}

释义:跟if语句很像,都要满足小括号里的条件为true才会进入循环体执行代码

while大括号里代码执行完毕后不会跳出,而是继续会到小括号里判断条件是否满足,若满足又执行大括号里的代码,然后再会到小括号判断条件,直到括号内条件不满足,即跳出  

while循环三要素:

循环的本质就是以某个变量为起始值,然后不断产生变化量,慢慢靠近终止条件的过程

1.变量起始值

2.终止条件(没有终止条件,循环会一致执行,造成死循环)

3.变量变化量(用自增或自减)

let i = 1

while(i<=5){

document.write('我被执行了5次')

   i++

}

while循环的作用是什么?

答:在满足条件期间,重复执行某些代码

while循环三要素:

答:

1.变量起始值

2.终止条件(没有终止条件,循环会一致执行,造成死循环)

3.变量变化量(用自增或自减)

//变量起始值

let age = 15;

//终止条件

while (age <= 18) {

document.write("我被执行了4次 ");

//变量变化量

age++;

}

练习:

作业:在页面中打印输出10句”月薪过万”

需要:使用while循环,页面中打印,可添加换行结果

let i = 1;

while (i <= 10) {

document.write("月薪过万<br>");

i++;

}

思考:能不能改进,让用户输入打印输出的个数呢?

let a = 1;

let i = +prompt("输入一个数");

while (a <= i) {

document.write(`我被执行了${a} <br>`);

a++;

}

while练习

需求:使用while循环,页面中打印,可添加换行效果

1.页面输出1-100

2.计算从1到100的总和并输出

3.计算1-100之间的所有偶数和

 1.页面输出1-100

声明1个变量名 num

let num = 1;

循环 num <=100

while (num <= 100) {

// 输出

document.write(`${num} <br>`);

// 记得每次+1

num++;

}

解题思路 声明一个变量名为1 执行循环while 然后每次自增+1就行了

 2.计算从1到100的总和并输出

// 核心思路:声明累加和的变量 sum 每次把i加到sum里面

// 声明两个变量名 num , i

let sum = 0; //存放

let i = 1; //初始值

while (i <= 100) {

sum = sum + i; //原写  利用循环每次加1放到容器num中 如果判断到i>100之后就跳出循环

sum += i; //简写

i++;

document.write(`${sum} <br>`);

}

//大概原理就是这样

3.计算1-100之间的所有偶数和

// 思路:声明累加和的变量sum 首先利用if语句把 i里面的偶数筛选出来 把筛选的i加到sum里面

// 继续声明2个变量 i , sum

let i = 1; //初始值

let sum = 0; //容器

      // // 执行循环

while (i <= 100) {

if (i % 2 !== 0) {

sum += i;

}

i++;

      //   document.write(`${sum} <br>`);

      // }

      //具体操作就是做了一个if判断取偶数的余数 才会执行sum += i; 奇数就是这么写我记错了 3/2余数也是1 5/2所以为4余数 ok

循环退出

break:退出循环

continue:结束本次循环,继续下次循环

// 打印5句话

 let i = 1;

  while (i < 5) {

    if (i ===  3) {

   break;

    }

  i++;

  console.log(`执行了${i}次`);

}

  while (i < 5) {

        if (i === 3) {

          i++;

          continue;

        }

        console.log(`执行了${i}次`);

        i++;

    }

 区别:

    continue 退出本次循环,一本用于排除或者跳出某一个选项的时候,可以使用continue

    break 退出整个循环,一般用于结果已经得到,后续的循环不需要的时候可以使用

switch语句

释义:找到根小括号里数据全等的case值,并执行里面对应的代码 若没有全等 === 的则执行default里面的代码

例如:数据若跟值2全等,则执行代码2

 --------------------------

1.switch case语句一般用于等值判断,不适合于区间判断

---------------------------

2.switch case一般需要配合break关键字使用 没有break会造成case穿透

---------------------------

例如:数据若跟值2全等,则执行代码2

语句结构:

switch(数据) {

case 值1: 代码1

    break

case 值2: 代码2

    break

default: 代码n

    break

}

练习:

 <script>

      /*

            页面弹框

            需求:页面弹出对话框,'你爱我吗?'如果输入'爱',则结束,否则一直弹出对话框

            分析:

            1.循环条件永远为真,一直弹出对话框

            2.循环的时候,重新让用户输入

            3.如果用户输入的是:爱,则退出循环(break)

        */

      while (true) {

        let abc = prompt("你爱我吗");

        // 退出条件 爱

        if (abc === "爱") {

          break;

        }

      }

    </script>

练习2:

 <script>

      /*

            需求:用户可以选择存钱,取钱,查看余额和退出功能

            分析:

            1.循环的时候,需要反复提示输入框,使用提示框写道循环里面

            2.退出的条件是用户输入了4,如果是4,则结束循环,不在弹窗

            3.提前准备一个金额先存储一个数额

            4.取钱则是减法操作,存钱则是加法操作,查看余额则是直接限时金额

            5.输入不同的值,可以使用switch来执行不同操作

        */

      // 步骤

      // 3.提前准备一个金额先存储一个数额

      let money = 0;

      //  1.循环的时候,需要反复提示输入框,使用提示框写道循环里面

      while (true) {

        let num = +prompt(`

                操作提示:

                1.存钱

                2.取钱

                3.查看余额

                4.退出

            `);

        // 2.退出的条件是用户输入了4,如果是4,则结束循环,不在弹窗

        if (num === 4) {

          break; //退出循环

        }

        // 4.取钱则是减法操作,存钱则是加法操作,查看余额则是直接限时金额

        switch (num) {

          case 1:

            //存钱

            let cun = +prompt("请输入你要存入的金额");

            money += cun;

            break;

          case 2:

            //取钱

            if (money <= 0) {

              alert("余额不足");

            } else {

              let qu = +prompt("请输入你要取走的金额");

              money -= qu;

            }

            break;

          case 3:

            //查看

            alert(`你的余额为${money}`);

            break;

        }

      }

    </script>

练习3:

<script>

      // switch (1) {

      //   case 1: //1:值

      //     console.log("你选择的是1"); //代码

      //     break; //退出循环

      //   case 2:

      //     console.log("你选择的是2");

      //     break;

      //   case 3:

      //     console.log("你选择的是3");

      //     break;

      //   default:

      //     console.log("你选择的是n");

      //     break;

      // }

      /*

          练习1:需求:用户输入2个数字,然后输入+ - * / 任何一个,可以计算结果

          思路定义三个变量,num1, num2, ps 把ps变量给switch的值 让他形成判断 定义case 的+ - * /

        */

      //  1.用户输入数字

      let num1 = +prompt("请输入第一个数");

      let num2 = +prompt("请输入第二个数");

      let ps = prompt("请输入+ - * / 中任何一个数");

      // 2.用户输入不同算术运算符,可以区执行不同的运算(switch)判断输出

      switch (ps) {

        case "+":

          alert(`你的计算结果是${num1 + num2}`);

          break;

        case "-":

          alert(`你的计算结果是${num1 - num2}`);

          break;

        case "*":

          alert(`你的计算结果是${num1 * num2}`);

          break;

        case "/":

          alert(`你的计算结果是${num1 / num2}`);

          break;

        default:

          alert(`没有你想要的结果`);

      }

      //所以这里我们的实现就结束了!

    </script>

练习4

 <script>

      // switch简单计算

      // 1。用户输入参数

      let num1 = +prompt("请输入第一个参数");

      let ps = prompt("请输入+ - * / ");

      let num2 = +prompt("请输入第二个参数");

      // 2.计算输出结果

      // 定义switch的值

      switch (ps) {

        // 解释为啥是ps 这里定义的是一个判断值然后对应的是case 里的字符串

        case "+":

          alert(`你输入的数是${num1 + num2}`);

          break;

        case "-":

          alert(`你输入的数是${num2 - num2}`);

          break;

        case "*":

          alert(`你输入的数是${num1 * num2}`);

          break;

        case "/":

          alert(`你输入的数是${num1 / num2}`);

          break;

        default:

          alert(`你干嘛? 我是要你输入+ - * /`);

      }

    </script>

正则表达式

^ 表示匹配输入字符串的开始位置

(?!^\\d+$) 表示不允许全是数字

(?!^[a-z]+$) 表示不允许全是小写字母

(?!^[A-Z]+$) 表示不允许全是大写字母

(?!^[^a-z0-9]+$) 表示不允许全是除小写字母和数字之外的字符

(?!^[^A-Z0-9]+$) 表示不允许全是除大写字母和数字之外的字符

(?!^.*[\\u4E00-\\u9FA5].*$) 表示不允许包含中文字符

^\\S*$ 表示匹配任何不包含空格的字符

基础第三天

if多分支语句和switch的区别:

共同点

都能实现多分支选择,多选1

大部分情况下可以呼唤

2.区别:

switch case语句通常处理case为比较确定值的情况,二if else语句更灵活,通常用于范围判断(大于,等于某个范围)

switch语句进行判断后直接执行到程序的语句,效率更高,而if else 语句由几种判断方式,就得判断多少次

switch一定要注意 必须是(===)全等,一定要注意 数据类型,同时注意break会有穿透效果

结论

当分支比较少的时候,用if else多分支语句执行效率高

当分支比较多,switch语句执行效率高,而且结构清晰

本文作者:Veam
本文链接:https://github.com/veam23/lonely0323.github.io/2023/03/13/javaScript/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可
×