3.2JavaScript网页编程——JavaScript网页编程基础

这里写目录标题

- 总体JS知识流程
- JS基本知识
- - JS组成
  - 引入方式：内联、内部形式、外部
  - 输入输出
  - 字面量
  - let（推荐）和var（面经有）
  - 变量（标识符）规则（3+1（不能数字开头））
  - typeof 关键字检测数据类型
  - JS数据类型
  - 模板字符串${age}
  - 数据类型的转换
  - 表格变量例子
  - 运算符
  - 逻辑运算符里的短路(中断与否)（5个假的），先算&&后||
  - 表达式和语句
  - case
- 浏览器断点
- - 循环
  - 数组操作（增push\unshift删pop\shift\slice改查）
  - 综合案例
  - 匿名函数
  - 立即执行函数
  - 案例——时、分、秒
  - 参数个数!
  - 对象
  - 表格渲染数据
  - Math内置对象
  - 任意范围随机数
  - 案例——根据数组对象渲染排版
  - 其他补充JS知识
- 补充

VScode主题：one dark pro插件

总体JS知识流程

在这里插入图片描述

JS基本知识

JS组成

ECMAscript、DOM、BOM

引入方式：内联、内部形式、外部

如果 script 标签使用 src 属性引入了某 .js 文件，那么标签的代码会被忽略！！！如下代码所示：

<body><!-- 内联形式：通过 script 标签包裹 JavaScript 代码 --><script>alert('嗨，欢迎来传智播学习前端技术！');</script><!-- 内部--><button @click="alert('月薪过万')">点击</button><!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 --><script src="demo.js">// 此处的代码会被忽略掉！！！！alert(666);  </script>
</body>

输入输出

一输入三输出：

document.write(‘要输出的内容’); //语句的分号可加可不加
alert(‘要输出的内容’);
console.log(‘xxx’);
prompt(‘请输入您的姓名:’);以弹窗形式提示用户输入，//输入的是一个字符串类型

字面量

在这里插入图片描述

let（推荐）和var（面经有）

以下是使用 let 时的注意事项：

允许声明和赋值同时进行
不允许重复声明
允许同时声明多个变量并赋值
JavaScript 中内置的一些关键字不能被当做变量名

以下是使用 var 时的注意事项：
在这里插入图片描述

变量（标识符）规则（3+1（不能数字开头））

只能是字母、数字、下划线、$，且不能能数字开头
字母区分大小写，如 Age 和 age 是不同的变量
JavaScript 内部已占用于单词（关键字let、var或保留字int等）不允许使用
尽量保证变量具有一定的语义，见字知义，推荐小驼峰后面单词首字母大写

typeof 关键字检测数据类型

<script> // 检测 1 是什么类型数据，结果为 numberdocument.write(typeof 1);// typeof 结合字符串隐式转化let num = 10console.log(typeof num + '11') // number11console.log(typeof(num + '11')) // stringconsole.log(typeof(num + +'11')) // number
</script>

JS数据类型

注：JavaScript 中变量的值决定了变量的数据类型

注意是number不是integer
undefine未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

在这里插入图片描述

<script>let temperature = -40; // 负数document.write(typeof temperature); // 结果为 number// 只声明了变量，并末赋值let tmp;document.write(typeof tmp); // 结果为 undefined
</script>

模板字符串${age}

字符串拼接比较麻烦，直接用模板字符串
模板字符串可以加标签，可以设置样式

<head><style>span {color: pink;</style>
</head>
<body><script>let age = 81document.write(`我今年<span> ${age + 1} </span>岁了`)</script></body>

数据类型的转换

为什么要进行数据类型的转化

隐式的转换

在这里插入图片描述

一些例子

显示的转换——number

通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。
parseInt()只保留整数部分、parseFloat()会保留小数
Number和parseFloat的区别,前者不成功会NAN，后者只留下数值（所以经常被用于过滤单位）parseFloat(‘100px’)是100，但是前面也有字母则不行了

// 并不是所有的值都可以被转成数值类型
let str = ‘hello’;
// 将 hello 转成数值是不现实的，当无法转换成
// 数值时，得到的结果为 NaN （Not a Number）

显示的转换2_string

通过String(变量),例如，String(10)
通过变量age.toString()
或者变量age.toString(2),括号里面是二进制的意思

表格变量例子

在这里插入图片描述

弹窗3个输入数据后随输入数据渲染了这样的表格

运算符

以后判断要用===，开发常用，要值和类型都一样
还有最好用!==

console.log(5 == ‘5’) // true，只要值一样，不管数据类型
console.log(5 === ‘5’) //false

NaN不等于任何值，包括它本身
尽量不要比较小数，因为小数有精度问题，例如 0.1 + 0.2 === 0.3这种false 可能是0.3000000000004
不同类型之间比较会发生隐式转换

逻辑运算符里的短路(中断与否)（5个假的），先算&&后||

逻辑中断原因：通过左边能得到整个式子的结果，因此没必要再判断右边
运算结果：无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值

特殊的几个为假的：undefine、null、0、false、‘’ 这五个和&&直接不用判断后面和 ||直接看后面，（nan是非数值，所以不考虑，一般也可以暂且看做false，在if条件里面也是）

当传入的没有参数，一般undefine+undefine=NAN
为了防止这种报错，就用 || 进行一个处理，这样undefine || 0 是0…

在这里插入图片描述

先一元运算符，再算逻辑运算符，在逻辑中先算&&，再算||

在这里插入图片描述

表达式和语句

程序三大流程控制语句：顺序、分支（if、三元、swich）、循环

在这里插入图片描述

案例——数字补0

在这里插入图片描述
其实0也可以不加引号,prompt

case

简单个值用swich直接找，快。
有范围就用多分支吧
在这里插入图片描述

在这里插入图片描述
如果是字符串相应的都要换

在这里插入图片描述

简易计算器

在这里插入图片描述

浏览器断点

打了要刷新页面，重新执行，不要了再点去掉即可。
在这里插入图片描述

在这里插入图片描述

循环

continue,直接退出本次循环，不再执行后面的语句，进行下一次循环
break,退出所有循环，结束
在这里插入图片描述

数组操作（增push\unshift删pop\shift\slice改查）

在这里插入图片描述

增push\unshift

let arr = []就初始化定义了一个空数组

1.数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度，例如arr.push(‘ewer’,‘rewt’)，添加之后是[…,‘ewer’,‘rewt’]
2.arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度arr.unshift(‘ewer’,‘rewt’)，添加之后是[‘ewer’,‘rewt’,…]

删pop\slice(应用场景：抽奖、删除指定商品）

数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值,无参数
数组. shift() 方法从数组中删除第一个元素，并返回该元素的值,无参数
数组. splice(start, delectCount) 方法删除指定元素,起始位置+删几个（如果delectCount省略则默认从指定的起始位置删除到最后）

shift是删除、unshift就是加