七天学会JavaScript~Day2

七天学会JavaScript~Day2

昨天学习的内容

前言

       今天是国庆假期的第三天,也是我学JavaScript的第二天。我们知道,对于一个已经在职的程序员来说,学习一门新的编程语言,其实也就是学习它的语法,因为编程语言的概念大部分都是互通的,只要语法理解了就好上手。JavaScript我是用速成的方法学习,主要目的还是想把里面的东西都过一遍知道这些到底是怎么一回事。以后写代码看API的时候也容易看得懂,但是由于时间过短。语法和特性有可能会忘记一些,这种情况是很糟糕的。为了确保这七天下来,我能把语法和一些特性给记住,所以我决定每天学习完当天的内容之后,再使用JavaScript实现一种数据结构。这样七天下来我才能够记住语法并且看API也可以写的来。

第二天学习的内容

面向对象程序设计

链表数据结构(面向对象语法练习)

BOM

DOM

事件

RegExp后续

RegExp构造函数属性

       RegExp构造函数包含了一些属性,这些属性适用于作用域中的所有正则表达式,并且基于所执行的最近一次正则表达式操作而变化。关于这些属性的另一个独特之处,就是可以通过两种方式访问他们。换句话说这些属性分别有一个长属性名和一个短属性名。

长属性名	短属性名	说明
input	$_	最近一次要匹配的字符串。Opera未实现此属性
lastMatch	$&	最近的一次匹配项。Opera未实现此属性
lastParen	$+	最近一次匹配的捕获组。Opera未实现此属性
leftContext	$'	input字符串中lastMatch之前的文本
multiline	$*	布尔值,表示是否所有表达式都是多行模式。IE和Opera未实现此属性
rightContext	$'	input字符串中lastMatch之后的文本

面向对象程序设计

       关于面向对象的概念呢,这里就不多说了,直接学习语法就可以了。面向对象编程思想

       昨天学习了引用数据类型Object。所以现在也就大概知道对象是怎么创建的了。今天写两段代码回顾一下

对象的创建

构造函数法

  var person = new Object();
   person.name = "alvin";
   person.age = 18;
   //对象的方法
   person.sum = function(){
    
    
	   alert(person.name);
   }
   //调用
   person.sum();

字面量法

	var person = {
    
    
		name : "alvin",
		age : 19,
		fun : function(){
    
    
			alert("hello world");
		}
	};
	person.fun();

       除了这两种方法以外我们还有其他创建方式

工厂模式(寄生构造函数模式)

       工厂模式是软件工程领域的一种广为人知的设计模式。这种模式抽象了创建具体对象的过程。

	function createPerson(name,age,job){
    
    
		var o = new Object();
		o.name = name;
		o.age = age;
		o.job = job;
		o.hello = function(){
    
    
			alert("hello");
		}
		return o;
	}
	
	var person = createPerson("alvin",19,"work");
	person.hello();
	alert(person.name);

构造函数模式

       构造函数和普通的函数本质上没什么区别,只是构造函数在调用的时候是用new罢了。按照写代码的规范,构造函数一般就使用大写字母开头。

	function Person(name,age,job){
    
    
		this.name = name;
		this.age = age;
		this.job = job;
		this.hello = function(){
    
    
			alert("hello");
		};
	}
	var per = new Person("alvin",19,"work");
	per.hello();
	alert(per.name);

原型模式

       我们创建的所有函数都包含了prototype属性,这个属性是一个指针,指向一个对象。而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

	function Person(){
    
    }
	Person.prototype.name = "alvin";
	Person.prototype.age = 29;
	
	var per1 = new Person();
	var per2 = new Person();
	alert(per1.name  == per2.name);	//true

       in操作符除了可以在for循环的时候使用,也可以用来判断一个属性是否存在一个对象里面。如果有就返回true,否则返回false。如果想要删除对象的属性的值则可以使用delete

	function Person(){
    
    
		
	}
	Person.prototype.name = "alvin";
	alert("name" in Person); //true
	alert(Person.prototype.name);	//alvin
	delete Person.name;
	alert(Person.name);	//什么也没有

更简单的原型语法

	function Person(){
    
    }
	Person.prototype={
    
    
		name : "alvin",
		age : 29,
		job : "java",
		hello : function(){
    
    
			alert("hello");
		}
	}
	var per = new Person();
	per.hello();
	alert(per.name);

组合使用构造函数模式和原型模式

	function Person(name,age,job){
    
    
		this.name = name;
		this.age = age;
		this.job = job;
	}
	Person.prototype = {
    
    
		constructor : Person,
		hello : function(){
    
    
			alert("hello");
		}
	}
	var per = new Person("alvin",19,"java");
	alert(per.name);
	per.constructor.age = 7;
	alert(per.constructor.age);

