js作用：网页特效（电梯导航）、交互、表单特效。就是可以用来控制结构和样式。
常用的三个输出语句都属于js的内置对象，提供我们直接使用的功能就是内置对象功能。
web三标准：结构、样式、行为。而js主要控制结构和样式。
<script></script>
alert()弹出警示框（用的少，用户体验差）
window.alert(“执行语句”);也可以直接alert(“执行语句”);
console控制台输出（用户看不见）
正常输出console.log(“你好”);
警告输出console.warn(“注意”);
错误提示console.error(“这里错了”);
document.write()文档打印输出（直接在文档中显示，常用）
document.write(“今天下雪了”);
如何用js控制结构和样式？
首先要获取id，给一个id然后获取元素，获取方式:
var demo_huoqu=getElementById(“demo”);
意思是获取id为demo的元素放在demo_huoqu这个变量里。
然后更改样式：
document.getElementById(“demo”).style.backgroundColor=”red”;
意思是更改原样式中的颜色为红色。
js中样式的写法与CSS不一样
CSS：backgrount-color
js:backgroundColor(没有-，同时第二个单词首字母大写)
变量命名
变量名必须以字母或是下标符号_或者$开头；长度不能超过255字符；不允许使用空格；不使用脚本语言中保留的关键字及保留符号作为变量名；变量名严格区分大小写。
全局变量和局部变量
全局变量：外部设置变量、隐式的全局变量（在函数体内部但是没有声明var的也是全局变量）
result为全局变量，num也为全局变量。
局部变量：内部设置var变量
题：
输出为10，因为函数没有调用，没有fun()调用，所以为10
输出为global。a=”global”为全局变量，但是是局部调用的，所以局部执行，执行输出为global。
事件三要素（事件源+事件=事件处理程序）
事件源.事件= function(){ 事件处理函数 }
事件源 事件 事件处理函数
被触发者 怎么触发这个事情 发生了什么事
先获取盒子和按钮的id，然后当按钮被按时发生了盒子的样式宽度改变。
鼠标事件
| 事件名 | 说明 |
| onclick | 鼠标单击 |
| ondblclick | 鼠标双击 |
| onkeyup | 按下并释放键盘上的一个键时触发 |
| onchange | 文本内容或下拉菜单中的选项发生改变 |
| onfocus | 获得焦点，表示文本框等获得鼠标光标。 |
| onblur | 失去焦点，表示文本框等失去鼠标光标。 |
| onmouseover | 鼠标悬停，即鼠标停留在图片等的上方 |
| onmouseout | 鼠标移出，即离开图片等所在的区域 |
| onload | 网页文档加载事件 |
| onunload | 关闭网页时 |
| onsubmit | 表单提交事件 |
| onreset | 重置表单时 |
隐藏样式
display:none;隐藏（隐藏不占位置，使用后下面的会上浮）
display:block;显示，因为变为块级元素所以肯定会显示。
visibility:hidden;隐藏（隐藏但占位置，上面的位置存在，下面不会顶上来）
visibility:visible;显示
overflow:hidden;隐藏超出的部分
入口函数
window.onload=function() {
内部放js
}
这个函数的意思就是说，当我们页面结构样式加载完毕之后，才去执行函数体里面的js部分。所以这句话可以放到页面的顶端。同时一个页面只能写一次。
js的书写位置
行内式
<button onclick="alert('你好吗')">点击我</button>
<a href=”javascript:;”></a>
<a href=”javascript:void(0);”></a>
当点击的时候，js执行一个空的函数，如果换成#，那么就会跳转。
内嵌式
写在页面中任何地方都可以<script type=”text/javascript”></script>
外连式
在head中写<script type=”text/javascript” src=”xx.js” ></script>
这对标签之中不可以写任何东西
用js更换背景图片的方法
body {
background: url(images/2.jpg) top center;
}
window.onload=function() {
var _li1=document.getElementById("li1");
var _li2=document.getElementById("li2");
var _li3=document.getElementById("li3");
var _bd=document.getElementById("bd");
_li1.onclick=function() {
_bd.style.backgroundImage="url(images/3.jpg)";
}
_li2.onclick=function() {
_bd.style.backgroundImage="url(images/4.jpg)";
}
_li3.onclick=function() {
_bd.style.backgroundImage="url(images/5.jpg)";
}
}
首先为什么要用backgroundImage 而不用background呢？其实也可以，但是前面的只换图片不换样式，如果想用后面的，还得再加上样式to center。其次还需要加url以及后面的内容才行，不能够直接images/5.jpg直接放上去，这种方法是直接引入图片，而现在则是在样式中的图片，所以要写全。
模态框
CSS样式部分
<div di="mask">
</div>
<div di="box">
<span>×</span>
</div>
#mask {/*模态框*/
height: 100%;
100%;
position: fixed;/*需要用固定定位，将模态框固定在屏幕永远不动*/
background: rgba(0,0,0,.5);/*设置透明度*/
z-index: 999; /*设置时要比前面的框低一级一般设为999*/
display: none;
}
#box {/*弹出的表单框*/
400px;
height: 250px;
background-color: #fff;
position: fixed;/*框固定到屏幕永远不动*/
top: 50%;/*框上面的线到屏幕竖直居中的位置*/
left: 50%;/*框左边的线到屏幕水平居中的位置，也就是正中央*/
margin: -125px 0 0 -200px;/*由于以上面和左边的线为准，所以框会偏下右各一半，所以需要设置框margin的上为负高一半，左为负宽一半，最后正好居中央。*/
z-index: 1000;/*设置层级比模态框高一级*/
display: none;
}
#box span {
position: absolute;
top: 10px;
right: 10px;
15px;
height: 15px;
font-size: 15px;
cursor: pointer;
}
js特效部分
login是您好请登录的a标签，mask是模态框，box是中间的白色表单，close_box是关闭框
<script type="text/javascript">
window.onload=function() {
var login=document.getElementById("login");
var mask=document.getElementById("mask");
var box=document.getElementById("box");
var close_box=document.getElementById("close_box")
login.onclick=function() {
mask.style.display="block";
box.style.display="block";
}
close_box.onclick=function() {
mask.style.display="none";
box.style.display="none";
}
}
</script>
padding问题
给一个盒子长宽高颜色，如果给padding肯定会撑开盒子。而在这个盒子中包含一个小盒子，小盒子只设高，宽会继承父亲的宽。就算是加了padding-left值也不会撑开自己，因为自己没有设宽度值。当给小盒子设了宽度值例如width为50px或者为100%，那么再给padding-left时就会撑开自己比父盒子宽。同理因为给了高的值，所以如果加padding-top值是也会撑开自己比父盒子高。
数据类型
字符型string、数值型number、布尔型boolean、null、undefind（未定义）
输出类型方法，例如
var txt=”欢迎光临”;
console.log(typeof txt);
结果为string
转换为字符型：加双引号、String(); 转换字符S一定要用大写。字符型的可以减可以乘可以除。
布尔型：true和false。转换布尔型：！！、Boolean();
false、undefined、null、0、””等为false
“somestring”/[bobject]为true
转换数值型：减- 乘* 除/ 都可以转换，除了加+。利用Number();转换。
八进制：数值的前面带0代表八进制。
var num=020;
结果是16，八进制转为十进制。
算法0*80+2*81=16
十六进制：数值的前面带0x代表十六进制。
var num=0xb;
结果11
取整
parseInt
parseInt(值，进制)；
parseInt(19.99); 是19
parselnt(“25px”); 是25
parselnt(“px25px”); 是NaN
parseInt(“10”,2); 10的2进制。意思是把10这个2进制转换为10进制。0*20+1*21=2
parseInt(“110”,2) 0*20+1*21+1*22=6
转为整数：var num=parseInt(“str”)
读取字符串中的整数部分
从第一个字符向后读。
如果碰到第一个数字字符，开始获取数字，再次碰到不是数字的字符（包括小数点），停止读取。
如果开头碰到空格，忽略。
如果碰到的第一个非空格字符，不是数字说明不能转→NaN，NaN的意思是Not a Number。什么是NaN：不是数字（内容）的数字（类型）
转为浮点数：var num=parseFloat(“str”)
读取字符串中浮点数部分。
用法和parseInt完全相同
唯一差别：parseFloat认识小数点，仅认第一个。而且parseFloat如果能转成整数，就不会转为浮点数，例如25.0，那么就会转为25，.25转为0.25