JavaScript基础知识(二)

一、JavaScript事件详解

1、事件流:描述的是在页面中结束事件的顺序

事件传递有两种方式:冒泡与捕获。

  事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?

 在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。

 在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。

2、事件的处理:

  ①HTML事件处理:直接添加到HTML结构中

<body>
    <div id="div">
        <button id="btn" onclick="demo()">按钮</button>
    </div>
    <script>
        function demo() {
            alert("Hello html事件处理");
        }
    </script>
</body>

  ②DOMO级事件处理:把一个函数赋值给一个事件处理程序属性

<body>
    <div id="div">
        <button id="btn1">按钮</button>
    </div>
    <script>
        var btn1 = document.getElementById("btn1");
        btn1.onclick = function(){alert("Hello DOMO事件出现程序1")}//设置事件处理
        btn1.onclick = function(){alert("Hello DOMO事件出现程序2")}//前一个被覆盖
     btn1.onclich = null;//移除事件处理
    </script>
</body>    

  ③DOM2级事件处理:

  addEventListener("事件名","事件处理函数","布尔值");

  true:事件捕获

  false:事件冒泡<body>

    <div id="div">
        <button id="btn1">按钮</button>
    </div>
    <script>
        var btn1 = document.getElementById("btn1");
        btn1.addEventListener("click",demo1);//不会被覆盖,依次执行
        btn1.addEventListener("click",demo2);
        function demo1(){
            alert("Hello DOM2级事件出现程序1")
        }
        function demo2(){
            alert("Hello DOM2级事件出现程序2")
        }       btn1.removeEventListener("click",demo2);//移除事件2
  </script> </body>

  removeEventListener();

  ④IE事件处理程序

  attachEvent

  datachEvent

 1 <body>
 2     <div id="div">
 3         <button id="btn1">按钮</button>
 4     </div>
 5     <script>
 6         var btn1 = document.getElementById("btn1");
 7         if(btn1.addEventListener){
 8             btn1.addEventListener("click",demo);
 9         }else if(btn1.attachEvent){
10             btn1.attachEvent("onclick",demo);
11         }else{
12             btn1.onclick = demo();
13         }
14         function demo(){
15             alert("Hello DOM2级事件出现程序2")
16         }
17     </script>
18 </body>

3、事件对象:在触发DOM事件的时候都会产生一个对象

  ①事件对象event:

  • type:获取事件类型
  • target:获取事件目标
  •  1 <body>
     2     <div id="div">
     3         <button id="btn1">按钮</button>
     4     </div>
     5     <script>
     6         var btn1 = document.getElementById("btn1");
     7         btn1.addEventListener("click",show);
     8         function  show(event) {
     9             alert(event.type);//获取对象类型,如click
    10             alert(event.target);//获取事件目标,如[object HTMLButtonElement]
    11         }
    12     </script>
    13 </body>
  • stopPropagation():阻止事件冒泡
  • preventDefault():阻止事件默认行为
  •  1 <body>
     2     <div id="div">
     3         <button id="btn1">按钮</button>
     4         <a id="aid" href="http://www.hao123.com">好123</a>
     5     </div>
     6     <script>
     7         document.getElementById("btn1").addEventListener("click",showTarget);
     8         document.getElementById("div").addEventListener("click",showDiv);
     9         document.getElementById("aid").addEventListener("click",showA);
    10         function  showTarget(event) {
    11             alert(event.target);
    12             event.stopPropagation();//阻止事件冒泡,即点击按钮时,阻止事件传递到div(阻止触发div)
    13         }
    14         function showDiv() {
    15             alert("div")
    16         }
    17         function showA(event) {
    18             event.stopPropagation();//跳转,但阻止向上传递(阻止触发div)
    19             event.preventDefault();//阻止事件默认行为,如点击链接时跳转
    20         }
    21     </script>
    22 </body>

二、JavaScript内置对象

1、对象  

  JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...

  每个对象带有属性和方法的特殊数据类型。

  JavaScript 允许自定义对象

