正则表达式

RegExp 是正则表达式的缩写。

定义 RegExp

RegExp 对象用于存储检索模式。

通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象，其模式是 "e"：

var patt1=new RegExp("e");

当您使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 "e"。

RegExp 对象有 3 个方法：

test()

• test() 方法检索字符串中的指定值。返回值是 true 或 false。

exec()

• exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

compile()

• compile() 方法用于改变 RegExp。compile() 既可以改变检索模式，也可以添加或删除第二个参数。

修饰符

html5新增的功能 ：画布

什么是Canvas

<canvas>是 HTML5 新增的元素，可使用JavaScript脚本来绘制图形。

<canvas是一个矩形区域，您可以控制其每一像素。

引入Canvas

<canvas id="canvas" width="300" height="300"></canvas>

width 和 height 属性

当没有设置宽度和高度的时候，canvas 会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。

*注意*: 如果你绘制出来的图像是扭曲的, 尝试在<canvas>的属性中明确规定宽和高，而不是使用CSS。

兼容性

某些较老的浏览器（尤其是IE9之前的IE浏览器）或者文本浏览器不支持HTML元素"canvas"，在这些浏览器上会把<canvas>标签内部的内容显示出来，因此我们可以在这些不支持<canvas>的浏览器上提供一些替代内容，而支持<canvas>的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。

<canvas id="myCanvas" width="150" height="150">
  如果您的浏览器不支持Canvas，那么您将看到本行文字
</canvas>

  标签不可省

与 <img> 元素不同，<canvas> 元素需要结束标签(</canvas>).如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。

获取绘图上下文(the rendering context)

canvas起初是空白的.如果想要对canvas进行一些操作，那么则需要获取canvas的绘图上下文对象。<canvas> 元素有一个做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式.对于2D图像而言，这个格式参数是"2d"。

var canvas = document.getElementById(‘canvas‘);
var ctx = canvas.getContext(‘2d‘);

如果在不支持<canvas>的浏览器中运行了上述代码，会抛出一个错误.所以在我们获取绘图上下文对象之前，应该先检查一下浏览器对该特性的支持情况。

var canvas = document.getElementById(‘tutorial‘);

if (canvas.getContext){
  var ctx = canvas.getContext(‘2d‘);
  // drawing code here
} else {
  // canvas-unsupported code here
}

基本绘图操作

和Windows操作系统自带的画图程序一样，Canvas的两种基本绘图操作是填充和描边。填充，就是用指定的样式（颜色、渐变或图像）填充图形；描边，就是只在图形的边缘画线。填充和描边的样式分别取决于两个属性：fillStyle和strokeStyle。这两个属性的值可以是字符串、渐变对象或模式对象，而且它们的默认值都是"#000000"。如果为它们指定表示颜色的字符串值，可以使用 CSS 中指定颜色值的任何格式，包括颜色名、十六进制码、 rgb、rgba、hsl 或 hsla。

绘制矩形

矩形是唯一一种可以直接在 2D 上下文中绘制的形状.与矩形有关的方法包括 fillRect()、 strokeRect() 和 clearRect()。这三个方法都能接收 4 个参数：矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。

填充矩形

fillRect(x, y, width, height)

绘制矩形描边

strokeRect(x, y, width, height)

清除矩形

该方法的功能类似于Windows系统中画图程序的橡皮擦，会将指定矩形矩形区域中的所有内容全部清除。

clearRect(x, y, width, height)

绘制路径

如果要绘制矩形以外的形状，则需要自定义绘制路径。2D 绘制上下文支持很多在画布上绘制路径的方法。要绘制路径，首先必须调用 beginPath()方法，表示要开始绘制新路径。然后，再通过调用下列方法来实际地绘制路径。

arc(x, y, radius, startAngle, endAngle, counterclockwise)

以(x,y)为圆心绘 制一条弧线，弧线半径为 radius，起始和结束角度（用弧度表示）分别为 startAngle 和 endAngle。最后一个参数表示startAngle 和 endAngle 是否按逆时针方向计算，值为 false 表示按顺时针方向计算。

arcTo(x1, y1, x2, y2, radius)

从上一点开始绘制一条弧线，到(x2,y2)为止，并且以 给定的半径 radius 穿过(x1,y1)。

bezierCurveTo(c1x, c1y, c2x, c2y, x, y)

从上一点开始绘制一条三次方贝塞尔曲线，到(x,y)为止，并且以(c1x,c1y)和(c2x,c2y)为控制点。

lineTo(x, y)

从上一点开始绘制一条直线，到(x,y)为止。

moveTo(x, y)

将绘图游标移动到(x,y)，不画线。

quadraticCurveTo(cx, cy, x, y)

从上一点开始绘制一条二次贝塞尔曲线，到(x,y)为止，并且以(cx,cy)作为控制点。

rect(x, y, width, height)

从点(x,y)开始绘制一个矩形，宽度和高度分别由 width 和 height 指定。这个方法绘制的是矩形路径，而不是 strokeRect() 和fillRect() 所绘制的独立的形状。

创建了路径后，接下来有几种可能的选择。如果想绘制一条连接到路径起点的线条，可以调用 closePath()。如果路径已经完成，你想用fillStyle 填充它，可以调用 fill() 方法。另外，还可 以调用 stroke() 方法对路径描边，描边使用的是 strokeStyle。最后还可以调用clip()，这个方法可以在路径上创建一个剪切区域。

