学了一周的 CSS 之后就开始学 JavaScript。从W3school简介里面可以看出这是一种针对与 Html 的脚本语言，和 Java 是没有关系的。一些简单的语法和 python 存在差异：
1. == 叫做相等运算符，===叫做严格运算符。== 可以将不同类型的对象转化成数值(应该是ASCII码)之后比较，例如将字符串 "5" 和整数5比较时将会返回true，但是 "5"===5 将会返回 false；那么对应的也有 != 和 !==，结果与各自对应的 == 和 === 结果相反。
2. 逻辑运算符。&& 且，|| 或，！取反。
3. if语句。还有 switch 语句。
if(判断条件1){
内容1;
}else if(判断条件2){
内容2;
}else{
内容3;
}
swtich(待匹配对象){
case (匹配选择1):
内容1;
case (匹配选择2):
内容2；
defalut :
内容3；
}
4.for循环。和 python 不同的是，i 的值是可以在外部获取到的，并且确切经过了循环的变化。对于每次都会执行代码块里面的形式，例如实现连续输出一个数组，就没有影响；但是我们如果是想要用 for 循环来进行一些预设类型的工作，例如对若干个图片一齐绑定事件onclick，用 getElementByTagName 获取了储存成一个列表的图片们，然后对每个 i 就去对应返回到 console 上一个不同的数值。可是因为两个原因，一是 i 是全局变量，二是代码块中的内容并没有实际的被运行，所以就导致了到时执行事件时返回的数值都是 i 到达跳出循环时那个值对应的函数值。
for(var i = 1;i<=100;i++){
代码块;
}用一个例子来解释：并不是所有出现在循环体中的 i 都会有影响，关键是在于包含了 i 的部分有没有被当下就执行。onclick 部分就被实时的设置，但是函数的部分需要点击即触发事件的时候才执行，所以当我们点击触发事件时，循环早已结束，i 已经历遍循环终止在了边界处，所以最后输出的结果都是 Things.length。
<script>
for(var i = 0;i < Things.length;i++){
but[i].onclick = function(){}
console.log(i);
}
</script>
var i = 0;
but[0].onclick = function(){
console.log(i)
}
/*i++;*/
var i = 1;
but[0].onclick = function(){
console.log(i)
}
......5. 定义变量和数组。可以直接定义，定义为整数，字符串或浮点数，布尔型；也可以用DOM操作，从我们的文档输出部分去获取，这个接下来再做记录。数组在尾部添加是 push，头部添加是 unshift；从尾部删除 pop，从头部删除 shift；数组合并 concat，数组转字符串 join()，表示中间用什么内容来隔开，只是简单的全部组合就不用写直接赋空字符串即可。
var a = 10;
var b = "hello";
var c = [1,2,3,4];
var d = new Array("1","2","3","4");
6. 触发事件。onclick 就是对某个元素点击；onfocus 和 onblur 目前了解的用于输入框中，前者表示点击激活光标，后者表示光标消失，可以实现的功能一个输入框中都是会有默认的提示信息，用这两个就可以做到点击直接输入而无需手动把那提示信息删除，onblur就让提示信息恢复；onmouseover 和 onmouseout 就是探测鼠标的位置，移动到某个元素上时触发事件，而触发事件时要和函数绑定，执行相应的函数内容；onmousedown 表示单击鼠标，下面的代码就可以在每次点击鼠标的时候返回鼠标的坐标，event.clientX 和 event.clientY 应该代表坐标了。
<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 坐标: " + x + ", Y 坐标: " + y)
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>
</body>
</html>还有用处较多的 onchange，但域的内容发生改变的事件。
7. 定时器。定时器方法有两种，setinterval 和 setTimeout。下面给出一个案例，通过定时控制一块带颜色的 div 不规则移动，而不是使用循环语句。其中在 script 中创建了 int 变量为 setinterval 的实例，其中的参数为一个匿名函数和一个代表多少毫秒的参数。匿名函数表示要周期性多次执行的内容，后者自然就是表示执行的周期，这种结构体现了面向对象的编程方式。然后还创建了一个按钮，绑定了一个点击事件，点击时会执行一个命令就是 window.clearInterval()，括号中的内容就是所要终止的定时器名称。如果在定义定时器的时候不给名字直接从 setinterval 开始也是可以成功地执行代码，但是我们的终止方法就无法找到所要终止的对象了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缓进</title>
<style>
#box{
width:100px;
height:100px;
background-color: yellow;
position:relative;
top:20px;
left:0px;
}
button{
position:absolute;
}
</style>
</head>
<body>
<div>
<div id="box">
</div>
<button onclick="int = window.clearInterval(int)">STOP!</button>
</div>
<script>
var leader = 0;
var target = 1000;
var box = document.getElementById("box");
var int = setInterval(function(){
leader = leader + (target - leader)/10;
box.style.left = leader + "px";
},200);
</script>
</body>
</html>因为定时器 setInterval 的运行是不会自行终止的，所以要注意，在循环中如果出现了 setInterval，可能会创建多个定时器，然后实现了相同的功能，所以要考虑可否放置在循环外部。如下为我自己做的轮播图的代码，实现的功能有二个，有左右两个按钮可以切换图片，下方的序号按钮之后鼠标移动上去就可以切换到相应的图片。仔细看的话会发现在定时器的使用上，每次触发 onmouseover 方法都会重置一次定时器，这样子虽然效果没有问题，但是存在了代码冗余的现象，而且我们还好是重置而不是重新创建一个定时器。修改的方法就是把定时器的内容放在最外面。
另外值得注意的一点就是那个实现非匀速的语句类似于牛顿迭代法，第一眼我就联想到了。昨晚做的时候还遇到一个bug，图片会在两个 left 之间来回鬼畜，想了一下有可能是多个定时器中间的参数交错了，加上 side = target 之后使得每次触发事件就马上重置 side 和 target ，哪怕 side 在上一次定时器中的值还离上一个 target 有距离。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图version01</title>
<style>
*{
margin: 0px;
padding:0px;
}
#box{
width:640px;
height:360px;
position: relative;
margin:0 auto;
overflow:hidden;
z-index:20;
}
#num{
width: 120px;
height: 20px;
position: absolute;
bottom:0px;
left:50%;
margin-left: -60px;
z-index: 50;
}
#num li{
text-align: center;
float: left;
border-radius: 10px;
list-style: none;
width: 20px;
height:20px;
color:black;
background-color: blue;
margin-right:5px;
margin-left: 5px;
}
#pic{
width: 2560px;
height:360px;
position:absolute;
left:0px;
}
#pic li{
display: block;
list-style: none;
width:640px;
height:360px;
float: left;
}
#num .con{
float: left;
width: 20px;
height:20px;
background-color:yellow;
margin-right:5px;
margin-left: 5px;
}
img{
width: 640px;
height:360px;
}
#left{
display: block;
width: 38px;
height: 72px;
background-image:url(left.png);
position:absolute;
top:50%;
left:0px;
margin-top: -36px;
z-index: 60;
}
#right{
display: block;
width: 38px;
height: 72px;
background-image:url(right.png);
position: absolute;
top:50%;
margin-top: -36px;
right:0px;
z-index: 60;
}
</style>
</head>
<body>
<div id="box">
<ul id="pic">
<li>
<a href="#">
<img src="af4f2b5945ca6df76a9d3d3f26bf470c.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="579aa0e658912368534b6e5477697fb4.jpeg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="9bb7176d3bd1cd1e89fc3e6f5c38a98d.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="f8062484451bd5e5688d542c8f89b406.jpg" alt="">
</a>
</li>
</ul>
<ol id="num">
<li class="con">1</li>
<li class="lis">2</li>
<li class="lis">3</li>
<li class="lis">4</li>
</ol>
<button id="left"></button>
<button id="right"></button>
</div>
<script>
var ul = document.getElementById("pic");
var lis = document.getElementById("num").getElementsByTagName("li");
console.log(lis)
var side = 0;
var target = 0;
var left = document.getElementById("left");
var right = document.getElementById("right");
for(var i=0;i<lis.length;i++){
lis[i].index = i;
lis[i].onmouseover = function(){
for(var j = 0;j<lis.length;j++){
lis[j].setAttribute("class", "li");
}
lis[this.index].setAttribute("class", "con");
// console.log(lis);
k = this.index;
// console.log(k);
side = target;
target = k*(-640);
// console.log(target);
};
var int = setInterval(function(){
side = side + (target - side)/10;
ul.style.left = side + "px";
},60);
}
left.onclick = function(){
var ii = 0;
console.log(ii);
for(var jj=0;jj<lis.length;jj++){
console.log(lis[jj]);
if(lis[jj].getAttribute("class")=="con"){
ii = jj;
}
}
console.log(ii);
if(ii>0){
ii--;
for(var j = 0;j<lis.length;j++){
lis[j].setAttribute("class", "li");
}
lis[ii].setAttribute("class", "con");
side = target;
target = ii*(-640);
var int = setInterval(function(){
side = side + (target - side)/10;
ul.style.left = side + "px";
},60);
}else if(ii==0){
ii=3;
for(var j = 0;j<lis.length;j++){
lis[j].setAttribute("class", "li");
}
lis[ii].setAttribute("class", "con");
side = target;
target = ii*(-640);
var int = setInterval(function(){
side = side + (target - side)/10;
ul.style.left = side + "px";
},60);
}
}
right.onclick = function(){
var ii = 0;
console.log(ii);
for(var jj=0;jj<lis.length;jj++){
console.log(lis[jj]);
if(lis[jj].getAttribute("class")=="con"){
ii = jj;
}
}
console.log(ii);
if(ii<3){
ii++;
for(var kk = 0;kk<lis.length;kk++){
lis[kk].setAttribute("class", "li");
}
lis[ii].setAttribute("class", "con");
side = target;
target = ii*(-640);
var int = setInterval(function(){
side = side + (target - side)/10;
ul.style.left = side + "px";
},60);
}else if(ii==3){
ii=0;
for(var kk = 0;kk<lis.length;kk++){
lis[kk].setAttribute("class", "li");
}
lis[ii].setAttribute("class", "con");
side = target;
target = ii*(-640);
var int = setInterval(function(){
side = side + (target - side)/10;
ul.style.left = side + "px";
},60);
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图version02</title>
<style>
*{
margin: 0px;
padding:0px;
}
#box{
width:640px;
height:360px;
position: relative;
margin:0 auto;
overflow:hidden;
z-index:20;
}
#num{
width: 120px;
height: 20px;
position: absolute;
bottom:0px;
left:50%;
margin-left: -60px;
z-index: 50;
}
#num li{
text-align: center;
float: left;
border-radius: 10px;
list-style: none;
width: 20px;
height:20px;
color:black;
background-color: blue;
margin-right:5px;
margin-left: 5px;
}
#pic{
width: 2560px;
height:360px;
position:absolute;
left:0px;
}
#pic li{
display: block;
list-style: none;
width:640px;
height:360px;
float: left;
}
#num .con{
float: left;
width: 20px;
height:20px;
background-color:yellow;
margin-right:5px;
margin-left: 5px;
}
img{
width: 640px;
height:360px;
}
#left{
display: block;
width: 38px;
height: 72px;
background-image:url(left.png);
position:absolute;
top:50%;
left:0px;
margin-top: -36px;
z-index: 60;
}
#right{
display: block;
width: 38px;
height: 72px;
background-image:url(right.png);
position: absolute;
top:50%;
margin-top: -36px;
right:0px;
z-index: 60;
}
</style>
</head>
<body>
<div id="box">
<ul id="pic">
<li>
<a href="#">
<img src="af4f2b5945ca6df76a9d3d3f26bf470c.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="579aa0e658912368534b6e5477697fb4.jpeg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="9bb7176d3bd1cd1e89fc3e6f5c38a98d.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="f8062484451bd5e5688d542c8f89b406.jpg" alt="">
</a>
</li>
</ul>
<ol id="num">
<li class="con">1</li>
<li class="lis">2</li>
<li class="lis">3</li>
<li class="lis">4</li>
</ol>
<button id="left"></button>
<button id="right"></button>
</div>
<script>
var ul = document.getElementById("pic");
var lis = document.getElementById("num").getElementsByTagName("li");
console.log(lis)
var side = 0;
var target = 0;
var left = document.getElementById("left");
var right = document.getElementById("right");
for(var i=0;i<lis.length;i++){
lis[i].index = i;
lis[i].onmouseover = function(){
for(var j = 0;j<lis.length;j++){
lis[j].setAttribute("class", "li");
}
lis[this.index].setAttribute("class", "con");
// console.log(lis);
k = this.index;
// console.log(k);
side = target;
target = k*(-640);
// console.log(target);
};
}
var int = setInterval(function(){
side = side + (target - side)/10;
ul.style.left = side + "px";
},60);
left.onclick = function(){
var ii = 0;
console.log(ii);
for(var jj=0;jj<lis.length;jj++){
console.log(lis[jj]);
if(lis[jj].getAttribute("class")=="con"){
ii = jj;
}
}
console.log(ii);
if(ii>0){
ii--;
for(var j = 0;j<lis.length;j++){
lis[j].setAttribute("class", "li");
}
lis[ii].setAttribute("class", "con");
side = target;
target = ii*(-640);
}else if(ii==0){
ii=3;
for(var j = 0;j<lis.length;j++){
lis[j].setAttribute("class", "li");
}
lis[ii].setAttribute("class", "con");
side = target;
target = ii*(-640);
};
}
right.onclick = function(){
var ii = 0;
console.log(ii);
for(var jj=0;jj<lis.length;jj++){
console.log(lis[jj]);
if(lis[jj].getAttribute("class")=="con"){
ii = jj;
}
};
console.log(ii);
if(ii<3){
ii++;
for(var kk = 0;kk<lis.length;kk++){
lis[kk].setAttribute("class", "li");
}
lis[ii].setAttribute("class", "con");
side = target;
target = ii*(-640);
}else if(ii==3){
ii=0;
for(var kk = 0;kk<lis.length;kk++){
lis[kk].setAttribute("class", "li");
}
lis[ii].setAttribute("class", "con");
side = target;
target = ii*(-640);
};
}
</script>
</body>
</html>