新普金娱乐网址


看清品质难题

泛函编程(1)-泛函编程是如何促成的

JavaScript基础知识(二)

  • 二月 20, 2019
  • 数学
  • 没有评论

  通过 JavaScript,您可以定义并创造和谐的靶子。

参考

《学习正则表明式》
《正则表达式必知必会》

    • Date() :拿到当前的光阴。
    • getFullYear():使用 getFullYear() 获取年份。
    • getTime():getTime() 再次回到从 一九六八 年 1 月 1 日于今的微秒数。
    • setFullYear():如何接纳 setFullYear() 设置具体的日期。
    • toUTCString():怎么着接纳 toUTCString() 将当日的日子(依照UTC)转换为字符串。
    • getDay():如何采纳 getDay() 和数组来彰显星期,而不仅仅是数字。
    • Display a clock:怎么着在网页上体现2个时钟。
    • 1
      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=check提姆e(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
      23
      24
      25

      26
      27

引子

上一章分享了专业表明式的入门知识,以及单字符、多字符常用的卓殊方法,对于工作保证进度中已经够用,可是有时只利用基础知识来兑现就会比较费心,若是利用高级用法就会比较便宜广大。
例如:匹配二个HTML文件中七个<B>标签中的文件。
文件内容:

This offer is not available to customers living in <B>AK</B> and <B>HI</B>

从上一章内容的学识可以想到的表明式或然如下:

<[Bb]>.*</[Bb]>

不过那个表明式配置的结果是AK</B> and <B>HI,而不是我们想要的AKHI

    • window.innerHeight – 浏览器窗口的里边中度(包含滚动条)
    • window.innerWidth – 浏览器窗口的其中宽度(包涵滚动条)

命名分组

前方讲捕获分组都是透过岗位编号来走访,在perl和python、.NET等语言中还帮忙对捕获分组命名。那样就比较简单明白

命名语法 描述
(?<name>分组) 命名分组
(?P<name>分组) python中的命名分组
\k<name> Perl中引用命名分组
\k’name’ Perl中引用命名分组
\g{name} Perl中引用命名分组
\k{name} .NET中引用命名分组
(?P=name) Python中引用命名分组
  • history.back() – 与在浏览器点击后退按钮相同,加载历史列表中的前一个ULacrosseL。
  • 1

    2 <head>
    3     <script>
    4         function goBack(){
    5               window.history.back()
    6           }
    7     </script>
    8 </head>
    9 <body>
    

    10
    11
    12

  • 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>
    

环视

环顾是一种非捕获分组,它依据某些情势以前照旧以往的内容必要配合其余形式。环视也称之为零幅度断言。

环视分类 说明 举例
(?=分组) 正前瞻,匹配且要求紧随其后内容为分组匹配的内容 a(?=b),匹配a并且后面坚接着是b的字符串,可以匹配abc但是不匹配acb
(?!分组) 反前瞻,即对正前瞻含义取反,匹配且要求紧随其后内容不为分组匹配的内容 a(?!b),匹配a并且后面坚接着不是b的字符串,可以匹配acb但是不匹配abc
(?<=分组) 正后顾,即对正前瞻方向取反,匹配且要求紧挨着之前的内容为分组匹配的内容 (?<=a)b),匹配b并且前面紧挨着是a的字符串,可以匹配abc但是不匹配cbc
(?<!分组) 反后顾,即对正后顾含义取反,匹配且要求紧挨着之前的内容不为分组匹配的内容 (?<!a)b),匹配b并且前面紧挨着不是a的字符串,可以匹配cbc但是不匹配abc

  removeEventListener();

扩展:

  • 像egrep中也帮助使用\<匹配单词开第一地点,使用\>非凡单词结尾地方,可是协理那种元字符的编辑器相比少。
  • (?m)是2个分店匹配格局的符号,放在3个表达式的最前边,会转移字符串地方匹配的表现。^不仅仅合营符合规律的字符串初始还匹配行分隔符(换行符)前边的启幕地点;同样$不光合作平常的字符串结尾还匹配行分隔符(换行符)前面的终止地方;此用法只有一部分正则表达式会协理
选项 描述 支持平台
(?d) Unix中的行 java
(?i) 不区分大小写 PCRE Perl java
(?J) 允许重复的名字 PCRE*
(?m) 多行 PCRE Perl java
(?s) 单行 PCRE Perl java
(?u) Unicode java
(?U) 默认最短匹配,与懒惰型匹配类似 PCRE
(?x) 忽略空格和注释 PCRE Perl Java
(?-…) 复原或关闭选项 PCRE
 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>

懒惰型匹配

引子中的例子中的匹配模式是属于贪婪行为,就是尽恐怕多的相当内容,像例子中首先个<B>和终极贰个</B>中间都被匹配到了,而不管匹配内容中是或不是存在</B>。
上一章中讲到的*和+、{m,}都是所谓的“贪婪型”的。在这一节中讲一下与“贪婪型”相反的“懒惰型”,就是匹配尽或然少的内容。

兑现很不难,就是在原本“贪婪型”元字符前边加上1个? 号,如下表格

