JavaScript学习笔记

创建对象并添加属性及方法:

function eat(){
		alert("eat");
	}
	
	var a = new Object();
	a.name = "coco";
	a.age = 18;
	a.eat = eat;
	a.eat();	
	
//创建对象的模板
	function person(firstname,lastname,age){
		this.firstname = firstname;
		this.lastname = lastname;
		this.age = age;
	}
	
	var person1 = new person("li","zhun",18);
	alert("firstname = " + person1.firstname + ";lastname = " + person1.lastname);

JavaScript的一对花括号{}就可以定义一个对象,这样的写法实际上和调用Object的构造函数一样

var obj={};
var obj2=new Object();

var obj={};
obj.a=0;
obj.fn=function(){
    alert(this);
}

可以在定义完对象后通过”.”为其添加属性和方法,也可以使用字面量赋值方法在定义对象的时候为其添加属性和方法,这样创建的对象,其方法和属性可以直接使用对象引用,类似于类的静态变量和静态函数,这样创建对象有一个明显缺陷——在定义大量对象的时候很费力,要一遍遍的写几乎是重复的代码。

prototype

函数都会有一个prototype属性,可以为其添加函数供实例访问。

每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法。

function Person(name){
                this.name=name;
            }
            
            Person.prototype.share=[];
            
            Person.prototype.printName=function(){
                alert(this.name);
            }
            
            var person1=new Person('Byron');
            var person2=new Person('Frank');
            
            console.log(person1.printName==person2.printName);//true

Navigator对象

JavaScript包含一个名为Navigator的对象,里面包含了有关访问者浏览器的信息,包括浏览器类型、版本等等。

var browser = navigator.appName;
	var b = navigator.appVersion;
	var version = parseFloat(b);
	document.write("browser name:" + browser);
	document.write("<br>");
	document.write("browser version:" + version);

onSubmit事件

用于在提交表单之前验证所有的表单域,返回值是true或false,true则提交,反之取消提交。

window.open()

用于打开一个新的浏览器窗口或查找一个已命名的窗口

window.open("a.html","","toolbar=no,location = no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,top=30,left=30,width=300,height=350");

screem对象

包含有关客户端显示屏幕的信息

history对象

history对象包含用户(在浏览器窗口中)访问过的URL,是window对象的一部分,可通过window.history获得

•history.back()-与在浏览器点击后退按钮相同,history.back()方法加载历史列表中的前一个URL。

•history.forward()-与在浏览器中点击按钮向前相同,historyforward()方法加载历史列表中的下一个URL。

•history.go(-2)与单击两次后退按钮执行的操作一样

location对象

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

一些例子:

•location.hostname设置或返回web主机的域名

•location.pathname设置或返回当前页面的路径和文件名

•location.port设置或返回web主机的端口(80或443)

