初识 JavaScript

目录

  • 1. 什么是 JavaScript
  • 2. JS 引入方式
    • 2.1 内部引入方式
    • 2.2 外部引入方式
  • 3. JS 中的注释
  • 4. JS 中的结束符
  • 5. 输入和输出
    • 5.1 输出
    • 5.2 输入
  • 6. 变量与常量
    • 6.1 变量的声明
    • 6.2 变量的赋值
    • 6.3 常量
  • 7. JS 中的数据类型
  • 8. JS 中的类型转换
    • 8.1 隐式转换
    • 8.2 显式转换

正文开始

1. 什么是 JavaScript

JavaScript 简称 JS，由 ECMAScript 规定标准，作为前端三板斧(html、CSS、JS)之一，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JS 是运行在客服端（浏览器）的编程语言，实现人机交互效果。

JS 可以用来：

  • 网页特效：监听用户的一些行为让网页做出对应的反馈。
  • 表单验证：针对表单数据的合法性进行判断。
  • 数据交互：获取后台的数据，渲染到前端
  • 服务端编程(node.js)

JS 的组成：

  • ECMAScript：规定了 js 的基础语法。例如：变量、分支语句、循环语句、对象等等
  • Web APIs：
    • DOM：操作文档。比如对页面元素进行移动、大小、添加删除等操作。
    • BOM：操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等。

2. JS 引入方式

JS 程序不能独立运行，他需要被嵌入 HTML 中，然后浏览器才能执行 JS 代码，通过script标签将 JS 代码引入到 HTML 中，有两种方式：

  • 内部引入方式
  • 外部引入方式

引入的 JS 代码通常写在/body标签上面

2.1 内部引入方式

通过script标签包裹 JS 代码

例如：

<!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><!-- 内部引入，通常写在</body>上面 --><script>// JS 代码</script>
</body>
</html>

2.2 外部引入方式

将 JS 代码写在独立的、后缀名为.js的文件中，然后通过script标签的src属性引入

例如：

test.js 文件

// test.js
// JS 代码

test.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><!-- 外部引入，通常写在</body>上面 --><script src="./test.js"></script>
</body>
</html>

需要注意的是，外部引入的script标签内部通常不会书写任何东西，因为该标签的內容会被浏览器忽略掉。

3. JS 中的注释

注释的內容不会执行，通常用于对代码进行解释说明，增加代码的可读性，JS 中有两种注释方式：

  • 单行注释：使用//注释单行內容
<!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>// 这是单行注释// 一次只能注释一行</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>/* 这是多行注释 *//*这是多行注释一次可以注释若干行*/</script>
</body>
</html>

在 VScode 中，可通过快捷键ctrl + /来快速注释。

4. JS 中的结束符

在 JS 中;作为一段代码的结束，多数情况下可以省略而使用回车代替，例如：

<!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(1);alert(2);alert(3)alert(4)</script>
</body>
</html>

5. 输入和输出

输入和输出是人机交互的重要手段，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这就是一次输入输出的过程。

5.1 输出

JS 可以接收用户的输入，然后再将输入的结果输出，输出语法有：

document.write('要输出的內容')
  • 向body标签内输出內容
  • 若输出的內容为标签，那么也会被解析为网页元素
alert('要输出的內容')
  • 使页面弹出警告对话框
console.log('要输出的內容')
  • 向控制台输出內容，开发人员调试使用

例如：

<!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>document.write('<h1>向body输出的內容<h1>')alert('使页面弹出警告框')console.log('向控制台输出的內容')</script>
</body>
</html>

页面效果：
请添加图片描述
请添加图片描述

5.2 输入

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

例如：

<!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>prompt('请输入您的年龄：')</script>
</body>
</html>

页面效果：
在这里插入图片描述
prompt()的值就是用户输入的內容，用户输入的內容会以字符串的形式存储。

6. 变量与常量

6.1 变量的声明

笔者写到此处，发现是第6.1小节，而现在正好是六一儿童节。祝各位小朋友、大朋友们儿童节快乐，愿我们依旧保持童心，奔赴山海仍不忘儿时的梦想，加油加油加油！！

在 JS 中，变量的声明格式为：

let 变量名
//或者
var 变量名

let 与 var 的异同：

  • let：
    • 允许声明和赋值同时进行
    • 不允许重复声明
    • 允许同时声明多个变量并赋值
  • var：
    • 允许声明和赋值同时进行
    • 允许先使用 再声明（不合理）
    • 允许重复声明（不合理）
    • 允许同时声明多个变量并赋值

