JavaScript -【第一周】

news2025/1/24 11:31:32

文章来源于网上收集和自己原创,若侵害到您的权利,请您及时联系并删除~~~

JavaScript 介绍
变量、常量、数据类型、运算符等基础概念
能够实现数据类型的转换,结合四则运算体会如何编程。

  • 体会现实世界中的事物与计算机的关系
  • 理解什么是数据并知道数据的分类
  • 理解变量存储数据的“容器”
  • 掌握常见运算符的使用,了解优先级关系
  • 知道 JavaScript 数据类型隐式转换的特征

1. 介绍

1.1 JavaScript是什么?

什么是JavaScript?
是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。(P4)

作用(做什么?)

  • 网页特效 (监听用户的一些行为让网页作出对应的反馈) MIUI 13 开始·连接万物
  • 表单验证 (针对表单数据的合法性进行判断) 百度一下,你就知道 (baidu.com)
  • 数据交互 (获取后台的数据, 渲染到前端) 1
  • 服务端编程 (node.js)
    在这里插入图片描述

JavaScript的组成

在这里插入图片描述

  • ECMAScript: 规定了js基础语法核心知识。 比如:变量、分支语句、循环语句、对象等等

  • Web APIs :

    DOM 操作文档,比如对页面元素进行移动、大小、添加删除等操作

    BOM 操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等

JavaScript权威网站: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

小结:

  1. JavaScript是什么?

    JavaScript 是一种运行在客户端(浏览器)的编程语言

  2. JavaScript组成是什么?

    ECMAScript( 基础语法 )、web APIs (DOM、BOM)

体验:
点击切换按钮的案例-体验HTML+CSS+JS 实现交互效果
在这里插入图片描述

1.2 引入方式

掌握 JavaScript 的引入方式,初步认识 JavaScript 的作用
在这里插入图片描述

JavaScript 程序不能独立运行,它需要被嵌入 HTML 中,然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中,有三种方式:

1.2.1 内部方式(嵌入式)

通过 script 标签包裹 JavaScript 代码
直接写在html文件里,用script标签包住
规范:script标签写在上面
拓展: alert(‘你好,js’) 页面弹出警告对话框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 内联形式:通过 script 标签包裹 JavaScript 代码 -->
  <script>
    alert('嗨,欢迎来前端技术!')
  </script>
</body>
</html>

注意

  • 我们将 <script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。
  • 如果先加载的 JavaScript 期望修改其下方的 HTML,那么它可能由于 HTML 尚未被加载而失效。
  • 因此,将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。

1.2.2 外部形式(外链式)

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中,然后通过 script 标签的 src 属性引入

// demo.js
document.write('嗨,欢迎来前端技术!')
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js"></script>
</body>
</html>

注意:如果 script 标签使用 src 属性引入了某 .js 文件,那么 标签的代码会被忽略!!!如下代码所示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js">
    // 此处的代码会被忽略掉!!!!
  	alert(666);  
  </script>
</body>
</html>

1.2.3 行内式

代码写在标签内部
注意: 此处作为了解即可,但是后面vue框架会用这种模式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
   
  <button onclick="alret('逗你玩儿')"></button>
</body>
</html>

小总结

  1. JavaScript三种书写位置?

    内部

    外部

    行内

  2. 注意事项:

    书写的位置尽量写到文档末尾 </body> 前面

    外部 js 标签中间不要写代码,否则会被忽略

练习1

需求:请用外部和内部两种 JavaScript 书写方式,页面弹出: 努力,奋斗
时间:5分钟
外部:

  1. 新建js文件假 --> 新建 my.js 文件
alert('努力奋斗')
  1. 在html文件引用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
	<script src="../js/my.js"></script> 
</body>
</html>

内部:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
     alert("努力,奋斗")
  </script>
</body>
</html>

1.3 注释和结束符

通过注释可以屏蔽代码被执行或者添加备注信息,JavaScript 支持两种形式注释语法:

