JS学习笔记一——JavaScript 组成部分及书写位置

一、JavaScript的组成部分

BOM、DOM、ECMAScript 是 JavaScript 的三大核心组成部分。

三大组成部分：
1、BOM（Browser Object Model）指的是操作浏览器的内容，例如：控制网页滚动条滚动，网页的滚动条是浏览器自带的内容，而不是人为代码生成的，详细介绍见此文章。
2、DOM（Document Object Model）指的是操作文档流的内容，例如：JS操控轮播图定时切换。
3、ECMAScript 是 JS 代码的书写语法与规则。

JS 的作用是利用 ECMAScript 语法去操作浏览器发生一些变化（BOM 操作）以及操作文档流发生一些变化（DOM 操作）。

二、JavaScript 书写位置

1. 行内式（不推荐）
   直接把代码写在标签上，分为两种情况：
   一是 a 标签，在 href 属性中填写 javascript：任意 js 代码；作为属性值，点击链接后执行 js 代码；
   二是非 a 标签，给标签添加行为属性，例如：onclick 点击行为属性，在属性值中写 js 代码，点击后执行 js 代码；
   代码如下：

   <!-- a 标签 -->
   <a href="javascript:alert('hello world');">链接</a>
   <!-- 非 a 标签 -->
   <div onclick="alert('hello world2')">盒子</div>
   

2. 内嵌式
   把 js 代码书写在一个 script 标签对中， script 标签对放在 body 标签中，该形式不需要依赖任何行为，打开页面就会执行；
   代码如下：

   <script>
       alert("hello");
   </script>
   

3. 外链式（最推荐）
   把代码写在一个 JS 文件中，以 .js 作为文件后缀，通过在 HTML 文件的 body 标签中设置 script 标签对，在 script 标签中添加 src 属性，属性值设为需要引入的 JS 文件路径。该形式同样不需要依赖任何行为，打开页面就会执行；
   代码如下：

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

三、结语

本学习笔记主要用于记录博主个人的前端学习过程，目前学习资源来自b站千锋的前端1000集教学，如笔记内容有写错的地方，希望大家能够指出。同时，欢迎看到博文的小伙伴们与我一同学习！