Bootstrap

JavaScript基础1

1. Javascript介绍

1.1 Javascrip是什么

JS是一种运行在客户端（浏览器）的编程语言，实现人机交互效果

1.2 JS的作用

  • 网页特效
  • 表单验证
  • 数据交互
  • 服务端编程（node.js)

1.3 Javascript书写位置

  • 内联

    内联的方式，由于破坏了html的结构，非常不推荐

    <button onclick="alert('你点击了我！')">点我</button>

  • 内部

    直接写在html文件中，用script标签包住

    规范：script标签内写在<body> ... </body>中

    注意：JS要写在html文件的底部。因为客户端要先加载样式（html + css），再加载JS。如果先加载JS，期望修改其下方的HTML，那么有可能由于HTML尚未被加载而失效。因此要将JS代码放置再HTML的底部通常是最好的策略。

    <body>
    <h1>123</h1>
<!--    内部js-->
    <script>
        alert('你好，js')
    </script>
</body>

  • 外部
    在html的外部创建一个file.js的文件，再使用src进行引用。

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

1.4 Javascript的注释

  • 单行注释

    符号：//

    快捷键：ctrl+/

    //这是一行注释

  • 多行注释

    符号：/* … */

    快捷键：shift+alt+A

    /* 
    第一行
    第二行
*/

1.5 Javascript的结束符

分号;为JS的结束符，但是可以不写分号。

1.6 输入与输出语法

什么是语法：人和计算机打交道的规则约定。

输出和输入也可理解为任何计算机的交互，用户通过键盘，鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

1.6.1 输出语法

  • 向body内输出内容：document.write

    document.write('要输出的内容');

    如果输出的内容写的是标签，也会被解析成网页元素。

  • 弹出警示内容（对话框）：alert

    alert('要输出的内容')
控制台输出： console.log 
console.log('控制台输出')

1.6.2 输入语法

prompt('请输入您的年龄：')

2. 变量

2.1 字面量

“字面量”（Literal）在编程语言中，指的是在代码中直接表示值的表达式。字面量表示的是固定的值，而不是通过计算得到的值。例如，在JavaScript中，123是一个整数字面量，而"hello"是一个字符串字面量。

2.2 变量是什么

变量是计算机内存中开辟一个空间，用来储存数据的容器。

2.3 变量的基本使用

  1. 声明变量
  • 语法：
let 变量名

  • 声明变量有两部分构成：声明关键字（let），变量名（标识）

  • let即关键字，所谓关键字就是系统提供的专门用来声明（定义）变量的词语，例如

    let age;

  • age即变量的名称，或称为标识符

  1. 变量赋值：

定义了一个变量后，你就可以初始化它（赋值）。在变量后跟一个=，然后是数值

    <script>
        // 声明变量
        let age ;
        age = 18;
        console.log('我的年龄是',age)
        // 变量初始化
        let name = 'MT'
        console.log(name,'的年龄是',age)
        // 同时声明多个变量，不推荐这么写
        let teacher = 'pink',grade = '3'
    </script>

注意：
同一个变量名只能被声明1次，如果同一个变量名被声明2次，网页客户端会报错：
Uncaught SyntaxError:Identifier '变量名' has already been declared.
多个变量赋同一个值的方法：

let a = b = 10;

案例1：

  1. 输入：用户输入姓名
  2. 输出：网页上直接显示用户输入的姓名
<script>
    let uname=prompt('请输入姓名：')
	document.write(uname)
</script>

案例2：
2. 有2个变量：num1为10，num2为20.要求交换变量

<script>
    let num1 = 10;
    let num2 = 20;
    let num3;
    num3 = num1;
    num1 = num2;
    num2 = num3;
    document.write('num1:',num1,'<br>num2:',num2)
</script>

2.4 变量的本质

内存：计算机中存储数据的地方，相当于一个空间。

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

变量其实就是内存空间的一个命名，他与内存地址会有一个映射关系。

JS的变量会有回收机制。变量声明后，如果不使用，会被回收。

变量命名规则和规范

命名规则：违反后会报错

  • 变量名不能使用关键字，如let，var,if,for等
  • 只能使用下划线，字母，数字，$组成，且数字不能开头
  • 字母严格区分大小写

命名规范：

  • 起名要有意义
  • 遵循小驼峰：首单词首字母小写，后面每个单词首字母都大写，如myFirstName

let和var区别

let为了解决var的一些问题

  • var可以先使用 再声明
  • var声明过的变量可以重复声明
  • 比如变量提升，全局变量，没有块级作用域等等
<script>
    age = 10
    var age
    console.log(age)
