初入javascript知识点

Posted 2020-08-16

正则表达式

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() 既可以改变检索模式，也可以添加或删除第二个参数。

修饰符

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

 

方括号

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red|blue|green)	查找任何指定的选项。

元字符

元字符（Metacharacter）是拥有特殊含义的字符：

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NUL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 或 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象属性

属性	描述	FF	IE
global	RegExp 对象是否具有标志 g。	1	4
ignoreCase	RegExp 对象是否具有标志 i。	1	4
lastIndex	一个整数，标示开始下一次匹配的字符位置。	1	4
multiline	RegExp 对象是否具有标志 m。	1	4
source	正则表达式的源文本。	1	4

RegExp 对象方法

方法	描述	FF	IE
compile	编译正则表达式。	1	4
exec	检索字符串中指定的值。返回找到的值，并确定其位置。	1	4
test	检索字符串中指定的值。返回 true 或 false。	1	4

支持正则表达式的 String 对象的方法

方法	描述	FF	IE
search	检索与正则表达式相匹配的值。	1	4
match	找到一个或多个正则表达式的匹配。	1	4
replace	替换与正则表达式匹配的子串。	1	4
split	把字符串分割为字符串数组。	1	4

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();

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 string：仅用于 POST 请求

onreadystatechange 事件

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

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

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

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

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

在 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，只是平时写的时候省略了，浏览器自动帮我们写上了