1.3.1 单行注释

使用 // 注释单行代码

作用:// 右边这一行的代码会被忽略

快捷键:ctrl + /

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 注释</title>
</head>
<body>
  
  <script>
    // 这种是单行注释的语法
    // 一次只能注释一行
    // 可以重复注释
    document.write('嗨,欢迎学习前端技术!');
  </script>
</body>
</html>

1.3.2 多行注释

使用 /* */ 注释多行代码

作用:在/* 和 */ 之间的所有内容都会被忽略

快捷键:shift + alt + A

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 注释</title>
</head>
<body>
  
  <script>
    /* 这种的是多行注释的语法 */
    /*
    	更常见的多行注释是这种写法
    	在些可以任意换行
    	多少行都可以
      */
    document.write('嗨,欢迎学习前端技术!')
  </script>
</body>
</html>

1.4 结束符

在 JavaScript 中 ; 代表一段代码的结束,多数情况下可以省略 ; 使用回车(enter)替代。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 结束符</title>
</head>
<body>
  
  <script> 
    alert(1);
    alert(2);
    alert(1)
    alert(2)
  </script>
</body>
</html>

实际开发中有许多人主张书写 JavaScript 代码时省略结束符 ;

约定:为了风格统一,结束符要么每句都写,要么每句都不写(按照团队要求.)

小结:

  1. JavaScript 注释有那两种方式?

    单行注释 //

    多行注释 /* */

  2. JavaScript 结束符注意点

    结束符是分号 ;

    结束符可以省略吗?Yes

    但为了风格统一,结束符要么每句都写,要么每句都不写

1.5 输入和输出

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

举例说明:如按键盘上的方向键,向上/下键可以滚动页面,按向上/下键这个动作叫作输入,页面发生了滚动了这便叫输出。

1.5.1 输出

JavaScript 可以接收用户的输入,然后再将输入的结果输出:

alert()document.wirte()console.log()

以数字为例,向 alert()document.write()输入任意数字,他都会以弹窗形式展示(输出)给用户。

1.5.2 输入

prompt() 输入任意内容会以弹窗形式出现在浏览器中,一般提示用户输入一些内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 输入输出</title>
</head>
<body>
  
  <script> 
    // 1. 输入的任意数字,都会以弹窗形式展示
    document.write('要输出的内容')
    alert('要输出的内容');

    // 2. 以弹窗形式提示用户输入姓名,注意这里的文字使用英文的引号
    prompt('请输入您的姓名:')
  </script>
</body>
</html>

练习2

时间:5分钟
需求:

  • 浏览器中弹出对话框: 你好 JS~ alert()
  • 页面中打印输出: 你好 JS~ document.write()
  • 页面控制台输出:你好 JS~ console.log()
 document.write("你好,js")
 alert("你好,js")
 console.log("你好,js")

JavaScript 代码执行顺序:

  • 按HTML文档流顺序执行JavaScript代码
  • alert()prompt() 它们会跳过页面渲染先被执行(目前作为了解,后期讲解详细执行过程)

1.6 字面量

目标:能说出什么是字面量
在计算机科学中,字面量(literal)是在计算机中描述 事/物
比如:

  • 我们工资是: 1000 此时 1000 就是 数字字面量
  • ‘学子’ 字符串字面量
  • 还有接下来我们学的 [] 数组字面量 {} 对象字面量 等等

总结:

  1. JavaScript是什么?

    JavaScript是一门编程语言,可以实现很多的网页交互效果。

  2. JavaScript 书写位置?

    内部 JavaScript

    内部 JavaScript – 写到 标签上方

    外部 JavaScript - 但是

2. 变量

理解变量是计算机存储数据的“容器”,掌握变量的声明方式

在这里插入图片描述

变量是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆,通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】(数据)

在这里插入图片描述

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