•location.protocol设置或返回所使用的web协议(http://或https://)

JS数组(Array)

有两种向数组赋值的方法(你可以添加任意多的值,就像你可以定义你需要的任意多的变量一样)。

1:

var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
//也可以使用一个整数自变量来控制数组的容量:
var mycars=new Array(3)
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"

2:

var mycars=new Array("Saab","Volvo","BMW")

注意:如果你需要在数组内指定数值或者逻辑值,那么变量类型应该是数值变量或者布尔变量,而不是字符变量。

Javascriptcookie

一.简单的存取操作

在使用JavaScript存取cookie时,必须要使用Document对象的cookie属性;一行代码介绍如何创建和修改一个cookie:

document.cookie='username=Darren'

以上代码中'username'表示cookie名称,'Darren'表示这个名称对应的值。假设cookie名称并不存在,那么就是创建一个新的cookie;如果存在就是修改了这个cookie名称对应的值。如果要多次创建cookie,重复使用这个方法即可。

二.cookie的读取操作

要精确的对cookie进行读取其实很简单,就是对字符串进行操作。从w3school上copy这段代码来做分析:

function getCookie(c_name){
    if (document.cookie.length>0){  //先查询cookie是否为空,为空就return ""
      c_start=document.cookie.indexOf(c_name + "=")  //通过String对象的indexOf()来检查这个cookie是否存在,不存在就为 -1  
      if (c_start!=-1){ 
        c_start=c_start + c_name.length+1  //最后这个+1其实就是表示"="号啦,这样就获取到了cookie值的开始位置
        c_end=document.cookie.indexOf(";",c_start)  //其实我刚看见indexOf()第二个参数的时候猛然有点晕,后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。因为需要考虑是否是最后一项,所以通过";"号是否存在来判断
        if (c_end==-1) c_end=document.cookie.length  
        return unescape(document.cookie.substring(c_start,c_end))  //通过substring()得到了值。想了解unescape()得先知道escape()是做什么的,都是很重要的基础,想了解的可以搜索下,在文章结尾处也会进行讲解cookie编码细节
      } 
    }
    return ""
  }  

三.设置cookie的有效期

文章中常常出现的cookie的生命周期也就是有效期和失效期,即cookie的存在时间。在默认的情况下,cookie会在浏览器关闭的时候自动清除,但是我们可以通过expires来设置cookie的有效期。语法如下:

  
document.cookie = "name=value;expires=date"
  //上面代码中的date值为GMT(格林威治时间)格式的日期型字符串,生成方式如下:
  var _date = new Date();
  _date.setDate(_date.getDate()+30);
  _date.toGMTString();

四.编码问题

在输入cookie信息时不能包含空格,分号,逗号等特殊符号,而在一般情况下,cookie信息的存储都是采用未编码的方式。所以,在设置cookie信息以前要先使用escape()函数将cookie值信息进行编码,在获取到cookie值得时候再使用unescape()函数把值进行转换回来。如设置cookie时:

document.cookie=name+"="+escape(value)

再看看基础用法时提到过的getCookie()内的一句:

returnunescape(document.cookie.substring(c_start,c_end))

这样就不用担心因为在cookie值中出现了特殊符号而导致cookie信息出错了。

escape()

对字符串进行编码。

以下是JSP脚本中对cookie的写入与读取:

在welcome.jsp页面中:

//当进入welcome页面后,将你访问的频道信息记录到cookie中,用于newsAdd2.jsp页面进行当前所在频道的判断

  
if(null != cnum){
       Cookie cookie_channel = new Cookie("channelJudge", String.valueOf(cnum));
 
       cookie_channel.setPath("/");
       cookie_channel.setMaxAge(1*24*60*60);
       response.addCookie(cookie_channel);
    }
 
//在newsAdd2.jsp页面中:
Cookie cookies[]= request.getCookies();
if (null != cookies) {
    for (int i = 0; i < cookies.length; i++) {
       Cookie cookie = cookies[i];
       if (cookie.getName().equals(“channelJudge”)) {
           String cookieValue = cookie.getValue();
           //……………………
}
}
}

以下是JS中对cookie的写入与读取:

文件1,往磁盘上写入cookie:

<body>
   
    <input type="button" value="cookie" onclick="test();"/>
   
</body>
 
<script type="text/javascript">
    function test() {
       var today = new Date();
       var expireDay = new Date();
       var msPerMonth = 24 * 60 * 60 * 1000 * 1;
       expireDay.setTime(today.getTime() + msPerMonth);
       document.cookie = "cookieName=zhang;expires=" + expireDay.toGMTString();
       //document.write("cookie已经写到硬盘上了");
       //document.write("内容是:" + document.cookie);
       //document.wirte("有效日期是:" + expireDay.toGMTString());
    }
</script>

文件2,根据cookie名往磁盘上读取该cookie值:

 
<body>
   
    <input type="button" value="get cookie value" onclick="getCookie('cookieName');"/>
   
  </body>
 
  <script type="text/javascript">
   
    function getCookie(name)
    {
        var bikky = document.cookie;
        name += "=";
       var i = 0;
       while (i < bikky.length)
       {
            var offset = i + name.length;
            if (bikky.substring(i, offset) == name)
            {
                 var endstr = bikky.indexOf(";", offset);
                 if (endstr == -1) endstr = bikky.length;
       
             //alert(bikky.substring(offset, endstr));
                 return (bikky.substring(offset, endstr)); //返回的是string类型
            }
            i = bikky.indexOf(" ", i) + 1;
            if (i == 0) break;
       }
        return null;
}
  </script>

Js正则表达式

javascript中正则匹配有3个方法,match,exec,test。这些方法都跟字符串和RegExp对象有关,但使用场景不一样,容易混淆。match是字符串的一个方法,接收一个RegExp对象做为参数,其他的是RegExp对象的方法,接收一个字符串参数。

var str = 'abcdef12ab34cd56ef';
var patt = new RegExp('ab'); //主意是非全局匹配
 
var ret_test = patt.test(str);
console.log(ret_test);
var ret_match = str.match(patt);
console.log(ret_match);
var ret_exec = patt.exec(str);
console.log(ret_exec);


var temp = document.getElementById("text1");
//对电子邮件的验证
 var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
 if(!myreg.test(temp.value))
   {
     alert('提示\n\n请输入有效的E_mail!');
     myreg.focus();
     return false;
   }

1./^$/这个是个通用的格式。

^匹配输入字符串的开始位置;$匹配输入字符串的结束位置

2.里面输入需要实现的功能。

*匹配前面的子表达式零次或多次;

+匹配前面的子表达式一次或多次;

?匹配前面的子表达式零次或一次;

\d匹配一个数字字符,等价于[0-9]

window.open、window.showModalDialog和window.showModelessDialog的区别

open方法就是打开一个页面,可以说同用url链接打开一个页面一样,不推荐使用,因为很多浏览器会拦截。

showModalDialog和showModelessDialog数据传递技巧

1)父窗体向打开的窗体传递数据一般使用url参数传递

