JS笔记

学习网站:
w3cschool-javascript
MDN-javascript

起步

javascript的语法很多都跟C差不多

浏览器兼容问题

不同浏览器在功能的实现上有很多不同,但是可以使用javascript API接口来解决兼容性问题
WIN8支持javascript来创建windows8 app

基本的语法(只讲和C不同的)

书写脚本的位置

脚本内容必须包含在script标签中
HTML中的head标签或body标签中
外部js文件中不能包含script标签
引用外部js文件:在headbody标签中插入<script src=''></script>

变量

变量类型

字符串,数值,布尔,数组,对象,null,Undefined

  1. 当一个变量被定义但却不赋值时,其类型为Undefined,不可引用
  2. 数值可采用科学计数法,如:var x=2e-2;
声明
  1. 一般变量无需指明类型,直接使用var语句,如:var x=0;
  2. 也可以指明变量类型,借助new关键词

    var carname=new String;
    var x=      new Number;
    var y=      new Boolean;
    var cars=   new Array;
    var person= new Object;
    
  3. 也可以不显式声明,直接对一个未声明的变量复制
对于对象
  • 声明方式
    与python的字典类似,但“键”只能使用字符串,且不加引号
    var person={firstname:"Bill", lastname:"Gates", id:5566};
对于数组
  • 声明方式与python的列表类似
    var cars=["Audi","BMW","Volvo"];
  • 也可以借助new_Array()
    var cars=new Array("Audi","BMW","Volvo");
    var cars=new Array();
    cars[0]="Audi";
    cars[1]="BMW";
    cars[2]="Volvo";  
    
变量命名规则
  1. 字母开头
  2. 支持$_符号开头,但不建议
  3. 大小写敏感
重新声明

重新声明并不影响变量的值

函数

定义
function myFunction(var1,var2)
{
    ......
}

运算符

字符串连接使用加号(+)
字符串与数字相加:数字将转化为字符串
全等运算符(===)表示值和类型都相同
其他算术、逻辑运算符与C完全相同

条件语句

与C完全相同

循环语句

包含C的所有循环语句
另外支持for/in循环语句,用于遍历,如:

var person={fname:"John",lname:"Doe",age:25};
for (x in person)
  {
  txt=txt + person[x];
  }

break与continue语句

与C相同

标签

与C相同,可用于语句或代码块
continue(带或不带标签)都只能跳出循环
break(不带标签)只能跳出循环和switch语句
break(带标签)能跳出所有代码块
示例:

cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}

错误

抛出错误

当出现问题时,Javascript引擎会停止,并生成一个错误信息

测试与捕捉

与python的try/except语句类似

try
  {
      //在这里运行代码
  }
catch(err)
  {
      //在这里处理错误
  }

catch括号的err内为一个变量,用于错误对象
并且可以在catch代码块中引用这个变量

抛出异常

throw语句,可以接错误信息
如:throw "empty";

JS HTML DOM

