那些年,我还在学习javascript

那些年学习web开发的第三课,就是javascript了,javascript一门动态语言并是基于对象有语言,用来完成页面上的一些动画效果和DOM操作,在表单中还用于客户端验证数据。即然是一门语言,就有其它语言相似的东西.比如说语法等,那些年觉得不同的主要是javascript中的闭包、类、类的继承等,所以下面在学习一下,当然也只是个人想法。

1、  闭包:简单的说闭包就是函数中的函数,类中的类,在内层函数中能使用外层函数的变量,从而使得内层函数保存了外层函数的值;如果在外层函数定义了一个变量,那么就会为该变量分配内存空间,若在内层函数中保存了这个变量,也就是说内外二个变量指向同一内存空间,那么在外层函数调用完了以后,内层中变量引用的空间还在,就是说,闭包能将变量保存在内存中下次使用,但过多的使用闭包会导致内存泄漏的问题。

2、  类:javascript中的函数就是一个类,同样可以新建一个对象,还有一些内置的类,比如说Object、String等,举个例子来看一下怎么使用的:

代码:

<script type="text/javascript">

var demoFun=function(){

this.name="xin_ny";

this.age=18;

this.weibo="QQ";

this.toString=function(){

return this.name+this.age+this.weibo;

}

}

var object=new demoFun();

alert(object.toString());

</script>

 

      效果:

        

   其实javascript中类的实现还有几种方法,比如说使用Object、构造函数、原型法,上例中还重写了原本的toString()方法,不然就弹出对象类型了。

3、  类的继承:有类那么就会有类的继承,类的继承也有几种,当时在一本javascript高级书上讲得很细,主要分为:对象冒充、call()、apply()、原型方式,记忆中最深刻的是原型方法,下面就用它举个例子吧:

代码:

<script type="text/javascript">

var demoFun=function(){

this.name="xin_ny";

this.age=18;

this.weibo="QQ";

this.toString=function(){

return this.name+this.age+this.weibo;

}}

var ClassB=function(){

this.name="B";

}

var temp=new demoFun();

ClassB.prototype=temp;

delete temp;

var object=new ClassB();

alert(object.toString());

</script>

 

   效果:

    

例子中覆写了父类的name属性。

4、  eval():使用其简单的说可以把字符串解析成对象,也可以执行js代码,应说它是javascript中最强大的功能之一,同样举一个例子。

代码:

  var str="alert('json')";

eval(str);

 

      效果:

       

 行了,对于javascript的一些知识先说到这里,其实这些都还好理解,难在应用还有各个浏览器之间的兼容,浏览器解析的规则,对于这些了解得不算多,但JQuery帮了我们很大的忙,所以那些年也学习了JQuery,下面以一个例子来学习javascript的应用。

5、  图片幻灯片例子,这是一个那些学习js的例子,所以代码不是现在所写,当然那时也引用了一些网络中的代码,请包涵。

 代码:

var map = document.getElementsByTagName("a");

var len = map.length;

var i = 0;

var img = document.createElement("img");

img.setAttribute("id", "img1");

img.setAttribute("src",map[i]);

img.style.width = "400";

img.style.height = "300";

img.setAttribute("width", "400");

img.setAttribute("height", "400");

document.body.appendChild(img);

var id = 1.0;

var imgIM;

function display() {

    if (i == map.length) {

        i = 0;

    }

    else {

        ++i;

    }

    var img = document.getElementById("img1");

    if (getOs() == "MSIE") {

        var tr = Math.floor(Math.random() * 23);

        img.style.filter = "revealTrans(duration=2,transition=" + tr + "),blendTrans(Duration=3)";

        img.filters[0].apply();

        img.setAttribute("src", map[i]);

        img.filters[0].play();

    }

    else {

        imgOut = img;

        inT = setInterval("ff();", 25);

        img.setAttribute("src", map[i]);

    }

    mymap = setTimeout("display();", 5000);

}

var ff = function() {//ff下淡出

    if (id == -1) {

        id = 1.0;

        clearInterval(inT);

    }

    else {

        imgOut.style.opacity = id;

        id = imgOut.style.opacity - 0.01;

    }

}

var ff1 = function() {

    if (id2 == 1) {

        id2 = -1;

        clearInterval(Int);

    }

    else {

        imgIM1.style.opacity = id2;

        id2 = imgIM.style.opacity + 0.01;

    }

}

function getOs() {//判断浏览器

    var OsObject = "";

    if (navigator.userAgent.indexOf("MSIE") > 0) {

        return "MSIE";

    }
    if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {

        return "Firefox";

    }
    if (isSafari = navigator.userAgent.indexOf("Safari") > 0) {

        return "Safari";

    }

    if (isCamino = navigator.userAgent.indexOf("Camino") > 0) {

        return "Camino";

    }
    if (isMozilla = navigator.userAgent.indexOf("Gecko/") > 0) {

        return "Gecko";

    }

}

 

效果:

  IE:

 

FF:

 

那些年学习javscript时,觉得网上的js特效看起来很爽,后来才发觉要自已写确实有难度,所以后来就在项目中用网上JQuery的特效,这样来得也快,当然js还是有用的,比如表单数据的验证,以及Ajax时数据的处理等 ,还有DOM操作,现在的js中添加了新的DOM方法,getElementByClassName()等,还有新的属性classList:多个className。

总结:

   那些年一步一步的走向web开发之路,此文以记忆那些奋斗的时光。

posted @ 2012-02-23 16:56  静悦  阅读(501)  评论(0编辑  收藏  举报