</script>

变量拓展

  1. 数组：一个变量只能存一个数值吗？

    Array是一种可以按顺序保存多个数据

    let arr = [数据1,数据2, ... ,数据n] //数组字面量
    • 下标：数组是按顺序保存的，第一个元素的编号为0，第二个为1，以此类推。这个索引号称为下标。
    • 按照下标进行取值
    • 获得数组的长度array_name.length
    <script>
    let arr = ['马超','黄忠','关羽','张飞','赵云']
    console.log(arr)
    console.log(arr[0])
    console.log(arr.length)
</script>

3. 常量

3.1 概念

使用const声明的变量称为“常量”

3.2 使用场景

当某个变量永远不会改变的时候，就可以使用const声明，而不是let

3.3 常量使用规范

  1. 常量声明时必须赋值

    const PI = 3.14;

  2. 常量不允许重新赋值

  3. 常量命名时，一般都是使用大写

4. 数据类型

4.1 JS中的数据类型

Javascript是弱数据类型指的是在编程语言中，变量的数据类型可以被忽视或灵活变化的语言特性。若数据类型，声明时可以不指定数据类型，赋值之后才会指定数据类型。。与强类型语言（强制数据类型定义）不同，弱类型语言允许一个变量赋不同数据类型的值。比如C语言就是强语言类型。

比如C语言声明整数型int num;,JavaScript声明变量就是let num;。

  • 基本数据类型

    • number

      整数，小数，负数

    • string

    • boolean

    • undifined：未定义型

    • null：空值

  • 引用数据类型（复杂数据类型）

    • object：对象
    • function：函数
    • array：数组

4.2 数值型

四则运算： + - * / %.%为取余运算。

案例：计算圆的面积

需求：对话框中输入圆的半径，算出圆的面积并显示到页面

<script>
    const PI = 3.14;
    let r = prompt("输入半径：")
    s = PI * r * r;
    document.write("s = ",s);
</script>
  • 特殊的数据类型Nan

4.3 字符串

使用单引号''双引号""包裹起来的为字符串类型。``反引号括起来的也是字符串

    <script>
        let num=123;
        let str='123'
        console.log(num)
        console.log(str)
    </script>

运行后可以看出，数值型是蓝色的字体。文本型是黑色的
![在这里插入图片描述]

4.3.1 字符串的嵌套：外单内双 或 外双内单

console.log('我是"pink德华"')

4.3.2 转义符：\

console.log('我是\'pink德华\'')

4.3.3 字符串的拼接

字符串的拼接使用 +

console.log('刘德华' + '忘情水')
console.log('我今年年龄是：'+18)
let age = 18
console.log('我的年龄是：' + age)

注意：隐性转换，字符串与数字拼接后，数字也会变成字符串

案例1：

html弹出窗体，让用户输入名字。然后再弹出窗体，你的名字是：…

<script>
    let name = prompt('请输入你的名字')
	// 注意：这里alert('你的名字是',name) 这样是错误的，因为逗号不能用于联接变量
    alert('你的名字是' + name)
</script>

4.3.4 模板字符串

  • 作用

    拼接字符串和变量，也可以理解为在字符串中可以嵌套一个变量

  • 符号：``

    内容拼接变量时，用${}包住变量

    在引用变量时，可以直接进行计算

    <script>
    let age = 18;
    document.write(`我今年${age}岁了`)
    document.write(`
	<div>123</div>
	<p>abc</p>
	`)
</script>

​ 案例：15-输入姓名和年龄案例

​ 需求：页面弹出对话框，输入名字和年龄，页面显示：大家好，我叫xxx，今年xxx岁了，明年xxx岁了

<script>
    let uname = prompt("你的名字？")
    // 注意通过prompt获得的数据类型都是文本型，如果想参与计算，需要将数据类型转化为数值型
    let age = Number(prompt('你多大了'))
    document.write(`我的名字叫${uname}，我今年${age},明年${age+1}`)
</script>

备注：因为通过prompt获取的变量都是字符串类型，因此需要使用Number对prompt的内容进行数值转化，或者使用let age = +(prompt('你多大了'))

4.4 boolean

表示肯定或否定时在计算机中对应的时布尔类型数据。

他有两个固定的值true和flase,表示肯定的数据用true（真），表示否定的数据用false（假）。

4.5 undefined

只声明不赋值的变量就是undefined

let age
console.log(age)

使用场景：需要接受用户的信息，不断检测变量，如果数据类型一直是undefined，则证明用户没有传过来信息。我们就会执行一些动作。

4.6 null

let age = null
console.log(age)

