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>

letvar 都是 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 的值就成了 18document.write(age)// 也可以声明和赋值同时进行let str = 'hello world!'alert(str);</script>
</body>
</html>

 

📖关键字

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

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

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

  2. 不允许重复声明

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

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

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

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

  2. 允许重复声明

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

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

📖变量名命名规则

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

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

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

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

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

注:所谓关键字是指 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>

📖常量

概念:使用 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 是什么类型数据,结果为 numberdocument.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) // 结果为 numberdocument.write(typeof price) // 结果为 numberdocument.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) // 结果为 stringdocumeent.write(typeof gender) // 结果为 stringdocumeent.write(typeof str) // 结果为 string</script>
</body>
</html>

📖布尔类型

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

📖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 减去 数值 2console.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 转换成数值 12t = 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>

 

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

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

相关文章

Module Federation微前端应用拆分后 - request请求优化、私有化request|分发拦截器

1. 背景及目的 1.1 需求背景 随着应用的拆分&#xff0c;目前子应用有12个&#xff0c;这些子应用都使用的是同一个request实例。 前端支持后端切流&#xff0c;增加多个拦截器用于灰度 经手动梳理&#xff1a; 目前所有应用中有26个在使用的拦截器&#xff0c; 其中用于灰…

imgcat 工具

如果经常在远程服务器或嵌入式设备中操作图片&#xff0c;要查看图片效果&#xff0c;就要先把图片dump到本地&#xff0c;比较麻烦。可以使用这个工具&#xff0c;直接在终端上显示。类似于这种效果。 imgcat 是一个终端工具&#xff0c;使用 iTerm2 内置的特性&#xff0c;允…

加强fou循环的坑

今天遇到了一个有趣的事情&#xff0c;使用加强fou循环操作list时&#xff0c;会报错并发操作异常。 直到看了编译类&#xff0c;才发现&#xff0c;加强fou循环其实就是通过迭代器操作&#xff1a; 这里就会出现一个问题&#xff0c;迭代器在取出值时&#xff0c;就回去检测这…

elementUi el-date-picker时间控件精确到时分秒

1.时间日期typedatetime <template><el-date-pickerv-model"time":picker-options"pickerOptions"ref"datetime"type"datetime":default-time"range":disabled"disabled"placeholder"请选择日期时…

Spring Boot 定时任务实现教程

前言 在实际开发过程中&#xff0c;我们经常需要处理一些周期性或定时执行的任务&#xff0c;如数据备份、报表生成、邮件发送等。Spring Boot通过集成Quartz或使用Spring自带的Scheduled注解可以方便地实现定时任务功能。本文将详细介绍如何在Spring Boot项目中使用Scheduled…

【数据结构】遍历二叉树(递归和非递归遍历的先序、中序和后序遍历、层次遍历法)

目录 【数据结构】遍历二叉树&#xff08;递归和非递归遍历的先序、中序和后序遍历、层次遍历法&#xff09;一、递归算法先&#xff08;根&#xff09;序的遍历算法中&#xff08;根&#xff09;序的遍历算法后&#xff08;根&#xff09;序的遍历算法 二、非递归算法层次遍历…

存储器管理

01.存储器的层次结构&#xff1a;计算机在执行指令时&#xff0c;几乎每条指令都会涉及对存储器的访问&#xff0c;因此要求计算机对存储器的访问速度能跟得上处理机的运行速度&#xff0c;在现代计算机系统中&#xff0c;都采用了多层结构的存储器。至少应该有三层&#xff1a…

【漏洞复现】浙大恩特客户资源管理系统 i0004_openFileByStream.jsp 任意文件读取漏洞

0x01 产品简介 浙大恩特客户资源管理系统是一款外贸管理软件&#xff0c;它提供了多种功能&#xff0c;包括客户档案管理、邮件管理、OA外贸办公管理系统、分管权限管理、联系跟进及提醒、业务检查管理、统计分析管理等。 0x02 漏洞概述 浙大恩特客户资源管理系统存在任意文件…

ENSP-旁挂式AC

提醒&#xff1a;如果AC不能成功上线AP&#xff0c;一般问题不会出在AC上&#xff0c;优先关注AC-AP线路上的二层或三层组网的三层交换机 拓扑图 管理VLAN&#xff1a;99 | 业务VLAN&#xff1a;100 注意点&#xff1a; 1.连接AP的接口需要打上pvid为管理vlan的标签 2.AC和…

通用视觉大模型调研

