JavaScript基础：js介绍、变量、数据类型以及类型转换

 

目录

介绍

引入方式

内部方式

外部形式

注释和结束符

单行注释

多行注释

结束符

输入和输出

输出

输入

变量

声明

赋值

关键字

变量名命名规则

常量

数据类型

数值类型

字符串类型

布尔类型

undefined

类型转换

隐式转换

显式转换

Number


✨介绍

📖引入方式

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签(<script> js代码<script>)将 JavaScript 代码引入到 HTML 中，有两种方式：

💡内部方式

通过 script 标签包裹 JavaScript 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
  <script>
    alert('js基础介绍')
  </script>
</body>
</html>
💡外部形式

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

//demo.js
<!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('会被忽略');  
  </script>
</body>
</html>

📖注释和结束符

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

💡单行注释

使用 // 注释单行代码

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

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

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

注：编辑器中单行注释的快捷键为 ctrl + /

📖结束符

在 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 可以接收用户的输入，然后再将输入的结果输出：

alert()、document.wirte()

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

💡输入

向 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>

✨变量

变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】（数据）(其实跟别的语言的变量差不多)

<script>
  // x 符号代表了 5 这个数值
  x = 5
  // y 符号代表了 6 这个数值
  y = 6
    
  //举例： 在 JavaScript 中使用变量可以将某个数据（数值）记录下来！
​
  // 将用户输入的内容保存在 num 这个变量（容器）中
  num = prompt('请输入一数字!')
​
  // 通过 num 变量（容器）将用户输入的内容输出出来
  alert(num)
  document.write(num)
</script>

📖声明

声明(定义)变量有两部分构成：声明关键字、变量名（标识）

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

let 和 var 都是 JavaScript 中的声明变量的关键字，推荐使用 let 声明变量！！！

📖赋值

声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。

<!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>

 

📖关键字

JavaScript 使用专门的关键字 let 和 var 来声明（定义）变量，在使用时需要注意一些细节：

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

  1. 允许声明和赋值同时进行

  2. 不允许重复声明

  3. 允许同时声明多个变量并赋值

  4. JavaScript 中内置的一些关键字不能被当做变量名

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

  1. 允许声明和赋值同时进行

  2. 允许重复声明

  3. 允许同时声明多个变量并赋值

大部分情况使用 let 和 var 区别不大，但是 let 相较 var 更严谨，因此推荐使用 let.

📖变量名命名规则

关于变量的名称（标识符）有一系列的规则需要遵守：

  1. 只能是字母、数字、下划线、$，且不能能数字开头

  2. 字母区分大小写，如 Age 和 age 是不同的变量

  3. JavaScript 内部已占用于单词（关键字或保留字）不允许使用

  4. 尽量保证变量具有一定的语义，见字知义

注：所谓关键字是指 JavaScript 内部使用的词语，如 let 和var，保留字是指 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>

📖常量

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

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

命名规范：和变量一致

const PI = 3.14

注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）。

✨数据类型

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

注：通过 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>

 

📖数值类型

数值类型就是我们数学中学习到的数字，可以是整数、小数、正数、负数。

<!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 中的数值类型与数学中的数字是一样的，分为正数、负数、小数等。

📖字符串类型

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

注意事项：

  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>

📖布尔类型

表示真或者假时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false，表示肯定的数据用 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>

📖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 中变量的值决定了变量的数据类型。

✨类型转换

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

📖隐式转换

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

<!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>

✨显式转换

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

📖Number

通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a 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>

 

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

typescript中的type关键字和interface关键字区别

typescript中的type关键字和interface关键字区别

Type又叫类型别名&#xff08;type alias&#xff09;,作用是给一个类型起一个新名字&#xff0c;不仅支持interface定义的对象结构&#xff0c;还支持基本类型、联合类型、交叉类型、元组等任何你需要手写的类型。 type num number; // 基本类型 type stringOrNum string |…
阅读更多...
短信测压APP

短信测压APP

阅读更多...
47.HarmonyOS鸿蒙系统 App(ArkUI)创建轮播效果

47.HarmonyOS鸿蒙系统 App(ArkUI)创建轮播效果