null是放对象的

注意：null与undefined的区别

  • null是赋值了，赋的值为null
  • undefined是没有赋值

使用场景：将来有个变量里面存放的是一个对象，但是对象还没有创建好，可以先给一个null

let obj = null;
console.log(typeof obj);
console.log(typeof (obj + 1))
console.log(obj + 1)

object
number
1

4.7 总结

情况说明结果
let age;console.log(age)只声明，未赋值undefined
console.log(age)不声明 不赋值 直接用报错
age = 10;console.log(age)不声明 只赋值 （不推荐）不报错
不推荐

4.8 数据类型的检测

  1. 控制台输出语句：

    蓝色为数字，黑色为字符串

  2. 使用typeof进行数据类型的检测

    <script>
    console.log(typeof '123')
    console.log(typeof 123)
	console.log(undefined)
	console.log(null)
</script>

课堂作业

<script>
    let num = 10;
    console.log(typeof num +'11')
    console.log(typeof(num +'11'))
    console.log(typeof(num + + '11'))
    console.log(num + +'11')
</script>

5. 类型转换

5.1 为什么要数据转换

JS是弱数据类型：JS也不知道变量到底属于哪种数据类型，只有赋值了才清楚。使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

let num = prompt('请输入一个数字')
console.log(typeof num)

string

5.2 隐式数据转换

某些运算时，系统内部自动进行数据转换。

规则：

  • +号两边只要有一个是字符串，就会把另外一个变为字符串
  • 除了+号以外的其他运算符（比如 - * /）都会把数据类型变为数字类型

缺点：

  • 转换类型不明确，需要经验才能总结

小技巧：

  • 通过+号作为正号解析可以转换成number

随堂示例

<script>
    console.log(1 + 1)
	console.log('pink'+1)
	console.log(2 + 2)
	console.log('2' + 2)
	console.log('2' - 2)
	console.log(2 - '2')
	console.log(typeof +'123')		//转换为数字型
</script>

2
pink1
4
22
0
0
number

5.3 显式数据转换

5.3.1 转为数字型

  • Number()：将字符串转换为数字
console.log(typeof Number('10'))
  • parseInt()：将字符串转换为整数，只保留整数位，没有四舍五入
console.log(parseInt('10.5555'))
  • parseFloat()：将字符串转换为小数
console.log(parseFloat('10.9999'))

Number与parseFloat的区别

Number()中只能放置字符型数字，不能放abc类文本，否则返回Nan(英文全称：not a number)

parseFloat()中只会将最左侧的数字提取出来，放弃abc类文本。

console.log(Number('10abc'))
console.log(parseFloat('10.11abc10'))

运行以上代码：

Nan
10.11

5.3.2 转为字符型

  • String()或变量.toString()

    console.log(String(10))
let age = 10
console.log(age.toString())
// 转换为2进制，一般不使用
console.log(age.toString(2))

案例：输入2个数字，计算和，打印到页面中

<script>
    let num1 = prompt('请输入第一个数字:')
    let num2 = prompt('请输入第二个数字:')
    result = parseFloat(num1) + parseFloat(num2)
    document.write(`<h1>运算的结果为${result}</h1>`)
</script>

注意：

  • 表单与prompt获取的数字均为字符串型

  • 字符串中使用变量，最外面是使用``，而不是 ’ ’

5.3.3 Boolean型转换

关键字Boolean

console.log(Boolean('pink'))
console.log(Boolean('1'))
console.log(Boolean('pink'))

6. ★实战案例:小米订单table

需求：

  • 需要输入3个数据，价格，数量，收货地址

  • 需要计算总的价格

  • 页面打印生成table

<script>
    // 单价与数量到后面需要做乘法，乘法可以将prompt的文本型隐式转化为数值型
    let price = +prompt('请输入商品单价：')
    let num = +prompt('请输入购买数量：')
    let address = prompt('请输入收货地址：')
    let total = price * num
    // html中渲染表格，填充数据
    document.write(
        `
	<table>
        <caption>
            <h2>订单确认</h2>
        </caption>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收货地址</th>
        </tr>
        <tr>
            <td>小米PLUS</td>
            <td>${price}元</td>
            <td>${num}台</td>
            <td>${total}元</td>
            <td>${address}</td>
        </tr>
    </table>
        `)
</script>

7. 运算符

7.1 算术运算符

  1. 算数运算符：加、减、乘、除、取余

  2. 取余：%

<script>
    console.log(4 / 2)
    console.log(4%2)
    console.log(2%4)
    console.log(5%8)
</script>