HTML DOM(文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象类型(Document Object Model),该模型被构造为对象的树
HTML DOM树
每一个标签都作为对象的一个元素(就像BeautifulSoup的处理方式)
每个元素都包含“属性”和“文本”两部分内容

查找元素

通过id,document.getElementById()

var x=document.getElementById("intro");
若找到,返回对象;否则返回null
注意大小写

通过标签名,x.getElementsByTagName(“p”)

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

返回的是一个包含多个对象的数组,所以这里的“element”是复数,要注意

通过类名

由于IE不支持,所以最好不要用

改变HTML

改变HTML输出流

可以用document.write()创建动态的内容,但是绝对不要在文档加载后使用

改变HTML内容

直接修改对象的.innerHTML属性的值

改变HTML属性

直接修改对象的.ATTRIBUTE属性的值
这里的ATTRIBUTE为所要修改的“属性名” ,如:x.src="";

改变CSS

直接修改对象的.style.ATTRIBUTE属性的值
这里的ATTRIBUTE为所要修改的“CSS属性名”,如:x.style.color='red';

DOM事件

可以对标签加入事件属性,用来触发javascript语句(一般触发一个函数)
提供的事件属性如下:

  • onload:进入页面时触发
    通常用来检测访问者的浏览器类型、版本,或者处理cookie
  • onunload:离开页面时触发
    通常用来处理cookie
  • onchange:字段变化时触发
    通常配合input使用来进行验证
  • onmouseover:鼠标移动到元素上时触发
  • onmouseout:鼠标移出元素时触发
  • onmousedown:鼠标按住时触发
  • onmouseup:鼠标按住后释放时触发
  • onclick:鼠标点击时触发

DOM 节点

  • 创建元素节点:document.createElement(TAGNAME)
    返回对应标签的对象
  • 创建文本节点:document.createTextNode(CONTENT)
    返回对应文本节点的对象
  • 追加节点:x.appendChild(NODE)
    不返回值
  • 删除节点:x.removeChild(NODE)
    不返回值

示例:

<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p");    //创建<p>元素
var node=document.createTextNode("这是新段落。");    //创建文本节点
para.appendChild(node);        //把文本节点追加到<p>元素上

var element=document.getElementById("div1");    //查找id=div1的标签元素
element.appendChild(para);    //把<p>元素追加到id=div1的元素上
</script>

JavaScript对象

创建对象

直接定义并创建

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

通过函数创建

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
//这里同时也演示了属性的添加

对象构造器

其实就是一个用来构造对象的函数
示例:(this即为对象自身)

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
}
myFather=new person("Bill","Gates",56,"blue");
//注意这里的new运算符,而不是直接调用函数

添加方法

把对象的一个属性绑定到一个内部的一个函数上,这个函数就是该对象的方法
可以通过追加属性添加,也可以在构造器内添加

Javascript时基于prototype的面向对象的语言,并不基于类
也就是说,没有类

数字

所有数值都为8字节,整数精度为15位,小数精度为17位

属性

  • MAX_VALUE
  • MIN_VALUE
  • NEGATIVE_INFINITIVE:负无穷大,溢出时返回该值
  • POSITIVE_INFINITY:正无穷大,溢出时返回该值
  • NaN:指示值,表明这个数据不是数字
    通常用isNaN()函数来判断一个变量是否为数字

这些属性是构造函数Number()本身的属性,而不是某个Number对象的属性
所以只能这么用:big = Number.MAX_VALUE;

方法

  • toString(radix):以radix进制转化为字符串(默认十进制)
  • toLocaleString():以本地的格式转化为字符串(本地格式??)
  • toFixed(num):四舍五入转化为num位小数
  • toExponential(num):四舍五入转化为num位小数(科学计数法)

字符串

属性

这个是对象的属性,而不是构造函数的属性

  • length

方法

  • anchor(ANCHORNAME):创建HTML锚,即将该字符串转换为带属性name="ANCHORNAME"<a>标签
  • bold():用粗体显示
  • fontcolor(COLOR):用指定颜色显示
  • fontsize(SIZE):用指定字体大小显示,SIZE为1-7
  • indexOf(SEARCHVALUE, FROMINDEX):从FROMINDEX位置(可选)开始搜索SEARCHVALUE子字符串,并返回头部索引,否则返回-1
  • italics():用斜体显示
  • link(URL):显示为指向URL的超链接
  • match(SEARCHVALUE | REGEXP):直接搜索子字符串或通过正则表达式匹配,返回数组
  • replace(REGEXP/SUBSTR, REPLACEMENT):替换,返回结果字符串
  • search(REGEXP):indexof函数的正则匹配版本
  • split(SEPARATOR, HOWMANY):以指定的分隔字符串或正则表达式分割字符串,值返回HOWMANY个结果(可选)的数组
  • strike():以删除线显示
  • sub():以下标形式显示
  • toLowerCase():转换为小写
  • toUpperCase():转换为大写

String对象都是不可变的,因此其方法都不做原位操作

日期

定义,new Date()

var myDate=new Date();
自动使用当前日期时间作为初始值

方法

