小苏同学的知库

# JavaScript的介绍

JavaScript 是一种运行在客户端（浏览器）的脚本编程语言，不需要编译，运行过程中由JS解释器（JS引擎）逐行来进行解释并执行，实现人机交互效果。现在也可以基于Node.js技术进行服务器端编程。


# JavaScript的组成

ECMAScript：简称ES，是JavaScript的语言基础，用来规范JavaScript的基础语法和功能，具有多个版本。

DOM：文档对象模型，是浏览器提供的一套操作元素的API。

BOM：浏览器对象模型，是浏览器提供的一套操作浏览器功能的API。


# JavaScript的作用

  • 网页特效（监听用户的一些行为让网页作出对应的反馈）

  • 表单验证（针对表单数据的合法性进行判断）

  • 数据交互（获取后台的数据，渲染到前端）

  • 服务端编程（node.js）


# JavaScript的书写方式

# 内嵌式

可以在html文档中除了 title 标签外的任意位置使用 script 标签嵌入js代码。

script 标签推荐写在 </body> 上面。

<script>
  // 弹出警示框
  alert('小苏同学的js笔记')
</script>

# 外联式

代码写在一个以 .js 结尾的文件里，通过 script 标签的 src 属性引入这个外部的js文件。

<script src="js文件的路径"></script>

script 标签最强大的一点是可以引入外部域的js文件，它的 src 属性可以是一个完整的URL，这个URL指向的资源可以跟HTML页面不在同一个域中。

<script src="https://www.xiaosutongxue.com/web.js"></script>

注意：script标签之间无需写代码，否则会被忽略！

# 行内式

写在标签的属性里面的，通常都是在 onXXX 这些事件属性里面。

<!-- onclick 点击的时候触发 -->
<!-- 
	由于onclick属性是由双引号包裹，为了避免浏览器解析错误，
	通常采用"外双内单"或者"外单内双"的方式，且双引号/单引号必须成对出现 
-->
<button onclick="alert('hello world')">按钮</button>

总结：

  1. 在3种书写方式中，开发最常用的是外联式。
  2. 由于js代码执行顺序是自上而下的，所以建议将js代码写 body 标签结束之前（原因：用户体验问题，在网络较慢的情况下，可以优先显示网页的结构及样式）
  3. 外联式的script标签内书写代码不会执行

# JavaScript的注释

JS的注释分为两种：单行注释、多行注释。建议多写注释，养成良好的编码习惯。

# 单行注释

// js单行注释（vscode快捷键 "command + /" ）

# 多行注释

注意：多行注释不能嵌套多行注释。

/*
	js多行注释（vscode快捷键 "option + shift + a" ）
*/

# JavaScript的结束符

  • 符号：;
  • 注意：css中必须写，js中可写可不写（换行符会被识别成结束符）。

# JavaScript的常用方法

弹出警示框

用于在浏览器里面弹出警示框，会阻止后续的代码执行，直到点击 "确定" 后才会向下执行。

alert("用来测试是否执行到该步");

控制台输出

在调试代码的时候最常用的，且不会阻止代码的执行。

console.log("这里是控制台输出的信息");

网页文档输出

内容会输出到页面的body标签里面，且内容支持使用html标签，但现在很少用了。

document.write("<h1>小苏同学</h1>");

弹出对话确认框

confirm('确认删除么？')

弹出提示输入框

在浏览器里面弹出一个输入框，让用户输入信息，仅测试使用。

prompt("请输入信息：");

变量 →