<script>
  // x 符号代表了 5 这个数值
  x = 5
  // y 符号代表了 6 这个数值
  y = 6
    
  //举例: 在 JavaScript 中使用变量可以将某个数据(数值)记录下来!

  // 将用户输入的内容保存在 num 这个变量(容器)中
  num = prompt('请输入一数字!')

  // 通过 num 变量(容器)将用户输入的内容输出出来
  alert(num)
  document.write(num)
</script>

2.1 声明

要想使用变量,首先需要创建变量(也称为声明变量或者定义变量)
let 变量名

声明变量有两部分构成:声明关键字、变量名(标识)

let 即关键字 (let: 允许、许可、让、要),所谓关键字是系统提供的专门用来声明(定义)变量的词语

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
  
  <script> 
    // let 变量名
    // 声明(定义)变量有两部分构成:声明关键字、变量名(标识)
    // let 即关键字,所谓关键字是系统提供的专门用来声明(定义)变量的词语
    // age 即变量的名称,也叫标识符
    let age
  </script>
</body>
</html>

关键字是 JavaScript 中内置的一些英文词汇(单词或缩写),它们代表某些特定的含义,如 let 的含义是声明变量的,看到 let 后就可想到这行代码的意思是在声明变量,如 let age;

letvar 都是 JavaScript 中的声明变量的关键字,推荐使用 let 声明变量!!!

2.2 赋值

声明(定义)变量相当于创造了一个空的“容器”,通过赋值向这个容器中添加数据。
定义了一个变量后,你就能够初始化它(赋值)。在变量名之后跟上一个“=”,然后是数值

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
  
  <script> 
    // 声明(定义)变量有两部分构成:声明关键字、变量名(标识)
    // let 即关键字,所谓关键字是系统提供的专门用来声明(定义)变量的词语
    // age 即变量的名称,也叫标识符
    let age
    // 赋值,将 18 这个数据存入了 age 这个“容器”中
    age = 18
    // 这样 age 的值就成了 18
    document.write(age)
    
    // 也可以声明和赋值同时进行
    let str = 'hello world!'
    alert(str);
  </script>
</body>
</html>

小结

  1. 变量用什么关键字来声明?let
  2. 变量通过什么符号来赋值? = 这个符号我们也称为 赋值运算符
  3. 开发中我们经常声明的同时可以直接赋值?let age = 18

练习3

需求:

  1. 声明一个变量,用于存放用户购买的商品 数量 ( num ) 为 20 件
  2. 声明一个变量,用于存放用户的 姓名 ( uname ) 为 ’张三’
  3. 依次控制台打印输出两个变量
 let num = 18
 let uname = '张三'
 console.log(num,uname)

2.3 更新变量

在这里插入图片描述

2.4 声明多个变量

变量赋值后,还可以通过简单地给它一个不同的值来更新它。

let age = 18,uname = 'zhangsan'

let age = 18
let uname = 'zhangsan'

//为了更好的可读性,请一行只声明一个变量。

案例1
需求: 浏览器中弹出对话框: 请输入姓名, 页面中输出:刚才输入的姓名
分析:

  • ①:输入:用户输入框:prompt()
  • ②:内部处理:保存数据
  • ③:输出: 页面打印,document.write()
  let a = "zhangsan"
  document.write("你输入的姓名为:",a)

案例2
需求:
有2个变量: num1 里面放的是 10, num2 里面放的是20

最后变为 num1 里面放的是 20 , num2 里面放的是 10

目的:

  1. 练习变量的使用
  2. 为了后面冒泡排序做准备

在这里插入图片描述

  let num =20,num3=21
  let num2 = 21
  let temp 
  temp = num1
  num1 = num2
  num2 = temp
  console.log(num1,num2)

2.5 变量的本质

内存:计算机中存储数据的地方,相当于一个空间
变量本质:是程序在内存中申请的一块用来存放数据的小空间

在这里插入图片描述

