JavaScript基础（一）

---

一、javaScript组成

1.ECMAScript（核心）
2.DOM(document object model)文档对象模型
3.BOM(browser object model)浏览器对象模型

二、JavaScript引入及书写

1.引入

所有script标签都是顺序执行的

1.内部书写

(1)位于 head 部分的脚本：

当你把脚本放置到 head 部分后，必须等到全部的javascript代码都被下载、解析和执行完成后，才能开始呈现页面的内容（浏览器在遇到body标签才开始呈现内容）。

(2)位于 body 部分的脚本：

为了避免上述问题，现代web应用程序一般把javascript引用放在body中，
放在页面内容后面。
这样，在解析包含的javascript代码之前，页面内容将完整呈现。

2.外部引入

(1)所有的script元素都放在页面的head元素中。
<script src="外部Js文件路径"> js代码 </script>
href与link的区别：

• 所有href 指向文件中所用到的地址都是指向这个对于链接文件的，而不是指向当前网页的
• 所有src 指向的文件中所用到的地址都是指向相对当前页面的
• script和link加载外部文件时是一个加载完成后在继续加载下一个，这种叫做同步加载
• img标签在加载过程中，是并行同时加载，这叫做异步加载
  
  

(2)外部标签脚本不能含有script标签，直接写代码

(3)async defer属性

<script src="" async defer></script>

script标签可写在标签前/中/后，可调用前面的标签
1.async:异步加载,不需要等待a.js加载完就可以继续向后同时加载b.js，如果b.js调用a.js，则b写在a后面；
2.defer:当所有内容被加载完成后，执行当前js内容（最后执行）
3.直接写在标签内

<p onclick="alert('你好');">点击我</p>

2.书写

点语法
console.log(“aaa”);
//（1）属性，用等号
//张三.手指=3；谁的什么
//（2）方法，用（）
//戴宗.跑步（一级符）；//谁做什么事
//（3）每句话后面必须加;
//（4）外层的引号可以是双引号可以是单引号，但是不能和内层的相同

3.树

1.网页标签树即DOM树；
2.css根据DOM树形结构形成css树；
3.DOM树和css树和并形成了DOM渲染树

---

4.锚点

<a href="#">超链接</a>

（1）锚点的指向


a.任何标签的id；
b.指向a标签的name属性；
（2）点击锚点产生的动作
a.历史纪录；
b.刷新纪录；
c.获取锚点数据（地址）；
（3）阻止页面刷新、历史生成和变化

a <href="javascript:void(0)"></a>

（4）a标签模仿按钮

<a href="javascript:alert(123)"></a>

在超链接的href中是可以直接写入javascript:js语句的

三、注释

1.单行注释：ctrl+/
2.块级/多行注释：ctrl+shift+/
3.作用：
a.解释代码内容
b.将部分代码封存
c.记录版本升级的修缮问题
4.注释块不能嵌套，但是注释块中可以出现单行注释

四、调试

浏览器面板
1.Element
Styles/Computed/Event Listeners（事件监听器）/DOM Breakpoints/Properties（参数）/Accessibility
2.Console

3.Sources

4.Sources

5.Performance观察数据是否有数据泄露

五、常用方法

1.console.log()写入到浏览器的控制台
2.console.dir()可以显示一个对象的所有属性和方法
3.console.trace()用于显示当前执行的代码在堆栈中的调用路径。
4.console.error()方法用于输出错误信息到控制台。
5.alert() 警告消息框/ok对话框/弹出框
6.confirm() 确认消息框，可以得到确定或者取消的结果true，false
7.prompt() 提示消息框----就是专门用来给用户提供输入窗口的,并返回输入结果
prompt(1,2);
（1）是输入框提示内容
（2）输入框默认结果

prompt("你的年龄是？"，30岁);

运行结果是：

8.document.body 获取body标签

document.body.innerHTML="你好";

作用：将body里面的内容替换为你好
innerHTML所有标签都可用，写入到html元素
9.document 文档

document.write("你好");

作用：在文档中写入你好
write只对document起作用

10.通过id获取div1的元素并写入你好

var div1 = document.getElementById("div1");
div1.innerHTML="你好";

11.点击事件

div1.onclick=function(){
        div1.innerHTML="不错，你点中了";
}