[网络资讯] JavaScript入门

刚开始常常被卡住思路，或者实现思路不够简洁。学习的过程就是一个积累的过程，敲的多了见的多了经验自然就有了，大项目的经验另说，最起码知识掌握熟练透彻，再扩展起来也快。现在啃到面向对象了，休息几天，回过头去想想之前学到的东西，重新记起忘记了的，也会学到新的东西，或者之前一直没想明白的问题一下子理解了。

今天写写我的JavaScript入门经历：

在写一个JavaScript程序之前，要做什么？
1）写结构 + 样式，HTML + CSS
2）找到实现它的原理
3）再开始写JavaScript
还有刚刚开始写程序，很重要的一点是边写边测试，这样能够及时的发现错误。

比如我们希望把某个元素离开我们的视线
写这个JavaScript效果的步骤：
1，先实现布局；
2，找实现原理：
1、 display：none; 显示为无，元素在页面中不存在
2、 visibility：hidden; 让元素隐藏，元素还是存在的，占了文档流
3、 widthheight 为零
4、 改透明度
5、 通过定位改left/top
6、 拿一个白色div盖住
7、 margin负值
等等很多
3，了解JavaScript语法：

JavaScript中如何获取元素：
1）根据ID名称：#div1 {}
var oDiv = document.getElementById("div1");
2）根据标签名称：
（可以结合CSS中的id、class来理解）
li {}
var aLi = document.getElementsByTagName("li");
#ul1 li {}
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
ul li {}
var oUl = document.getElementsByTagName('ul')[0];
//即使页面上，只有一个元素，aUl 也是获取一组
var aLi = oUl.getElementsByTagName('li');
事件：鼠标事件、键盘事件、系统事件、表单事件、自定义事件
onclick onmouseover onmouseout onmousedown onmouseup onmousemove …
onload 加载完以后执行......
window.onload = 事件
Img.onload
Body.onload
iframe.onload

如何添加事件：
元素 . 事件
函数：可以理解为命令，做一些事
function 名字abc(){ //函数内任何代码肯定不会主动执行
……
}
如何让函数执行
1、直接调用：abc();
2、事件调用：元素 . 事件 = abc; （oDiv.onclick = abc; 这里注意不要加括号，因为见到函数名称加括号不等调用就执行了）
3、
function(){} 匿名函数
元素.事件 = function(){}
测试：
alert(1); //带一个确定按钮的警告框
alert(‘ok’); //自己写的一句话都要加引号，单引号双引号都可
alert(“ok”);
alert(oText.value); //不用加引号
----------------------------------------------------
有名字的函数调用：
直接调用：fn1();
事件调用：obj.onclick = fn1;
匿名函数调用：
直接调用：（函数自执行）
(function () { alert(345); })()
~function () { alert(567); }();
!function () { alert(789); }();
+function () { alert(980); }();
事件调用：
obj.onclick = function() { alert(123); };
window.onload = function() {}; //窗口里所有的代码都加载完成以后，再执行

属性操作：
属性 = 属性名+属性值
读操作（获取）：元素.属性名
写操作（改变 - 先清除原来的，后添加新内容）：元素.属性名 = 新的值
复制代码
1 var oDiv = document.getElementById('div1');
2 alert(oDiv.innerHTML); //读
3
4 oDiv.onclick = function(){
5     oDiv.innerHTML = 123; //写（先清空，后添加）
6 };
7 // 如果绑定了事件在元素身上，那些事件也会被清空
复制代码
属性操作中的[]:
var oDiv = document['getElementById']('div1');
oBtn['onclick'] = function () {
JavaScript操作中的一些注意事项：
1）JavaScript中不允许出现 -，去掉 -，把后面单词第一个字母变大写
2）有些东西不要用来做判断
// 不能做为判断条件的情况：
1、相对路径
img src
a href="1.html"
2、颜色值
color: red; #f00 rgb(255,0,0)
3、innerHTML 在低版本浏览器下会出现兼容性问题
/*
oDiv.style.width = '200px';
oDiv.style.height = '200px';
oDiv.style.background = 'red';
*/
oDiv.style.cssText = 'width:240px; height:220px; background:yellow;';
复制代码
1 var oDiv = document.getElementById('div1');
2
3 oDiv.style.height = '200px';
4 oDiv.style.background = 'red';
5 // 以上在原来样式基础上，添加或者修改
6
7 oDiv.style.cssText = 'height:220px; background:yellow;';
8 // 把原来的样式width干掉了，再添加行间样式
9
10 alert( oDiv.style.cssText );        // 'width:200px'
11 oDiv.style.cssText += 'height:220px; background:yellow;';
12 // 用 cssText 在原来样式上继续添加新样式
复制代码
获取元素的两个方法有3个区别：
document.getElementById(‘id’); 　 //静态方法；找一个元素；前边只能是document
document.getElementsByTagName(‘li’); //动态方法；找一组元素；前边可以是document或者一个元素，类似数组但不是数组，是一个元素的集合，虽不是数组但具备数组的属性：oUl.length长度; oUl[0]数组的访问方式;
只要用到ByTagName方法用的时候要加[]
动态方法是说，元素不存在的时候就可以获取元素，尽管找不到但不会报错，不过仅仅是可以获取而不能操作。后边程序中动态加了元素，这时候就可以找到元素也可以操作元素了。
复制代码
1 var aBtn=document.getElementsByTagName("input"); //可以先获取元素
2 alert(aBtn.length); //0
3 document.body.innerHTML = '<input type="button" value="按钮" /><input type="button" value="按钮" /><input type="button" value="按钮" />'
4 alert(aBtn.length); //3
5 aBtn[0].onclick = function(){ //事件可以添加上
6     alert(0);
7 }
复制代码
getElementsByTagName这个方法可以操作一堆没有id的元素，但是只能一个个写aBtn[0]aBtn[1]aBtn[2]所以引出了for循环:
//1）重复执行某些代码；2）每次执行的时候，有个数字在变化；
执行顺序走法
1）var i = 0;
2）i<3; 关键
3）执行括号里面的所有代码
4）i++
先1，然后一直234，直到不满足条件跳出循环
var i = 0;
for(; i < 3;){
alert(i);
i++;
} //另一种写法

for( var i = 0; i < 3; i++ ){alert(i); //0,1,2}
alert(i); //3

/*只有当for循环完全执行完成之后，代码才会继续往下执行。 */
/*当使用 for 循环嵌套 for 循环的时候，每层循环都必须使用不同的变量来表示。*/
for循环应用：重复执行某件事;每次执行的时候，有个数字会变

this关键字：
this：指的是调用当前方法（函数）的那个对象。
window.alert();
window.fn1(); 只要这样调用fn1(); this指的就是window
小结：
function fn1(){
this
}
1）fn1(); this=>window
2）oDiv.onclick = fn1; this=>oDiv
3）oDiv.onclick = function(){this fn1();} this=>oDiv; fn1()里this=>window
4）<div onclick=”this fn1();”></div> this指的是div；fn1()里this=>window //很少这样写了
自定义属性、索引值
aBtn[0].abc = 123;
JavaScript可以为任何HTML元素添加任意个自定义属性，可以读写操作。
标准属性 ： className width height style
自定义属性 ： 自己写代码的时候根据需要定义的属性，它不是标准属性。