初入javascript知识点

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初入javascript知识点相关的知识,希望对你有一定的参考价值。

正则表达式

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 对象属性

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

RegExp 对象方法

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

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

方法描述FFIE
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的两种基本绘图操作是填充和描边。填充,就是用指定的样式(颜色、渐变或图像)填充图形;描边,就是只在图形的边缘画线。填充和描边的样式分别取决于两个属性:fillStylestrokeStyle。这两个属性的值可以是字符串、渐变对象或模式对象,而且它们的默认值都是"#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,只是平时写的时候省略了,浏览器自动帮我们写上了

 

以上是关于初入javascript知识点的主要内容,如果未能解决你的问题,请参考以下文章

初入AngularJS基础门

初入javascript知识点

初入javascript知识点

初入javascript知识点

初入javascript知识点

初入web知识点