技术分析之JavaScript

**技术分析之JavaScript的概述**

1. JavaScript（简称JS）是基于对象和事件驱动的脚本语言，主要作用在客户端（浏览器）上。
2. JS提供的作用
* HTML -- 使用标签封装数据
* CSS -- 设置样式
* JS -- 提供的是程序设计的语句（提供方法、变量、判断语句、循环语句和使用对象）

3. JS的特点
* 交互性 -- 用户体验比较好
* 安全性 -- JS程序不能访问本地的硬盘
* 扩平台性 -- 浏览器就可以解析JS文件

4. JS与Java是不同的
* JS和Java没有任何关系
* JS的历史
* Netscape（网景）公司开发和浏览器相关的一些产品。自己开发了一套语言。LiveScript。
* Java诞生了。LiveScript做了升级，改了名JavaScript。
* 当时微软是巨头自己开发一套。语言JScript。IE默认支持JScript。
* 最终推出了版本 ECMAScript语言。现在也一直在使用。

5. 不同点
* JavaScript基于对象，Java是面向对象。
* JS只需要解析就可以执行，Java先编译再执行。
* JS是弱类型的语言，而Java是强类型的语言。

6. JS语言的组成
* ECMAScript -- JS底层的规范
* BOM -- 浏览器对象模型（Browser Object Model）
* DOM -- 文档对象模型（Document Object Model）

7. JS域HTML的结合
* 在HTML文件内直接编写js代码
* 每个HTML的文件，提供了标签<script type="text/javascript">js的代码</script>
* <script>标签可以放在页面的任意的位置上。
<script type="text/javascript">
// 弹出提示框
alert("hello js!!");
</script>

* 先编写xxx.js结尾的文件，在HTML中引入该文件。
* 引入外部的js文件的方式，在<script type="text/javascript" src="js文件的地址">提供了一个属性src，可以引入的js的文件了
* 注意：如果srcipt标签通过src属性引入了外部的文件之后，中间的js代码就不能执行了。
* <script type="text/javascript" src="hello.js"></script>

**技术分析之JavaScript的语法**

1. JS的注释：和Java一样。有三种注释。 // 单行  /*多行注释*/   /** 文档注释 */
2. JS定义变量：标识内存中的一片空间，存储数据。数据是可以变化的。
* 在JS中，因为JS是若类型的语言，定义变量都会使用同一个关键字：var 变量名称 = 值;

3. JS的基本数据类型
* string -- 字符串类型，使用双引号或者单引号都代表字符串
* number -- 数字类型，不区分整形和小数类型
* boolean -- 布尔类型
* undefined -- 未定义，变量声明但是没有赋值
* null -- 引用类型的默认值


4. JS的运算符和语句
* JS的运算符和Java中基本一致
* 有一个特殊的是比较运算符
* == 只比较值
* === 即比较值又比较类型


* JS的语句和Java中基本一致
* 常用的if判断语句和for循环语句等

5. JS的函数（方法）
* 在js中编写方法，提供了一个关键字function。
function 名称(参数列表（x,y）){
方法体;
return; 如果方法有返回值，写return，如果没有，就可以不写。
}

6. JS的输出
* BOM对象的alert()方法
* 向页面中弹出一个提示框！！


* innerHTML属性
* 向页面的某个元素中写一段内容，将原有的东西覆盖
* 获取或者设置文本的内容


* document.write()方法
* 向页面中写内容

7. JS的事件（JS重要的知识点）
* 事件源（在什么地方绑定JS的事件，编写按钮，按钮称为事件源）
* 事件的类型
* onclick -- 点击事件
8. 修改图片的路径
* 获得图片，修改图片的src的属性。document.getElementById("img1").src="2.jpg";


9. JS中的定时器方法
* 查看BOM中的window对象，有如下方法可以使用
* 设置定时器
* setInterval() -- 隔多少毫秒之后，执行一段代码，重复执行。
* setTimeout() -- 隔多少毫秒之后，执行一段代码，只会执行一次。


* 清除定时器
* clearInterval() -- 清除setInterval的定时操作。
* clearTimeout() -- 清除setTimeout的定时操作。

10. onload页面的加载事件：当页面一加载完成，方法就会执行
        11. 使用JS来控制CSS的隐藏和显示的属性
* CSS的display属性
* none -- 隐藏的
* block -- 显示的

* JS操作CSS代码
* document.getElementById().style.property = "值";