贪婪型元字符 懒惰型元字符
* *?
+ +?
{m,} {m,}?

  一些质量:

破获分组与后向引用

当三个方式的凡事大概部分情节由一对括号括起来时,就对表明式举办了分组(其实就是身处()中的子表明式),并且把分组匹配到情节捕获并且一时半刻存放在内存中。那就是捕获分组,能够在前边表达式中行使就叫后向引用,只怕叫回溯引用。
默许意况下,分组是从左到右依次排序从1编号,第⑧个分组就是1,第二个分组就是2等等。

最开始的时候协理的编号范围是1到9,以往应该已经没有那种范围了。

后向引用很不难就是3个\或者$背后跟相应编号即可。例如\1或者$1就意味着援引第①个捕获分组。

  ①HTML事件处理:直接助长到HTML结构中

抓获分组与后向引用

目前的元字符都是对紧挨着前面的二个字符有效,例如表明式the{3}匹配theee字符串,要是大家想匹配延续多个the字符串怎么做呢,那就关乎到子表达式的概念。

     使用Math的品质/方法的语法:

地点匹配

在具体的连串中貌似表达地方的地点就是二个单词的开首以及最后只怕贰个字符串的上马或许结尾。
注意那么些界限只是三个地方,例如单词边界匹配的是\w\W中间的二个职位

元字符 说明 注意
\b 单词边界,单词的开头或者单词的结尾 回退键的元字符是[\b]
\B 表示非单词边界
^ 字符串的开头位置 放在[]中表示取非操作
$ 字符串结尾位置

  ③动态增添性

非捕获分组

顾名思义,与捕获分组相反,就是不会将分组匹配的内容放在内存中。紧如若为了增加质量。
行使方法:在分组的发端加上?:,例如(?:the)

当把非捕获分组语法中的:换成>时,就改为了原子分组(另一种非捕获分组),可以更进一步升级质量。因为原子分组会将分组内部的回忆操作关闭。

  • 全部事物皆对象
  • 对象拥有封装和后续个性
  • 目的与目标之间采废除息通信,各自存在音讯隐藏

子表明式

把三个表明式匹配的情节做为三个单身的要素嵌入到别的贰个表达式中,那那个做为独立成分的表明式就是子表明式,须求动用()括起来。那个跟数学的表明式概念很接近。
并且子表明与数学表明式还有三个看似的地点就是,正则表明式的子表明式也足以嵌套使用

本节始于说的特别标题就能够使用子表明式来贯彻,(the){3}就会合营thethethe这几个字符串。

假定大家再加个条件:咱们想匹配三番五次两个the或然两次三番多少个you,怎么落到实处?那就是正则表达式的选料操作符,也叫或操作符了

元字符 说明
| 或操作符,两边的表达式都是一个独立的元素,一般放在()中使用

地点的难点就能够使用正则表明式(the|you){3}来表示

    • location.hostname 再次来到 web 主机的域名
    • location.pathname 重回当前页面的门道和文书名
    • location.port 重回 web 主机的端口 (80 或 443)
    • location.protocol 重临所采纳的 web 协议(http:// 或 https://)
    • location.href 属性重回当前页面的 USportageL。
    • location.assign() 方法加载新的文档。

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

  max(): max() 来回到多少个给定的数中的较大的数。

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

  那段代码申明,函数不但能够当做构造函数,而且还足以带参数,还足以为目的添加成员和艺术。其中的第⑧行,Employee构造函数又将本身收到的
this作为参数调用Person构造函数,那就是相当于调用基类的构造函数。第①壹 、22行还标明那样二个意味:BillGates是由Person构造的,而SteveJobs是由Employee构造的。对象放置的constructor属性还指明了结构对象所用的切实可行函数!

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

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

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

  JavaScript 允许自定义对象

② 、JavaScript 计时事件

window.history 对象涵盖浏览器的历史(url)的相会。

③成立一个目的并设置属性和方法:

  attachEvent

② 、对象的其它一种创设方法(函数构造器)

壹 、事件流:描述的是在页面中停止事件的一一

 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>

1、window对象

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);}
};

②History方法:

 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>

  datachEvent

方法 描述
concat() 连接两个或更多的数组,并返回结果。
sort() 对数组的元素进行排序。
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
reverse() 反转数组的元素顺序。
    • setTimeout() – 暂停钦赐的微秒数后执行钦点的代码 

5、面向对象

 示例:

④ 、JavaScript浏览器对象

Note: setInterval() 和 setTimeout() 是 HTML DOM
Window对象的八个办法,调用时可一向写该方法,省略window

  继承的呈现:

 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>

* window.clearTimeout(timeoutVariable) *

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

3、原型

3、History对象

  false:事件冒泡<body>

  每一种对象涵盖属性和措施的特种数据类型。

  ①计时事件

  add伊夫ntListener(“事件名”,”事件处理函数”,”布尔值”);

  window.location 对象用于获取当前页面的地点(U讴歌ZDXL),并把浏览敬重定向到新的页面。

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

  事件传递定义了元素事件触发的一一。 假若你将 <p> 成分插入到