let 和 var 大体上是类似的，但是 let 更为严谨，所以更推荐使用 let 来声明变量

变量命名时遵循以下命名规则：

  • 只能是字母、数字、下划线、$，且不能能数字开头
  • 字母区分大小写，如 Name 和 name 是不同的变量
  • JS 中的关键字和保留字不允许做变量名

6.2 变量的赋值

变量的赋值：

let age
// 在 age 这个变量中存储10这个数
age = 10//声明变量的同时初始化变量
let name = 'wwangxu'//将用户输入的信息使用变量存储起来
let addr = prompt('请输入你的地址')

6.3 常量

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

使用场景：当某个变量永远不会改变的时候，就可以使用常量的方式来声明。

例如：

const PI = 3.14

注：常量不允许重新赋值，声明时必须初始化

7. JS 中的数据类型

JS 中有以下数据类型：

  • number：数值类型
    • 整数，如4、3、2
    • 小数，如3.3、1.5
    • 正数，如34、21.4
    • 负数，如-31、-4
  • string：字符串类型
    • 通过‘’或“”包裹的数据
    • 单引号和双引号没有本质区别，但引号必须成对出现
    • 单引号或双引号可以互相嵌套，但不能自己嵌套自己
    • 可以在引号前使用转义符\使得该引号变为字符串內容
  • boolean：布尔类型
    • 只有两个固定的值true和false
    • true 表示真，false 表示假
  • undefined：未定义类型
    • 在只声明变量，而不赋值的情况下，变量的类型为 undefined
  • null：空类型
    • null 仅仅是一个代表”无“、”空“或者”值未知“的特殊值
    • 官方解释为：把 null 作为尚未创建的对象
    • 表示赋值了，但内容为空

可以通过 typeof 关键字来判断数据类型

例如：

<!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>let x = 1let y = 3.2let z = -3let str1 = 'hello'let str2 = "123"let str3 = ' 'let bool1 = truelet bool2 = falselet Unlet NullX = nullconsole.log(typeof(x))console.log(typeof(y))console.log(typeof(z))console.log(typeof(str1))console.log(typeof(str2))console.log(typeof(str3))console.log(typeof(bool1))console.log(typeof(bool2))console.log(typeof(Un))console.log(typeof(NullX))</script>
</body>
</html>

页面效果：
请添加图片描述

8. JS 中的类型转换

首先我们要了解到：JS 为弱类型编程语言，只有赋值之后才能知道变量的类型。

字符串的拼接：

console.log('100' + '200')
// + 两边都是字符串
//那么就是将两个字符串拼接
//所以结果为'100200'

JS 中的数据被分为不同的类型，在实际开发中，不同数据类型之间存在着转换关系，转换类型的方式有两种：

  • 隐式转换：某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
  • 显式转换：由开发者自行进行明确的数据类型转换

8.1 隐式转换

隐式转换规则：

  • +两边只要有一个字符串，那么都会把另外一个转成字符串
  • 除了加号以外的算数运算符，比如 * / - 等都会把数据转成数字类型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>隐式转换</title>
</head>
<body><script> let num = 13 // 数值let num2 = '2' // 字符串// 结果为 132// 原因是将数值 num 转换成了字符串，相当于 '13'// 然后 + 将两个字符串拼接到了一起console.log(num + num2)// 结果为15// +num2 中的"+"将字符串转换为数字// 然后两个数字相加let num3 = +num2console.log(num + num3)// 结果为 11// 原因是将字符串 num2 转换成了数值，相当于 2// 然后数值 13 减去 数值 2console.log(num - num2)// 这里示例输入 23 和 67// 结果为 '2367'// 因为prompt接受的是字符串类型// 所以 a + b 就是字符串的拼接let a = prompt('请输入一个数字')let b = prompt('请再输入一个数字')console.log(a + b);</script>
</body>
</html>

运行效果：
在这里插入图片描述

8.2 显式转换

通过Number()显式转换成数值类型，当转换失败时结果为 NaN（Not a Number）

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>显示转换</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/bicheng/20296.shtml

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

相关文章

Java 多线程相关面试题

Java 多线程相关面试题

1. ConcurrentHashMap的读是否要加锁&#xff0c;为什么? 读操作没有加锁&#xff0c;目的是为了进一步降低锁冲突的概率&#xff0c;为了保证读到刚修改的数据&#xff0c;搭配了volatile 关键字&#xff1b; 2. 介绍下 ConcurrentHashMap 的锁分段技术? 这个是 Java1.7 …
阅读更多...
TP8 定时任务yzh52521/http-crontab 教程

TP8 定时任务yzh52521/http-crontab 教程