2.6 关键字

JavaScript 使用专门的关键字 letvar 来声明(定义)变量,在使用时需要注意一些细节:

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

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

以下是使用 var 时的注意事项:

  1. 允许声明和赋值同时进行
  2. 允许重复声明
  3. 允许同时声明多个变量并赋值

大部分情况使用 letvar 区别不大,但是 let 相较 var 更严谨,因此推荐使用 let,后期会更进一步介绍二者间的区别。

2.7 变量名命名规则

关于变量的名称(标识符)有一系列的规则需要遵守:

  1. 只能是字母、数字、下划线、$,且不能能数字开头
  2. 字母区分大小写,如 Age 和 age 是不同的变量
  3. JavaScript 内部已占用于单词(关键字或保留字)不允许使用
  4. 尽量保证变量具有一定的语义,见字知义

规范:

  • 起名要有意义

  • 遵守小驼峰命名法

    第一个单词首字母小写,后面每个单词首字母大写。例:userName

注:所谓关键字是指 JavaScript 内部使用的词语,如 letvar,保留字是指 JavaScript 内部目前没有使用的词语,但是将来可能会使用词语。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 变量名命名规则</title>
</head>
<body>
  
  <script> 
    let age = 18 // 正确
    let age1 = 18 // 正确
    let _age = 18 // 正确

    // let 1age = 18; // 错误,不可以数字开头
    let $age = 18 // 正确
    let Age = 24 // 正确,它与小写的 age 是不同的变量
    // let let = 18; // 错误,let 是关键字
    let int = 123 // 不推荐,int 是保留字
  </script>
</body>
</html>

练习4

需求:让用户输入自己的名字、年龄、性别,再输出到网页
分析:

  • ①:弹出 输入 框(prompt): 请输入您的姓名 (uname): 用变量保存起来。

  • ②:弹出输入框(prompt) : 请输入您的年龄 (age): 用变量保存起来。

  • ③:弹出输入框(prompt) : 请输入您的性别(gender): 用变量保存起来。

  • ④:页面分别 输出 (document.write) 刚才的 3 个变量

  let uname = prompt("请输入姓名")
  let age = prompt("请输入你的年龄")
  let gender = prompt("请输入你性别")
  document.write(uname,age,gender)

3. 常量

概念:使用 const 声明的变量称为“常量”。

使用场景:当某个变量永远不会改变的时候,就可以使用 const 来声明,而不是let。

命名规范:和变量一致

const PI = 3.14

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

在这里插入图片描述

let — 现在实际开发变量声明方式。

var — 以前的声明变量的方式,会有很多问题。

const — 类似于 let ,但是变量的值无法被修改。

4. 数据类型

计算机世界中的万事成物都是数据。

说出JS中基本数据类型有哪些?

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

在这里插入图片描述

计算机程序可以处理大量的数据,为了方便数据的管理,将数据分成了不同的类型:

4.1 数值类型 (Number)

即我们数学中学习到的数字,可以是整数、小数、正数、负数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    let score = 100 // 正整数
    let price = 12.345 // 小数
    let temperature = -40 // 负数

    document.write(typeof score) // 结果为 number
    document.write(typeof price) // 结果为 number
    document.write(typeof temperature) // 结果为 number
  </script>
</body>
</html>

JavaScript 中的数值类型与数学中的数字是一样的,分为正数、负数、小数等。

注意事项

  • JS 是弱数据类型,变量到底属于那种类型,只有赋值之后,我们才能确认
  • Java是强数据类型 例如 int a = 3 必须是整数

数字可以有很多操作,比如,乘法 * 、除法 / 、加法 + 、减法 - 等等,所以经常和算术运算符一起。

数学运算符也叫算术运算符,主要包括加、减、乘、除、取余(求模)。

+:求和
-:求差
*:求积
/:求商
%:取模(取余数):开发中经常作为某个数字是否被整除