2、创建 JavaScript 对象

  通过 JavaScript,您能够定义并创建自己的对象。

  创建新对象有两种不同的方法:

  • 定义并创建对象的实例
  • 使用函数来定义对象,然后创建新的对象实例
  • <body>
        <!--创建对象-->
        <script>
    //        创建对象方式一
    //        people = new Object();
    //        people.name = "lilei";
    //        people.age = "15";
    //        people ={name:"lilei",age:"15"};//上三行可合并写此方式
    //        document.write("name:"+people.name+"  age:"+people.age);
    //        创建对象方式二
            function people(name,age) {
                this.name=name;//this 指明对象
                this.age = age;
            }
            son = new people("lilei",15);
            document.write("name:"+son.name+"age:"+son.age);
        </script>
    </body>

3、String字符串对象

  字符串可以存储一系列字符,如 "John Doe"。

  字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号;

  ①字符串属性


属性


描述

constructor 返回创建字符串属性的函数
length 返回字符串的长度
prototype 允许您向对象添加属性和方法

  ②字符串常见方法

方法 描述
indexOf() 返回字符串中检索指定字符第一次出现的位置
lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
toUpperCase() 把字符串转换为大写
toLowerCase() 把字符串转换为小写
split() 把字符串分割为子字符串数组
charAt() 返回指定索引位置的字符
charCodeAt() 返回指定索引位置字符的 Unicode 值
concat() 连接两个或多个字符串,返回连接后的字符串
fromCharCode() 将 Unicode 转换为字符串
localeCompare() 用本地特定的顺序来比较两个字符串
search() 检索与正则表达式相匹配的值
slice() 提取字符串的片断,并在新的字符串中返回被提取的部分
substr() 从起始索引号提取字符串中指定数目的字符
substring() 提取字符串中两个指定的索引号之间的字符
toString() 返回字符串对象值
trim() 移除字符串首尾空白
valueOf() 返回某个字符串对象的原始值

4、Date 对象

  Date 对象用于处理日期与实际。

  ①Date 对象属性


属性


描述

constructor 返回对创建此对象的 Date 函数的引用。
prototype 使您有能力向对象添加属性和方法。

②常用方法:

    • Date() :获得当前的时间。
    • getFullYear():使用 getFullYear() 获取年份。
    • getTime():getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
    • setFullYear():如何使用 setFullYear() 设置具体的日期。
    • toUTCString():如何使用 toUTCString() 将当日的日期(根据 UTC)转换为字符串。
    • getDay():如何使用 getDay() 和数组来显示星期,而不仅仅是数字。
    • Display a clock:如何在网页上显示一个钟表。
    •  1 <!DOCTYPE html>
       2 <html>
       3 <head>
       4     <meta charset="utf-8">
       5     <title>菜鸟教程(runoob.com)</title>
       6     <script>
       7         function startTime(){
       8              var today=new Date();
       9              var h=today.getHours();
      10              var m=today.getMinutes();
      11              var s=today.getSeconds();// 在小于10的数字前加一个‘0’
      12              m=checkTime(m);
      13              s=checkTime(s);                      document.getElementById(‘txt‘).innerHTML=h+":"+m+":"+s;
      14              t=setTimeout(function(){startTime()},500);
      15         }
      16         function checkTime(i){
      17             if (i<10){
      18                 i="0" + i;
      19             }
      20             return i;
      21         }
      22     </script>
      23 </head>
      24     <body >
      25     <div id="txt"></div>
      26 </body>
      27 </html>

5、 Array(数组) 对象

  数组对象是使用单独的变量名来存储一系列的值。

  ①创建数组方法:

  •   常规方式:

var myCars=new Array(); myCars[0]="Saab"; myCars[1]="Volvo"; myCars[2]="BMW";

  • 简洁方式:var myCars=new Array("Saab","Volvo","BMW");
  • 字面:var myCars=["Saab","Volvo","BMW"];

  ②数组的属性

属性 描述
constructor 返回创建数组对象的原型函数。
length 设置或返回数组元素的个数。
prototype 允许你向数组对象添加属性或方法。

  ③常用方法

