JavaScript学习1
一、JavaScript应该放在什么位置？
1、行间JS，不推荐使用
优势：直接作用于当前元素，直观
劣势：
1）复用率低（无复用性）。
2）结构分离不够清晰（html、CSS 、JS）。
3）维护不方便，后期修改不方便
代码实现如下：
Document
执行结果如下：
2、内部JS：一般在学习时候使用。
优点：
1）结构分离清晰
2）可以复用（只存在于当前页面）
3）较利于维护和修改
劣势：
1）多页面之间无法复用。
2）多页面之间的维护较麻烦。
代码实现：
Document
执行结果：
3、外部JS：推荐在工作中使用。
main.js文件内容如下：
document.querySelector('#box1').onclick = function () {
alert(1);
}
代码实现如下：
Document
执行效果：
优势：
1）代码分离彻底
2）利于后期维护修改
3）不同页面之间也可以复用
劣势：
增加请求数量
注意：
script标签属性：type="text/javascript"
注意：type属性表示内同类型（MIME类型，学习网址：https://www.runoob.com/http/mime-types.html）
调试：
可以使用console.log(要打印的内容或元素)，确认内容是否正确。
console.log(document.getElementById('btn'));
查看console.log内容的步骤：
1）F12》控制台
2）鼠标右键检查》控制台
获取元素的两种方式：
获取元素的方式一：通过Id
Title
获取元素方式二：选择器
Title
总结：通过父级找到子方法
通过父级找到子方法代码实现如下
Title
这是第二个盒子
这是第一个盒子
4、script标签最合适的放置位置
页面读到
标签的时候开始解析页面。当页面结构未发生的时候，在标签中的JS代码如果获取元素，将获取失败。两种解决方案：
1）JS代码放在
中，不推荐这样，如果非要这样的话，需要使用窗口加载window.onland(等待窗口加载完成)
Title
2）JS代码放在
中，让HTML结构先行加载完成。
Title
运行结果：
注意：如果JS代码比较庞大，需要较长的时间读取，会影响页面的加载，造成页面长时间的空白。从用户体验来说，长时间空白会让用户绝对打开的速度很慢，从而造成用户的流失。
案例代码实现：
Title
运行结果如下：