学习javascript笔记

javascript 学习笔记

 

特殊数据类型是： * Undefined

     var a; //声明一个变量,但没有对其赋值

     alert(a); //但它仍然有值的,它的值为undefined

     alert(b); //但注意,输出一个未定义的变量将出现错误,而不是输出undefined

NaN是一个特殊的值,含义是 "Not A Number" -不是一个数字,当将其它值转换成数字失败时会得到这个值

     var str = "some string here!" ;

     var num = 123;

     alert(str*num); //将输出NaN,因为乘法运算符只能针对数字,所以进行运算时计算机会将字段串转换成数字

Bool类型转换

     var str = "some string" ;

     alert(!!str); //true,因为非运算符是针对布尔值进行运算的,所以将其它类型转换成布尔值只须将其连续非两次

     str = "" ;

     alert(!!str); //输出false,只有空字符串转换成布尔值时会是false,非空字符串转换成布尔值都会返回true

     var num =0;

     alert(!!num); //false

     num=-123.345;

     alert(!!num); //true,除0以外的任何数字转换成布尔值都会是true

     //还有一个非常重要的是,空字符串转换成数字将会是0

     alert( "" *1); //输出0

获取变量类型 typeof 运算符

使用window.prompt可以弹出包含输入框的窗口，用户输入的内容将是此函数的返回值

内置对象Math与Date

Date对象像一个时光机

     var d = new Date(); //Date对象需要创建

     Date 对象能够表示的日期范围约等于 1970 年 1 月 1 日前后各 285,616 年。

     alert(d); //直接输出这个对象,将会得到一个表示时间的字符串

     这个对象有一些方法,可以用来获取时间的各个部分

     alert(d.getYear()); //获取年,//个人测试显示有点问题，待验证

     alert(d.getFullYear()); //始终返回年份的4位数表达方式

     alert(d.getMonth()); //返回月份,注意,月份是从0开始计数的,所以1月时将返回0

     alert(d.getDate()); //返回今天几号

     alert(d.getDay()); //返回今天星期几,星期天是0,星期1是1....

     alert(d.getHours()); //返回小时

     alert(d.getMinutes()); //返回分钟

     alert(d.getSeconds()); //返回秒

     alert(d.getMilliSeconds()); //返回毫秒//个人测试不支持1次

     alert(d.getTime());

     返回一个整数值,这个整数代表了从1970年1月1日开始计算到Date对象中的时间之间的毫秒数日期的范围大约是1970年1月1日午夜的前后各285616年,负数代表1970年之前的日期我们不但能从中获取时间值,还可以设置时间值与那些getXXX方法对应的设置时间的函数仅仅是将get改成set

     var d = new Date();

     d.setFullYear(1690); //设置年份为1900

     alert(d.getFullYear()); //返回1900

     alert(d.getTime()); //输出的值是负的,这验证了上面所说的getTime()返回值

     setXXX这样的方法有个最大的好处就是如果我们设置了错误的值,脚本并不会出错,但日期会自动更正

     记住,月份是从0开始计数的