继承

       在JavaScript里面描述了原型链的概念,并且将原型链作为继承的主要方法。基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。实现原型链的一个基本模式代码如下

		function SuperType(){
    
    
			this.prototype = true;
		}
		SuperType.prototype.getSuperValue = function(){
    
    
			return this.prototy;
		}
		function SubType(){
    
    
			this.subproperty = false;
		}
		//继承SuperType
		SubType.prototype = new SuperType();
		SubType.prototype.getSuperValue = function(){
    
    
			return this.subproperty;
		}
		var instance = new SubType();
		alert(instance.getSuperValue());

       面向对象这块,内容比较多。下次有时间我单独学这一块。因为对于后端的我来说可能用的也不太多。今天还是主要把精力放在BOM和DOM上。接下来就再实现一个单链表数据结构来巩固下语法。

面向对象练习(实现单链表数据结构)

       关于单链表数据结构,我过去也写过一些这样的博客。那么今天为了巩固JavaScript在面向对象这一块儿的语法,就用JavaScript来实现一遍单链表的增删查改吧~不过我说实话...数据结构这种东西和编程语言也没有太大关系。它只是一种思想。所以等下我的代码风格可能还是和以前写C语言的风格差不多。

线性表的基本概念

单链表的操作

这里就再用JavaScript写一遍链表。

   //单向链表类
	function SingleLinkList(){
    
    
		//内部类
		function Node(data){
    
    
			this.data = data;
			this.next = null;
		}
		//头节点
		var head = new Node(null);
		//新增
		this.add = function(data){
    
    
			var temp = new Node(data);
			temp.next = head.next;
			head.next = temp;
		};
		//遍历
		this.print = function(){
    
    
			var temp = head.next;
			while(temp!= null){
    
    
				if(temp.next != null){
    
    
					console.log(temp.data + "->");
				}else{
    
    
					console.log(temp.data);
				}
				temp = temp.next;
			}
		};
		//修改
		this.replace = function(index,newData){
    
    
			var temp = head.next;
			var i = 0;
			//先找到它,找到之后直接改就是
			while(temp != null){
    
    
				if(i == (index - 1)){
    
    
					break;
				}
				i++;
				temp = temp.next;
			}
			var f = new Node(newData);
			temp.next.data = f.data;
		};
		//删除
		this.del = function(index){
    
    
			//找到之后直接删就是。。。
			var temp = head.next;
			var i = 0;
			//先找到它,找到之后直接改就是
			while(temp != null){
    
    
				if(i == (index - 1)){
    
    
					break;
				}
				i++;
				temp = temp.next;
			}
			temp.next = temp.next.next;
		}
	}
	//main函数
	function main(){
    
    
		var list = new SingleLinkList();
		for(var i = 0; i < 10; i++){
    
    
			list.add(i);
		}
		list.replace(3,666);
		list.del(6);
		list.print();
	}
	main();

BOM

window对象

       BOM的核心对象是window,它表示一个浏览器的实例。在浏览器中,window对象有双重角色。它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。这意味着网页中定义的任何一个对象、变量和函数,都以window作为其Global对象,因此也有权限访问parseInt()等方法。

window常用的属性

closed	返回窗口是否已被关闭
document	文档对象
history	客户访问过的URL的信息
location	当前 URL 的信息
navigator	管理浏览器基本信息
opener	返回对创建此窗口的窗口的引用
screen	客户端的屏幕和显示性能的信息
self	返回对当前窗口的引用。等价于 Window 属性
status	设置窗口状态栏的文本
top	返回最顶层的先辈窗口

window常用的函数

alert()	显示带有一段消息和一个确认按钮的警告框。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()	显示可提示用户输入的对话框
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
close()	关闭浏览器窗口
setInterval()	按照指定周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

location对象

       location对象是最有用的BOM对象之一。它提供了与当前窗口中加载的文档信息,还提供了一些导航功能。事实上,localtion还是一个很特别的一个对象。因为它即是window对象的属性,也是document的属性。换句话说,window和document引用的都是同一个location。

       至于属性和方法会用就行,不用去记。需要的时候可以翻API。

      document.write("<h3>location对象：代表当前打开窗口的URL</h3>")
      document.write("<br>主机名:"+location.hostname);//主机名   127.0.0.1
      document.write("<br>端口名:"+location.port); // 端口     8020
      document.write("<br>主机名+端口名:"+location.host);//127.0.0.1:8020
      document.write("<br>当前文档URL:"+location.href);//!!!!!!   完整的URL
      document.write("<br>"+new Date().toLocaleString());

history对象

       history对象保护着用户上网的记录,从窗口被打开的那一刻算起。因为history是window对象的属性。所以每个浏览器窗口,每个标签页乃至每个框架都有自己的history对象与特定的window对象关联。因为安全方面的考虑,开发人员无法得知用户浏览过的URL。不过借由用户访问过的页面列表,同样可以在不知实际URL的情况下实现后退和前进。

	//后退一页
	history.go(-1);
	//前进一页
	history.go(1);
	//跳转最近的某个页面
	history.go("wrox.com");

