前端JavaScript学习-动态编码-基础
目录
API
JS在页面上做了什么？
浏览器安全
JS运行次序
解释型语言
动态代码 VS 静态代码
客户端代码 VS 服务器端代码
怎样向页面添加JS
内部JS
外部导入
注：本文以MDN Web Docs为基础
API
API是已经建立好的一套代码组件，像是等待被组件的积木，可以实现原本难以实现的功能
API通常分为两类
浏览器API：内建于web浏览器中，可以将数据从周边计算机环境中筛选出来，还可以实现复杂的工作，比如 DOM（Document Obeject Model）用于表示和操作HTML文档的结构、内容和样式，地理API，WebGL等等
第三方API：并没有默认嵌入浏览器中，需要从网上获取它们的代码和信息等
JS在页面上做了什么？
JS一个常见用途就是通过 DOM 这个API动态修改 HTML 和 CSS，以更新用户界面
浏览器安全
每个页面自身就是一个运行代码的独立容器（专业术语是“运行环境”），大多数情况下，每个代码页是独立运行的，每个标签页无法互相影响，如果不这样的话，黑客就可以从其他网页进行盗取数据
JS运行次序
浏览器执行一段JS代码时，通常会从上而下的顺序执行这段代码，比如
const button = document.querySelector("button");button.addEventListener("click", updateName);function updateName() {const name = prompt("输入一个新的名字：");button.textContent = `玩家 1：${name}`;
}
首先通过 querySelector 选择一个按钮，然后通过 addEventListener 给它附上一个事件监听器，将其 "click" 与自定义函数 updateName 绑定，在updateName中通过之前讲过的 prompt 获取用户输入，然后通过 .textContent 修改按钮的值
在上面这段代码中如果一二句调换顺序，就会报错没有声明 button 对象
解释型语言
JS 和 python 一样都是解释型语言，在解释型语言中，代码自上而下运行，且实时返回运行结果，代码在由浏览器执行前，不需要将其转为其他形式，代码直接以文本格式被接收和处理。相对的，像C语言这样的编译型语言就需要先将代码编译成另一种形式才能运行，C语言就是被编译成了机器码（二进制文件），然后才能被计算机运行。无论解释型还是编译型，程序将以二进制的格式运行（计算机只接受二进制），这些二进制是由程序源码产生的
几乎所有JS转换器都用到了一种叫做即时编译的技术，有人可能会问这不是编译了吗？但是JS编译成二进制的过程发生在代码运行中，而非之前
动态代码 VS 静态代码
没有动态更新内容的网页叫做静态页面
客户端代码 VS 服务器端代码
客户端C（Client-side）、服务器端S（Server-side）
我的个人理解就是 前端、后端
客户端代码是在用户的电脑上运行的代码，在浏览一个网页时，它的客户端代码就会被下载，然后由浏览器运行并展示
服务器端代码在服务器上运行，然后运行结果由浏览器下载并展示。流行的服务器端web语言包括：PHP、Python（如Django框架）、Ruby等，JS也可以用作服务器端语言，比如现在流行的 Node.js 运行环境
学习服务器端编码需要的前置知识：
Web服务器-CSDN博客
像项目全栈实战-基于智能体、工作流、API模块化Docker集成的创业分析平台-CSDN博客里面的Nocobase就是用Node.js环境下的服务器端编码
怎样向页面添加JS
内部JS
直接在 </body> 前写
<script>//编写JS代码
</script>外部导入
就像我在 创业分析平台index 文章里面讲的一样，通过在 </body> 前将 src 写入 script
有些时候在 HTML 里面会存在一些 JS 代码，这样不符合拓展性、可维护性，效率低下，正确的做法是
const buttons = document.querySelectorAll("button");for (let i = 0; i < buttons.length; i++) {buttons[i].addEventListener("click", createParagraph);
}
通过纯JS脚本进行操作