目标:能说出JavaScript算术运算符执行的优先级顺序

同时使用多个运算符编写程序时,会按着某种顺序先后执行,我们称为优先级。

JavaScript中 优先级越高越先被执行,优先级相同时以书从左向右执行。

  • 乘、除、取余优先级相同

  • 加、减优先级相同

  • 乘、除、取余优先级大于加、减

  • 使用 () 可以提升优先级

  • 总结: 先乘除后加减,有括号先算括号里面的~~~

练习5

需求:对话框中输入圆的半径,算出圆的面积并显示到页面
分析:

  • ①:面积的数学公式: π*r²
  • ②:转换为JavaScript写法 : 变量 * r * r
const PI = 3.14
let r = +prompt('请输入半径:')
let s = PI * r * r
document.write("圆的面积是",s)
console.log(PI)

NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果

NaN 是粘性的。任何对 NaN 的操作都会返回 NaN

console.log('老师' - 2) // NaN
console.log(NaN + 2) // NaN

4.2 字符串类型 (string)

通过单引号( '') 、双引号( "")或反引号包裹的数据都叫字符串,单引号和双引号没有本质上的区别,推荐使用单引号。

注意事项:

  1. 无论单引号或是双引号必须成对使用
  2. 单引号/双引号可以互相嵌套,但是不以自已嵌套自已
  3. 必要时可以使用转义符 \,输出单引号或双引号
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    let user_name = '小明' // 使用单引号
    let gender = "男" // 使用双引号
    let str = '123' // 看上去是数字,但是用引号包裹了就成了字符串了
    let str1 = '' // 这种情况叫空字符串
		
    documeent.write(typeof user_name) // 结果为 string
    documeent.write(typeof gender) // 结果为 string
    documeent.write(typeof str) // 结果为 string
  </script>
</body>
</html>

字符串拼接:

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

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

let uanme = '薛之谦'
let song = '认真的雪'
documeent.write(uname + song)  // 薛之谦认真的雪

4.3 模板字符串

拼接字符串和变量

在没有它之前,要拼接变量比较麻烦

documeent.write('大家好,我叫'+ uname + '练习' + age + '年')  

语法

  • `` (反引号)
  • 在英文输入模式下按键盘的tab键上方那个键(1左边那个键)
  • 内容拼接变量时,用 ${ } 包住变量
documeent.write(`大家好,我叫${uname}练习${age}`)  

练习6

需求:页面弹出对话框,输入名字和年龄,页面显示: 大家好,我叫xxx,今年xx岁了

let name = prompt('请输入您的名字')
let age =  prompt('请输入您的年龄')
documeent.write(`大家好,我叫${name},今年${age}岁了`)  

4.4 布尔类型(boolean)

表示肯定或否定时在计算机中对应的是布尔类型数据,它有两个固定的值 truefalse,表示肯定的数据用 true,表示否定的数据用 false

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    //  pink老师帅不帅?回答 是 或 否
    let isCool = true // 是的,摔死了!
    isCool = false // 不,套马杆的汉子!

    document.write(typeof isCool) // 结果为 boolean
  </script>
</body>
</html>

4.5 未定义类型(undefined)

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    // 只声明了变量,并末赋值
    let tmp;
    document.write(typeof tmp) // 结果为 undefined
  </script>
</body>
</html>

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

工作中的使用场景:

  • 我们开发中经常声明一个变量,等待传送过来的数据。
  • 如果我们不知道这个数据是否传递过来,此时我们可以通过检测这个变量是不是undefined,就判断用户是否有数据传递过来

4.6 空类型(null)

JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

let obj = null
console.log(obj) // null

null 和 undefined 区别:

  • undefined 表示没有赋值
  • null 表示赋值了,但是内容为空

null 开发中的使用场景:

  • 官方解释:把 null 作为尚未创建的对象
  • 大白话: 将来有个变量里面存放的是一个对象,但是对象还没创建好,可以先给个

