js编程基础

一个简单的函数可实现变长效果：

function setWidth() {
     var box = document.getElementById("box");
     box.style.width = "400px";
   }

看起来变色变高只需把上述代码重复一遍，稍加改动就可以了。但是为了代码的高效和简洁，要尽量避免重复。

function setStyle(x, y) {
      var box = document.getElementById("box");
      box.style.height = x + "px";
      box.style.background = y;
    }

上面的函数分别用两个形参x和y代表高和背景色，解决了代码重复的问题。实际上可以把三个效果分别用三个形参表示，一个函数解决所有问题。

补充：
1.页面从上而下的解读代码，未解读的部分直接调用会没有效果，实际上大部分的bug考虑到这点都是能避免的。
2.js中所有用.的部分，都可以用[""]代替。一般来说用.方便，有些时候不能用点的地方就只能用[""]。
3.js中用“”包裹起来的是字符串，一句语句里不能定下来的会变化的东西用变量表示，能定的不会变化的用字符串即常量表示。
4.通过style添加或读取是针对的行间样式。 因为行间样式的优先级最高，通过className（类）加的效果会不起作用，所以对于同一个元素始终使用行间或className二者中任意一种而不是混着来是非常有必要的，一般使用className（类）而不是行间样式。

while循环：

 var i=1;                 初始化
    while(i<5){           条件
      alert(i);           语句
      i++                 自增 
    }

for循环写法更加简单：

 for(var i=1;i<5;i++){   初始化+条件+自增
      alert(i);          语句
    }

全选不选及反选，复选框：

 window.onload = function () {
      var btn1 = document.getElementById("btn1");
      var btn2 = document.getElementById("btn2");
      var btn3 = document.getElementById("btn3");
      var div1 = document.getElementById("div1");
      var ckd = div1.getElementsByTagName("input");            注意：这里从div1中提取TagName。
      btn1.onclick = function () {
        for (i = 0; i < ckd.length; i++) {
          ckd[i].checked = true;
        }
      }
      btn2.onclick = function () {
      for (i = 0; i < ckd.length; i++) {
        ckd[i].checked = false;
      }
      }
      btn3.onclick = function () {
      for (i = 0; i < ckd.length; i++) {
        // 注意：这里要用==号。 
        if(ckd[i].checked == true){               前面用=是将值赋给checked属性，这里做判断用==判断checked的值是否为true。  
          ckd[i].checked = false;
        }else{
          ckd[i].checked = true;
      }
      }
      }
      }

this的使用：this可指代当前事件的按钮（事件的载体 一般为标签）。
索引值：需要确定“第几个”的时候，是玩家自己创建的对象。使用html添加会被浏览器过滤，使用js添加则不会。
innerHTML：js添加某标签的内容，可识别html结构。

选项卡的实现：

核心思路：
按钮：先清空所有按钮，再选中当前按钮。
内容：先隐藏所有div，再显示当前div。

window.onload = function () {
  var div1 = document.getElementById("div1");
  var btn = div1.getElementsByTagName("input");
  var div = div1.getElementsByTagName("div");

这里用循环减少重复代码 ：

for (i = 0; i < btn.length; i++) {

这里用js给input标签添加index属性（index是玩家自创的），目的是给这几个标签排号方便操作。

btn[i].index = i;
    btn[i].onclick = function () {
      for (i = 0; i < btn.length; i++) {       循环都是为了减少代码量，这里也是精简重复的代码。
        btn[i].className = "";                 清空所有按钮的class
        div[i].style.display="none";           隐藏所有div
      }
      this.className = "active";               选中当前按钮
      div[this.index].style.display = "block"; 显示当前div
    }
  }
}

简易日历实现：

思路：日历按钮原理与选项卡一致，内容部分采用innerHTML添加标签的内容。

typeof：判断目标的数据类型。

==：双等号先将等式两边数据转换为同一类型再比较。

===：全等号不转换直接比较。

数据显式类型转换（强制类型转换）：

parseInt:将字符串转为数字（整数），原理为从左到右读取字符串，遇到第一个非数字字符串就跳出去返回结果。

parseFloat：将字符串转为数字（小数），原理同上。

隐式类型转换：
无具体代码指示，在需要的时候计算机自动判断转换数据类型。

变量必须用var声明，在函数内部var声明属于局部变量，在函数外部var声明 属于全局变量。