设置日期:myDate.setFullYear(2008,7,9);
获取时间(从1970/1/1至今的毫秒数):myDate.getTime();
转换为字符串:myDate.toUTCString()
获取本周为第几天(返回一个数字,注意每周第一天是周日):myDate.getDay()

日期比较

两个Date对象可以直接用比较运算符进行比较

算数

Math对象

属性

  • Math.E
  • Math.PI

方法

  • Math.round(NUM):四舍五入
  • Math.random():产生0-1的随机数
  • Math.floor(NUM):向下取整

示例:(产生0-10的随机数)
Math.floor( Math.random() * 11 )

正则表达式

定义

类似python的complie
var patt1=new RegExp(PATTERN),PATTERN为匹配模式
可添加第二个参数为"g",表明(global)

方法

  • test(STRING):检查是否匹配,返回布尔值true和false
  • exec(SRING):检索匹配项并返回第一个匹配项,否则返回null
    如果定义时指定了参数"g",那么再次执行exec()可以进行下一项的匹配
  • compile(PATTERN):修改匹配模式,也可以添加修改删除第二个参数

JS Window

浏览器对象模型(Browser Object Model, BOM)尚无正式标准,但现代浏览器几乎都已经实现了JS交互性方面的相同方法和属性

window对象

window对象表示浏览器窗口
任何JS全局对象、函数以及变量都作为window对象的成员
全局变量作为window对象的属性
全局函数作为window对象的方法
如:
document.getElementById("header");
实际上是
window.document.getElementById("header");
window一般省略

window尺寸

尺寸即浏览器的视口部分,不包括工具栏和滚动条
有以下三种方法:

  • 对于IE、Chrome、Firefox、Opera、Safari
    window.innerHeight
    window.innerWidth
  • 对于IE5、6、7、8
    document.documentElement.clientHeight
    document.documentElement.clientWidth

    document.body.clientHeight
    document.body.clientWidth

通常直接使用以下方法来兼容所有浏览器:

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;    

window方法

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

window.screen对象

包含有关用户屏幕的信息,window前缀可以省略

属性

screen.availWidth:可用宽度
screen.availHeight:可用高度

window.location对象

用于获得当前页面的信息如URL,也可以把浏览器重定向到新的页面,window前缀可省略

属性

location.hostname:web主机域名
location.port:web主机端口
location.protocol:所用的web协议(http或https)
location.href:当前页面的完整的URL
location.pathname:当前页面路径和文件名

方法

location.assign(URL):加载新文档

window.history对象

包含浏览器的历史信息,window前缀可以省略
为了保护用户隐私,该对象只允许访问前一个页面和下一个页面(后退和前进)

方法

history.back():加载历史列表的前一个URL(后退)
history.forward():加载历史列表的后一个URL(前进)

window.navigator对象

不包含有关访问者浏览器的信息,window前缀可以省略

属性

appCodeNameappNameappVersioncookieEnabledplatformuserAgentsystemLanguage

注意

该对象信息具有误导性,一方面数据可以人为伪造;另一方面,浏览器无法报告晚于浏览器发布的新操作系统

正确的浏览器检测方法

尝试访问不同浏览器的特殊属性,如Opera浏览器的opera属性
if(window.opera){.....}

PopupAlert消息框

警告框

alert(MESSAGE):警告弹框,需要点击确定才能继续操作
如果信息内容需要换行,使用换行符\n

确认框

confirm(MESSAGE):确认弹框,需要用户点击确定或取消才能继续操作
确认返回true,取消返回false

提示框

prompt(MESSAGE, DEFAULT_VALUE):提示弹框,要求用户输入值(默认值为参数DEFAULT_VALUE),点击确定或取消
若点击确定,返回输入值;若点击取消,返回null

Timing计时

  • 若干毫秒后执行指定JS语句
    var t=setTimeout("JS语句", 毫秒);
    返回某个值,可用于取消setTimeout
    可以通过不断调用自己来实现无限循环
  • 取消setTimeout
    clearTimeout(t);
    t为setTimeout的返回值

document.cookie作为一个字符串去玩就可以