5. 类型转换

理解弱类型语言的特征,掌握显式类型转换的方法

在 JavaScript 中数据被分成了不同的类型,如数值、字符串、布尔值、undefined,在实际编程的过程中,不同数据类型之间存在着转换的关系。

为什么需要类型转换?
JavaScript是弱数据类型: JavaScript也不知道变量到底属于那种数据类型,只有赋值了才清楚。

坑: 使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算。

:通过 typeof 关键字检测数据类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    // 检测 1 是什么类型数据,结果为 number
    document.write(typeof 1)
  </script>
</body>
</html>

5.1 隐式转换

某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。
规则:

  • + 号两边只要有一个是字符串,都会把另外一个转成字符串
  • 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型

缺点:

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

小技巧:

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

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
  <script> 
    let num = 13 // 数值
    let num2 = '2' // 字符串

    // 结果为 132
    // 原因是将数值 num 转换成了字符串,相当于 '13'
    // 然后 + 将两个字符串拼接到了一起
    console.log(num + num2)

    // 结果为 11
    // 原因是将字符串 num2 转换成了数值,相当于 2
    // 然后数值 13 减去 数值 2
    console.log(num - num2)

    let a = prompt('请输入一个数字')
    let b = prompt('请再输入一个数字')

    alert(a + b);
  </script>
</body>
</html>

:数据类型的隐式转换是 JavaScript 的特征,后续学习中还会遇到,目前先需要理解什么是隐式转换。

5.2 显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的,因为隐式转换规律并不清晰,大多是靠经验总结的规律。为了避免因隐式转换带来的问题,通常根逻辑需要对数据进行显示转换。

5.2.1 Number

通过 Number 显示转换成数值类型,当转换失败时结果为 NaN(Not a Number)即不是一个数字。

  • 转成数字类型
  • 如果字符串内容里有非数字,转换失败时结果为 NaN(Not a Number)即不是一个数字
  • NaN也是number类型的数据,代表非数字
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
  <script>
    let t = '12'
    let f = 8

    // 显式将字符串 12 转换成数值 12
    t = Number(t)

    // 检测转换后的类型
    // console.log(typeof t);
    console.log(t + f) // 结果为 20

    // 并不是所有的值都可以被转成数值类型
    let str = 'hello'
    // 将 hello 转成数值是不现实的,当无法转换成
    // 数值时,得到的结果为 NaN (Not a Number)
    console.log(Number(str))
  </script>
</body>
</html>

5.2.2 parseInt(数据)

只保留整数

5.2.3 parseFloat(数据)

可以保留小数

5.2.4 转换成字符型

String(数据库)
变量.toString(进制)

练习7

输入2个数,计算两者的和,打印到页面中

在这里插入图片描述

  let num1 = +prompt('请输入第一个数')
  let num2 =  +prompt('请输入第二个数')
  // num1 = Number(num1)
  // num2 = Number(num2)
  let sum = num1 + num2
  console.log(sum)

总结

  1. 类型转换的概念
    一种数据类型转成别的类型, JavaScript是弱数据类型,很多情况计算的时候,需要转换数据类型

  2. 隐式转换
    系统自动做转换

  3. 显式转换
    自己写代码告诉系统转成什么类型 Number
    ​ 字符串内容里有非数字得到NaN String

6. 实战案例 - 用户订单信息案例

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

  • ①:需要输入3个数据,所以需要3个变量来存储 price num address
  • ②:需要计算总的价格 total
  • ③:页面打印生成表格,里面填充数据即可
  • ④:记得最好使用模板字符串

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/965671.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

mybatis源码学习-1-调试环境

写在前面,这里会有很多借鉴的内容,有以下三个原因 本博客只是作为本人学习记录并用以分享,并不是专业的技术型博客笔者是位刚刚开始尝试阅读源码的人,对源码的阅读流程乃至整体架构并不熟悉,观看他人博客可以帮助我快速入门如果只是笔者自己观看,难免会有很多弄不懂乃至理解错误…

