脚本

@JavaScript

任何能够使用 JavaScript 实现的应用系统，最终都必将用 JavaScript 实现

-Jeff Atwood 定律

概述

. 布兰登艾奇 Brandon Eich 于1995年5月，利用10天开发出 JavaScript 语言

. 单线程、客户端脚本、解释性语言，由浏览器解释执行；浏览器本身不会执行JS，而是通过内置的JS引擎/解释器逐行解释并执行JS

. 区分大小写 - Case Sensitivity

. 每条语句以分号; 结束[非强制性，但是建议]

. 三大部分：ECMAScript 规范、DOM - 文档对象模型 Document Object Model 和 BOM-浏览器对象模型 Browser Object Model

JavaScript = ECMAScript + DOM + BOM

. ECMA Script，简称ES；现在已发展到ES14

脚本的作用

. 操作对象使其具有某种行为，实现人机交互

. 对象可以是 DOM、也可以是 BOM，还可以是 JavaScript 本身

. 行为，大多以事件 - Event 的形式体现出来

应用

. 表单校验

. 网页特效

. 服务端开发 Node.js

. 桌面程序/Apps Electron

. 物流网 Ruff

. 游戏开发 Cocos

代码位置

行内 JavaScript

. 写在元素上，仅适用当前元素；通常只用于简单的逻辑

. 不符合结构 - 样式 - 行为三分离的原则，现在很少使用

<div onclick="alert('hi')">click me</div>

内部 JavaScript

. 写在页面的 <script> 内

. 仅适用当前页面，不便于逻辑共享

<div onclick="fn()">click me</div>

<script>
  function fn() {
    alert('hi');
  }
</script>

. 如果 JavaScript 需要操作元素，为保证元素已就绪，通常将脚本放在 <body> 的最后面

<body>
  // ...
  <script>
    // ...
  </script>
</body>

. 也可以写在 onload 函数中，此时脚本可以放在页面任何地方

<script>
  window.onload=function(){
    // ...
  }
</script>

外部 JavaScript

. 将业务逻辑放在单独的 JavaScript 文件中，后缀名是 .js；使用 <script> 的 src 属性引入[推荐]

. 便于共享逻辑

. 库文件都是以外部 JavaScript 的形式引入，可以服务于多个项目|页面|模块

. 有些 <script> 引入需要放在头部<head>；大部分都放在 <body> 最后面

<body>
  // ...
  <script src="./tmp.js"></script>
</body>

代码组织

引入

变量

函数或方法

初始化

事件侦听器

let form=document.querySelector('form');

function submit(){
  //your code
}

form.addEventListener('submit', submit);