方法 描述
concat() 连接两个或更多的数组,并返回结果。
sort() 对数组的元素进行排序。
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
reverse() 反转数组的元素顺序。
//升序排列
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
//降序排列
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});

6、Math对象

  Math 对象用于执行数学任务。

     使用Math的属性/方法的语法:

var x=Math.PI;

var y=Math.sqrt(16);

  round():如何使用 round()。

  random():使用 random() 来返回 0 到 1 之间的随机数。使用parstInt(Math.random()*10)产生0-10间的随机整数。

  max(): max() 来返回两个给定的数中的较大的数。

  min():使用 min() 来返回两个给定的数中的较小的数。

三、JavaScript DOM对象控制HTML元素详解

  在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。

1、常用方法:

方法 描述
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementsByName() 返回包含带有指定name名称的所有元素的节点列表(集合/节点数组)。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
childNodes() 访问子节点
parentNode() 访问父节点
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。
offsetHeight 返回,任何一个元素的高度包括边框和填充,但不是边距
scrollHeight 返回整个元素的高度(包括带滚动条的隐蔽的地方)

示例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <p name="pn">Hello</p>
 9     <p name="pn">Hello</p>
10     <p name="pn">Hello</p>
11     <p name="pn">Hello</p>
12     <a id="aid" title="得到了a标签的属性"></a>
13     <a id="aid2"></a>
14     <ul><li>1</li><li>2</li><li>3</li></ul>
15     <div id="div">
16         <p id="pid">div的p元素</p>
17     </div>
18     <script>
19         //获取元素
20         function getName() {
21             var count = document.getElementsByName("pn");//以name方式获取获取该类集合
22             //var count = document.getElementsByTagName("p");//以元素名获取集合
23             alert(count.length);
24             var p = count[2];
25             p.innerHTML = "World";
26         }
27         //获取节点属性
28         function getAttr() {
29             var anode = document.getElementById("aid");
30             var attr = anode.getAttribute("title");
31             alert(attr);
32         }
33         //设置节点属性
34         function setAttr() {
35             var anode = document.getElementById("aid2");
36             anode.setAttribute("title","动态标签title属性");
37             var attr = anode.getAttribute("title");
38             alert(attr);
39         }
40         //获取子节点
41         function getChildNode() {
42             var childnode = document.getElementsByTagName("ul")[0].childNodes;
43             alert(childnode.length);
44             alert(childnode[0].nodeType);
45         }
46         //获取父节点
47         function getParentNode() {
48             var div = document.getElementById("pid");
49             alert(div.parentNode.nodeName);
50         }
51         //创建节点
52         function createNode() {
53             var body = document.body;
54             var input = document.createElement("input");
55             input.type="button";
56             input.value="按钮";
57             body.appendChild(input);//添加节点到body末尾
58         }
59         //指定位置添加节点
60         function addNode() {
61             var div = document.getElementById("div");
62             var node = document.getElementById("pid");
63             var newnode = document.createElement("p");
64             newnode.innerHTML = "动态添加一个p元素";
65             div.insertBefore(newnode,node);
66         }
67         //删除节点
68         function removeNode() {
69             var div = document.getElementById("div");
70             var p = div.removeChild(div.childNodes[1]);
71         }
72         //获取页面尺寸
73         function getSize() {
74             var width = document.body.offsetWidth || document.documentElement.offsetWidth;
75             //前半句兼容性较好
76             var height = document.documentElement.offsetHeight;
77             alert(width+","+height);
78         }
79         getSize();
80     </script>
81 </body>
82 </html>

四、JavaScript浏览器对象

1、window对象

  ①window对象

    • 所有浏览器都支持 window 对象。它表示浏览器窗口。
    • 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
    • 全局变量是 window 对象的属性。
    • 全局函数是 window 对象的方法。
    • 甚至 HTML DOM 的 document 也是 window 对象的属性之一

  ②Window 尺寸

  有三种方法能够确定浏览器窗口的尺寸。

  对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

    • window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
    • window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

  对于 Internet Explorer 8、7、6、5:

    • document.documentElement.clientHeight
    • document.documentElement.clientWidth

  或者

    • document.body.clientHeight
    • document.body.clientWidth

  ③其他 Window 方法  

    • window.open() - 打开新窗口
    • window.close() - 关闭当前窗口
    • window.moveTo() - 移动当前窗口
    • window.resizeTo() - 调整当前窗口的尺寸