humanbench HumanBench: Towards General Human-centric Perception with Projector Assisted Pretraining&#xff1b;为了解决不同任务之间的conflict以及不同dataset之间的差异(相同任务)&#xff0c;提出PATH&#xff0c;backbone是所有任务共享、projector是任务级别共享…

一个开源的全自动视频生成软件MoneyPrinterTurbo

只需提供一个视频 主题 或 关键词 &#xff0c;就可以全自动生成视频文案、视频素材、视频字幕、视频背景音乐&#xff0c;然后合成一个高清的短视频。 一&#xff1a;功能特性 完整的 MVC架构&#xff0c;代码 结构清晰&#xff0c;易于维护&#xff0c;支持 API 和 Web界面…

【面试亮点】线上GC问题排查止损解决 (heap space OutOfMemory排查止损解决)

【面试亮点】线上GC问题排查&止损&解决(heap space OOM排查&止损&解决) 许多同学总和我抱怨说面试的时候没有线上实际排查解决gc问题的经验,我这里分享我团队的一次比较好的从 发现问题->及时止损->排查问题->修复问题->复盘 全流程的实践经验,希…

DOS命令第二篇

雷迪斯and the乡亲们 欢迎你们来到 奇幻的编程世界 一、echo命令 作用&#xff1a; 输出一个内容到终端 格式&#xff1a; echo 要输出的内容 案例&#xff1a; 直接输出一个“你好” 二、ping 概念&#xff1a; 在网络中通信的时候&#xff0c;主机之间进行通信依靠…

转行或者跳槽入职一家新公司,应该如何快速上手工作?

不管是干测试也好或者其它任何职业&#xff0c;没有谁会在一家公司待一辈子&#xff0c;转行不一定&#xff0c;但是跳槽是每一个打工人早晚都会面临的事情&#xff0c;今天就来跟大家聊聊这件事~ 入职一家新公司&#xff0c;你应该做什么可以最快速的上手工作&#xff1f; 这…

App Inventor 2 如何预览PDF文档?

预览PDF文档的方式 你可以使用Activity启动器查看已存储在你的设备上的 pdf 文档&#xff0c;也可以使用Web客户端通过网址URL打开 pdf 文档。 App Inventor 2 可以使用 .pdf 扩展名从程序包资产中查看 pdf 文件&#xff0c;不再需要外部 pdf 查看器&#xff01; 代码如下&a…

车载摄像头畸变校正解决方案,打造无畸变高清视界

在车载摄像头日益普及的今天&#xff0c;摄像头图像的畸变问题成为了制约图像质量提升的一大瓶颈。畸变不仅影响画面的美观度&#xff0c;更关键的是它可能导致智能驾驶系统对环境的误判&#xff0c;进而威胁到行车安全。美摄科技凭借其在图像处理领域的深厚实力&#xff0c;推…

redis清理缓存接口开发

文章目录 1 用户注册1.1 简要描述1.2 请求URL1.3 请求方式1.4 参数1.5 返回示例1.6 返回参数说明1.7 备注 2 用户登录2.1 简要描述2.2 请求URL2.3 请求方式2.4 参数2.5 返回示例2.6 返回参数说明2.7 备注 3 权限校验3.1 简要描述3.2 请求URL3.3 请求方式3.4 参数3.5 返回示例3.…

leetcode刷题(python)——(一)

01.01.04 练习题目&#xff08;第 01 天&#xff09; 1. 2235. 两整数相加 1.1 题目大意 描述&#xff1a;给定两个整数 n u m 1 num1 num1 和 n u m 2 num2 num2。 要求&#xff1a;返回这两个整数的和。 说明&#xff1a; − 100 ≤ n u m 1 , n u m 2 ≤ 100 -100 \l…

中东跨境电商平台Noon注册开店步骤详解

中东地区&#xff0c;素以“满地富豪”闻名&#xff0c;同时拥有发达的电子商务环境与较高的居民消费水平&#xff0c;吸引了大量跨境电商从业者前来寻求商机。其中&#xff0c;Noon作为中东地区颇具人气的电商平台&#xff0c;自然而然成为了众多卖家开拓中东市场的首选平台。…

普通类的成员函数模板

4-4普通类的成员函数模板、类模板的成员函数模板、&#xff08;c11&#xff09;模板显式实例化&#xff0c;模板声明_普通类的模板函数能否为虚函数-CSDN博客 实例&#xff1a; #include <QApplication> #include <QDebug> struct user_inform {QString user_name;…