数组与对象

     Array和Date一样,也是一个内置对象,需要使用 new 运算符创建

     var arr = new Array();

     JavaScript中数组长度会自动增长,并且length属性会自动更新

     arr = new Array(6); //将得不到预期效果,因为这是在声明一个长度为6的空数组

     还可以使用数组字面量的方式

     arr = []; //一个空中括号几乎是等价的但更灵活和简便

     数组中可以混合存放字符串,数值,布尔值...,几乎所以类型的值,包括数组

     arr = new Array(1,0, true , "some string" , new Array( "a" ,3)); //第五个元素放的是一个数组

     alert(arr[4]); //输出"a",3

     alert(arr[4][0]); //输出"a"

     向数组中添加,删除元素(push, delete )

     arr.push(a); //push方法将元素添加到数组未尾

     arr.push( "a" , "b" ); //可以一次添加多个元素

     利用数组长度自动增长的特性

     arr[arr.length]= "new element" ;

     使用 delete 与下面的语句效果一样

     arr = [ "#" , "$" , "%" ];

     alert(arr);

     arr[2]=undefined; //undefined是一个值

     alert(arr);

     join方法,返回数组中的所有元素以指的分隔符间隔的字符串

     数组和对象是相通的

     var arr = new Array();

     var obj = new Object();

     alert( typeof arr); //object

     alert( typeof obj); //object

     数组可以使用字符串下标的

     var person = new Array();

     person[ "age" ] = 18; //注意,中括号里的下标是一个字符串,所以需要使用引号

     person[ "weight" ] = "123kg" ;

     person[ "height" ] = "170cm" ;

     person[ "arm" ] = 2;

     person[ "leg" ] = 2;

     而对象也可以使用类似语法访问它的属性

     var obj = new Object();

     obj.property = "some data" ;

     alert(obj[ "property" ]); //"some data"

     //当然也可以使用数字下标

     obj[1]=123;

     alert(obj[1]); //123

     alert(obj.property); //"some data"

     alert(obj.length); //但与数组不同的是,它没有length属性,输出undefined

     与数组字面量相对应的,也有对象字面量的声明方式

     var obj = {

         a:123, //这里的a,b等同样是对象的属性名

         b:456 //注意,最后没有逗号

     };

     还可以这样写

     obj = {

         "a" :345,  //虽然如果用引号引起来就可以使用空格等不符合变量命名规范的字符,但强烈不推荐

         "b" :333 

     };

     for .. in ...循环出现了 (对于研究对象, for in 循环太有用了)

String对象以及一些用于字符串的方法和属性

     str = new String( "some string here" );

     //表面上看,这和直接创建的字符串是一样的效果

     str = "some string here" ;

     但由于使用 new String();所以创建出来的是对象

     var str = new String();

     alert( typeof str); //object

     //因为是对象,所以自然有很多属性和方法

     字符串本身也存这样的方法

     有很多用于处理字符串的方法以及一些属性

     •length 属性,返回字符串的长度

     •indexOf 方法,返回字符串内第一次出现子字符串的字符位置

     •lastIndexOf 方法,返回字符串中子字符串最后出现的位置

     •charCodeAt 方法,返回一个整数，代表指定位置上字符的 Unicode 编码

     •fromCharCode 方法,从一些 Unicode 字符值中返回一个字符串

     •replace 方法,进行文字替换,返回替换后的字符串的复制

     •substr 方法,返回一个从指定位置开始的指定长度的子字符串

     •substring 方法,返回位于 String 对象中指定位置的子字符串

     •toLowerCase 方法,返回一个字符串，该字符串中的字母被转换为小写字母

     •toUpperCase 方法,返回一个字符串，该字符串中的所有字母都被转化为大写字母

     •split 方法,把字符串分割为字符串数组。

Script标签与访问HTML页面

     this 对象是一个一直存在的一个对象,它不能被声明( this 是关键字).这里, this 就是指 "这个" ,指这个标签!对于HTML中的元素,JavaScript会自动将其解析成一个对象.

     

     推荐将script放在head部分!那么,这就要用到另一个事件onload

      window.onload = initAll; //将所有代码写在一个函数之中,然后注册到window对象的onload事件属性上

      //window表示窗口对象,只要窗口打开,它就始终存在,当页面加载完成后,会触发window对象上的onload事件

      function initAll() {

         var img = document.getElementById( "myImg" );

         img.onclick = myFn;

         function myFn() {

             alert( "图象加载完成了!" );

         }

     }

     这样,代码就不出错了,不管将脚本放在什么位置,initAll只有当页面加载完成后才会被执行

