编程语言
首页 > 编程语言> > han_JavaScript

han_JavaScript

作者:互联网

JavaScript

实例返回值
typeof "John"string
typeof 3.14number
typeof NaNnumber
typeof falseboolean
typeof [1,2,3,4]object
typeof {name:'John', age:34}object
typeof new Date()object
typeof function () {}function
typeof myCarundefined (如果 myCar 没有声明)
typeof nullobject
实例返回构造函数
"John".constructorString() { [native code] }
(3.14).constructorNumber() { [native code] }
false.constructorBoolean() { [native code] }
[1,2,3,4].constructorArray() { [native code] }
{name:'John', age:34}.constructorObject() { [native code] }
new Date().constructorDate() { [native code] }
function () {}.constructorFunction(){ [native code] }

正则表达式

  1. search() 方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。
//使用正则表达式搜索 "Runoob" 字符串,且不区分大小写:<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><p>搜索字符串 "runoob", 并显示匹配的起始位置:</p><button onclick="myFunction()">点我</button><p id="demo"></p><script>function myFunction() {
    var str = "Visit Runoob!"; 
    var n = str.search(/Runoob/i);
    document.getElementById("demo").innerHTML = n;}</script></body></html>/search 方法可使用字符串作为参数。字符串参数会转换为正则表达式: <!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><p>搜索字符串 "Runoob", 并显示匹配的起始位置:</p><button onclick="myFunction()">点我</button><p id="demo"></p><script>function myFunction() {
    var str = "Visit Runoob!"; 
    var n = str.search("Runoob");
    document.getElementById("demo").innerHTML = n;}</script></body></html>

  1. replace() 方法 用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
//使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><p>替换 "microsoft" 为 "Runoob" :</p><button onclick="myFunction()">点我</button><p id="demo">Visit Microsoft!</p><script>function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace(/microsoft/i,"Runoob");
    document.getElementById("demo").innerHTML = txt;}</script></body></html>//replace() 方法将接收字符串作为参数:<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><p>替换 "Microsoft" 为 "Runoob" :</p><button onclick="myFunction()">点我</button><p id="demo">请访问 Microsoft!</p><script>function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace("Microsoft","Runoob");
    document.getElementById("demo").innerHTML = txt;}</script></body></html>

修饰符描述
i执行对大小写不敏感的匹配。
g执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m执行多行匹配。
表达式描述
[abc]查找方括号之间的任何字符。
[0-9]查找任何从 0 至 9 的数字。
(x|y)查找任何以
元字符描述
\d查找数字。
\s查找空白字符。
\b匹配单词边界。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。

什么是 RegExp?

  1. 正则表达式是描述字符模式的对象。正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。
  2. 语法:var patt=new RegExp(pattern,modifiers); 或者更简单的方式: var patt=/pattern/modifiers;
  3. 参数:pattern(模式) 描述了表达式的模式;modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配;
  4. 注意:当使用构造函数创造正则对象时,需要常规的字符转义规则(在前面加反斜杠 \)。
  5. 例如:var re = new RegExp("\\w+"); 等价于 var re = /\w+/;

修饰符:用于执行区分大小写和全局匹配

修饰符描述
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)查找任何指定的选项。

元字符

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

量词

量词描述
n+匹配任何包含至少一个 n 的字符串。例如,/a+/ 匹配 “candy” 中的 “a”,“caaaaaaandy” 中所有的 “a”。
n*匹配任何包含零个或多个 n 的字符串。例如,/bo*/ 匹配 “A ghost booooed” 中的 “boooo”,“A bird warbled” 中的 “b”,但是不匹配 “A goat grunted”。
n?匹配任何包含零个或一个 n 的字符串。例如,/e?le?/ 匹配 “angel” 中的 “el”,“angle” 中的 “le”。
n{X}匹配包含 X 个 n 的序列的字符串。例如,/a{2}/ 不匹配 “candy,” 中的 “a”,但是匹配 “caandy,” 中的两个 “a”,且匹配 “caaandy.” 中的前两个 “a”。
n{X,}X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如,/a{2,}/ 不匹配 “candy” 中的 “a”,但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。
n{X,Y}X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次,至多 Y 次时匹配。例如,/a{1,3}/ 不匹配 “cndy”,匹配 “candy,” 中的 “a”,“caandy,” 中的两个 “a”,匹配 “caaaaaaandy” 中的前面三个 “a”。注意,当匹配 “caaaaaaandy” 时,即使原始字符串拥有更多的 “a”,匹配项也是 “aaa”。
n$匹配任何结尾为 n 的字符串。
^n匹配任何开头为 n 的字符串。
?=n匹配任何其后紧接指定字符串 n 的字符串。
?!n匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象方法