​ 求余数的使用场景：判断某个数字是否可以被整除

  1. 算数运算符的优先级

案例：计算元的面积

<script>
    let r = prompt('请输入半径：')
	let result = 3.14 * r * r
    document.write(`结果为:${result}`)
</script>

7.2 赋值运算符

赋值运算符：等于号=

其他赋值运算符：

+=,-=,*=,/=,%=

<script>
    let num = 0
    console.log(num += 1)
    let i = 1
    let sum = 0
    sum += i
</script>

7.3 一元运算符

let num = 10 + 20，+为二元运算符

一元运算符：如正负号

  • 自增：++

  • 自减：--

    注意：没有自乘或自除

7.3.1 自增运算符：

​ 之前的+=在Javascript中还有自增运算符进行代替：++,作用让变量值的值+1。使用场景：循环中的计数。

console.log(num++)
console.log(++num)

7.3.2 前置自增与后置自增

前置自增：++num。后置自增：num++

前置自增与后置自增单独使用没有什么区别。但是如果他们参与运算就有区别（难点）：

  • 前置自增：先自增再自赋值

  • 后置自增：先使用先不自加，执行完后一个运算步骤，再进行自增

7.4 比较运算符

7.4.1 比较运算符的介绍

作用：比较两个数据大小，是否相等

7.4.2 比较运算符的使用

  • >

  • <

  • >=

  • <=

  • ==：左右两边的值是否等于

    很少有人利用双等于进行判断

  • ===:左右两边是否类型和值都相等

    推荐使用三等

  • !==:左右两边是否不等于

    运算符实例描述
    ==A == BA.value == B.value
    ===A === B(A.value == B.value) and (A.type == B.type)
    !==A !== B(A.value == B.value) or (A.type == B.type)

7.4.3 比较运算符的细节

  1. 字符串也可以进行比较，因为是ASC码

  2. Nan不等于任何值，甚至它本身

  3. 不要比较小数，因为涉及精度问题

    console.log(0.1 + 0.2)

    0.30000000000000004

  4. 比较运算符存在隐式转换

    下面会将‘4’转换为数值4

    console.log(3 > '4')

7.5 逻辑运算符

7.5.1 逻辑运算符的介绍

提问：如果我想判断一个数据大于5且小于10，怎么办？

​ 错误写法：5 < value < 10

7.5.2 逻辑运算符的使用

符号名称日常读法
&&and与
||or或
!not非
<script>
    console.log(true && true)
    console.log(true || false)
    console.log(false || false)
    console.log(!true)
</script>

运算等级：非 --> 与 --> 或

7.5.3 逻辑运算符的短路

  • 短路：只存在于&& 和 || 中，当满足条件会让右边的代码不执行

    JavaScript的短路机制，相当于是否提前跳出代码块或执行完

    符号短路条件
    &&左边为false，右边不执行，直接判断为false
    ||左边为true，右边不执行，直接判断为true

  • 原因：通过左边能得到整个式子的结果，因此没有必要再判断右边

  • 运算结果：

    有5个值相当于false，其余为真的。

    • false
    • 数字0
    • 空字符串""
    • undefined
    • null
    console.log(undefined && 20)
console.log( 0 && 20)
console.log(null && 20)
console.log(10 && 20) //不断路，执行到右边

    undefined
0
null
20

    console.log(false || 20)		//20
console.log(5<3 || 20)			//20
console.log(undefined || 20)	//20
console.log(null || 20)			//20
console.log(0 || 20)			//20
console.log(10 || 20)			//10,短路10就为TRUE

案例：

判断一个数是4的倍数，且不是100的倍数

需求：用户输入一个数字，判断是否能被4整除，但是不能被100整除

<script>
    let num = parseInt(prompt('请输入一个数字：'))
    // 为了避免用户没有输入数值
    num = num || 0
    result = (num % 4 === 0) && (num % 100 !== 0)
    document.write(result)
</script>

7.6 运算符优先级

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

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
Flutter
qt 设置透明度
Leetcode 10. 正则表达式匹配
AI产品经理怎么做数据标注
STM32H750 QSPI + MDMA Flash的读写测试
代码随想录算法训练营第18天| LeetCode654. 最大二叉树 | 617.合并二叉树 | 700.二叉搜索树中的搜索 | 98.验证二叉搜索树
C语言 | Leetcode C语言题解之第224题基本计算器
vue父组件数据更新后，子组件页面没刷新
Zabbix如何配置接收Trap告警
线下伴玩系统接单平台开发【揭秘线下陪玩APP平台】陪玩师接私单背后的真相，平台如何从源头阻断？
;