JavaScript简介
JavaScript是什么
JavaScipt是运行在客户端（浏览器）上的一种编程语言(脚本语言)
注：脚本语言：不需要编译，运行过程中由js解释器逐行解释并且执行
现在也可以基于node.js技术进行服务器编程
浏览器分成两部分∶渲染引擎和JS引擎
-
渲染引擎︰用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
-
JS引擎∶也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8 浏览器本身并不会执行IS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。
JavaScript的作用
-
表单动态校验（密码强度检测） （ JS 产生最初的目的 ）
-
网页特效
-
服务端开发(Node.js)
-
桌面程序(Electron)
-
App(Cordova)
-
控制硬件-物联网(Ruff)
-
游戏开发(cocos2d-js)
JavaScript的组成
JavaScript 包括 ECMAScript、WebAPI ( DOM、BOM)
-
ECMAScript：JavaScript 的语法标准。包括变量、表达式、运算符、函数、if 语句、for 语句等。
-
DOM：Document Object Model（文档对象模型），JS 操作页面上的元素（标签）的 API。比如让盒子移动、变色、改变大小、轮播图等等。
-
BOM：Browser Object Model（浏览器对象模型），JS 操作浏览器部分功能的 API。通过 BOM 可以操作浏览器窗口，比如弹框、控制浏览器跳转、获取浏览器分辨率等等。
通俗理解就是：ECMAScript 是 JS 的语法；DOM 和 BOM 是浏览器运行环境为 JS 提供的 API。
HTML/CSS/JS 的关系
HTML/CSS 标记语言–描述类语言
-
HTML 决定网页结构和内容( 决定看到什么 )，相当于人的身体
-
CSS 决定网页呈现给用户的模样( 决定好不好看 )， 相当于给人穿衣服、化妆
JS 脚本语言–编程类语言
-
实现业务逻辑和页面控制( 决定功能 )，相当于人的各种动作
JS入门
JS的引入位置
JS 代码的书写位置在哪里呢？这个问题，也可以理解成：引入 JS 代码，有哪几种方式？有三种方式：（和 CSS 的引入方式类似）
方式1：行内式
<input type="button" value="点我点我" onclick="alert('this is 方式1')" />
解释：
-
可以将单行或少量 JS 代码写在 HTML 标签的事件属性中（以 on 开头的属性），比如放在上面的
onclick点击事件中。 -
这种书写方式，不推荐使用，原因是：可读性差，尤其是需要编写大量 JS 代码时，很难维护；引号多层嵌套时，也容易出错。
-
关于代码中的「引号」，在 HTML 标签中，我们推荐使用双引号，JS 中推荐使用单引号。
方式2：内嵌式（内联式）
我们可以在 HTML 页面的 <body> 标签里放入<script type=”text/javascript”></script>标签对，并在<script>里书写 JavaScript 代码：
<script type="text/javascript">
// 在这里写 js 代码
alert('this is 方式2');
console.log('this is 方式2');
</script>
解释：
-
tyue属性中的text 表示纯文本，因为 JavaScript 代码本身就是纯文本。当然，type属性可以省略，因为 JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
-
可以将多行 JS 代码写到
<script>标签中。 -
内嵌式 JS 是学习时常用的书写方式。
方式3：外链式（引入独立的JS文件）
新建一个demo.js
alert('this is out js file')
在html文档中像css引入样式文件一样引入
<!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>
<!-- 外链式：引入外部的 js 文件：这个 demo.js 文件与当前的 html 文件，处于同一级目录 否则要写相对路径-->
<script src="demo.js"></script>
</body>
</html>
解释：
-
上面这段代码，依然是放到 body 标签里，可以和内嵌的 JS 代码并列。
-
上方代码的 script 标签已经引入了外部 JS 文件，所以这个标签里面，不可以再写 JS 代码。
-
方式2和方式3不能混用。
我们在实战开发中，基本都是采用方式 3，因为将 html 文件和 js 文件分开的方式，有利于代码的结构化和复用，符合高内聚、低耦合的思想。很少会有人把一大堆 JS 代码塞到 单个 html 文件里。
扩展知识
window.onload：先加载，最后执行
上面的三种方式，有个共同的地方是：JS 代码都是写在 body 标签中的，准确来说，是在页面标签元素（比如 title 标签）的后面，在 </body>结束标签的前面。
为什么一般是按这样的顺序来写呢？这是因为：浏览器默认遵循HTML文档的加载顺序，即按照从上至下的加载顺序解析网页（这句话很重要）。所以，通常情况下，我们会把JS代码写在 body 内部的末尾。
然而，当你需要通过 JS 来操作界面上的标签元素时，假如将 JS 代码或者<script>标签写到<head>标签中，或者写在HTML标签元素的前面，那么这样的 JS 是无效的，因为标签元素在此时都还没来得及加载，自然无法操作这个元素。
重点来了：当你需要通过 JS 来操作界面上的标签元素时，如果实在想把 JS 写到<head>标签中，那么就必须用 window.onload 将 JS 代码进行包裹。代码格式如下：
<head>
window.onload = function(){
// 这里可以写操作界面元素的JS代码，等页面加载完毕后再执行。这里面的JS代码，会延迟执行。
...
}
</head>
window.onload 的含义是：等界面上所有内容都加载完毕后（不仅要等文本加载完毕，而且要等图片也要加载完毕），再执行window.onload 内部的代码。做到了先加载，最后执行，也就是：延迟执行，等页面加载完毕后再执行。我们可以根据具体需要来决定，将 window.onload 写在 <head>标签中，或者写在<script>标签中。
<noscript> 标签：浏览器不支持JS脚本时的降级方案
<noscript> 标签是一种HTML标签，用于提供在浏览器禁用JavaScript或无法执行JavaScript脚本时的替代内容。它允开发者在需要时向用户显示备用内容。这有助于提高网站的可访问性和用户体验。
如果有些浏览器不支持 JS 脚本，或者用户禁用了浏览器的JS脚本（如下图），那么，该如何给用户提供一个友好的提示呢？我们可以通过 <noscript> 标签作为降级的处理方案。
<noscript>
<!-- 降级方案：这里放置备用内容，当浏览器禁用 JS 或者浏览器不支持 JS 时将显示 -->
<p>请启用JavaScript以获得最佳网站体验。</p>
</noscript>
说明：
-
<noscript>标签内部可以包含任何HTML内容，通常包括用于向用户传达信息或提供备用功能的文本、图像、链接等。 -
<noscript>标签的内容仅在浏览器不支持或禁用 JS 的情况下才会显示。换而言之，如果用户的浏览器支持JS脚本，则<noscript>标签里的内容将无法显示，会被忽略；如果用户的浏览器不支持JS脚本（或者关闭了JS脚本），则会显示<noscript>标签的内容
JS简单语法规则
注释
注释：即解释、注解。注释有利于提高代码的可读性，且有利于程序员之间的沟通和工作交接。
注释可以用来解释某一段代码的功能和作用；通过注释，还可以补充代码中未体现出来的部分。代码只是开发工作的结果，注释可以阐述开发工作的过程、思路、注意事项，以及踩过的坑。
注释可以是任何文字，可以写中文。
我们不要把 HTML、CSS、JavaScript 三者的注释格式搞混淆了。
HTML 的注释
<!-- 我是 HTML 注释 -->
CSS注释
/* 我是 CSS 注释 */
JavaScript注释
单行注释：
// 我是注释
多行注释：（写法1）
/* 多行注释1 多行注释2 */
多行注释：（写法2）
/** * 多行注释1 * 多行注释2 */
VS Code 中，单行注释的快捷键是「Ctrl + /」，多行注释的默认快捷键是「Alt + Shift + A」。
当然，如果你觉得多行注释的默认快捷键不方便，我们还可以修改默认快捷键。操作如下：
VS Code --> 首选项 --> 键盘快捷方式 --> 查找“注释”这两个字 --> 将原来的快捷键修改为其他的快捷键，比如「Ctrl + Shift + /」。
文档注释（JSDoc）
JSDoc 是 JavaScript 中用于文档注释的一种标准化格式。写完 JSDoc 的注释之后，再通过相关工具，开发者便可以为函数、方法、类和变量等添加注释，以便生成可读性强的API文档。
/**
* 这是一个示例函数，用于求两个数字的和。
* @param {number} num1 - 第一个数字
* @param {number} num2 - 第二个数字
* @returns {number} - 两个数字的和
*/
function sum(num1, num2) {
return num1 + num2;
}
换行以及大小写
-
JS 对换行、缩进、空格不敏感。每一条语句以分号结尾。
-
每一条语句末尾建议加上分号。
当存在换行符（line break）时，大多数情况下可以省略分号，JavaScript 会将换行符理解成“隐式”的分号，进而自动添加分号。
也就是说，分号不是必须加的，如果不写分号，浏览器会在换行符的位置自动添加分号，但是会消耗一些系统资源和性能，甚至有可能添加错误，导致一些奇怪的bug。
-
所有的符号都是英文的，比如括号、引号、分号。
-
JS 严格区分大小写。HTML和CSS不区分大小写，但是 JS 严格区分大小写。
输入输出语句
为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：
| 方法 | 说明 | 归属 |
|---|---|---|
| alert(msg); | 浏览器弹出警示框 | 浏览器 |
| console.log(msg); | 浏览器控制台打印输出信息 | 浏览器 |
| prompt(info); | 浏览看弹出输入框，用户可以输入 | 浏览器 |
alert()
如果写了两个 alert()语句，则网页的效果是：弹出第一个警告框，点击确定后，继续弹出第二个警告框。
补充：该方法只能传入一个参数。
console.log()
用于在浏览器的控制台中输出信息，里面可以传入一个或多个参数，常用于代码调试和测试。console 表示“控制台”，log 表示“输出”。括号里可以写字符串、数字、变量、表达式等。
alert() 主要用来显示消息给用户，console.log() 用来给程序员做调试用。
confirm()
弹窗上有“确认”和“取消”两个按钮，点击“确定”返回 true，点击“取消”返回 false。
prompt()
prompt()就是专门弹出能够让用户输入内容的对话框。用得少，测试的时候偶尔会用。
alert()和 prompt()的区别：
-
alert() 语句中可以输出数字和字符串，如果要输出字符串，则必须用引号括起来；prompt()语句中，用户不管输入什么内容，都是字符串。
-
prompt() 会返回用户输入的内容。我们可以用一个变量，来接收用户输入的内容。
document.write()
该方法的作用是向网页中写入文本内容，可以是 HTML 代码。传入的参数可以是一个或者多个字符串。
标签：浏览器,简介,代码,JavaScript,JS,注释,标签 From： https://www.cnblogs.com/tianzeng-717/p/18158169