方法描述
compile在 1.5 版本中已废弃。 编译正则表达式。
exec检索字符串中指定的值。返回找到的值,并确定其位置。
test检索字符串中指定的值。返回 true 或 false。
toString返回正则表达式的字符串。

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

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

RegExp 对象属性

属性描述
constructor返回一个函数,该函数是一个创建 RegExp 对象的原型。
global判断是否设置了 “g” 修饰符
ignoreCase判断是否设置了 “i” 修饰符
lastIndex用于规定下次匹配的起始位置
multiline判断是否设置了 “m” 修饰符
source返回正则表达式的匹配模式

自定义验证方法

function validateForm(){
  var x=document.forms["myForm"]["fname"].value;
  if (x==null || x=="")
  {
    alert("姓必须填写");
    return false;
  }}

实例

<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><head><script>function validateForm(){var x=document.forms["myForm"]["fname"].value;if (x==null || x==""){
  alert("姓必须填写");
  return false;
  }}</script></head><body>
	<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">姓: <input type="text" name="fname"><input type="submit" value="提交"></form>
	</body></html>

  1. E-mail 验证

自定义验证方法

function validateForm(){
  var x=document.forms["myForm"]["email"].value;
  var atpos=x.indexOf("@");
  var dotpos=x.lastIndexOf(".");
  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
    alert("不是一个有效的 e-mail 地址");
    return false;
  }}

实例

<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><head><script>function validateForm(){
	var x=document.forms["myForm"]["email"].value;
	var atpos=x.indexOf("@");
	var dotpos=x.lastIndexOf(".");
	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
		alert("不是一个有效的 e-mail 地址");
  		return false;
	}}</script></head><body>
	<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">Email: <input type="text" name="email"><input type="submit" value="提交"></form>
	</body></html>

  1. setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
    - 语法:window.setInterval("javascript function",milliseconds);
    - 注意:window.setInterval()方法可以不使用 window 前缀,直接使用函数setInterval()
    - 参数: 第一个参数是函数(function);第二个参数间隔的毫秒数

实例:显示当前时间

<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><p>在页面显示一个时钟</p><p id="demo"></p><script>var myVar=setInterval(function(){myTimer()},1000);function myTimer(){
	var d=new Date();
	var t=d.toLocaleTimeString();
	document.getElementById("demo").innerHTML=t;}</script></body></html>

如何停止执行?

实例

<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><p>页面上显示时钟:</p><p id="demo"></p><button onclick="myStopFunction()">停止</button><script>var myVar=setInterval(function(){myTimer()},1000);function myTimer(){
	var d=new Date();
	var t=d.toLocaleTimeString();
	document.getElementById("demo").innerHTML=t;}function myStopFunction(){
	clearInterval(myVar);}</script></body></html

  1. setTimeout() - 在指定的毫秒数后执行指定代码。
    - 语法:window.setTimeout("javascript function", milliseconds);

如何停止执行?
- clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
- 语法:window.clearTimeout(timeoutVariable)

实例

<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><p>点击第一个按钮等待3秒后出现"Hello"弹框。</p><p>点击第二个按钮来阻止第一个函数运行。(你必须在3秒之前点击它)。</p><button onclick="myFunction()">点我</button><button onclick="myStopFunction()">停止弹框</button><script>var myVar;function myFunction(){
	myVar=setTimeout(function(){alert("Hello")},3000);}function myStopFunction(){
	clearTimeout(myVar);}</script></body></html>

Location 对象

  1. Location 对象包含有关当前 URL 的信息。
  2. Location 对象是 window 对象的一部分,可通过 window.Location 属性对其进行访问。
  3. 注意: 没有应用于Location对象的公开标准,不过所有浏览器都支持该对象。

Location 对象属性

属性描述
hash返回一个URL的锚部分(从 # 号开始的部分)。
host返回一个URL的主机名和端口
hostname返回URL的主机名
href返回完整的URL
pathname返回的URL路径名。
port返回一个URL服务器使用的端口号
protocol返回一个URL协议
search返回一个URL的查询部分

Location 对象方法

方法说明
assign()载入一个新的文档
reload()重新载入当前文档
replace()用新的文档替换当前文档

Cookie

  1. 意义:用于存储web页面的用户信息
    - 当web服务器向浏览器发送web页面时,在连接关闭后,服务端不会记录用户的信息。CooKie的作用就是用于解决如何记录客户端的信息
  2. 存储:cookie以键值对方式存储
  3. 使用:当浏览器从服务器上请求web页面时,属于该页面的cookie会被添加到该请求中。服务端通过这种方式来获取用户信息

标签:function,字符,匹配,han,JavaScript,字符串,查找,var
来源: https://blog.51cto.com/u_15180480/2731676