闭包：子函数可以使用父函数的局部变量。

变量命名遵循匈牙利命名法：

类型前缀：数组a 、布尔值b、 浮点数f 、 函数fn 、整数i 、对象o 、 正则表达式re 、字符串s 、变体变量v、

驼峰命名：单词的首字母大写。

取模：%（取余）。

+=：例：i=i+1，i+=1，i++都是一样的意思。其中i++只能加1，若想i=i+4 则只有i+=4这两种写法。

if用于范围判断，switch用于精确判断：

 switch（变量）{
                      case 值1：
                               语句一；
                               break；                 跳出/中断 （整个循环）   相应的continue；跳出/继续（跳出本次但继续）
                     case 值2：
                               语句二；
                               break；
                     ......
                    default:
                               语句n；
                               break； 
}

判断语句也可以用三元运算符简写：条件？条件成立语句：条件不成立语句；

数据的真假：所有非零非空的“有东西”的数据为真，反之为假。

当下十分流行的json格式：

json和数组很像，举个例子

var json={a:12,b:3,c:6};

var arr=[12,3,6];

alert( json.a ) ;  等效于alert（json["a"]）; 等效于 alert( arr[0] ) ;

很相似，但是json的下标是字符串，数组的下标是数字。
json是很简单的数据，定义了什么 就有什么 没定义的就没有。比如数组有length，json就没有。

数组和json主要用于循环：

for（var i=1;i<arr.length;i++）{
alert("haha");
}

但json没有length，所以他使用另一种for in循环。

for（var i in json）{
alert（“哈哈哈”）；
}

数组也可以用for in：

for（var i in arr）{
alert（“哈哈”）；
}

但是for in循环最好还是用在json上，数组还是用for循环不容易出错。

json可以直接像变量一样操作：json.a++

简单的求和函数：

function sum() {
      var result = 0;
      for (i = 0; i < arguments.length; i++) {
        result += arguments[i];
      }
      return result;
    }
    alert(sum(3,15,26));

其中arguments是函数的可变参（不定参），不定参是个数组，意味着函数的参数个数可能是无限的。

兼容IE和W3C标准浏览器的获取非行内样式函数：

 function getStyle(obj,name){
    if(obj.currentStyle){
      return obj.currentStyle.name;
    }else{
      return obj.getComputedStyle(obj,false).name;
    }
  }

push（元素）:数组从尾部添加。
pop（）：数组从尾部删除。

unshift（元素）：从头部添加。
shift（）：从头部删除。

splice（起点，长度，元素），其中包含起点，长度指几个。
可实现添加（起点，0，元素），删除（起点，长度），替换（先删除再添加）。

var a=[1,2,3];
var b=[4,5,6];

连接数组：a.concat(b); (就变成1，2，3，4，5，6)
连接符：a.join(0.0); （就变成10.0，20.0，3）

数组排序：a.sort（）；用来排字符串，原理为按首字母顺序排。

数字排序：因为sort只能识别字符串，所以这里用一个“比较函数”帮助sort排序数字。
a.sort（function（n1，n2）{
return n1-n2; 数字从小到大排序。
}）;

定时器：setInterval（函数，毫秒（不带单位））；每隔一段时间执行一次
setTimeout（函数，毫秒）；隔一段时间执行函数。
清理定时器：clearInterval（定时器）；

简单的例子：

<style>
    div {
      float: left;
      margin: 10px;
    }

    #div1 {
      width: 100px;
      height: 50px;
      background: red;
    }

    #div2 {
      width: 400px;
      height: 200px;
      background: gray;
    }
  </style>
  <script>
    window.onload = function () {
      var oDiv1 = document.getElementById("div1");
      var oDiv2 = document.getElementById("div2");
      var timer = null;               //变量先声明，否则下面用就undefinded；
      oDiv2.onmouseover = oDiv1.onmouseover = function () {
        clearTimeout(timer);     //每次先清理定时器，以免定时器叠加；
        oDiv2.style.display = "block";
      }
      oDiv2.onmouseout = oDiv1.onmouseout = function () {
        timer = setTimeout(function () {
          oDiv2.style.display = "none";
        }, 500);
      }
    }
  </script>
</head>

<body>
  <div id="div1"></div>
  <div id="div2"></div>
</body>