示例:

 1 <body>
 2     <button id="btn" onclick="btnClicked()">按钮</button>
 3     <script>
 4         //打印窗口的高度和宽度
 5         // document.write("宽度:"+window.innerWidth+",高度:"+window.innerHeight);
 6         function btnClicked() {
 7             //打开一个新的窗口(第二、三个参数为可选项),并可设置窗口属性,第三个参数可根据需要设置新窗口的一些属性
 8             //window.open("obindex.html","windowname","height = 200,width=200,top=100,left=100");
 9             //关闭窗口
10             window.close();
11         }
12     </script>
13 </body>

2、JavaScript 计时事件

  ①计时事件

  通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。

  ②计时方法

    • setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

window.setInterval("javascript function",milliseconds);

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

window.clearInterval(intervalVariable)

 1 <body>
 2     <button id="btn" onclick="stopTime()">按钮</button>
 3     <p id="ptime"></p>
 4     <script>
 5         var mytime = setInterval(function () {
 6             getTime();
 7         },1000);
 8         function getTime() {
 9             var d = new Date();
10             var t = d.toLocaleTimeString();
11             document.getElementById("ptime").innerHTML=t;
12         }
13         function stopTime() {
14             //停止执行
15             clearInterval(mytime);
16         }
17     </script>
18 </body>
    • setTimeout() - 暂停指定的毫秒数后执行指定的代码

       window.setTimeout("javascript 函数",毫秒数);

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

 window.clearTimeout(timeoutVariable) 

 1 <body >
 2     <button id="btn" onclick="stopWin()">按钮</button>
 3     <script>
 4         var win;
 5         function myWin(){
 6             alert("hello")
 7             //延迟3秒弹出,自调自,形成死循环
 8             win = setTimeout(function(){myWin()},3000);
 9         }
10         //停止执行
11         function stopWin() {
12             clearTimeout(win);
13         }
14     </script>
15 </body>

Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法,调用时可直接写该方法,省略window

3、History对象

①History对象

window.history 对象包含浏览器的历史(url)的集合。

②History方法:

  • history.back() - 与在浏览器点击后退按钮相同,加载历史列表中的前一个 URL。
  •  1 <html>
     2 <head>
     3     <script>
     4         function goBack(){
     5               window.history.back()
     6           }
     7     </script>
     8 </head>
     9 <body>
    10     <input type="button" value="Back" onclick="goBack()">
    11 </body>
    12 </html>  
  • history.forward() - 与在浏览器中点击按钮向前相同
  • history.go() - 进入历史中的某个页面
  • 模拟跳转到登录界面再返回原先界面 1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8     <a href="obindex.html">跳转</a>
     9 </body>
    10 </html>
     //obindex.html 1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <script>
     7         function safe() {
     8             var name = document.getElementById("username").value;
     9             if (name=="hello"){
    10 //              跳转到前一个页面
    11                 history.go(-1);
    12             }else{
    13                 alert("输入错误");
    14             }
    15         }
    16     </script>
    17 </head>
    18 <body>
    19 <form>
    20     <input type="text" id="username">
    21     <button id="btn" onclick="safe()">按钮</button>
    22 </form>
    23 </body>
    24 </html>

