zoukankan      html  css  js  c++  java
  • javascrpt随笔

    function member(name, gender)
         {
             this.name = name;
             this.gender = gender;
             
             this.display = display; //指定member对象的display方法
         }
         
         function display()
         {
             var str = this.name + " : " + this.gender;
             
             document.writeln(str + "<br>");
         }
        
         var m1 = new member("zhangsan", "f");
         var m2 = new member("lisi", "f");
         var m3 = new member("wangwu", "m");
         
         m1.display();
         m2.display();
         m3.display();

    windows.location.href=乌拉河

    function count()
    {
    setTimeout("alert('执行成功');", 7000);
    }

    • setInterval():
    • 格式:

    [定时器对象名=] setInterval(“<表达式>”,毫
    秒)

    功能:重复执行<表达式>,直至窗口、框架被关
    闭或执行clearInterval。
    • clearInterval():终止定时器
    • 格式:

    clearInterval(定时器对象名)

    • 定时器:
    • 用以指定在一段特定的时间后执行某段程序。
    • setTimeout():
    • 格式:

    [定时器对象名=] setTimeout(“<表达式>”,
    毫秒)

    功能:执行<表达式>一次。

    function checkPassword(object)
        {
            if(object.value.length <= 4)
            {
                alert("密码长度过短");
                
                object.focus();
                object.select();
            }
        }
    with(document)
      {
          write("屏幕设定值<br>");
          write("实际高度:" ,screen.availHeight, "<br>");
          write("实际宽度:" ,screen.availWidth, "<br>");
          write("屏幕区域高度: " , screen.height, "<br>");
          write("屏幕区域宽度:", screen.width, "<br>");
      }
    网页可见区域宽: document.body.clientWidth
    网页可见区域高: document.body.clientHeight
    网页可见区域宽: document.body.offsetWidth (包括边线的宽)
    网页可见区域高: document.body.offsetHeight (包括边线的高)
    网页正文全文宽: document.body.scrollWidth
    网页正文全文高: document.body.scrollHeight
    网页被卷去的高: document.body.scrollTop
    网页被卷去的左: document.body.scrollLeft
    网页正文部分上: window.screenTop
    网页正文部分左: window.screenLeft
    屏幕分辨率的高: window.screen.height
    屏幕分辨率的宽: window.screen.width
    屏幕可用工作区高度: window.screen.availHeight
    屏幕可用工作区宽度: window.screen.availWidth
    screen是window的对象
    function getEvent(event)
        {
            alert("事件类型: " + event.type);
        }
        
        document.write("单击...");
        
        document.onmousedown = getEvent;//写法二
    <a href="#" onclick="window.history.back(-1);return false;">返回</a>
    history.go(-1)在firefox中使用
    history.go(n)和history.back()在ie下均可正常使用,用于页面之间的跳转,在firefox下,做成按钮是可以使用的,链接的用法可以这样写就ok啦:
    <a href="#" onClick="history.back();return false;" >返回<a>FF在后面版本中,此bug已经修复,但是Chrome仍存在此Bug.
    <a href="#" onclick="window.history.back();">返回</a>

    window属性:screen,location,history,document是window的一个对象属性。
    请参考:http://www.w3school.com.cn/htmldom/dom_obj_window.asp

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>js24.html</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
        <script type="text/javascript">
        function moveNext(object, index)
        {
            if(object.value.length == 4)
            {
                document.forms[0].elements[index + 1].focus();
            }
        }
        
        function showResult()
        {
            var f = document.forms[0];
            var result = "";
            for(var i = 0; i < 4; i++)
            {
                result += f.elements[i].value;
            }
            alert(result);
        }
        </script>
      </head>
      
      <body onload="document.forms[0].elements[0].focus();">
        <form>
        <input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 0);">-
        <input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 1);">-
        <input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 2);">-
        <input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 3);">
        <input type="button" value="显示" onclick="showResult();" >
        </form>
      </body>
    </html>
    1.  在js 中为某个对象(控件)绑定事件通常可以采取两种手段: 
    1)<input type=”button” onclick=”clickHandler();”> 
    2)<input type=”button” id=”button1”> 
    <script type=”text/javascript”> 
    var v = document.getElementById(“button1”); 
    v.onclick = clickHandler; 
    </script> 
    2.  有两种类型的cookie 
    1)  持久性cookie,会被存储到客户端的硬盘上。 
    2)  会话Cookie:不会存储到客户端的硬盘上,而是放在浏览器进
    程所处的内存当中,当浏览器关闭则该会话cookie就销毁了。 
    3.  在JavaScript中,函数(function)就是对象。 
    4.  在JavaScript中,没有方法(函数)重载的概念。 
    5.  在JavaScript 中有一个Function 对象,所有自定义的函数都是
    Function对象类型的。Function对象接收的所有参数都是字符串类
    型的,其中最后一个参数就是要执行的函数体,而前面的参数则
    是函数真正需要接收的参数。 
    6.  在JavaScript 中,每个函数都有一个隐含的对象arguments,表示
    给函数实际传递的参数。
    1.  每一个函数对象都有一个length 属性,表示该函数期望接收的参
    数格式。它与函数的arguments不同,arguments.length表示函数
    实际接收的参数格式。 
    2.  JavaScript 中有五种原始数据类型:Undefined、Null、Boolean、
    Number以及String。 
    3.  Undefined数据类型的值只有一个:undefined。 
    4.  Null数据类型的值只有一个:null5.  Boolean数据类型的值有两个:true和false。 
    6.  JavaScript中没有char数据类型。 
    7.  typeof 是一元运算符,后跟变量的名称,用于获取变量的数据类
    型,其返回值有5个:undefined、boolean、number、string以及
    object。 
    8.  在JavaScript中,如果函数没有声明返回值,那么会返回undefined。 
    9.  null与undefined的关系:undefined 实际上是从null派生出来的。 
    10. 强制类型转换:在JavaScript中有3种强制类型转换:Boolean(value),
    Number(value),String(value)。 
    11. 在JavaScript中,对于函数中定义的变量来说,加var表示局部变
    量,不加var表示全局变量。 
    12. 在JavaScript,所有对象都是从Object对象继承过来的。Object中
    的属性是不可枚举的(propertyIsEnumerable返回false),因此无法通过for…in 语句得到其中的属性。 
    13. 在JavaScript中,可以动态添加对象的属性,也可以动态删除对象的属性。 
    var object = new Object();
    //alert(object.username);
    object["username"] = "shengsiyuan";
    alert(object.username);
    delete object.username; // username属性已经从object对象中删除
    alert(object.username);
    14. 在JavaScript中定义对象的第二种方式:
    // 在JavaScript中定义对象的最常见的方式
    var object = {username: "zhangsan", password: 123};
    15. 对于JavaScript数组的sort方法来说,它会先将待排序的内容转换
    为字符串(调用toString()方法),按照字符串的先后顺序进行排序。
    var array = [1, 3, 25];
    array.sort();
    alert(array); //1,25,3
    
    function compare(num1, num2)
    {
        var temp1 = parseInt(num1);
        var temp2 = parseInt(num2);
    
        if(temp1 < temp2)
        {
            return -1;
        }
        else if(temp1 == temp2)
        {
            return 0;
        }
        else
        {
            return 1;
        }
    }
    
    //var array = [1, 3, 25];
    
    //array.sort(compare); //函数名是对象引用
    
    //alert(array);
    
    var array = [1, 3, 25];
    
    // 匿名函数
    array.sort(function(num1, num2)
    {
        var temp1 = parseInt(num1);
        var temp2 = parseInt(num2);
    
        if(temp1 < temp2)
        {
            return -1;
        }
        else if(temp1 == temp2)
        {
            return 0;
        }
        else
        {
            return 1;
        }
    }
    );
    
    alert(array);
    ★★★★★
    16. JavaScript中定义对象的几种方式(JavaScript中没有类的概念,只
    有对象): 
    1)  基于已有对象扩充其属性和方法: 
    var object = new Object();
    object.name = "zhangsan";
    object.sayName = function(name)
    {
        this.name = name;
        alert(this.name);
    }
    object.sayName("lisi");
    2)工厂方式 
    function createObject()
    {
        var object = new Object();
        object.username = "zhangsan";
        object.password = "123";
        object.get = function()
        {
            alert(this.username + ", " + this.password);
        }
        return object;
    }
    
    var object1 = createObject();
    var object2 = createObject();
    object1.get();
    带参数的构造方法:
    function createObject(username, password)
    {
        var object = new Object();
    
        object.username = username;
        object.password = password;
    
        object.get = function()
        {
            alert(this.username + ", " + this.password);
        }
    
        return object;
    }
    
    var object1 = createObject("zhangsan", "123");
    object1.get(); 
    让一个函数对象被多个对象所共享,而不是每一个对象拥有一个函数
    对象。
    function get()
    {
        alert(this.username + ", " + this.password);
    }
    
    function createObject(username, password)
    {
        var object = new Object();
    
        object.username = username;
        object.password = password;
    
        object.get = get;
    
        return object;
    }
    
    var object = createObject("zhangsan", "123");
    var object2 = createObject("lisi", "456");
    
    object.get();
    object2.get(); 
    3)  构造函数方式
    function Person()
    {
        //在执行第一行代码前,js引擎会为我们生成一个对象
        this.username = "zhangsan";
        this.password = "123";
    
        this.getInfo = function()
        {
            alert(this.username + ", " + this.password);
        }
    
        //此处有一个隐藏的return语句,用于将之前生成的对象返回
    }
    
    var person = new Person();
    person.getInfo(); 
    可以在构造对象时传递参数
    function Person(username, password)
    {
        this.username = username;
        this.password = password;
    
        this.getInfo = function()
        {
            alert(this.username + ", " + this.password);
        }
    }
    
    var person = new Person("zhangsan", "123");
    person.getInfo(); 
    4)原型(“prototype”)方式
    function Person()
    {
    
    }
    
    Person.prototype.username = "zhangsan";
    Person.prototype.password = "123";
    
    Person.prototype.getInfo = function()
    {
        alert(this.username + ", " + this.password);
    }
    
    var person = new Person();
    var person2 = new Person();
    
    person.username = "lisi";
    
    person.getInfo();
    person2.getInfo(); 
    //-------------------------
    function Person()
    {
    
    }
    
    Person.prototype.username = new Array();
    Person.prototype.password = "123";
    
    Person.prototype.getInfo = function()
    {
        alert(this.username + ", " + this.password);
    }
    
    var person = new Person();
    var person2 = new Person();
    
    person.username.push("zhangsan");
    person.username.push("lisi");
    person.password = "456";
    
    person.getInfo();
    person2.getInfo();
    如果使用原型方式对象,那么生成的所有对象会共享原型中的属性,
    这样一个对象改变了该属性也会反应到其他对象当中。 
    单纯使用原型方式定义对象无法在构造函数中为属性赋初值,只能在
    对象生成后再去改变属性值。 
    使用原型+构造函数方式来定义对象,对象之间的属性互不干扰,各
    个对象间共享同一个方法 
    //使用原型+构造函数方式来定义对象
    
    function Person()
    {
        this.username = new Array();
        this.password = "123";
    }
    
    Person.prototype.getInfo = function()
    {
        alert(this.username + ", " + this.password);
    }
    
    var p = new Person();
    var p2 = new Person();
    
    p.username.push("zhangsan");
    p2.username.push("lisi");
    
    p.getInfo();
    p2.getInfo();
    5)  动态原型方式:在构造函数中通过标志量让所有对象共享一个
    方法,而每个对象拥有自己的属性。 
    function Person()
    {
        this.username = "zhangsan";
        this.password = "123";
    
        if(typeof Person.flag == "undefined")
        {
            alert("invoked");
            
            Person.prototype.getInfo = function()
            {
                alert(this.username + ", " + this.password);
            }
    
            Person.flag = true;
        }
    }
    
    var p = new Person();
    var p2 = new Person();
    
    p.getInfo();
    p2.getInfo();
    ★★★★★
    17. JavaScript中的继承。 1) 对象冒充 //继承第一种方式:对象冒充 function Parent(username) { this.username = username; this.sayHello = function() { alert(this.username); } } function Child(username, password) { //下面三行代码是最关键的代码 this.method = Parent; this.method(username); delete this.method; this.password = password; this.sayWorld = function() { alert(this.password); } } var parent = new Parent("zhangsan"); var child = new Child("lisi", "1234"); parent.sayHello(); child.sayHello(); child.sayWorld(); 2) call方法方式。 call方法是Function对象中的方法,因此我们定义的每个函数都拥有 该方法。可以通过函数名来调用call方法,call方法的第一个参数会 被传递给函数中的this,从第2个参数开始,逐一赋值给函数中的参 数。 //继承的第二种实现方式,call方法方式,Function对象中的方法 function test(str, str2) { alert(this.name + ", " + str + ", " + str2); } var object = new Object(); object.name = "zhangsan"; //test.call相当于调用了test函数 test.call(object, "shengsiyuan", "hello"); //将object赋给了this //------------------------------------------------------------- //使用call方式实现对象的继承 function Parent(username) { this.username = username; this.sayHello = function() { alert(this.username); } } function Child(username, password) { Parent.call(this, username); this.password = password; this.sayWorld = function() { alert(this.password); } } var parent = new Parent("zhangsan"); var child = new Child("lisi", "123"); parent.sayHello(); child.sayHello(); child.sayWorld(); 3) apply方法方式 //使用apply方法实现对象继承 function Parent(username) { this.username = username; this.sayHello = function() { alert(this.username); } } function Child(username, password) { Parent.apply(this, new Array(username)); this.password = password; this.sayWorld = function() { alert(this.password); } } var parent = new Parent("zhangsan"); var child = new Child("lisi", "123"); parent.sayHello(); child.sayHello(); child.sayWorld(); 4)原型链方式(无法给构造函数传参数) //使用原型链(prototype chain)方式实现对象继承 function Parent() { } Parent.prototype.hello = "hello"; Parent.prototype.sayHello = function() { alert(this.hello); } function Child() { } Child.prototype = new Parent(); Child.prototype.world = "world"; Child.prototype.sayWorld = function() { alert(this.world); } var child = new Child(); child.sayHello(); child.sayWorld(); 5)混合方式(推荐) //使用混合方式实现对象继承(推荐) function Parent(hello) { this.hello = hello; } Parent.prototype.sayHello = function() { alert(this.hello); } function Child(hello, world) { Parent.call(this, hello); this.world = world; } Child.prototype = new Parent(); Child.prototype.sayWorld = function() { alert(this.world); } var child = new Child("hello", "world"); child.sayHello(); child.sayWorld();
    function Shape(edge)
    {
        this.edge = edge;
    }
    Shape.prototype.getArea = function()
    {
        return -1;
    }
    Shape.prototype.getEdge = function()
    {
        return this.edge;
    }
    function Triangle(bottom, height)
    {
        Shape.call(this, 3);
        this.bottom = bottom;
        this.height = height;
    }
    Triangle.prototype = new Shape();
    Triangle.prototype.getArea = function()
    {
        return 0.5 * this.bottom * this.height;
    }
    //Triangle.prototype.getEdge = function()
    //{
    //    return this.edge;
    //}
    var triangle = new Triangle(10, 4);
    //alert(triangle.getEdge());
    //alert(triangle.getArea());
    function Rectangle(bottom, height)
    {
        Shape.call(this, 4);
        this.bottom = bottom;
        this.height = height;
    }
    Rectangle.prototype = new Shape();
    Rectangle.prototype.getArea = function()
    {
        return this.bottom * this.height;
    }
    //Rectangle.prototype.getEdge = function()
    //{
    //    return this.edge;
    //}
    var rectangle = new Rectangle(20, 40);
    alert(rectangle.getEdge());
    alert(rectangle.getArea());
  • 相关阅读:
    mysql 更改字符集
    修改pip源
    git命令
    virtualwrapper使用
    Python环境搭建
    IntellIJ IDEA 配置 Maven 以及 修改 默认 Repository
    Spring4:JDBC
    Spring3:AOP
    Spring2:bean的使用
    Spring1:Spring简介、环境搭建、源码下载及导入MyEclipse
  • 原文地址:https://www.cnblogs.com/exmyth/p/3232819.html
Copyright © 2011-2022 走看看