JS笔记

發表於 2015-05-10

学习网站：
w3cschool-javascript
MDN-javascript

起步

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

浏览器兼容问题

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

基本的语法（只讲和C不同的）

书写脚本的位置

脚本内容必须包含在script标签中
HTML中的head标签或body标签中
外部js文件中不能包含script标签
引用外部js文件：在head或body标签中插入<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前缀可以省略

属性

appCodeName、appName、appVersion、cookieEnabled、platform、userAgent、systemLanguage

注意

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

正确的浏览器检测方法

尝试访问不同浏览器的特殊属性，如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作为一个字符串去玩就可以

#前端
简单的正则表达式解析器
C语言图形化编程（WIN）