javascript第一节课

javascript

1.知识体系

1. ECMAScript: 基本语法，变量，常量，流程控制，对象…
2. DOM: Document Object Model, 文档对象模型，规定了 HTML 文档的程序接口(API)
3. BOM: Browser Object Model, 浏览器对象模型，规定了操作浏览器中各个对象的 API

---

2.引用方式

任何一个成员，如果想进入 HTML 的文档中作为一个元素，那就必须引用标签
所以，js 引用到 html 中，必须要标签，<script></script>

-内部样式：script 也有内部脚本，仅适用于当前 html
$放置于script内部$

<script>
  alert("Hello World");
</script>

• 外部样式：通过 script 里的$src属性$进行引用

<script src="test1.js"></script>

• 行内样式/内联样式，仅作用在当前的元素上

<h1 style="color:red" onclick="alert('hello world')">Hello World</h1>
<h1 style="color:red" onclick="alert('this.innerHTML') ">Hello 张老师</h1>
<!-- 补充：this.innerHTML引用的是<h1>里的值--Hello 张老师 -->

<!-- οnclick="alert(),行内脚本，通过事件属性或者自有属性添加到元素 -->

---

3.加载方式

3.1.默认同步

• 浏览器解析 html 文档时，一旦遇到 script 标签时会中断当前页面解析，去下载 js，下载完成后去执行 js 后，再继续解析 html 代码

<script>
  alert("我会中断当前的页面解析");
</script>
<h1>php中文网</h1>
<h1>php中文网</h1>
<h1>php中文网</h1>
<h1>php中文网</h1>
<h1>php中文网</h1>

当弹窗出现时会中断页面的解析，后面的’h1’内容看不到了

3.2.使用同步加载

• defer: 可以实现 js 的下载与 html 的解析同步进行，它不会中断 html 的解析，直到 html 的 dom 创建完成才执行，对顺序有要求。（适用于外部引用）
• async：只关注 js 脚本的下载不会中断 html 的解析就行，只实现了下载 js 和 html 的同步，竞争下载（速度更快）
• 选择的依据：
  defer 涉及到 dom 的操作，或对 js 的执行顺序有要求。
  async:只为了求快点 -不管是否涉及 dom,

补充：script 放置位置

全部放到</body>之前就可以啦
这是默认位置，也是建议位置，无论写到哪里，浏览器都会偷偷地放回该位置

4. 控制台指令

在浏览器页面点击 F12 或者打开鼠标右键进入我们的控制台，（用于我们方便执行 js 的代码）
如图所示：

• console.log()
• 执行简单的指令，把结果打印出来
• cnsole.info()同上

<script>
  let email = "admin@php.cn";
  console.info(email);
  console.log("Hello World")

  console.log("我的邮箱是："，email,"用户名是：",user.name);
  // 另一种表达方法
  console.log("我的邮箱是：%s,用户名是：%s"，email,user.name);
</script>

• console.error("");打印一个错误警告
• console.warn("");同上

<script>
  console.error("不好意思，参数不能为空");
  console.warn("不好意思，参数不能为空");
</script>

• 断言函数：console.assert() 判断表达式允许结果是否正确

<script>
  console.assert(10 > 5, "出错了");
  console.assert(10 < 5, "出错了");
  // 弹出错误提示信息，
</script>

• console.table();用 table 方式来显示
• console.dir(); 将数据以 js 对象方式列表显示出全部属性或者方法

<script>
  const user = {
    id: 1,
    name: "admin",
    age: 30,
  };
  console.table(user);
  console.dir(user);
</script>