创建轮播效果&#xff0c;共3页切换 Entry Component struct Index {State message: string Hello Worldprivate swiperController: SwiperController new SwiperController()build() {Swiper(this.swiperController) {Text("第一页").width(90%).height(100%).bac…
阅读更多...
BLE架构图

BLE架构图

PHY层(Physical layer 物理层) PHY层用来指定BLE所用的无线频段(2.4G)&#xff0c;调制解调方式和方法、跳频等。PHY层的性能直接决定整个BLE芯片的功耗、灵敏度以及selectivity等射频指标。 LL层(Link Layer 链路层) 链路层主要是对RF射频控制。链路层定义了协议栈中最为基础的…
阅读更多...
C++解决大学课设所有管理系统(增删查改)

C++解决大学课设所有管理系统(增删查改)

C一篇解决大学课设所有**管理系统(增删查改) 文章目录 C一篇解决大学课设所有**管理系统(增删查改)1.引言1.1 使用结果展示 2. 基本原理3. 文件层次结构4.具体实现(通讯录管理系统为例)4.1 通讯录实体类(addressbook.h)4.2 通讯录实现类(addressbook.cpp)4.3 通讯录管理类&…
阅读更多...
蓝桥杯 — — 完全日期

蓝桥杯 — — 完全日期

完全日期 友情链接&#xff1a;完全日期 题目&#xff1a; 思路&#xff1a; 直接从20010101枚举到20211231&#xff0c;然后再判断每一个数是否是一个合法的日期&#xff0c;如果这个日期是合法的&#xff0c;接着判断这个日期的每一个位置上的数字之和是否是一个完全平方数…
阅读更多...
ChatGPT 可以预测未来吗？

ChatGPT 可以预测未来吗？

推荐 4月13日的一篇有趣的 paper&#xff0c;特来分享。 &#x1f449; 当前的大型语言模型&#xff08;LLMs&#xff09;具有强大的数据合成和推理能力&#xff0c;但它们在直接预测尚未发生事件的准确性上常常受到限制。传统的预测方法依赖于直接询问模型关于未来的问题。 …
阅读更多...
linux下安装nacos2.2.0

linux下安装nacos2.2.0

1、获取下载地址并下载 1.1、打开nacos官网 1.2、找到对应版本&#xff0c;点进去 ## 1.3、复制地址 1.4下载 # 进入要安装的目录&#xff0c;cd /usr/local/src # 执行wget https://github.com/alibaba/nacos/releases/download/2.2.0/nacos-server-2.2.0.tar.gz2、 安装…
阅读更多...
【产品经理修炼之道】- 平台型产品经理与业务型产品经理

【产品经理修炼之道】- 平台型产品经理与业务型产品经理

从2015年开始&#xff0c;阿里的产品经理招聘分为平台型和业务型&#xff0c;后来很多互金公司逐步学习采纳了这种分工方式&#xff0c;那么什么是平台型产品经理&#xff0c;什么是业务型产品经理呢&#xff1f;先上结论&#xff1a; 平台型产品经理&#xff08;产品设计&…
阅读更多...
loD:如何实现代码的“高内聚、低耦合“

loD:如何实现代码的“高内聚、低耦合“

设计模式专栏&#xff1a;http://t.csdnimg.cn/3a25S 目录 1.引用 2.何为"高内聚、低耦合" 3.LoD 的定义描述 4.定义解读与代码示例一 5.定义解读与代码示例二 1.引用 本节介绍最后一个设计原则:LoD(Law of Demeter&#xff0c;迪米特法则)。尽LoD不像SOLID、KI…
阅读更多...
CTFshow-PWN-Test_your_nc（pwn0-pwn4）

CTFshow-PWN-Test_your_nc（pwn0-pwn4）

1、pwn0 连上&#xff0c;等它程序执行完你可以直接来到 shell 界面 执行命令&#xff0c;获取 flag ctfshow{294ffc57-ee28-40ea-8c74-4dfeaf89d1e7} 2、pwn1 提供一个后门函数&#xff0c;连上即可得到flag 下载附件&#xff0c;拉进 ubantu &#xff0c;使用命令 checksec …
阅读更多...
深度学习基础——计算量、参数量和推理时间

深度学习基础——计算量、参数量和推理时间