【科研论文配图绘制】task7密度图绘制

【科研论文配图绘制】task7密度图绘制 task7 了解密度图的定义&#xff0c;清楚密度图是常用使用常见&#xff0c;掌握密度图绘制。 1.什么是密度图 密度图&#xff08;Density Plot&#xff09;是一种用于可视化数据分布的图表类型。它通过在数据中创建平滑的概率密度曲线…

java反编译工具jd-gui使用

文章目录 一、JD-GUI介绍二、下载三、安装四、使用教程五、免责声明摘抄 一、JD-GUI介绍 JD-GUI是一个独立的图形实用程序&#xff0c;显示“.class”文件的Java源代码。 使用JD-GUI浏览重构的源代码&#xff0c;以便即时访问方法和字段。 二、下载 MAC安装包&#xff1a;ht…

Gorm简单了解

GORM 指南 | GORM - The fantastic ORM library for Golang, aims to be developer friendly. 04_GORM查询操作_哔哩哔哩_bilibili 前置&#xff1a; db调用操作语句中间加debug&#xff08;&#xff09;可以显示对应的sql语句 1.Gorm模型定义&#xff08;理解重点&#xff…

在R中安装TensorFlow、TensorFlow_Probability、numpy(R与Python系列第二篇)

目录 前言&#xff1a; 1-安装tensorflow库 Step1: 下载R包tensorflow Step2&#xff1a;安装TensorFlow库 Step3&#xff1a;导入R中 2-安装tensorflow_probability库 Step1&#xff1a;下载R包&#xff1a;tfprobability Step2&#xff1a;安装TensorFlow Probability …

链表OJ练习(2)

一、分割链表 题目介绍&#xff1a; 思路&#xff1a;创建两个链表&#xff0c;ghead尾插大于x的节点&#xff0c;lhead尾插小于x的节点。先遍历链表。最后将ghead尾插到lhead后面&#xff0c;将大小链表链接。 我们需要在创建两个链表指针&#xff0c;指向两个链表的头节点&…

【Mysql系列】(一)MySQL语句执行流程

首发博客地址 首发博客地址 系列文章地址 参考文章 MySQL 逻辑架构 连接器 连接命令一般是这么写的 mysql -h$ip -P$port -u$user -p 那么 什么是连接器&#xff1f; MySQL 连接器&#xff08;MySQL Connector&#xff09;是用于连接和与 MySQL 数据库进行交互的驱动程序。它提…

高级IO

五种IO模型 1、阻塞等待&#xff1a;在内核将数据准备好之前&#xff0c;系统调用会一直等待。所有的套接字&#xff0c;默认都是阻塞方式。 2、非阻塞等待&#xff1a;如果内核没有将数据准备好&#xff0c;系统调用仍然会返回&#xff0c;并且会返回EWUOLDBLOCK或者EAGAIN错…

笔试题目回忆

&#xff08;1&#xff09;给出n,k&#xff0c;n表示数组个数&#xff0c;k表示要剔除的个数&#xff0c;接下来n个数为数组元素&#xff0c;求剔除k个数之后&#xff0c;其他所有数互为倍数&#xff0c;每个数最多剔除一次。 未检测代码&#xff0c;超时。 #include <ios…

第 3 章 栈和队列(单链队列)

1. 背景说明 队列(queue)是一种先进先出(first in first out,缩为 FIFO)的线性表。它只允许在表的一端进行插入&#xff0c;而在另一端删除元素。 2. 示例代码 1&#xff09;status.h /* DataStructure 预定义常量和类型头文件 */#ifndef STATUS_H #define STATUS_H/* 函数结果…

线上问诊:数仓开发(二)