navigator对象

       这个对象的主要作用就是管理浏览器基本信息

     document.write("<h3>history对象：有关客户访问过的URL的信息</h3>")

     document.write("<h3>navigator对象：管理浏览器基本信息</h3>")
     document.write("<br>浏览器名称:"+navigator.appName);
     document.write("<br>浏览器版本:"+navigator.appVersion);
     document.write("<br>浏览器类型:"+navigator.userAgent);//!!!!!
     document.write("<br>操作系统:"+navigator.platform);
     document.write("<br>是否启用java:"+navigator.javaEnabled());
       var browserType = navigator.userAgent.toLowerCase();
     //输出浏览器名称
     if(browserType.indexOf("msie")>=0){
    
    
             document.write("IE");        
     }else if(browserType.indexOf("chrome")>=0){
    
    
             document.write("chrome");        
     }else if(browserType.indexOf("firefox")>0){
    
    
             //document.write(" 火狐");        
             alert("火狐");
     }else{
    
    
             document.write("other");        
     }

DOM

       DOM是针对HTML和XML文档的一个API,DOM描绘了一个层次化的结点树。允许开发人员添加、移除、修改某个页面的部分。

Node类型

       DOM1级定义了一个Node接口,该接口将由DOM中的所有结点类型实现。这个Node接口在JavaScript中作为Node类型实现的。除了IE以外,在其他所有浏览器中都可以访问这个类型。JavaScript中的所有类型都继承自Node类型,因此所有结点都共享相同的结点属性和方法。

document类型

       JavaScript中通过Document类型表示文档。在浏览器中document对象是HTMLDocument的一个实例(继承自Document类型),表示整个HTML页面。而且document对象是window对象的一个属性。因此可以将其作为全局对象来访问。

Element类型

       除了Docuemnt以外,Element算是最常用的类型了。Element类型用于表现XML或HTML元素,提供了对元素标签名、子节点及特性的访问。

document的基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			function testGetElementById(){
     
     
				//获得名字的id
				var elem = document.getElementById("username");
				//直接打印那条id所在的Input语句
				console.info(elem);
				//
				console.info(elem.type+"  "+elem.id+"  "+elem.name+"  "+elem.value);
				elem.value="修改后的value";
			}
			
			function testGetElementsByName(){
     
     
				//获得所有name是hobby的数组
				var arr = document.getElementsByName("hobby");
				for(var i=0;i<arr.length;i++){
     
     
					console.log(arr[i]);
				}
				
			}
			
			function testGetElementsByTagName(){
     
     
				//获得所有的标签名称,可以是option,也可以是span。
				var arr = document.getElementsByTagName("option");
				for(var i=0;i<arr.length;i++){
     
     
					console.log(arr[i]);
				}
				
			}
			
			function testParentNode(){
     
     
				var elem = document.getElementById("username");
				console.info(elem);
				var formElem = elem.parentNode.parentNode.parentNode.parentNode.parentNode;
				console.info(formElem);
			}
			
			function testChildNodes(){
     
     
				var elem = document.getElementById("professional");
				var arr = elem.childNodes;
				console.info(arr.length);
				for(var i=0;i<arr.length;i++){
     
     
					if(arr[i].nodeType==1){
     
     
						console.log(arr[i]+ "  "+arr[i].value+"  "+arr[i].nodeType);
					}
					
				}
			}
			function testSiblings(){
     
     
				var elem = document.getElementById("p2");
				var elem2 = elem.previousElementSibling;
				console.info(elem2)
			}
			window.onload = testParentNode;
		</script>
	</head>
	<body>
		<form action="" id="form1">
                         用户名：<input  type="text" name="username" id="username" value="请输入姓名" ><br />
                          密码：<input  type="password" name="pwd" id="pwd" /><br />
                          爱好<input  type="checkbox" name="hobby" value="music" checked/>音乐
            <input  type="checkbox" name="hobby" value="sports" />体育
            <input  type="checkbox" name="hobby" value="art" />美术<br />
                           职业：<select name="professional" id="professional">
                   <option value="1">工人</option>
                   <option value="2" id="p2">农民</option>
                   <option value="3" selected="selected">解放军</option>
                   <option value="4">知识分子</option>
           </select><br />           
                                          
           <input  type="button" value="提交" onclick="testGetElementsByTagName()"/>
       </form>

	</body>
</html>

事件

       事件这个东西比较简单,主要作用就是让客户点击HTML按钮的时候触发某个JavaScript的函数...而且刚刚操作DOM的时候也用到了onclick单击事件。当然还有好多其他的事件,也不用去记。要的时候看API或者看手册就可以了~

       可能今天学的东西都不太深入。其实我是打算最后两天的时候再做个总结。