4、JavaScript Window Location

  window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

  Location对象的属性:

    • location.hostname 返回 web 主机的域名
    • location.pathname 返回当前页面的路径和文件名
    • location.port 返回 web 主机的端口 (80 或 443)
    • location.protocol 返回所使用的 web 协议(http:// 或 https://)
    • location.href 属性返回当前页面的 URL。
    • location.assign() 方法加载新的文档。
<script>
document.write(location.pathname);
</script>

window.location.assign("http://www.w3cschool.cc")

5、JavaScript Window Screen

 window.screen 对象包含有关用户屏幕的信息

  一些属性:

  • screen.availWidth - 可用的屏幕宽度
  • <script>
    document.write("可用宽度: " + screen.availWidth);
    </script>
  • screen.availHeight - 可用的屏幕高度
  • screen.width-屏幕宽度
  • screen.height -屏幕高度

五、面向对象

  • 一切事物皆对象
  • 对象具有封装和继承特性
  • 对象与对象之间使用消息通信,各自存在信息隐藏

1、对象的创建

①创建一个没有任何属性的对象:

var obj = {};

②创建一个对象并设置属性及初始值:

var person = {name:"Angel",age:18,married:false};

③创建一个对象并设置属性和方法:

var speaker = {text:"Hello World",say:function(){aler(this.text)}};

④创建一个复杂的对象,嵌套其他对象和对象数组等:

var company ={
    name: "Microsoft",
    product: "softwares",
    chairman: {name: "Bill Gates", age: 53, Married: true},
    employees: [{name: "Angel", age: 26, Married: false}, {name: "Hanson", age: 32, Marred: true}],
    readme: function() {document.write(this.name + " product " + this.product);}
};

2、对象的另外一种创建方法(函数构造器)

  使用new操作符结合一个函数的形式来创建对象。

function MyFunc() {};         //定义一个空函数
var anObj = new MyFunc();  //使用new操作符,借助MyFun函数,就创建了一个对象

  上述创建方法等价于:

function MyFunc(){};
var anObj = {};     //创建一个对象
MyFunc.call(anObj); //将anObj对象作为this指针调用MyFunc函数

  继承的体现:

 1 function Person(name) {  //带参数的构造函数
 2      this.name = name;   //将参数值赋给给this对象的属性
 3      this.SayHello = function() {alert("Hello, I‘m " + this.name);};   //给this对象定义一个SayHello方法。
 4 };
 5
 6 function Employee(name, salary){     //子构造函数
 7      Person.call(this, name);        //将this传给父构造函数
 8      this.salary = salary;       //设置一个this的salary属性
 9      this.ShowMeTheMoney = function() {alert(this.name + " $" + this.salary);};  //添加ShowMeTheMoney方法。
10 };
11
12 var BillGates = new Person("Bill Gates");   //用Person构造函数创建BillGates对象
13 var SteveJobs = new Employee("Steve Jobs", 1234);   //用Empolyee构造函数创建SteveJobs对象
14
15 BillGates.SayHello();   //显示:I‘m Bill Gates
16 SteveJobs.SayHello();   //显示:I‘m Steve Jobs
17 SteveJobs.ShowMeTheMoney();   //显示:Steve Jobs $1234
18
19 alert(BillGates.constructor == Person);  //显示:true
20 alert(SteveJobs.constructor == Employee);  //显示:true
21
22 alert(BillGates.SayHello == SteveJobs.SayHello); //显示:false

  这段代码表明,函数不但可以当作构造函数,而且还可以带参数,还可以为对象添加成员和方法。其中的第9行,Employee构造函数又将自己接收的 this作为参数调用Person构造函数,这就是相当于调用基类的构造函数。第21、22行还表明这样一个意思:BillGates是由Person构造的,而SteveJobs是由Employee构造的。对象内置的constructor属性还指明了构造对象所用的具体函数!

3、原型

  ① JavaScript的所有function类型的对象都有一个prototype属性。这个prototype属性本身又是一个object类型的对 象,因此我们也可以给这个prototype对象添加任意的属性和方法。既然prototype是对象的“原型”,那么由该函数构造出来的对象应该都会具 有这个“原型”的特性。事实上,在构造函数的prototype上定义的所有属性和方法,都是可以通过其构造的对象直接访问和调用的。也可以这么 说,prototype提供了一群同类对象共享属性和方法的机制。(类似于Java 中的继承)

function Person(name){    this.name = name;   //设置对象属性,每个对象各自一份属性数据
};

Person.prototype.SayHello = function(){  //给Person函数的prototype添加SayHello方法。
     alert("Hello, I‘m " + this.name);
}

var BillGates = new Person("Bill Gates");   //创建BillGates对象
var SteveJobs = new Person("Steve Jobs");   //创建SteveJobs对象

BillGates.SayHello();   //通过BillGates对象直接调用到SayHello方法
SteveJobs.SayHello();   //通过SteveJobs对象直接调用到SayHello方法

alert(BillGates.SayHello == SteveJobs.SayHello); //因为两个对象是共享prototype的SayHello,所以显示:true

程序运行的结果表明,构造函数的prototype上定义的方法确实可以通过对象直接调用到,而且代码是共享的。

  ②用这简单的掩盖机制实现了对象的“多态”性(类似于Java中的overrid):

function Person(name){
    this.name = name;
};

Person.prototype.company = "Microsoft"; //原型的属性

Person.prototype.SayHello = function(){  //原型的方法
    alert("Hello, I‘m " + this.name + " of " + this.company);
};

var BillGates = new Person("Bill Gates");
BillGates.SayHello();   //由于继承了原型的东西,规规矩矩输出:Hello, I‘m Bill Gates

var SteveJobs = new Person("Steve Jobs");
SteveJobs.company = "Apple";    //设置自己的company属性,掩盖了原型的company属性
SteveJobs.SayHello = function(){ //实现了自己的SayHello方法,掩盖了原型的SayHello方法
        alert("Hi, " + this.name + " like " + this.company + ", ha ha ha ");
};

SteveJobs.SayHello();   //都是自己覆盖的属性和方法,输出:Hi, Steve Jobs like Apple, ha ha ha 

BillGates.SayHello();   //SteveJobs的覆盖没有影响原型对象,BillGates还是按老样子输出

  ③动态扩展性

function Person(name){
    this.name = name;
};

Person.prototype.SayHello = function(){  //建立对象前定义的方法
    alert("Hello, I‘m " + this.name);
};

var BillGates = new Person("Bill Gates");   //建立对象

BillGates.SayHello();

Person.prototype.Retire = function(){    //建立对象后再动态扩展原型的方法
    alert("Poor " + this.name + ", bye bye!");
};

BillGates.Retire(); //动态扩展的方法即可被先前建立的对象立即调用

  ④信息的隐藏(类似于Java中的封装)

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4    <meta charset="utf-8">
 5   <title>菜鸟教程(runoob.com)</title>
 6 </head>
 7 <body>
 8
 9   <p>局部变量计数。</p>
10   <button type="button" onclick="myFunction()">计数!</button>
11   <p id="demo">0</p>
12   <script>
13      var add = (function () {
14         var counter = 0;
15         return function () {return counter += 1;}
16     })();
17     function myFunction(){
18         document.getElementById("demo").innerHTML = add();
19     }
20 </script>
21 </body>
22 </html>

  ⑤原型模型大致写法

 //定义构造函数
 function Person(name){
    this.name = name;   //在构造函数中定义成员
 };

 //方法定义到构造函数的prototype上
 Person.prototype.SayHello = function(){
    alert("Hello, I‘m " + this.name);
 };    

 //子类构造函数
 function Employee(name, salary){
    Person.call(this, name);    //调用上层构造函数
    this.salary = salary;       //扩展的成员
 };

 //子类构造函数首先需要用上层构造函数来建立prototype对象,实现继承的概念
 Employee.prototype = new Person()   //只需要其prototype的方法,此对象的成员没有任何意义!

 //子类方法也定义到构造函数之上
 Employee.prototype.ShowMeTheMoney = function(){
        alert(this.name + " $" + this.salary);
 };

 var BillGates = new Person("Bill Gates");
 BillGates.SayHello();    

 var SteveJobs = new Employee("Steve Jobs", 1234);
 SteveJobs.SayHello();
 SteveJobs.ShowMeTheMoney();
时间: 2024-10-10 21:08:48

JavaScript基础知识(二)的相关文章

Javascript基础知识5

不要把相等运算符(==)与赋值运算符(=)搞混. 以&&运算符隔开的两个条件中的前者为错,则不会检测第二个条件的真假.利用这一点,可以提高脚本的速度. 使用带switch的多个条件 if(button=="next") window.location = "next.html"; else if(button=="previous") window.location = "pre.html"; else if(

javascript 基础知识

javascript 基础知识编程规范注释 //驼峰对象化编程 数据类型字符串.数字.布尔.数组.对象.Null.Undefined定义 var carname=new String; var x= new Number; var y= new Boolean; var cars= new Array; var person= new Object; 字符串 var word = "Hello World!"; 数字 var x1 = 34.00; //使用小数点来写 var x2 =

JavaScript基础知识梳理--数组

JavaScript基础知识梳理--数组 1.创建方法 空数组:var obj=new Array(); 指定长度数组: var obj=new Array( size ); 指定元素数组 :  var obj=new Array( 元素1,元素2,....): 单位数组:var obj=new Array[ 元素1,元素2,元素3,...,元素N]; 多维数组:var a=new Array( [数组1],[数组2],[数组3],...,[数组N] ); 2.基本操作 存取数组元素: 单维数组

(1)JavaScript基础知识

Javascript基础知识 1.如何使用JavaScript (1).通过<script></script>中直接编写 (2).通过<script src='目标文档的URL'></script>链接外部的Js文件 ① <script  src="URL" type="text/javascript" charset="utf-8"></script> (3).作为某个元素

Javascript基础知识4

字符串大小写转换 toUpperCase()将所有的字符串转换成大写 toLowerCase()将所有的字符串转换成小写 substring(x,y)返回字符串的一部分,从x开始到y结束 charAt(x)获取第x个字符 indexOf("",x)查找字符串, 第一个内容是字符串,第二个是从第x开始 得到的值为这个字符串是从第几个字符开始的 同样lastindexOf()从最后开始查找 split("")分离字符串,内容为以什么分离, 得到的是一个数组 同理,将一个

JavaScript基础知识梳理----正则表达式

JavaScript基础知识梳理----正则表达式 1.创建 方式:---字面量:var 变量名=/表达式/模式修饰符 ---构造函数:var 变量名=new RegExp(“表达式”,“模式修饰符”) 说明: 表达式 单个字符和数字 . 匹配除换行符之外的任意字符 [a-z0-9] 匹配方括号中的任意字符 [^a-z0-9] 匹配不在方括号中的任意字符 \d 匹配数字 \D 匹配非数字 \w 匹配字母 \W 匹配非字母 空白字符 \0 匹配null字符 \b 匹配空格符 \f 匹配进纸符 \n

javascript 基础知识1 数据类型

首先javascript是一种具有面向对象能力的,解释型程序设计语言. js对大小写敏感,一定要采取一致的字符大小写形式,在js中的结束分号(:)是可选的,为了避免JS语句错误,我们还是要注意添加,养成良好的编写习惯. 下面看看数据类型和值. JS有7种数据类型:字符串.数字.布尔.数组.对象.Null.Undefined 字符串类型:由Unicode字符,数字,标点符号组成的序列,可以为多个字符,也可以为0个字符. 1 <script> 2 // var用于声明一个变量 3 var stri

javascript基础知识拾遗

1 下面列出的值被当作假 false null undefined '' 0 NaN 其它所有值被当作是真 console.log(undefined || true); //true console.log(0||true); //true console.log(''||true); //true console.log(false||true); //true console.log(null||true); //true console.log(NaN||true); //true co

JavaScript基础知识3

JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里 JavaScript基础知识3

ASP.NET Core 2.2 基础知识(二) 中间件

原文:ASP.NET Core 2.2 基础知识(二) 中间件 中间件是一种装配到应用管道以处理请求和相应的软件.每个软件都可以: 1.选择是否将请求传递到管道中的下一个组件; 2.可在调用管道中的下一个组件前后执行工作. 管道由 IApplicationBuilder 创建: 每个委托都可以在下一个委托前后执行操作,.此外,委托还可以决定不将请求传递给下一个委托,这就是对请求管道进行短路.通常需要短路,是因为这样可以避免不必要的工作.比如: 1.静态文件中间件可以返回静态文件请求并使管道的其余