官方文档&#xff1a; https://www.thinkphp.cn/ext/36 源码仓&#xff1a; http-crontab: 接口化秒级定时任务管理 GitHub - yuanzhihai/http-crontab: 接口化秒级定时任务管理 参考案例&#xff1a; http-crontab:Workerman ThinkPHP6 实现后台可视化定时任务管理 htt…
阅读更多...
深入解析Java注解机制：元注解、自定义处理器及其在框架中的妙用

深入解析Java注解机制：元注解、自定义处理器及其在框架中的妙用

1.注解简介与作用 1.1 什么是注解&#xff08;Annotation&#xff09; 在Java中&#xff0c;注解是一种应用于类、方法、变量、参数和Java包等元素的标记。这些标记可以在编译时、加载时甚至运行时被读取&#xff0c;并执行相应的处理。通过使用注解&#xff0c;开发人员可以…
阅读更多...
C++中的List

C++中的List

摘要 C 标准库中的 std::list 是一种双向链表容器&#xff0c;它允许在常数时间内进行插入和删除操作&#xff0c;每个元素包含一个指向前一个和后一个元素的指针。这给我们开发提供了高效的插入和删除操作。 引入头文件 要使用 std::list&#xff0c;需要包含头文件 <li…
阅读更多...
钣金件设计规范

钣金件设计规范

