一、JavaScript简介
JavaScript是用来制作web页面交互效果，提升用户体验的语言。
1.1 JavaScript 和 ECMAScript的关系
ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association，制定的标准。
JavaScript是由公司开发而成的，公司开发而成的一定是有一些问题，不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。
简单来说ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）。就是说，你JavaScript学完了，Flash中的程序也会写了。
1.2 JavaScript的发展历史
2003年之前，JavaScript被认为“牛皮癣”，用来制作页面上的广告，弹窗、漂浮的广告。什么东西让人烦，什么东西就是JavaScript开发的。所以浏览器就推出了屏蔽广告功能。
2004年JavaScript命运开始改变了，那一年谷歌公司，开始带头使用Ajax技术了，Ajax技术就是JavaScript的一个应用。并且，那时候人们逐渐开始提升用户体验了。
例子：搜索框的智能感应拓展词条功能，注册时的Ajax验证功能。
2007年乔布斯发布了iPhone，这一年开始，用户就多了上网的途径，就是用移动设备上网。
JavaScript在移动页面中，也是不可或缺的。并且这一年，互联网开始标准化，按照W3C规则三层分离，人们越来越重视JavaScript了。
2010年的时候，人们更加了解HTML5技术了，HTML5推出了一个东西叫做Canvas（画布），工程师可以在Canvas上进行游戏制作，利用的就是JavaScript。
2011年，Node.js诞生，使JavaScript能够开发服务器程序了。
1.3 JavaScript是前台语言，而不是后台语言
JavaScript运行在客户的电脑里面，而不是服务器上，所以我们称为“前台语言”。JavaScript就是一个简单的制作页面效果的语言，不能操作数据库。就是服务于页面的交互效果、美化、绚丽。“后台语言”是运行在服务器上的，比如PHP、ASP、JSP等等，这些语言都能够操作数据库，都能够对数据库进行“增删改查”操作。（Node.js除外）。
二、基本使用
2.1 注释
单行注释: //xxx 快捷键ctrl+/
多行注释 /* xxx */ 快捷键ctrl+shift+/
2.2 直接量
“直接量”也称为“字面量”，就是看见什么，它就是什么。简单的直接量有2种：数字、字符串。
2.3 变量
var就是英语“variant”变量的缩写
只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字。
变量的类型:
2.3.1 数值型
typeof 表示某变量的类型
JavaScript种，只要是个数，那么就是数值型的，无论整浮、无论大小、无论正负，都是number类型的。
2.3.2 字符串型
2.4.1 用户的输入
var a = prompt("hint"); //接收用户输入进来的字符串
2.4.2 类型转换
parseInt("5");
parseInt带有自动净化功能
parseInt("666啦啦啦啦999"); //只保留最开头的数字666
parseInt(5.8); //取整且不四舍五入打印5
2.5 布尔型
var a=true;
2.6 关系运算符
> 大于号
< 小于号
>= 大于或等于
<= 小于或等于
== 等于
=== 全等于
!= 不等于
!== 不全等于 (全等于取反)
2.7 逻辑运算符
逻辑运算符有三个：
&& 与（且）
|| 或
! 非
三、算法练习
3.1 报7游戏的地雷数
游戏玩儿法就是，大家轮流报数，如果报到能被7整除的数字，或者尾数是7的数字，都算踩地雷了。就应该罚唱歌。请在控制台输出1~60之间的所有“地雷数”。
<script type="text/javascript">
for(i=1;i<=60;i++){
if (i%7==0||i%10==7) {
console.log(i);
}
}
</script>
3.2 水仙花数
水仙花数是一种特殊的三位数，它的特点就是，每个数位的立方和，等于它本身。
for(var i = 100 ; i <= 999 ; i++){
//得到这个i的每一个位
var baiwei = parseInt(i / 100);
var shiwei = parseInt(i % 100 / 10);
var gewei = i % 10;
//验证是否符合水仙花数的特点
if(Math.pow(baiwei,3) + Math.pow(shiwei,3) + Math.pow(gewei,3) == i){
console.log(i);
}
}
3.3 用户输入一个数，输出因数的个数
用户输入一个数，输出所偶遇能够整除它的数字。
比如，
用户输入48，此时输出1、2、3、4、6、8、12、16、24、48 。 共10个数字。
//用户输入一个数字
var num = parseInt(prompt("请输入数字"));
// 找因数
// 比如用户输入48，要从1~48，分别让48除以这个数
// 穷举法
var amount = 0; //个数，累加器
for(var i = 1 ; i <= num ; i++){
if(num % i == 0){
// console.log(i); //不想输出
amount++; //自增1
}
}
//循环语句结束之后，总量就已经产生了，弹出结果：
alert(amount);
四、函数
4.1 语法：
4.1.1 自定义函数
function fun(){
alert("我是自定义函数")
}
fun(); // 函数不调用，自己不执行
4.1.2 函数直接量声明
var fun1 = function(){
alert("直接量声明")
}
fun1(); 也需要调用
4.1.3 利用Function关键字声明(基本不常用)
var fun2 = new Function("var a = 10; var b = 20; alert(a+b)");
fun2();
4.2 调用语法:
函数名字();
4.3 参数
function xxx(a,b){ //形式参数，表示需要接受一个值
}
调用时: xxx(100,"lalala"); //实际参数，真实的数值，字符串
实际参数和形式参数的个数要相同。
4.4 返回值
console.log(qiuhe(3,4));
function qiuhe(a,b){
return a+b;
}
五、事件三要素
1 事件源
要触发的对象/发起者
2 事件
怎么触发的这个事情，例如鼠标单击、经过、按键盘等
3 事件处理程序
发生了什么事情
事件源.事件= function(){ 事件处理函数 }
六、小知识点
1 隐藏样式
Display: none display: block ;
Visibility: hidden; visibility: visible;
Display 隐藏不占位置
Visibility:hidden 隐藏占有位置(停职留薪)
Overflow:hidden; 隐藏超出的部分。
2 入口函数
window.onload = function(){
内部放js
}
这个函数的意思就是说，当我们页面加载完毕之后，采取执行函数体里面的js部分。 就是说等页面的结构样式 节点等加载完毕。。。
所以，这句话也可以页面的顶端即可。
3 Padding
内边距 会影响盒子大小
行内元素 尽量不用 上下的padding和margin
继承的宽度 padding不会挤开 。
4 JS的书写位置
4.1 行内式
<button onclick="alert('你好吗')">点击我</button>
4.2 内嵌式
<script type="text/javascript"> </script> //任何一个地方
4.3 外链式
<script type=”text/javascript” src=”xx.js”></script> //标记之间不能写任何东西 会报错
5 数据类型
Js的数据类型分为： 字符型 数值型 布尔型 null undefined Js是一种弱数据类型。
5.1 字符型
转换为字符型:
1.利用“” (双引号)
2. 利用String(); 转换为字符型
5.2 布尔型
数据类型转换为布尔型：
1.利用!!
console.log(typeof !!num);
2.利用Boolean()
false、undefined 、null、0、”” 为 false
true、1、”somestring”、[Object] 为 true
5.3 数值型
数值的前面带 0 表示八进制
Var num = 020; // 0*80+2*81 = 16
数值的前面带 0x 表示十六进制
var result = 0xb; // 11
转换为数值型:
1.利用- * /都可以转换
2 利用Number( )
parseInt(110,2) //表示2进制 把10 这个2进制转换为 10进制 0*20+1*21 + 1*22 = 6
5.4 Null undefined
Null 空的 没有值。
Undefined 未定义的 应该有值，但是没有给。
Null “”
5.5 变量提升
var a = 18;
f1();
function f1(){
var b=9;
console.log(a);
console.log(b);
var a = '123';
}
// 输出: undefined 9
5.6 判断用户输入事件
正常浏览器 : oninput
Ie 678 支持的 ：onpropertychange
mouseover事件跟mouseenter事件的区别：
mouseover/mouseout事件，鼠标经过的时候会触发多次，每遇到一个子元素就会触发一次。
mouseenter/mouseleave事件，鼠标经过的时候只会触发一次
