前言：最近项目比较紧，有点小压抑，不知道什么时候才能结束这无聊的工作，于是想着学习一点新的知识，前段时间学习了Html标签，以及CSS样式，感觉收获不是很大，所以就以记录的形式来进行学习，也方便我们这群小白一起进步，此外如果对Kotlin也感兴趣的童鞋，希望你关注我的文章哦，文章的结尾都会附加上视频链接（视频并非本人录制），让我们一起奋斗吧！
目录
一、了解JavaScript
1.概念
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。是基于对象和事件驱动并具有相对安全性的客户端脚本语言。
2.使用方式
① 确定对象
② 确定属性
③ 确定事件
④ 用js实现功能
举例说明（体验JS的神奇）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<title>体验JavaScript的神奇</title>
<style>
#div1,#div2{background-color: antiquewhite ;width: 100px;height: 50px;border: 1px solid #666 ;font-size: 10px;display: none}
#div2{display: block}
</style>
</head>
<body>
<input type="checkbox" onmouseover="div1.style.display='block'" onmouseout="div1.style.display='none'">十天内免登陆
<div id="div1">
跟我一起来体验JS的神奇...
</div>
<div id="div2">
我是div2
</div>
</body>
</html>在demo中遇到的问题：
1.id换成class 不能达到效果也就是说 id+style+属性+属性值 可以 ； class+style+属性+属性值不可以；
2. style="visibility: hidden"与 display: none 的区别
style="visibility: hidden" 隐藏后不释放占用的页面空间
display: none 隐藏后释放占用的页面空间
知识延伸：
visibility属性值及代表含义
| visible | 默认。元素框是可见的。 |
| hidden | 元素框不可见，但仍然影响布局。 |
| collapse | 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。 |
display(前三个常用)
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| list-item | 此元素会作为列表显示。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| compact | 此元素会根据上下文作为块级元素或内联元素显示。 |
| marker | |
| table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
| inline-table | 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 |
| table-row-group | 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 |
| table-header-group | 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 |
| table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 |
| table-row | 此元素会作为一个表格行显示（类似 <tr>）。 |
| table-column-group | 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 |
| table-column | 此元素会作为一个单元格列显示（类似 <col>） |
| table-cell | 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） |
| table-caption | 此元素会作为一个表格标题显示（类似 <caption>） |
3.JavaScript 特点：
(1).一种解释性执行的脚本语言。
同其他脚本语言一样，JavaScript也是一种解释性语言，其提供了一个非常方便的开发过程。JavaScript的语法基本结构形式与C、C++、Java十分类似。但在使用前，不像这些语言需要先编译，而是在程序运行过程中被逐行地解释。JavaScript与HTML标识结合在一起，从而方便用户的使用操作。
(2).一种基于对象的脚本语言。
其也可以被看作是一种面向对象的语言，这意味着JavaScript能运用其已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。
(3).一种简单弱类型脚本语言。
其简单性主要体现在：首先，JavaScript是一种基于Java基本语句和控制流之上的简单而紧凑的设计，从而对于使用者学习Java或其他C语系的编程语言是一种非常好的过渡，而对于具有C语系编程功底的程序员来说，JavaScript上手也非常容易；其次，其变量类型是采用弱类型，并未使用严格的数据类型。
(4).一种相对安全脚本语言。
JavaScript作为一种安全性语言，不被允许访问本地的硬盘，且不能将数据存入服务器，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失或对系统的非法访问。
(5).一种事件驱动脚本语言。
JavaScript对用户的响应，是以事件驱动的方式进行的。在网页（Web Page）中执行了某种操作所产生的动作，被称为“事件”（Event）。例如按下鼠标、移动窗口、选择菜单等都可以被视为事件。当事件发生后，可能会引起相应的事件响应，执行某些对应的脚本，这种机制被称为“事件驱动”。
(6).一种跨平台性脚本语言。
JavaScript依赖于浏览器本身，与操作环境无关，只要计算机能运行浏览器，并支持JavaScript的浏览器，就可正确执行，从而实现了“编写一次，走遍天下”的梦想。
因此，JavaScript是一种新的描述语言，其可以被嵌入到HTML文件中。JavaScript语言可以做到响应使用者的需求事件（例如表单的输入），而不需要任何的网络来回传输资料。所以当一位使用者输入一项资料时，此资料数据不用经过传给服务器（server）处理再传回来的过程，而直接可以被客户端（client）的应用程序所处理。
4.发展历史：
| 时间 | 公司 | 发展 | 贡献 |
| 1992 | Nombas | 嵌入式脚本语言cmm，后改名ScripEase | 起源 |
| 1995 | Netscape(网景)与Sun | 为了解决像服务器提交信息之前的验证 开发出了LiveScript 后改名JavaScript | 诞生 |
| 1997 | Netscape、Sun、微软、Borland等 | 标准化ECMAScript | 标准化 |
| 1998 | 微软 | 山寨打败了原创 JScript 成为标准 | 标准 |
| 1999- | 1999年后 都是基于JScript |
5.JavaScript组成
1.核心（ECMAScript）
2.文档对象模型（Dom）
3.浏览器对象模型（Bom）
6.视频链接
https://pan.baidu.com/s/1PMZPatAY4jCTMzhGza_qoA
密码：uztr