JavaScript（前端基础三）

什么是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 模型被构造为对象的树。

DOM HTML æ

通过可编程的对象模型，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 代码。如果在请求失败时是否执行其余的代码无关紧要，那么可以使用这个参数。