检测注册页面

(function() {
  var form = document.getElementById(‘form‘);
  var usernameInput = document.getElementById(‘username‘);
  var pwdInput = document.getElementById(‘pwd‘);
  var confirmPwdInput = document.getElementById(‘confirmPwd‘);
  var birthInput = document.getElementById(‘birth‘);
  var usernameInfo = document.getElementById(‘usernameInfo‘);
  var pwdInfo = document.getElementById(‘pwdInfo‘);
  var confirmPwdInfo = document.getElementById(‘confirmPwdInfo‘);
  var birthInfo = document.getElementById(‘birthInfo‘);

  // 检测用户名
  function checkUsername() {
    var username = usernameInput.value;
    if(username.length < 4) {
      usernameInfo.innerHTML = ‘用户名长度不能小于4位‘;
      return false;
    } else {
      usernameInfo.innerHTML = ‘‘;
      return true;
    }
  }

  // 检测密码
  function checkPwd() {
    var pwd = pwdInput.value;
    if(pwd.length < 6) {
      pwdInfo.innerHTML = ‘密码的长度不能小于6位‘;
      return false;
    } else {
      pwdInfo.innerHTML = ‘‘;
      return true;
    }
  }

  // 检车确认密码
  function checkConfirmPwd() {
    var pwd = pwdInput.value;
    var confirmPwd = confirmPwdInput.value;
    if(pwd !== confirmPwd) {
      confirmPwdInfo.innerHTML = ‘两次输入的密码不一致‘;
      return false;
    } else {
      confirmPwdInfo.innerHTML = ‘‘;
      return true;
    }
  }

  // 检测出生年月
  function checkBirth() {
    var birth = birthInput.value;

    var reg = /^(19|20)\d\d-\d\d-\d\d$/g;

    if(!reg.test(birth)) {
      birthInfo.innerHTML = ‘格式不正确‘;
      return false;
    } else {
      birthInfo.innerHTML = ‘‘;
      return true;
    }
  }

  usernameInput.addEventListener(‘blur‘, checkUsername, false);
  pwdInput.addEventListener(‘blur‘, checkPwd, false);
  confirmPwdInput.addEventListener(‘blur‘, checkConfirmPwd, false);
  birthInput.addEventListener(‘blur‘, checkBirth, false);

  form.addEventListener(‘submit‘, function(event) {
    if(!(checkUsername() && checkPwd() && checkConfirmPwd() && checkBirth())) {
      event.preventDefault();
    }
  }, false);
})();

AJAX

AJAX =异步 JavaScript 和 XML （ Asynchronous JavaScript and XML）。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

目前学习的异步语句： setTimeout()； setInterval()； AJAX

创建AJAX

var xhr = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

var xhr = =new ActiveXObject("Microsoft.XMLHTTP");

因此: //判断是否支持 var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); } else { xhr = =new ActiveXObject("Microsoft.XMLHTTP"); }；

//配置ajax的参数

xhr.open(‘GET‘请求方式,‘./test.html‘请求地址,true异步false同步);

//发送请求

xhr.send();

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪.此时我们才去接受响应：

//接受响应的时机与步骤
xhr.onreadystatechange = function(){

    if(xhr.readyState === 4 && xhr.status==200){
        console.log(xhr.responseText);
    }
}

传递数据给服务器

localStorage本地存储

html5新增的一项功能，低版本不支持

localStorage是把数据直接存在电脑硬盘里，不会因重启浏览器或注释而删除 。但是只能存储字符串类型的数据。

计数器

-0+

js代码

(function(){
    var subBtn = document.getElementById(‘sub‘);
    var numSpan = document.getElementById(‘num‘);
    var addBtn = document.getElementById(‘add‘);
    var num = 0;//每次刷新页面后span的初始值都是0
    addBtn.addEventListener(‘click‘,function(){
        num++;
        numSpan.innerHTML = num;
    },false);
    subBtn.addEventListener(‘click‘,function(){
        num--;
        numSpan.innerHTML = num;
    },false);
})();

要使每次刷新页面的时候span的初始值为上一次的最后值，就要使用localStorage

(function(){
    var subBtn = document.getElementById(‘sub‘);
    var numSpan = document.getElementById(‘num‘);
    var addBtn = document.getElementById(‘add‘);

    //使用localStorage可以让每次刷新后，初始值都是上次最后的值
    //先判断localStorage有没有值，如果没有就赋值初始值0
    if(localStorage.num === undefined){
        localStorage.num = 0;
    }
    //根据localStorage的值赋值页面加载时span的初始值
    numSpan.innerHTML = localStorage.num;
    addBtn.addEventListener(‘click‘,function(){
        num++;
        numSpan.innerHTML = num;
    },false);
    subBtn.addEventListener(‘click‘,function(){
        num--;
        numSpan.innerHTML = num;
    },false);
})();

把JSON文件转换成数组字面量

eval函数 把某一段字符串按照JS代码来运行（可以把获取的JSON的文本按照JS代码来执行）

var listOfStudents = eval(xhr.responseText);

• 但是也是因此，他的安全性能比较低。容易备黑客攻击。

JSON.parse

var listOfStudents = JSON.parse(xhr.responseText);

补充：把数组转换成JSON的文本

var str = JSON.stringfy(listOfStudents);

tips:

table中的tr的父节点是tbody，只是平时写的时候省略了，浏览器自动帮我们写上了

初入javascript知识点（六）