<div> 成分中,用户点击 <p> 成分, 哪个成分的 “click”
事件先被触发呢?

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

属性

描述

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

  ①字符串属性

  • screen.availWidth – 可用的显示器宽度
  • screen.availHeight – 可用的屏幕中度

  • screen.width-显示屏宽度
  • screen.height -显示屏高度

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

 在 捕获 中,外部因素的轩然大波会先被触发,然后才会接触内部因素的事件,即:
<div> 成分的点击事件先触发 ,然后再触发 <p> 成分的点击事件。

① 、对象的创始

属性 描述
constructor 返回创建数组对象的原型函数。
length 设置或返回数组元素的个数。
prototype 允许你向数组对象添加属性或方法。
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还是按老样子输出

 三 、JavaScript DOM对象说了算HTML成分详解

  Location对象的习性:

 壹 、常用方法:

  ③常用艺术

  创造新对象有二种差其他不二法门:

window.setInterval(“javascript
function”,milliseconds); 

  Date 对象用来拍卖日期与事实上。

①创造二个尚无其他性质的靶子:

<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级事件处理:

  使用new操作符结合贰个函数的款式来成立对象。

* window.screen 对象涵盖关于用户屏幕的音信。*

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

     
程序运维的结果声明,构造函数的prototype上定义的艺术真的可以经过对象直接调用到,而且代码是共享的。

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

  通过利用
JavaScript,我们有能力作到在一个设定的光阴间隔之后来推行代码,而不是在函数被调用后及时执行。大家誉为计时事件。

示例:

二、JavaScript内置对象

  •   常规办法:

  ①
JavaScript的有所function类型的靶子都有2个prototype属性。那些prototype属性本身又是七个object类型的对
象,由此我们也得以给这么些prototype对象添加任意的本性和方法。既然prototype是目的的“原型”,那么由该函数构造出来的靶子应该都会具
有其一“原型”的表征。事实上,在构造函数的prototype上定义的享有属性和方式,都是足以经过其布局的对象直接访问和调用的。也得以这么
说,prototype提供了一群同类对象共享属性和章程的建制。(类似于Java
中的继承)

  或者

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

 1 <body onload="myWin()">
 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>

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

var y=Math.sqrt(16); 

  true:事件捕获

  JavaScript 中的全部东西都以目的:字符串、数值、数组、函数…

  ②用那不难的遮盖机制落到实处了目的的“多态”性(类似于Java中的overrid):

属性

描述

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

②创立2个对象并设置属性及开始值:

④开立五个复杂的靶子,嵌套其余对象和目的数组等:

③ 、事件目的:在触发DOM事件的时候都会时有爆发3个目标

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

  ①事变目的event:

    • setInterval() – 间隔内定的阿秒数不停地举办内定的代码。 
    • 怀有浏览器都协助 window 对象。它表示浏览器窗口。
    • 抱有 JavaScript 全局对象、函数以及变量均自动成为 window
      对象的积极分子。
    • 全局变量是 window 对象的性质。
    • 全局函数是 window 对象的法门。
    • 仍然 HTML DOM 的 document 也是 window 对象的性质之一

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

  ①window对象

  Math 对象用于实施数学职责。

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中的封装)

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

6、Math对象

4、Date 对象

  ④IE事件处理程序

 window.clearInterval(intervalVariable) 

  ⑤原型模型大概写法

  ②字符串常见格局

  ②数组的属性

     clearTimeout() 方法用于截至实施setTimeout()方法的函数代码。

  ②计时方法

 //定义构造函数
 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();

1、对象  

 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

2、创建 JavaScript 对象

贰 、事件的拍卖:

壹 、JavaScript事件详解

  有三种方法可以分明浏览器窗口的尺寸。

  ①Date 目的属性

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

4、JavaScript Window Location

  • 概念并创设对象的实例
  • 选用函数来定义对象,然后创造新的目标实例



  上述创制方法等价于:

 

  数组对象是应用单独的变量名来储存一层层的值。

5、 Array(数组) 对象

 var obj = {}; 

  • 简短格局:var myCars=new Array(“萨博”,”Volvo”,”本田(Honda)”);
  • 字面:var myCars=[“Saab”,”Volvo”,”BMW”];
function MyFunc() {};         //定义一个空函数
var anObj = new MyFunc();  //使用new操作符,借助MyFun函数,就创建了一个对象

①History对象

  ①创设数组方法:

  在 HTML DOM 中,全体东西都以节点。DOM 是被视为节点树的 HTML。

  ②Window 尺寸

//升序排列
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});

  ③其他 Window 方法  

  • type:获取事件类型
  • target:获取事件目的
  • 1

    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
    13

  • stopPropagation():阻止事件冒泡

  • preventDefault():阻止事件暗许行为
  • 1
    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
    22

  字符串可以储存一多重字符,如 “John Doe”。

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

5、JavaScript Window Screen

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

三 、String字符串对象

    事件传递有二种方法:冒泡与捕获。

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

 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>

var x=Math.PI;

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

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

相关文章

No Comments, Be The First!
近期评论
    分类目录
    功能
    网站地图xml地图