1.体验js
1.1Alert弹框
window.alert("我是弹框")；
window窗口对象，一般是可以省略的。alert弹框可以在调试js代码时使用。
1.2console控制台输出
console.log("输出")控制台输出，普通输出语句。
console.info("输出")控制台输出信息。
console.warn() 控制台警示。
console.error();错误提示。
一般常用console.info()输出到控制台来调试js代码。
1.3document.write()文档打印输出
document文档对象，不可以省略，document.write()可以直接输出信息到页面。比如可以用它来做倒计时，每隔一秒输出新的时间一次。
2.变量
2.1变量的命名
-
变量命名必须以字母或是下标符号”_”或者”$”为开头。
-
变量名长度不能超过255个字符。
-
变量名中不允许使用空格。
-
不用使用脚本语言中保留的关键字及保留符号作为变量名。
-
变量名区分大小写。
2.2作用域
变量分为局部变量和全局变量。
全局变量：1.在方法外声明的变量；2.在方法内没有使用var声明，直接使用的变量（这种属于隐式全局变量）。
局部变量：在方法内声明的变量（作用域是方法内）。
例如：
var a = 10;function fun(){ a = "global";}console.log(a); //输出 ？var a;function fun(){ a = "global"; }fun();console.log(a);
则上面的输出：10，下面的输出global。原因是上面输出的时候并没有调用fun函数，输出的10，下面调用了fun函数，a被覆盖成了global（函数不调用不会执行）。
看下面一个例子：
var a = 1 function func() { a = b = 2 } func() alert(a) alert(b)
输出的a.b都是2，而不是a是2，b报错，因为这里a开始等于1后来调用func函数，a被覆盖为2，而2没有用var声明，属于隐式的全局变量，出了func函数照样可以用的，所以不会报错。
3.Js事件
Js事件三要素：事件源，事件，事件处理程序
3.1事件源
事件源是事件的发起者（一般是个名词），谁触发了某次事件，那么谁就是事件源。
3.2事件
事件指触发的操作（一般是个动词）。常见的事件如下：
| 事件名 | 说明 |
|---|---|
| onclick | 鼠标单击 |
| ondblclick | 鼠标双击 |
| onkeyup | 按下并释放键盘上的一个键时触发 |
| onchange | 文本内容或下拉菜单中的选项发生改变 |
| onfocus | 获得焦点，表示文本框等获得鼠标光标 |
| onblur | 失去焦点，表示文本框等失去鼠标光标 |
| onmouseover | 鼠标经过，即鼠标划过图片等的上方 |
| onmouseout | 鼠标移出，即离开图片等所在的区域 |
| onload | 网页文档加载事件 |
| onunload | 关闭网页时触发 |
| onsubmit | 表单提交事件 |
| onreset | 重置表单事件 |
3.3事件处理程序
事件触发之后的处理操作，一般是函数。结构如下：事件源.事件 = function(){ //事件处理程序}例子：
<head> <meta charset="UTF-8"> <title>Title</title> <style> #demo{width: 200px; height: 200px; background-color: pink; } </style></head><body><div id="demo"></div><button id="btn">改变宽度</button></body><script type="text/javascript"> var demo =document.getElementById("demo"); var btn =document.getElementById("btn"); btn.onclick = function(){ demo.style.width = "400px"; }</script>目的：点击btn按钮时让demo盒子的宽度变成400px。注意：宽度是通过style标签控制的，如果要改变它也是通过style标签,改变demo.style.width。如果修改背景图片可以用：demo.style.backgroundImage = "url(images/1.jpg)"
4.隐藏显示
display:none 隐藏display:block 显示visibility:hidden 隐藏visibility:visible 显示overflow:hidden 溢出隐藏注意：display跟visibility的隐藏有区别，dispaly:none隐藏不占位置；visibility:hidden隐藏占有位置（占茅坑不拉屎）
5.入口函数（window.onload）
window.onload = function(){ //需要执行的js}
把script标签放在head中时可能会导致页面没有加载完毕就去执行js代码了，结果导致报错，这时就可以使用window.onload函数了，它会等到我们页面加载完毕（页面的结构，样式，节点）之后才去执行function里面的代码。注意：一个页面中只能有一个window.onload入口函数，如果写多个，则最后一个会覆盖前面的，导致前面的不生效。这点跟jquery里面的$(function(){})是有区别的，后者在一个页面可以写多个。
6.模态框
现在有个需求：当我们浏览京东，淘宝这些网站的时候，细心点就会发现，当点击登录时整个窗口都会变灰色，而且弹出一个模态框让我们输入用户名密码，怎么实现这个效果呢。实现原理：做一个大的遮罩和一个弹出的模态框，大遮罩定位使用fixed（好处：不会随着滚动条滚动），颜色灰色，不点击登录时隐藏，z-index：999保证它可以覆盖着当前窗口。而弹出这个模态框z-index：1000大于刚才的那个遮罩（会覆盖到遮罩上面）；而关闭按钮使用绝对定位定位在由上角（"字绝父相"）。当点击登录按钮时让这两个弹框显示即可。效果如图：
html部分：<!--遮罩--><div id="mask"></div><div id="box"> <span id="close_all">×</span></div>css部分：/*******遮罩*******/#mask{ width:100%; height: 100%; position: fixed; top: 0; left: 0;background:rgba(0,0,0,.5); display: none; z-index: 999;}#box{ width: 400px; height: 250px; position: fixed; top: 50%; left: 50%; margin: -125px 0 0 -200px; background-color: #fff; z-index: 1000; display: none;}#close_all{ position: absolute; width: 20px; height: 20px; font-size: 20px; top: 10px; right:10px; cursor: pointer;}js部分：window.onload = function(){ var login = document.getElementById("login") var mask = document.getElementById("mask"); var box = document.getElementById("box"); var closeAll = document.getElementById("close_all"); login.onclick = function(){ mask.style.display = "block"; box.style.display = "block"; } closeAll.onclick = function(){ mask.style.display = "none";box.style.display = "none"; }}
7.数据类型
js中有五种基本数据类型（String，Number,Boolean,NUll,Undefined）和混合数据类型（Object）,使用typeof可以检测变量的数据类型（输出的是一个关于数据类型的字符串），返回如下字符串：string,number,boolean,object,undefined,function。
var x = 1;console.log(typeof x);//numbervar a =undefined;console.log(typeof a);//undefinedvar b =null;console.log(typeof b);//object，（其实这是js最初的错误，后来被ECMAscript沿用了下来，我们可以理解null是空对象引用）。var c = newObject();console.log(typeof c);//objectvar e = [1,2,3];console.log(typeof e);//object var d = function(){ // ... 语句块}console.log(typeof d);//function
7.1字符型（String）
转换为字符型：
-
变量后加双引号或单引号（js中字符型双引号和单引号效果一样，java中不一样）。
-
使用函数String()，即使是null和undefined也可以使用，转换后是null和undefined
-
使用函数toString(),只能是非空的才能用，null和undefined使用会报错。
var bc = "zhangsan";var bd = null;var be =undefined;console.log(bc.toString());//console.log(bd.toString());//error 报错//console.log(be.toString());//error 报错console.log("------");console.log(String(bc));console.log(String(bd));console.log(String(be));
7.2数值型（Number）
Number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后面至少有一位数字）两种值。浮点数将会自动转换为整数。
var num = 1.00;console.log(num);//1，自动转换为整数
浮点数的最高精度是17位，看下面的例子，结果不是0.3，其他编程语言，有的也会遇到这种情况（浮点数计算会产生舍入误差问题）。这里也警示我们，如果涉及到金额计算不要用浮点数，同时尽量在后台处理，所有的金额乘以100，即以分为单位进行计算入库，浮点数无法进行金额精确计算，风险极高。
console.log(0.1+0.2); //0.30000000000000004 解释：js做小数运算会出现错误，一般推荐转为整数在进行计算，比如这里输出就错了console.log((0.1*10+0.2*10)/10); 0.3var num=020;console.log(num); //16解释：0开头的是八进制，这里输出八进制20，是十进制的16var result = "20";varaa = result-10;console.log(aa); //10 解释：js字符串和数值相减时先将字符串转为数值型，在运行减法，结果为number型console.log(typeof aa);//numbervar bb = result+10;console.log(bb); //2010console.log(typeof bb); //string解释：js字符串与数值相加值，返回结果为字符串行拼接
NaN:非数字类型（not a num字面意思：不是一个数字）。特点：① 涉及到的 任何关于NaN的操作，都会返回NaN ② NaN不等于自身。
var ab = "a1";console.log(ab/10);// NaNconsole.log(NaN == NaN);//false;
isNaN()函数，用于判断是否是一个非数字类型。如果传入的参数是一个非数字类型，那么返回true；否则返回false;isNaN()函数，传入一个参数，函数会先将参数转换为数值。如果参数类型为对象类型，会先调用对象的valueOf()方法， 再确定该方法返回的值是否可以转换为数值类型。如果不能，再调用对象的toString()方法，再确定返回值。其它类型转化为数值型的方法：
-
利用 - * / 都可以转换 (+不行，字符串跟数字相加结果是字符串拼接)
-
利用Number( )
-
parseInt()，将值转换为整型
-
parseFloat()；将值转换为浮点型。 看下面列子：
console.log(parseInt(19.11)); //19 console.log(parseInt(19.99)); //19console.log(parseInt("25px")); //25 解释：只转化数字的那部分 console.log(parseInt("px25px")); //NaN 解释：parseInt只能将以数字开头的字符串转化为数字 console.log(parseInt(110,2)); //6 解释：把二进制的110转化为十进制 var a="15.15abc" , b='10.15' , c='10.0abc'; console.log(parseInt(a)+Number(b)+parseFloat(c));//15+10.15+10.0=35.15
7.3布尔型（Boolean）
有两个值：true和false转换为布尔型的方法：
-
利用 !!
-
利用 Boolean()
var num =10; console.log(typeof !!num); //boolean console.log(!!num); //true
false、undefined 、null、0、”” 为 false true、1、”somestring”、[Object] 为 true
7.4NUll
null类型被看做空对象指针，前文说到null类型也是空的对象引用。只有一个值，即null值，所以，在你 用typeof 操作符去检测null类型的值时，结果是object类型。如果你定义了一个变量，但是想在以后把这个变量当做一个对象来用，那么最好将该对象初始化为null值。实际上，undefined值是派生自null值的，因此ECMA-262规定对他们的相等测试要返回true。
alert(null == undefined) //true
7.5Undefined
Undefined类型只有一个值undefined,表示“缺少值”，就是此处应该有值，但是未给。用法如下：
-
变量被声明了，但没有赋值时，就等于undefined。
-
调用函数时，应该提供的参数没有提供，该参数等于undefined。
-
对象没有赋值的属性，该属性的值为undefined。
-
函数没有返回值时，默认返回undefined。
var a; var b = null; console.log(a); //undefined console.log(a==b);//true console.log(a===b); //false console.log(b+10); //10console.log(a+10); //NaN
7.6Object类型
Object是对象类型（也叫引用类型），创建方法：
-
使用new操作符后跟Object构造函数
var person = new Object(); //创建Object引用类型的一个新实例，并且把该实例保存在变量person中。person.name = "CC";person.age = 23;
-
使用对象字面量表达式:对象字面量是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程。
var person = { name : "CC", age : 23};
249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
