本文详细介绍了JavaScript的基础知识，包括JS概述、脚本语言与编程语言的区别、常见语法如document.write、onclick事件、改变HTML内容及样式、表单数据验证、输出方式以及函数和匿名函数的使用。通过实例代码展示了如何在网页中使用JavaScript进行交互，如显示日期、响应按钮点击、改变图像、验证输入等。此外，还讨论了变量提升、严格模式和正则表达式在邮箱验证中的应用。
JS概述:
JavaScript是Web的编程语言. IT界的朋友都应该知道这门语言现在越来越流行. 所以它还是值得我们去学习的. 话不多说, 让我们开始JS之旅吧!!
首先, 我们先整一个实例, 让大家感受一下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>我的第一个 JavaScript 程序</h1>
<p id="demo">这是一个段落</p>
<button type="button" onclick="displayDate()">显示日期</button>
</body>
</html>
1.JS是脚本语言.
JS是轻量级的编程语言.
这里既然提到脚本语言, 我们就来说一下标记语言, 脚本语言, 编程语言的区别:
标记语言: 不向计算机发出指令, 直接由浏览器解析. 常用于格式化和链接.
脚本语言: 不经过编译, 只是解释器解释, 然后直接执行. 通常嵌在html文档中
编程语言: 执行前必须经过编译, 生成二进制文件.
2.document.write("..."), 向浏览器输出...
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("这是一个标题");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>
3.onclick事件
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个 JavaScript</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>
<button type="button" onclick="alert('欢迎!')">点我!</button>
</body>
</html>
4.改变指定标签包含的内容
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
5. JS更改html图像
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/images/pic_bulboff.gif";
}
else
{
element.src="/images/pic_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()"
src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯
泡就可以打开或关闭这盏灯</p>
</body>
</html>
6.JS改变html样式
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
7. JS对表单数据进行合法性检测
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
//获取input元素中的内容
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是数字");
}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
8.JS输出
描述:由于JS中没有任何的打印或输出函数, 只能通过以下方式在html中显示数据
1)window.alert(), 该函数包含在<script>标签中实现数据输出
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
2)innerHTML, 找到指定元素并修改其内容.
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
</body>
</html>
3)document.write() 将文本写入html文档中
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction()
{
document.write(Date());
}
</script>
</body>
</html>
这里需要注意:html文档加载之后,我们点击button, myFunction()被调用, 之后由document.write(Date())将当前时间吸入html文档, 而html文档中之前的内容都会被覆盖.
4)console.log() 实现控制台输出
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
我们对这里所说的控制台输出可能有些陌生. google浏览器按下"fn+f12"会出现控制台. 而这里的c便输出到浏览器中的console了~
9.JS中的常量,变量,命名规则
在JS中, 常量被称为字面量, 常量/变量区分大小写. 命名规则(大驼峰, 小驼峰, 下划线)
10.一个小知识点:
我们在写JS脚本时, 通常会遇到一行写不下一个语句的情况, 这个时候我们应该怎么做?? 拆分部分字符串放到下一行, 这里要注意:拆分后要在前一行的末尾加上反斜杠
11.JS变量名的命名规则
可以以字母, $ _开头
12.JS数据类型
1)字符串
字符串, 单引号/双引号包围的任意文本. 这里注意: 如果我们使用双引号包围字符串, 而字符串中还可以使用单引号,反之相反.
2)数字
想必大家都知道java中有这么几种数据类型:byte,short,int,long,float,double. 而在JS中, 这几种类型的数据统称为数字.
3)布尔
4)数组
数组的声明: var str=new Array(); var str2=[];
数组的初始化: var str=new Array('a','b'); var str2=['a','b'];
5)对象
对象中的属性以键值对的形式存在, 例如:
var person={
firstname : junling,
lastname : wang,
};
问题来了,我们怎么去访问对象中的属性值呢?? 两种方法:
1)person.firstname 2)person[firstname]
6)Undefined,Null
我现在还没搞懂这两种数据类型真正的区别, 只知道它们的用法:
Undefined, 当我们声明一个变量, 并没有对它初始化. 这个时候我们用document.write()试图输出该变量, 会在浏览器中提示:Undefied
Null, 当我们用document.getElementById()试图获取指定元素, 当该元素不存在, 会在浏览器中提示:Null(空对象)
这里补充一个知识点:
我们知道JS中声明变量而不对其初始化, 它的数据类型是不确定的. 怎么才能做到仅声明变量时确定其数据类型呢??
利用new关键字, 例如: var str=new String;
13.JS对象
既然是对象, 它应该是包含属性, 方法的. 这里所说的属性是以键值对的形式存在的.
下面我们来看一个实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>创建和使用对象方法。</p>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式：" + person.fullName;
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果：" + person.fullName();
</script>
</body>
</html>
从上面的例子中我们可以看到JS中方法的定义形式: 方法名 function(){...}
怎么去调用JS对象中的方法呢? 对象名.方法名;
14.JS全局变量, 局部变量的生命周期, 作用域
1)生命周期:
局部变量: 从变量声明开始, 到其所在函数执行结束. 全局变量:从变量声明开始, 到页面关闭.
2)作用域:
局部变量:作用在函数内部. 全局变量:作用整个JS脚本部分
另外补充几个知识点:
1)我在菜鸟教程上看到这样一句话: 局部变量/函数可覆盖全局变量/函数, 全局变量/函数可覆盖window对象的变量/函数. 仔细想想,就会发现它所说的就是个"就近原则"的问题.
2)当我们在JS脚本中没有声明变量直接初始化,系统会默认它是一个全局变量.
15.html事件
这里我给出一个实例, 一笔跨过~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
</body>
</html>
对于上面这个例子,我们注意一下this关键字, 它表示元素本身. 意思是修改当前元素中的内容~
16.字符串
1)字符串索引
现在有一个已知字符串, 我们想获取其中的某个字符. 这个时候我们应该怎么做呢? 没错,JS给我们提供了字符串索引, 字符串索引是从0开始的.
2)转义字符
前面我们有说过, 单引号,双引号都能包围字符串. 如果使用单引号包围字符串, 字符串中就只能使用双引号包围部分字符. 如果我们在单引号包围字符串的同时, 执意要用单引号包围字符串中的部分字符, 怎么做?? 没错, 转义字符(在内层单引号前面加反斜杠). 例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo"></p>
<script>
var x = 'It\'s alright';
var y = "He is called \"Johnny\"";
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>
17.运算符
1)算术运算符
+ - * / % ++ --
2)赋值运算符
= += -= *= /= %=
3)比较运算符
== === != !== == !=,单纯考虑变量的值是否相等. === !==,从变量的类型,值两方面去考虑
> < >= <=
4)逻辑运算符
&& || !
5)条件运算符
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮检测年龄。</p>
年龄:<input id="age" value="18" />
<p>是否达到投票年龄?</p>
<button onclick="myFunction()">点击按钮</button>
<p id="demo"></p>
<script>
function myFunction()
{
var age,voteable;
age=document.getElementById("age").value;
voteable=(age<18)?"年龄太小":"年龄已达到";
document.getElementById("demo").innerHTML=voteable;
}
</script>
</body>
</html>
18.switch-case语句
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击下面的按钮来显示今天是周几：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var d=new Date().getDay();//获取一周中的第几天.(数字表示)
switch (d){
case 0:x="今天是星期日";
break;
case 1:x="今天是星期一";
break;
case 2:x="今天是星期二";
break;
case 3:x="今天是星期三";
break;
case 4:x="今天是星期四";
break;
case 5:x="今天是星期五";
break;
case 6:x="今天是星期六";
break;
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
在上面的例子中,细心的朋友可以看到switch-case语句中没有default语句. 没错, 在JS中这种情况是成立的~~
19.default关键字
既然上面提到了default关键字, 下面我们就给出一个例子:
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击下面的按钮，会显示出基于今日日期的消息：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
var d=new Date().getDay();
switch (d)
{
case 6:x="今天是星期六";
break;
case 0:x="今天是星期日";
break;
default:x="期待周末";
break;
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
20.typeof关键字, 判断变量的数据类型
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p> typeof 操作符返回变量或表达式的类型。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof "john" + "<br>" +
typeof 3.14 + "<br>" +
typeof false + "<br>" +
typeof new Array(1,2,3,4) + "<br>" +
typeof {name:'john', age:34};
</script>
</body>
</html>
在上面的实例中,typeof new Array(1,2,3,4) 在浏览器中显示的结果是:object. 没错,JS中数组被看做是一种特殊的对象.
21.Null,Undefined
Null,空对象指针. Undefined,空值变量. 两者类型不同, 值相同.
22.JS类型转换
1)JS中包含的数据类型.
5种数据类型:string, number, boolean, object, function
3种对象类型:Object, Array,Date
2种不包含值得数据类型:undefined,null
2)constructor属性
前面我们说过Date,Array在JS中都被看成是object类型的数据. 怎么准确判断一个变量的数据类型呢? 这时我们就可以时使用constructor属性返回变量的构造方法
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>判断是否为数组。</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>
</body>
</html>
3)数字转换成字符串
实例一: 使用全局方法String()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p> String() 方法可以将数字转换为字符串。</p>
<p id="demo"></p>
<script>
var x = 123;
document.getElementById("demo").innerHTML =
String(x) + "<br>" +
String(123) + "<br>" +
typeof String(100 + 23);
</script>
</body>
</html>
实例二:使用Number中的toString()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>toString() 方法将数字转换为字符串。</p>
<p id="demo"></p>
<script>
var x = 123;
document.getElementById("demo").innerHTML =
x.toString() + "<br>" +
(123).toString() + "<br>" +
typeof((100 + 23).toString());
</script>
</body>
</html>
另外,布尔值转字符串, 日期转字符串和上述情况一致~~
4)字符串转数字
这里记得使用全局方法Nuber()就行了~~
5)一元运算符:+ 负责将其后面的变量转换成数字
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p> typeof 操作符返回变量或表达式的类型。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
var y = {1:"s"};
var x = + y;
document.getElementById("demo").innerHTML =
typeof y + "<br>" + typeof(x);
}
</script>
</body>
</html>
在这里我们注意:y本来是对象, 通过一元运算符将其转换成数字并赋给x, 最后x的只是:NaN
除了上面所说的强制转换, 还有自动转换. JS中的自动转换实际上调用了变量的toString()
23.正则表达式
描述:正则表达式是由字符序列组成的搜索模式. 搜索模式可用于任意文本的搜索和替换.
1)search(), replace()
正则表达式通常用于字符串的这两个方法.
search(), 搜索字符串中的指定字符串或与正则表达式相匹配的子串.
replace(), 替换字符串中的指定字符串或与正则表达式相匹配的子串
实例一:
<!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()搜索str中的子串, 返回子串(在str)中的起始位置.
实例二:
<!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("请","Runoob");
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
2).正则表达式知识点总结
修饰符:
i, 正则匹配过程中不区分大小写.
g, 全局匹配, 即匹配字符串中的所有指定子串.
m, 多行匹配. 文本内容较大时,多行匹配无疑是很不错的方法.
模式:
[abc], 匹配中括号中的任意字符. 假如在已知字符串中先匹配到a, 则返回其在字符串中的位置并停止搜索.
[0~9],匹配中括号中0~9之间的数字. 同样, 假如在字符串中先匹配到0, 则返回其在字符串中的位置并停止搜素.
[x|y], 匹配中括号中的x或y. ~~
元字符:
首先,我们要知道元字符也是用在也是用在正则表达式主题中的.
\d, 匹配字符串中的数字部分. 一旦匹配到一个数字,立即返回其位置且停止搜索.
\s, 匹配空白字符. \b, 匹配单词边界(这个我没搞懂~~).
量词:
n+, 在已知字符串中匹配任意子串. 要求子串数量至少一个
n*, 在已知字符串中匹配任意子串. 要求子串数量为0个或任意多个.
n?, 在一直字符串中匹配任意子串. 要求子串数量为0个或一个.
3)RegExp对象
描述:RegExp, 它是和正则表达式相关的对象. 该对象中有3个方法, 分别是:test(), exec(), compile()
首先来看一个实例:
<html>
<body>
<script type="text/javascript">
var patt1=new RegExp("e","g");/*创建RegExp对象的同时,给出了正则表达式主体, 修饰符两个参数. g, 全局匹配~~*/
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)
</script>
</body>
</html>
在这个实例中,我们把目光集中在RegExp对象的创建上. 细心的朋友应该会注意到其中的两个参数:第一个参数是正则表达式的主体, 第二个参数是正则表达式的修饰符.
test(), 判断字符串中是否有与正则表达式相匹配的子串.
实例:
<html>
<body>
<script type="text/javascript">
var patt1=new RegExp("e");// 判断RegExp对象, 参数部分就是正则表达式
document.write(patt1.test("The best things in life are free"));//RegExp对象中的test()返回值是boolean数值.
</script>
</body>
</html>
exec(), 检索字符串中是否有与正则表达式相匹配的子串. 如果有,返回该子串.
实例:
<html>
<body>
<script type="text/javascript">
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));//这里返回的是e
</script>
</body>
</html>
compile(), 该方法的参数部分是一个正则表达式主体. 用于修改RegExp对象中的正则表达式.
实例:
<html>
<body>
<script type="text/javascript">
var patt1=new RegExp("e");//创建RegExp对象
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));
</script>
</body>
</html>
4).今天专门在网上找了正则表达式的元字符. 这里给大家做了一个总结:
每个元字符都有自己的特殊含义, 下面来看一下:
-->\s, 匹配字符串中的第一个空格及其后面所有的非换行字符.比如:
实例一:
<script>
var reg = /\s.+/;
var str='This is a te\nst String.';
alert(reg.exec(str));
</script>
实例二:
<script>
var str='This is a test String.';
document.write(str.match(/\s.+/));
</script>
但是\s最常用的方式是这样的. 比如:
实例三:
var reg=/^\s*$/;
if(reg.test(value)){
alert('请输入有效值');
return false;
}
常用于检测用户的表单输入是否合法(不输入, 纯输入空白字符都是不合法的~~)-->\S,匹配的是字符串的第一个非空格字符及其后面的所有非换行字符. 我们可以看到恰好与\s相反.
-->\w, 匹配单个单词字符. 所指字符应包含在[a-zA-Z0-9]这个集合中. 比如:
<script>
var reg = /\w+/;
var str='.zhufengpei\nxun';
alert(reg.exec(str));
</script>
上面的例子还有一个我们注意的点:输出结果是:zhufengpei，信息的小伙伴们应该知道怎么回事了吧~~
-->\W,匹配非单词字符, 我们会发现它和\w也是相反的. 比如:<script>
var reg = /\W+/;
var str='正则教程';//这里的中文字符用\w这个元字符是匹配不上的.
alert(reg.exec(str));
</script>
--->
这里补充一个和正则相关的知识点: 分组匹配. 首先看下面的例子:
<script>
var reg = /(\w)(\w)\2\1/;
var str='woow';
alert(reg.exec(str));
</script>
相信大家也看到了这么一个语句:var reg=/(\w)(\w)\2\1/; 没错,这就是分组匹配. 来来来,我们分析一下细节:第一个(\w)匹配到w, 第二个(\w)匹配到o,\2\1分别是前面两个(\w)的反向引用.
元字符就说到这,想了解更多相关知识的朋友请转:http://www.cnblogs.com/-ding/p/6061595.html
24.JS中的try-catch, throw
描述:有编程基础的朋友都知道异常处理有两种方式: 捕捉处理, 异常抛出.
1)try-catch: 示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
var txt="";
function message(){
try {
adddlert("Welcome guest!");
}
catch(err) {
txt="本页有一个错误。\n\n";
txt+="错误描述：" + err.message + "\n\n";
txt+="点击确定继续。\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body>
</html>
2)throw:示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>请输出一个 5 到 10 之间的数字:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入</button>
<p id="message"></p>
<script>
function myFunction() {
var message, x;
message = document.getElementById("message");//p元素
message.innerHTML = "";
x = document.getElementById("demo").value;//输入框的内容
try {
if(x == "") throw "值为空";
if(isNaN(x)) throw "不是数字";
x = Number(x);
if(x < 5) throw "太小";
if(x > 10) throw "太大";
}
catch(err) {
message.innerHTML = "错误: " + err;
}
}
</script>
</body>
</html>
25.JS调试
JS代码的调试工具镶嵌在浏览器中.
26.变量提升
大家会不会觉得这个知识看起来比较陌生, 其实很简单了~~
变量提升, 即指变量声明, 函数声明往往会被浏览器中的解释器提到脚本开头. 需要我们注意的是: 变量声明会提升, 变量初始化则不会被提升. 下面我们来看两个实例:
1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo"></p>
<script>
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x; // 在元素中显示 x
var x; // 声明 x
</script>
</body>
</html>
2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo"></p>
<script>
var x = 5; // 初始化 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = "x 为：" + x + "，y 为：" + y; // 显示 x 和 y
var y = 7; // 初始化 y
</script>
</body>
</html>
27.严格模式
这个知识点平时见的比较少. 这里简单的说一下: use strict, 字面量表达式. 有了它, 我们之后使用的变量必须事先声明, 否则会在console控制台报错.
例如:
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="gbk"> | |
| <title>菜鸟教程(runoob.com)</title> | |
| </head> | |
| <body> | |
| <p id="demo"></p> | |
| <script> | |
| "use strict"; | |
| x = 5; // 变量 x 设置为 5 | |
| elem = document.getElementById("demo"); // 查找元素 | |
| elem.innerHTML = x; // 在元素中显示 x | |
| var x; // 声明 x | |
| </script> | |
| </body> | |
| </html> |
28.表单验证
描述:相信大家对html表单并不陌生, 而html表单数据的合法性验证是比较重要的~~ 下面我们以实例为主谈谈JS表单验证.
实例一: 判断表单数据是否为空~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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~10之间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>JavaScript 验证输入</h1>
<p>请输入 1 到 10 之间的数字：</p>
<input id="numb" placeholder="numb">
<button type="button" onclick="myFunction()">提交</button>
<p id="demo"></p>
<script>
function myFunction() //该方法接收并验证表单数据的合法性.
var x, text;
// 获取 id="numb" 的值
x = document.getElementById("numb").value;
// 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "输入错误";
} else {
text = "输入正确";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
实例三:表单数据自动验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>
<p>点击提交按钮，如果输入框是空的，浏览器会提示错误信息。</p>
</body>
</html>
【重中之重】【重中之重】
表单数据中不可避免的要包含email, 我们怎么在数据提交后验证它的合法性呢??这里牵涉到正则表达式的综合应用． 我们来解析一个正则表达式：
下面是一个验证电子邮件的正则表达式
var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ ;
下面我们开始剖析这个正则表达式
re 是一个变量, 用来存储右边的正则表达式，在javascript 中，声明变量使用Var 关键字。
正则表达式的阅读顺序是从左向右的
正则表达式总是以(/) 开头和结尾，斜杠之间的所有内容都是正则表达式的组成部分。
脱字符(^) 表示我们要使用这个表达式来检查以特定字符串开头的字符串。如果去掉脱字符，那么即使字符串开头有一堆垃圾字符，电子邮件地址也可能被认为是有效的。
表达式\w 表示任意单一字符，包括a~z 、A~Z 、0~9 或下划线。电子邮件必须这些字符之一开头。
加号+ 表示我们要寻找前面条目的一次或多次出现。
园括号() 表示一个组，这意味着后面要引用圆括号中的所有内容，所以现在将它们放在一个组中。
放括号[] 用来表示可以出现其中的任意一个字符。在这个示例中，方括号内包含字符\.- 。我们希望允许用户输入点号或连字符，但是点号对于正则表达式有特殊的意义，所以需要在它前面加上反斜杠\, 在特殊字符前加反斜杠表示“对字符转义”，经转义后的字符表示其本身意义。因为有方括号，输入字符串在这个位置可以有一个点号或一个连字符，但是两种不能同时存在。
问号？表示前面的条目可以出现一次或不出现。所以电子邮件地址的第一部分中可以有一个点号或一个连字符，也可以没有。
在？后面，再次使用\w+ ，表示点号或连字符后面必须有其他字符。
在（）后面出现的* 号，表示前面的条目可以出现零次或多次。所以圆括号中的内容可以出现零次或多次。
@ 字符代表其本身，没有任何其他意义，这个字符位于电子邮件地址和域名之间。
@ 字符后再次出现\w+ ，表示@ 后必须出现字符。在此之后，再次出现([\.-]?\w+)*, 表示电子邮件地址的后缀中允许出现点号或连字符。
然后，在一对圆括号中建立另一个组(\.\w{2,3}), 表示我们希望找到一个点号，后面跟一些字符。在这个示例中，花括号中的数字表示前面的条目可以出现2 到3 次。在这个组的后面是一个+ 号，表示前面的条目（这个组）必须出现一次或多次。这会匹配.com 或.edu 之类的，也与ox.ac.uk 匹配。
最后，正则表达式的末尾是一个美元符号$ ，表示匹配的字符串必须在这里结束。斜杠结束正则表达式。
29.JS表单验证API，保留关键字
想了解表单验证API的朋友请转: http://www.runoob.com/js/js-validation-api.html
想了解JS关键字的朋友请转:http://www.runoob.com/js/js-reserved.html
30.javascript.void(0)
描述:简单解释就是: 执行没有返回值的操作. 比如: <a href="javascript:void(0)">单此处什么也不会发生</a>, 我们尝试之后会发现单击链接文本却不做任何反应..
再比如: <a href="javascript:void(alert('Warning!!!'))">点我!</a>
实例一:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script type="text/javascript">
function getValue(){
var a,b,c;
a = void ( b = 5, c = 7 );
document.write('a = ' + a + ' b = ' + b +' c = ' + c );
}
</script>
</head>
<body>
<p>点击以下按钮查看结果：</p>
<form>
<input type="button" value="点我" onclick="getValue();" />
</form>
</body>
</html>
31.函数
1).使用function关键字声明函数. 格式如下:var x=function() {...}
实例一:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>函数存储在变量后，变量可作为函数使用：</p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};//匿名函数, 定义之后用变量去接收.
document.getElementById("demo").innerHTML = x(4, 3);
</script>
</body>
</html>
2)函数提升
在JS代码中我们往往把函数声明放到函数调用的后面而不影响程序的执行, 这是为什么呢？? 没错,浏览器解释器对函数声明做了提升.
实例二:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>JavaScrip 内置构造函数。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML=myFunction(5);
function myFunction(y) {
return y * y;
}
</script>
</body>
</html>
注意:浏览器解释器不会对匿名函数做提升操作~~~
3.匿名函数可以自调用.
实例三:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>函数可以自动调用：</p>
<p id="demo"></p>
<script>
(function () {
document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";
})();
</script>
</body>
</html>
4)函数也可以说是对象. 既然是对象,就会有属性和方法. 下面我们来看一下实例:
实例4.1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p> arguments.length 属性返回函数接收到参数的个数：</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return arguments.length;//对当前函数的输入进行跟踪计数
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
实例4.2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p> toString() 将函数作为一个字符串返回：</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>
</body>
</html>
5)JS中调用函数的4中方法
5.1)最熟悉的函数调用
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>
全局函数 (myFunction) 返回参数参数相乘的结果：
</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2);
</script>
</body>
</html>
5.2)浏览器中的页面对象是浏览器窗口(window对象)
实例:
function myFunction(a, b) { return a * b; }
window.myFunction(10, 2);
5.3)函数没有通过自身的对象调用,函数体出现的this关键字只能理解成window对象.
实例:
function myFunction() {return this;}
myFunction();//这里调用函数并没有使用自身对象, 那么函数体中的this只能是window对象
5.4)函数以对象的成员方法的身份调用
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>在一个对象方法中 ，<b>this</b> 的值是对象本身。</p>
<p id="demo"></p>
<script>
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function() {
return this;
}
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>
</body>
</html>
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>该实例中， myFunction 是函数构造函数:</p>
<p id="demo"></p>
<script>
function myFunction(arg1, arg2) {//对象的构造方法
this.firstName = arg1;
this.lastName = arg2;
}
var x = new myFunction("John","Doe")
document.getElementById("demo").innerHTML = x.firstName;
</script>
</body>
</html>
5.5)函数,也可以理解成对象. 既然是对象,它就有属于自己的方法. 这里要讲的就是两个预定义函数(call(),apply() --> *)
实例一:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var myObject;
function myFunction(a, b) {
return a * b;
}
myObject = myFunction.call(myObject, 10, 2); // 返回 20
document.getElementById("demo").innerHTML = myObject;
</script>
</body>
</html>
实例二:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var myObject, myArray;
function myFunction(a, b) {
return a * b;
}
myArray = [4, 2]
myObject = myFunction.apply(myObject, myArray); // 返回 20
document.getElementById("demo").innerHTML = myObject;
</script>
</body>
</html>
从上面两个方法可以看出来:
call(),apply()都是以一个新建对象的引用作为其第一个参数
call()的从第二个参数开始放的是其要进行乘操作的数据
apply()第二个参数放的是要进行乘操作的数组.
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