系列文章目录 线上问诊&#xff1a;业务数据采集 线上问诊&#xff1a;数仓数据同步 线上问诊&#xff1a;数仓开发(一) 线上问诊&#xff1a;数仓开发(二) 文章目录 系列文章目录前言一、DWS1.最近1日汇总表1.交易域医院患者性别年龄段粒度问诊最近1日汇总表2.交易域医院患者…

身份识别与鉴权技术调研方案

对称加密算法 对称加密方式又称为私钥加密方式&#xff0c;该方式的加密和解密过程使用同一个密钥&#xff0c;因此该密钥又称为共享密钥。如图2.2所示&#xff0c;在对称加密方式中&#xff0c;发送方使用对称加密算法和共享密钥处理原始数据&#xff0c;得到一个加密后的密文…

vulnhub渗透测试靶场练习2

靶场介绍 靶场名&#xff1a;easy_cloudantivirus 靶场地址&#xff1a;https://www.vulnhub.com/entry/boredhackerblog-cloud-av,453 环境搭建 依旧使用VM VirtualBox搭建靶场&#xff0c;攻击机使用的是VMware中的kali&#xff0c;需要将VMware虚拟机kali和virtualbox靶机…

Web服务器部署上线踩坑流程回顾

5月份时曾部署上线了C的Web服务器&#xff0c;温故而知新&#xff0c;本篇文章梳理总结一下部署流程知识&#xff1b; 最初的解决方案&#xff1a;https://blog.csdn.net/BinBinCome/article/details/129750951?spm1001.2014.3001.5501后来的解决方案&#xff1a;https://blog…

Mysql数据库(3)—架构和日志

Mysql的架构设计 Mysql分为Server层和存储引擎层&#xff1a; Server层 主要包括连接器、查询缓存、分析器、优化器、执行器等&#xff0c;涵盖 MySQL 的大多数核心服务功能&#xff0c;以及所有的内置函数&#xff08;如日期、时间、数学和加密函数等&#xff09;&#xff…

Android逆向学习(一)vscode进行android逆向修改并重新打包

Android逆向学习&#xff08;一&#xff09;vscode进行android逆向修改并重新打包 写在前面 其实我不知道这个文章能不能写下去&#xff0c;其实我已经开了很多坑但是都没填上&#xff0c;现在专利也发出去了&#xff0c;就开始填坑了&#xff0c;本坑的主要内容是关于androi…

回归拟合 | 灰狼算法优化核极限学习机(GWO-KELM)MATLAB实现

这周有粉丝私信想让我出一期GWO-KELM的文章&#xff0c;因此乘着今天休息就更新了(希望不算晚) 作者在前面的文章中介绍了ELM和KELM的原理及其实现&#xff0c;ELM具有训练速度快、复杂度低、克服了传统梯度算法的局部极小、过拟合和学习率的选择不合适等优点&#xff0c;而KEL…

OpenCV(十):图像缩放、翻转、拼接的介绍与使用

目录 &#xff08;1&#xff09;图像缩放&#xff1a;resize() &#xff08;2&#xff09;图像翻转&#xff1a; flip() &#xff08;3&#xff09;图像拼接&#xff1a;hconcat() 和vconcat() &#xff08;1&#xff09;图像缩放&#xff1a;resize() 使用 cv2.resize() 函…

React笔记(三)类组件(1)

一、组件的概念 使用组件方式进行编程&#xff0c;可以提高开发效率&#xff0c;提高组件的复用性、提高代码的可维护性和可扩展性 React定义组件的方式有两种 类组件&#xff1a;React16.8版本之前几乎React使用都是类组件 函数组件:React16.8之后&#xff0c;函数式组件使…

北京APP外包开发团队人员构成

下面是一个标准的APP开发团队构成&#xff0c;但具体的人员规模和角色可能会根据项目的规模和需求进行调整。例如&#xff0c;一些小型项目或初创公司可能将一些角色合并&#xff0c;或者聘请外包团队来完成部分工作。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公…