深度学习基础——计算量、参数量和推理时间 在深度学习中&#xff0c;计算量、参数量和推理时间是评估模型性能和效率的重要指标。本文将介绍这三个指标的定义、计算方法以及如何使用Python进行实现和可视化展示&#xff0c;以帮助读者更好地理解和评估深度学习模型。 1. 定义…
阅读更多...
oracle 19c数据库W00n进程使用很多PGA内存资源的分析

oracle 19c数据库W00n进程使用很多PGA内存资源的分析

今天&#xff0c;客户反馈测试环境的数据库PGA资源不足&#xff0c;报错ORA-04036: 实例使用的 PGA 内存超出 PGA_AGGREGATE_LIMIT&#xff1b;分析是多个W00n进程使用大量PGA-触发了BUG&#xff0c;对应解决办法就是打补丁。&#xff08;民间办法就是KILL进程、重启数据库&…
阅读更多...
【JavaSE】搞定String类

【JavaSE】搞定String类

前言 本篇会细致讲解String类的常见用法&#xff0c;让小伙伴们搞定String类~ 欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 目录 前言 常用的三种字符串构造 字符串长度length 字符串比较 比较 比较字符串的内容equals…
阅读更多...
一个不努力学习的人是怎么过的软考高项？

一个不努力学习的人是怎么过的软考高项？

首先要感谢软考方式的改革&#xff0c;如果不是机考&#xff0c;我可能也过不了&#xff0c;因为自己的笔迹实在太糟糕了。其实如果不是因为笔迹太差&#xff0c;我觉得我19年高项就过了&#xff0c;19年栽倒在论文上&#xff0c;只得了43分&#xff0c;我记忆深刻。 然后说一…
阅读更多...
【算法】深入理解二分查找算法及其应用

【算法】深入理解二分查找算法及其应用

文章目录 1. 朴素二分查找的基本步骤&#xff1a;2. 总结二分模板 二分查找&#xff08;Binary Search&#xff09;是一种在有序数组中查找目标值的高效算法。它的基本思想是将数组分成两半&#xff0c;然后确定目标值可能存在的那一半&#xff0c;重复这个过程直到找到目标值或…
阅读更多...
如何进行支付功能的测试？

如何进行支付功能的测试？

非现金支付时代&#xff0c;非现金支付已经成为了生活不可或缺的一部分&#xff0c;我们只需要一台手机便可走遍全国各地&#xff08;前提是支付宝&#xff0c;微信有钱<00>&#xff09;。 那么作为测试人员&#xff0c;支付测试也是非常重要的一环&#xff0c;那么下面…
阅读更多...
隐私保护？还是安全漏洞？邮箱分身双重身份及创建攻略解析！

隐私保护？还是安全漏洞？邮箱分身双重身份及创建攻略解析！

很多人只知道微信、QQ等应用分身&#xff0c;对于邮箱分身并不是很了解。邮箱分身和他们的不同点在于我们直接在原有邮箱的基础上创立新的虚拟邮箱地址&#xff0c;并且密码一致&#xff0c;在我们需要运营多个社交媒体账号或者管理多个项目的情况下&#xff0c;邮箱分身是一个…
阅读更多...
IntelliJ IDEA2024 安装包（亲测可用）

IntelliJ IDEA2024 安装包（亲测可用）

目录 一、软件简介 二、软件下载 一、软件简介 IDEA&#xff08;Integrated Development Environment for Apache&#xff09; 是一款专为 Apache 开发者设计的集成开发环境。该软件提供了丰富的功能和工具&#xff0c;帮助开发者更高效地创建、调试和部署 Apache 项目。 主…
阅读更多...
MobaXterm无法登陆oracle cloud的问题

MobaXterm无法登陆oracle cloud的问题

问题 我在oracle cloud上创建实例的时候&#xff0c;只能使用密钥的方式登陆&#xff0c;当时下载了私钥文件。实例创建好以后&#xff0c;在mobaxterm上使用这个私钥文件无法登陆 排查 尝试使用mobaxterm的keygen&#xff0c;把私钥文件转成ppk格式&#xff0c;还是不行。…
阅读更多...
最新文章

Copyright @ 2022~2023