2)打开的窗体,即子窗体向父窗体进行数据传递有两种方法

(1)第一种称为“函数法”,同调用一个函数并返回值一样

可以通过在被调用的页面(子页面)使用window.returnValue来设置返回值,返回值可以是任何值或对象,调用页面(父页面)直接获取返回值即可。

//父窗体js,直接通过函数获取返回值

Html代码

function openModalWindow(){  
	          var returnValue = window.showModalDialog("sonPage.aspx");  
	          alert(returnValue);  
	      }

//子窗体js,通过window.returnvalue来设置返回值

Html代码

function setReturnFatherPageValue(){  
	       window.returnValue = true;  
	    }

(2)第二种称为“引用法”,通过传递父窗体的引用,我们可以操作父窗体上的所有东西

要使用引用法就必须在打开子窗体时将父窗体作为一个参数传递给子窗体,而在子窗体可以通过window.dialogArguments获取到传递过来的父窗体的引用。

//父窗体js,将整个父window作为参数传递给子窗体

Html代码

function openModalWindow(){  
	          window.showModalDialog("sonPage.aspx", window);  
	      }  


      //子窗体js,通过window.dialogArguments可以访问父window中的所有元素,它在这里代表了父window对象

Html代码

function openModalWindow(){  
	          var txt =window.dialogArguments.document.getElementByIdx("txt");  
	          var lab =window.dialogArguments.document.getElementByIdx("lab");  
	          txt.value = "sonPageChangedValue";  
	          lab.value = "isTheSame";  
	      }

showModalDialog和showModelessDialog不使用缓存

showModalDialog和showModelessDialog在第一次打开页面时会默认缓存该页面,如果再次打开相同URL的页面的话,他们会直接调用缓存中的页面,而不是从服务器返回,要不使用缓存可进行如下配置:

<title>被打开的页面</title>

<metahttp-equiv="pragram"content="no-cache">//禁止浏览器从本地缓存中调阅页面,网页不保存在缓存中,每次访问都刷新页面。

JSON字符串转换为JSON对象

JSON字符串:

varstr1='{"name":"cxh","sex":"man"}';

JSON对象:

varstr2={"name":"cxh","sex":"man"};

一、JSON字符串转换为JSON对象

要运用上面的str1,必须运用下面的要领先转化为JSON对象:

//由JSON字符串转换为JSON对象

varobj=eval('('+str+')');

或者

varobj=str.parseJSON();//由JSON字符串转换为JSON对象

或者

varobj=JSON.parse(str);//由JSON字符串转换为JSON对象

然后,就可以这样读取:

Alert(obj.name);

Alert(obj.sex);

特别留心:如果obj本来就是一个JSON对象,那么运用eval()函数转换后(哪怕是多次转换)还是JSON对象,但是运用parseJSON()函数处理后会有疑问(抛出语法异常)。

JSON对象转换为JSON字符串

二、可以运用toJSONString()或者全局要领JSON.stringify()将JSON对象转化为JSON字符串。

例如:

varlast=obj.toJSONString();//将JSON对象转化为JSON字符

或者

varlast=JSON.stringify(obj);//将JSON对象转化为JSON字符

alert(last);

留心:

上面的多个要领中,除了eval()函数是js自带的之外,其他的多个要领都来自json.js包。新版本的JSON修改了API,将JSON.stringify()和JSON.parse()两个要领都注入到了Javascript的内建对象里面,前者变成了Object.toJSONString(),而后者变成了String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要领,则说明您的json包版本太低。

闭包

由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。

所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包就是一个函数,捕获作用域内的外部绑定。这些绑定是为之后使用而被绑定,即使作用域已经销毁。

相关推荐