(一&#xff09; 钣金 1、钣金的概念 钣金&#xff08;sheet metal&#xff09;是针对金属薄板&#xff08;厚度通常在6mm以下&#xff09;的 一种综合冷加工工艺&#xff0c;包括冲裁、折弯、拉深、成形、锻压、铆合等&#xff0c; 其显著的特征是同一零件厚度一致。 2、钣…
阅读更多...
C语言属于什么是编程语言：探索C语言的本质与特性

C语言属于什么是编程语言：探索C语言的本质与特性

C语言属于什么是编程语言&#xff1a;探索C语言的本质与特性 在编程领域&#xff0c;C语言无疑是一种重要的、广泛应用的编程语言。但是&#xff0c;C语言究竟属于哪一类编程语言&#xff1f;它又有哪些独特的特性和价值&#xff1f;本文将从四个方面、五个方面、六个方面和七…
阅读更多...
精通推荐算法8：Embedding表征学习 -- 总体架构

精通推荐算法8：Embedding表征学习 -- 总体架构

1 Embedding表征学习的总体架构 目前&#xff0c;推荐算法精排模型大多基于Embedding MLP范式&#xff0c;模型底层是Embedding层&#xff0c;作用是将高维稀疏的输入特征转换为低维稠密的特征向量&#xff0c;并实现一定的模糊查找能力。模型上层是MLP层&#xff0c;作用是对…
阅读更多...
在鲲鹏服务器上安装nginx

在鲲鹏服务器上安装nginx

华为鲲鹏服务器采用华为自研cpu ARMv8架构,提供 Windows 和多个Linux 系统 常使用 CentOS 7.6 64bit with ARM Nginx 和 Apache 一样都是一种 Web 服务器。是基于 REST 架构风格&#xff0c;以统一资源描述符URI 或者统一资源定位符URL 作为沟通依据&#xff0c;通过 HTTP 协议…
阅读更多...
【C++进阶】深入STL之string：掌握高效字符串处理的关键

【C++进阶】深入STL之string：掌握高效字符串处理的关键

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;C模板入门 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀STL之string &#x1f4d2;1. STL基本…
阅读更多...
前端（JS）对URL的编码和解码方式以及重要性——IE浏览器必须对中文URL进行编码

前端（JS）对URL的编码和解码方式以及重要性——IE浏览器必须对中文URL进行编码

工作记录-前端——前端&#xff08;JS&#xff09;对URL的编码和解码方式以及重要性——IE浏览器必须对中文URL进行编码 创作场景前端JS对URL的三种编码和解码方式1. escape 和 unescape2. encodeURI 和 decodeURI3. encodeURIComponent 和 decodeURIComponent 本文重点 创作场…
阅读更多...
net语言编程：深入探索其奥秘与挑战

net语言编程：深入探索其奥秘与挑战

net语言编程&#xff1a;深入探索其奥秘与挑战 在当今信息化社会&#xff0c;编程语言如同构建数字世界的砖瓦&#xff0c;而net语言编程便是其中的一颗璀璨明珠。它以其独特的魅力吸引着无数开发者&#xff0c;但同时也伴随着一系列令人困惑和充满挑战的问题。本文将从四个方…
阅读更多...
大模型学习资料整理：如何从0到1学习大模型，搭建个人或企业RAG系统，如何评估与优化（更新中...）

大模型学习资料整理：如何从0到1学习大模型，搭建个人或企业RAG系统，如何评估与优化（更新中...）

通过本文您可以了解到&#xff1a; 学习&#xff1a;从小白如何入手&#xff0c;从0到1开始学习大模型。RAG系统&#xff1a;我想搭建属于自己或者企业的RAG系统&#xff0c;我该怎么去做&#xff1f;评估&#xff1a;微调后的模型或者RAG系统&#xff0c;如何评估自己的模型和…
阅读更多...
windows配置dns访问git , 加快访问速度保姆级教程

windows配置dns访问git , 加快访问速度保姆级教程

设置 DNS 访问 Git 需要修改电脑的 DNS 配置。下面是具体的操作流程&#xff1a; 第一步&#xff1a;打开命令提示符或终端窗口 在 Windows 系统中&#xff0c;可以按下 Win R 组合键&#xff0c;然后输入 “cmd”&#xff0c;按下 Enter 键打开命令提示符窗口。在 macOS 或 …
阅读更多...
【活动】GPT-4O：AI语言生成技术的新里程碑

【活动】GPT-4O：AI语言生成技术的新里程碑

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 GPT-4O&#xff1a;AI语言生成技术的新里程碑引言GPT系列简史回顾GPT-1: 初露锋…
阅读更多...
国际荐酒师(香港)协会亮相香港国际葡萄酒和烈酒展览会

国际荐酒师(香港)协会亮相香港国际葡萄酒和烈酒展览会

2024年5月28日至30日&#xff0c;备受瞩目的香港国际葡萄酒和烈酒展览会VINEXPO Hong Kong在香港盛大举办。作为亚太区最盛大的葡萄酒展会&#xff0c;本届展会不仅吸引了全球葡萄酒和烈酒行业的目光&#xff0c;更见证了国际荐酒师&#xff08;香港&#xff09;协会&#xff0…
阅读更多...
(2) qml诞生的原因 和Qt Creator开发环境的介绍

(2) qml诞生的原因 和Qt Creator开发环境的介绍

文章目录 qml诞生原因Qt Quick应⽤程序Qt Creator环境1、MSVC2、MinGWMSVC的优缺点MinGW的优缺点 最后的选择延伸阅读 一些常用的快捷键统一格式化代码统一qml 语言的格式Locator 定位器帮助 qml诞生原因 可以在Qt5中开发的不同类型的经典应⽤程序。桌⾯应⽤程 序正在发⽣着改…
阅读更多...
物联网断点续传

物联网断点续传

断点续传是一种在网络传输中断后&#xff0c;能够从中断的位置继续传输的技术。它可以有效地避免因为网络不稳定、服务器故障、用户操作等原因导致的传输失败&#xff0c;节省了用户的时间和流量&#xff0c;提高了传输的效率和可靠性。断点续传在很多场景中都有广泛的应用&…
阅读更多...
GIS结合物联网：塑造智慧地球的新篇章

GIS结合物联网：塑造智慧地球的新篇章

在信息技术飞速发展的今天&#xff0c;地理信息系统&#xff08;GIS&#xff09;与物联网&#xff08;IoT&#xff09;的深度融合&#xff0c;正以前所未有的方式重塑着我们对世界的认知。本文将深入探讨GIS与物联网结合的原理、应用实践以及面临的挑战与未来展望&#xff0c;共…
阅读更多...
乡村振兴与乡村旅游品牌化：打造具有地方特色的乡村旅游品牌，提升乡村旅游吸引力，促进美丽乡村建设

乡村振兴与乡村旅游品牌化：打造具有地方特色的乡村旅游品牌，提升乡村旅游吸引力，促进美丽乡村建设

目录 一、引言 二、乡村旅游品牌化的重要性 &#xff08;一&#xff09;增强乡村旅游的辨识度 &#xff08;二&#xff09;提升乡村旅游的附加值 &#xff08;三&#xff09;促进乡村文化的传承与创新 三、打造具有地方特色的乡村旅游品牌 &#xff08;一&#xff09;明…
阅读更多...
Python知识点6---列表和元组

Python知识点6---列表和元组

提前说一点&#xff1a;如果你是专注于Python开发&#xff0c;那么本系列知识点只是带你入个门再详细的开发点就要去看其他资料了&#xff0c;而如果你和作者一样只是操作其他技术的Python API那就足够了。 Python的列表和和元组定义方式如下&#xff0c;且注意列表和元组拥有…
阅读更多...
最新文章

Copyright @ 2022~2023