访问HTML页面:HTML DOM

     HTML DOM将整个页面当成一个document对象,HTML里的标签都要通过document对象来访问.而文档中的每个标签,

     又会转换成一个对象

     <p class= "demo" title= "第一个段落:DOM树" id= "p1" >我们用一个p标签来演示</p>

     它又会被转换成下面这个对象

     {

         tagName: "p" ,

         className: "demo" ,

         title: "第一个段落:DOM树" ,

         id: "p1" ,

         innerHTML: "我们用一个p标签来演示"

     }

     你也许会奇怪,为什么标签的class属性会变成对象的className属性而不是class.class是JavaScript保留字!!!tagName表示它的标签名,而innerHTML表示它里面的HTML代码

 

     浏览将HTML标签转换成这样的对象后,在JavaScript中访问该标签的属性或里面的内容就简单多了,但问题是如何访问到这个对象!!

     *首先要给该标签加个ID,然后使用document.getElementById方法就能够访问到它了注意,要将所要访问HTML页面的代码都放在window的onload事件处理上!

     window.onload = initAll;

     function initAll() {

         var p = document.getElementById( "p1" );

         alert(p.className);

         alert(p.tagName);

         alert(p.title);

         alert(p.id);

         alert(p.innerHTML);

     }

访问HTML页面就这么简单!获取一个元素之后,不但可以读取它的属性值,还可以设置它的属性值!

 

利用这些,我们已经能做出一些激动人心的事了!

     //一些CSS

     .over {

         color:red;

         background:blue;

         font-size:larger;

     }

     .out {

         color:black;

         background:white;

         font-size:smaller;

     }

     .click {

         color:yellow;

         background:yellow;

         font-size:12px;

     }

     //HTML代码

     <p id= "p1" class= "out" >一大行文字,它们都是普通的文字!</p>

     //JavaScript代码

     window.onload = initAll;

     function initAll() {

         var p = document.getElementById( "p1" );

         p.onclick=clickFn; //这里的事件注册方式除了比行内注册方式少了括号,其它的是一样的

         p.onmouseover = overFn;

         p.onmouseout = outFn;

     }

     function clickFn() {

         this .className= "click" ; //这里,this也是可用的

         //注意是className,而不是class

     }

     function overFn() {

         this .className= "over" ;

     }

     function outFn() {

         this .className= "out" ;

     }

     获取页面元素不止这一种方法.document.getElementsByTagName方法也能获取页面元素,顾名思意,它是通过HTML的标签来获取元素的,而不是ID. 因为一张HTML页面,一个ID名称是唯一的,而标签名则大多数是相同的,所以,getElementsByTagName方法只有一个参数,即一个字符串形式的标签名(tagName),而返回值则是一个类似数组的HTML元素列表

     window.onload = initAll; //仍然要写在window.onload事件处理函数中

     function initAll() {

         var pList = document.getElementsByTagName( "P" );

         //为什么要用大写的P?其实用小写p也可以,不区分大小写,但由于对象的tagName总报告的是大写的

         alert(pList.length); //与数组相似,length报告有多少个元素,页面上有多少个p标签,就报告多少

         alert(pList[0].innerHTML); //这样来访问第一个p元素

     }

     另外,对于document.getElementsByTagName方法,还可以传一个 "*" 号作为参数,以获取页面的所有元素,类似于CSS里面的通配符

     window.onload = initAll;

     function initAll() {

     var allThings = document.body.getElementsByTagName( "*" );

     //可在任何DOM元素上调用getElementsByTagName方法,在body上调用此方法时,body外的标签不会获取到

     alert(allThings.length); //页面上有多少个标签,就报告多少(包含DOCTYPE)

     alert(allThings[3].innerHTML); //这样来访问第四个元素

     }

javascript:伪协议

     伪协议不同于因特网上所真实存在的如http: //,https://,ftp://,而是为关联应用程序而使用的.如:tencent://(关联QQ),data:(用base64编码来在浏览器端输出二进制文件),还有就是javascript:

     javascript:伪协议有个问题,它会将执行结果返回给当然的页面

     <a href= "javascript:window.prompt('输入内容将替换当前页面!','');" >A</a>

     解决方法很简单

     <a href= "javascript:window.prompt('输入内容将替换当前页面!','');undefined;" >A</a>

     //将undefined加到最后

     尽管javascript伪协议提供了一定的灵活性,但在页面中尽量不要使用!而对于调试JavaScript,javascript伪协议则显得十分有用!