什么是JavaScript
JavaScript是网络脚本语言,用来设计动态网页。
JavaScript主要有几个功能
- 写入HTML输出
- 对事件作出反应
- 改变HTML内容
- 改变HTML图像
- 改变HTML样式
- 验证输入
如何实现JavaScript
JavaScript引入方式有两种,一种是直接在HTML中嵌入,还有一种是引入外部js文件
在HTML中的js脚本必须位于<script>与</script>标签之间,脚本可放置在<body>和<head>部分中
使用外部文件,在<script>标签的“src"属性中设置该.js文件
JavaScript变量
JavaScript中每一个变量都是一个对象,在声明时可以用new关键字来声明其类型
在JavaScript中用var关键词来声明变量:
var x;
通过等号来赋值:
x = 1;
也可以声明时赋值:
var x =1;
js可以在一条语句中声明很多变量,以var开头,变量间用,隔开即可
如果重新声明js变量,该变量值不会丢失
JavaScript数据类型
JavaScript拥有动态类型,即相同变量可用作不同类型:
var x;
var x = 6;
var x ="Curry";
JavaScript字符串
字符串用来存储字符,字符串可以是引号中的任意文本,可以使用单引号和双引号
var txt = "hello world";
document.write(txt.length);//求字符串长度
document.write(txt.toUpperCase());//转成大写
JavaScript数字
JavaScript只有一种数字类型,数字类型包含int,float,double等,都是8字节大小
JavaScript布尔
布尔只有两个值:true 或 false
JavaScript数组
var car = new Array();
var car = new Array("audi","bmw","volvo");
JavaScript对象
JavaScript中可以说所有事物都是对象,JavaScript是基于对象的编程语言,每个对象都拥有属性和方法
对象由花括号分隔,对象属性以名称和值对的形式(name:value)来定义,由逗号分隔
var person={firstname:"bill",lastname:'gates'};
还有另一种方法:
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
还可以使用对象构造器
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
访问对象属性的语法是:
objectName.propertyName
还可以通过对对象赋值,向已有对象添加新的属性
访问对象方法的语法是:
objectName.methodName()
创建对象实例:
通过对象构造器来创建新的对象实例,对象构造器用上面的person
var myFather=new person("Bill","Gates",56,"blue");
Undefined和null
undefined表示这个变量不含有值
null用来清空变量
JavaScript函数
js函数语法:
function functioname(){}
带参函数:
function functionName(argument1,argument2){}
带返回值:
function functionName(){
var x;
return x;
}
变量的作用域和生存周期
局部变量
在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。局部变量会在函数运行以后被删除。
全局变量
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。全局变量会在页面关闭后被删除。
如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。
JavaScript运算符
算术运算符
y=5
运算符 | 描述 | 例子 | 结果 |
---|---|---|---|
+ | 加 | x=y+2 | 7 |
- | 减 | x=y-2 | 3 |
* | 乘 | x=y*3 | 15 |
/ | 除 | x=y/2 | 2.5 |
% | 求余 | x=y%2 | 1 |
++ | 自加 | y++ | 6 |
-- | 自减 | y-- | 4 |
string+string | 两个字符串相加,连接两个字符串 | “abc"+"def" | abcdef |
赋值运算符
运算符 | 例子 | 等价于 | 结果 |
---|---|---|---|
= | x=y | x=5 | |
+= | x+=y | x=x+y | x=15 |
-= | x-=y | x=x-y | x=5 |
*= | x*=y | x=x*y | x=50 |
/= | x/=y | x=x/y | x=2 |
%= | x%=y | x=x%y | x=0 |
JavaScript比较和逻辑运算符
比较运算符
x=5
运算符 | 描述 | 例子 |
---|---|---|
== | 等于 | x==8 为 false |
=== | 全等(值和类型) | x===5 为 true;x==="5" 为 false |
!= | 不等于 | x!=8 为 true |
> | 大于 | x>8 为 false |
< | 小于 | x<8 为 true |
>= | 大于或等于 | x>=8 为 false |
<= | 小于或等于 | x<=8 为 true |
逻辑运算符
给定x=6 y=3
运算符 | 描述 | 例子 |
---|---|---|
&& | and | (x < 10 && y > 1) 为 true |
|| | or | (x==5 || y==5) 为 false |
! | not | !(x==y) 为 true |
JavaScript条件语句
if语句
在 JavaScript 中,我们可使用以下条件语句:
- if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
- if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
- if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行
if (条件 1)
{
当条件 1 为 true 时执行的代码
}
else if (条件 2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
switch语句
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}
JavaScript循环语句
for循环
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 在循环(代码块)开始前执行
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行
for/in循环
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
while循环
while语句分两种一种是先判断再执行,另一种是先执行再判断(do/while)
while (条件)
{
需要执行的代码
}
do
{
需要执行的代码
}
while (条件);
break和continue
break语句用于跳出循环
continue用于跳过循环中的一个迭代
JavaScript异常
JavaScript测试和捕捉
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}
Throw语句
throw 语句允许我们创建自定义错误。
正确的技术术语是:创建或抛出异常(exception)。
throw exception
JavaScript表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有:
- 用户是否已填写表单中的必填项目?
- 用户输入的邮件地址是否合法?
- 用户是否已输入合法的日期?
- 用户是否在数据域 (numeric field) 中输入了文本?
先了解一下代码
必填或必选项验证
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
e-mail验证
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
HTML DOM
DOM
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树。
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
查找HTML元素
通过id查找
var x=document.getElementById("intro");
通过标签名字查找,返回是DOM元素数组
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
改变HTML
改变HTML输出流
在JavaScript中,document.write()可用于向html输出流写内容
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
改变HTML内容
修改HTML内容使用innerHTML属性
document.getElementById(id).innerHTML=(new HTML)
改变HTML属性
document.getElementById(id).attributeName=(new value)
改变CSS
document.getElementById(id).style.property=new style
DOM事件
通过几个例子来看一下
例子1:点击改变内容
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
例子2:onload和onunload事件
<body onload="checkCookies()">
例子3:onchange事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。
<input type="text" id="fname" onchange="upperCase()">
例子4:onmouseover和onmouseout事件
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}
function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>
</body>
</html>
例子5:onmousedown和onmouseup
<!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}
function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>
</body>
</html>
添加和删除DOM元素
添加元素
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
删除元素
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
JavaScript日期
定义日期
Date 对象用于处理日期和时间。
可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象:
var myDate=new Date()
操作日期
通过使用针对日期对象的方法,我们可以很容易地对日期进行操作。
设置一个特定的日期
var myDate=new Date();
myDate.setFullYear(2008,7,9);
//注意:表示月份的参数介于 0 到 11 之间。也就是说,如果希望把月设置为 8 月,则参数应该是 7。
var myDate2=new Date();
myDate2.setDate(myDate2.getDate()+5);
设置一个时钟
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onload="startTime();">
<script type="text/javascript">
function startTime(){
var today = new Date();
h = today.getHours();
m = today.getMinutes();
s = today.getSeconds();
document.getElementById("txt").innerHTML=h+":"+m+":"+s;
t = setTimeout("startTime()",500);
}
</script>
<div id="txt" />
</body>
</html>
JavaScript的Math
JavaScript的正则表达式
定义RegExp
var patt1=new RegExp("e");
RegExp的三个方法
1.test()
test() 方法检索字符串中的指定值。返回值是 true 或 false。
2.exec()
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。
3.compile()
compile() 方法用于改变 RegExp。
JavaScript BOM
BOM是浏览器对象模型(Browser object model)
window对象
window对象表示浏览器窗口
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至 HTML DOM 的 document 也是 window 对象的属性之一。
window尺寸
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
- window.innerHeight - 浏览器窗口的内部高度
- window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5:
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或者
- document.body.clientHeight
- document.body.clientWidt
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
一些其他方法:
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() - 移动当前窗口
- window.resizeTo() - 调整当前窗口的尺寸
screen对象
window.screen对象包含有关用户屏幕的信息
window.screen 对象在编写时可以不使用 window 这个前缀。
一些属性:
- screen.availWidth - 可用的屏幕宽度
- screen.availHeight - 可用的屏幕高度
location对象
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口 (80 或 443)
- location.protocol 返回所使用的 web 协议(http:// 或 https://)
- location.href 属性返回当前页面的 URL。
- location.assign() 方法加载新的文档。
history对象
window.history 对象包含浏览器的历史。
一些方法:
- history.back() - 与在浏览器点击后退按钮相同
- history.forward() - 与在浏览器中点击按钮向前相同
navigator对象
window.navigator 对象包含有关访问者浏览器的信息。
<div id="example"></div>
<script>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
消息框
警告框
alert("文本")
确认框
confirm("文本")
提示框
prompt("文本","默认值")
计时
计时事件
通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:
setTimeout()
未来的某时执行代码
clearTimeout()
取消setTimeout()
var t=setTimeout("javascript语句",毫秒)
clearTimeout(setTimeout_variable)
cookie对象
cookie是document中的一个属性
XMLHttpRequest对象
在js这篇文章中加入这个是因为看了《白帽子讲Web安全》里面屡次提到这个对象,便去学习了一下这个,在js后面做一个补充。
什么是XMLHttpRequest对象
XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象是开发者的梦想,因为您能够:
- 在不重新加载页面的情况下更新网页
- 在页面已加载后从服务器请求数据
- 在页面已加载后从服务器接收数据
- 在后台向服务器发送数据
所有现代的浏览器都支持 XMLHttpRequest 对象。
创建XMLHttpRequest对象
语法:
xmlhttp = new XMLHttpRequest();
老版本的使用ActiveX对象
xmlHttp = new ActiveXObejct("Miscrosoft.XMLHTTP");
基本使用框架:
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}
function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"
if (xmlhttp.status==200)
{// 200 = OK
// ...our code here...
}
else
{
alert("Problem retrieving XML data");
}
}
}
</script>
<!--onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称,当 XMLHttpRequest 对象的状态发生改变时,会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时,我们才执行代码。-->
为什么使用 Async=true ?
我们的实例在 open() 的第三个参数中使用了 "true"。
该参数规定请求是否异步处理。
True 表示脚本会在 send() 方法之后继续执行,而不等待来自服务器的响应。
onreadystatechange 事件使代码复杂化了。但是这是在没有得到服务器响应的情况下,防止代码停止的最安全的方法。
通过把该参数设置为 "false",可以省去额外的 onreadystatechange 代码。如果在请求失败时是否执行其余的代码无关紧要,那么可以使用这个参数。