javascript第一节课

javascript

文章目录

  • javascript
    • 1.知识体系
    • 2.引用方式
    • 3.加载方式
    • 3.1.默认同步
    • 3.2.使用同步加载
      • 补充:script 放置位置
    • 4. 控制台指令

1.知识体系

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

2.引用方式

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

-内部样式:script 也有内部脚本,仅适用于当前 html
放 置 于 s c r i p t 内 部 \color{red}{放置于script内部} script

<script>
  alert("Hello World");
script>
  • 外部样式:通过 script 里的 s r c 属 性 \color{red}{src属性} src进行引用
<script src="test1.js">script>
  • 行内样式/内联样式,仅作用在当前的元素上
<h1 style="color:red" onclick="alert('hello world')">Hello Worldh1>
<h1 style="color:red" onclick="alert('this.innerHTML') ">Hello 张老师h1>




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 放置位置

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

4. 控制台指令

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

javascript第一节课_第1张图片

  • console.log()
  • 执行简单的指令,把结果打印出来
  • cnsole.info()同上
<script>
  let email = "[email protected]";
  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>

javascript第一节课_第2张图片

你可能感兴趣的:(javascript)