JavaScript基础语法知识点梳理

JS 的三大组成部分

1. ECMAScript（ES）
  + 就是我们 js 的语法
  + 也就是我们怎么写代码， 什么地方是字母， 什么地方是数字， 什么地方是符号

2. BOM(Browser Object Model) - 浏览器对象模型
  + 就是一套操作浏览器的属性和方法
  + 操作浏览器的滚动条 地址栏， 改变页面， 关闭页面， 。。。

3. DOM(Document Object Model) - 文档对象模型
  + 就是一套操作文档（html 结构）的属性和方法
  + 操作页面元素， 操作有没有某个元素， 操作样式， 操作类名

JS 的本质
  + 就是使用 js 的语法来操作页面的元素和浏览器
    => 我们管这个叫做网页动效(动画效果)
  + 使用 js 语法和后端进行交互
    => 前后端交互

行内式 js 代码

  + 书写在 a 标签上
    => 直接书写在 a 标签的 href 属性上
    => 因为我们的 a 标签本身有跳转页面的能力
    => 为了和 跳转页面的链接做一个区分, 我们就加一个东西
    => 我们就写 href="javascript: 你要执行的 js 代码 ;"
    => 注意:
      -> href 属性有 javascript:; 就是执行行内式 js 代码
      -> href 属性没有 javascript:; 就是执行跳转链接地址

  + 书写在非 a 标签上
    => 因为一般的非 a 标签是没有点击做点事情的能力
    => 所以我们先要给一个标签添加一个点击做事情的能力
    => 我们在标签上写上 onclick="", 当点击的时候
    => <div onclick="js 代码"></div>


注意:
  => 如果你是写 a 标签的行内式 js 代码
    -> 写在 href 属性上, 需要加一个 javascript:;
    -> <a href="javascript: 一段 js 代码 ;"></a>
  => 如果你写在非 a 标签上行内式 js 代码
    -> 要写在一个事件上
    -> 目前我们就写在 onclick 事件
    -> <div onclick="一段 js 代码"></div>
  => 尽量不要写行内式 js 代码(强烈不推荐)



接收第一个 js 代码
  + alert('hello world')
  + alert() 是固定语法, 表示在浏览器弹出一个提示框
  + 括号里面的内容就是提示框中的文本内容
  + 注意:
    => 如果你在括号里面写的是纯数字, 那么不需要加引号
    => 只要你在括号里面写的不是纯数字, 那么必须要加引号

此时, 这个 a 标签当你点击的时候, 因为有 javascript:;
就不会跳转链接了, 而是会执行一段 js 代码
执行一段让浏览器弹出一个提示框的代码

点击一下试试
我会跳转链接

on: 在 … 上
click: 点击
当你点击在 div 标签上的时候, 会执行后面引号里面那一段 js 代码

点我试试

head 标签的末尾

内嵌式 js 代码
+ 把 js 代码写在一个 script 标签对中
+ 不需要依赖事件, 只要打开页面就会执行掉
+ 一个 script 标签可以写任意行 js 代码, 会按照从上到下的顺序依次执行
+ 一个页面可以书写多个 script 标签, 会按照从上到下的顺序依次执行
+ 一个 script 标签理论上可以写在页面的任何位置
=> 但是推荐放在 head 标签的末尾或者 body 标签的末尾
=> 写在 head 里面和写在 body 里面式有区别的(以后会详细聊)
=> 目前推荐写在 body 标签的末尾
body 标签的末尾

外链式 js 代码
+ 把 js 代码放在一个 .js 后缀的文件里面
+ 在页面中使用 script 标签的 src 属性引入
+ 不需要依赖事件, 打开页面就会执行了
+ 一个 script 标签只能外链一个 js 文件
+ 一个页面可以书写多个 外链式, 会按照从上到下的顺序依次执行
+ 注意:
=> 一个 script 标签一旦被当作外链式引入 js 文件了
=> 那么就不能在当作内嵌式, 在标签对里面写代码了, 写了白写 …/ 上一级路径 ./ 当前路径
JS 的注释
1. 单行注释
+ 以 两个 // 开头, 后面的就是注释
+ 被注释的代码是不会执行
+ 快捷键 ctrl + /
2. 多行注释
+ 写一个 /**/ 符号
+ 我们的注释内容写在两个 * 中间
+ 可以换行书写, 被注释的代码是不会执行
+ 快捷键根据不同的浏览器是不一样的
=> vscode 的快捷键是 shift + alt + a