JavaScript(一)-- 基础
JavaScript一款网路脚本语言,具有非常多的用途。用来改进设计网页、验证表单、检測浏览器、创建cookies等。
JavaScript是什么?
1.被用来向HTML页面加入交互行为
2.是一种脚本语言。即轻量级的编程语言
3.通常被嵌入到HTML页面中
4.是一种解释型语言,代码不进行预编译
JavaScript有哪些功能?
1.为HTML页面提供了一种编程工具
2.能够将动态的文本放入的HTML页面中
3.能够对事件做出响应
4.能够读写HTML元素
5.能够被用来验证数据,比如使用正則表達式检測字符串、验证用户提交是否为空字符串
6.能够检測浏览器,并依据检測到的浏览器加载对应的页面
7.创建cookies,存储和取出位于訪问者计算机中的信息
JavaScript真正的名称为ECMAScript,JavaScript语句是给浏览器运行的命令,告诉浏览器要运行的操作。
1、JavaScript的编写
JavaScript的代码放在<script type="text/javascript">代码片段</script>中。原则上能够嵌入到HTML页面的不论什么地方。即便是在HTML元素内。
实际上,JavaScript代码段一般放在HTML的body或者head元素中。
差别就是HTML页面被浏览器载入的时候 ,按顺序载入JavaScript代码。载入并不代表运行,JavaScript的函数就是先载入,在事件触发调用时运行。
先载入head中的JavaScript代码,后载入body中的代码
一般对于事件触发的JavaScript响应函数。都写在head中,在Html页面载入时就把这些JavaScript函数载入,在后期body中可调用这些函数。
JavaScript的凝视使用”//“对单行凝视,使用/*凝视段*/对多行进行凝视。
2、变量
JavaScript使用var语句来声明变量,对大写和小写敏感,var y;和var Y是不同的变量
能够在声明时或者声明之后对变量赋值,为变量赋值文本值时。要使用"abcd"引起。
注意:
1.能够向未声明的变量赋值,该变量会自己主动声明
<script type="text/javascript"> x=6; alert(x);//6 </script>2.对于声明了的变量再次声明,该变量也不会丢失原始值
<script type="text/javascript"> var x=6; x=x+7; var x; alert(x);//13 </script>
3、运算
JavaScript也定义了变量之间的运算操作:加减乘除+-*/。求余%,累加++,累减--。赋值=,还有赋值运算符与其它运算符的结合。注意:
1.加号+,能够把字符串连接起来
<script type="text/javascript"> var x="abcd"; var y="ef"; alert(x+y);//abcdef </script>2.加号把数字和字符串相加,结果为字符串
<script type="text/javascript"> var x=23; var y="ef"; alert(x+y);//23ef </script>
4、比較和逻辑运算符
JavaScript的比較运算符和逻辑运算符都基本和java语言一样,仅仅有个别注意全等运算符===与等于==的差别。
===全等运算符:比較变量的值和类型,两者不但值相等。类型也一样,才返回true
<script type="text/javascript"> var x=23; var y="23"; alert(x===y);//fasle var z=23; alert(x===z);//true </script>==等于运算符:仅仅比較值是否相等。不比較类型
<script type="text/javascript"> var x=23; var y="23"; alert(x==y);//true </script>
5、消息框
消息框主要是增强界面与用户的交互能力。依据用户的选择返回对应的值。
1.警告框
警告框经经常使用于确保用户得到某些信息,当警告框出现后。用户须要点击确定button才干继续操作
语法:使用alert(警告内容)语句,警告内容假设是字符串,需用使用"内容"引起,警告内容为数值时。能够直接填写。
<script type="text/javascript"> alert("abcd"); alert(22); </script>2.确认框
使用户验证确认或者得到某些信息。
依据用户的选择,返回true或fasle
语法:confirm(确认内容)
<script type="text/javascript"> var f = confirm("您确定继续运行吗?");//依据用户选择返回true或false alert(f);//true或false </script>3.提示框
用于向用户提示。输入某个值,点击确认或取消button才干继续操作。
语法:prompt("提示语","默认值")
能够指定默认值,也能够不指定。指定时对话框中显示默认值。
第一个參数为提示语,用于提示用户的话语输出。
假设用户点击取消,返回null;
假设用户点击确定,返回为用户输入的值,假设用户输入为空,那么返回为空字符串。而不是null。
<script type="text/javascript"> var p = prompt("请输入姓名:","aaa"); alert(p); </script>
6、函数
JavaScript函数的目的是为了JS代码在页面载入时不被运行,通过事件触发或者函数调用运行代码块
函数的定义:
function fun_name(x1, x2, x3){
Js代码...
}
注意,參数无需使用var声明,也不能使用var声明。否则出错
定义好函数后,在事件页面事件触发时指定响应函数onclick="fun_name()";
能够定义多个參数的函数。也能够定义无參函数,还能够使用return语句指定函数返回值。
<html> <head> <meta charset="utf-8"/> <script type="text/javascript"> function showHello(){ alert("Hello World!"); } </script> </head> <body> <button onclick="showHello()">调用函数</button> </body> </html>函数中的变量为局部变量。函数外定义的变量生存周期从声明開始到页面关闭结束,能够被全部函数訪问。
1.传參调用函数
<script type="text/javascript"> function showHello(x){ alert(x); } </script> </head> <body> <button onclick="showHello('您好!2.有返回值的函数')">调用函数</button> </body>
<script type="text/javascript"> function showHello(){ return "您好!!!" } </script> </head> <body> <button onclick="alert(showHello())">调用函数</button> </body>
7、for in 声明
for in声明是为了对数组进行遍历操作,或者遍历对象的属性(兴许学习)
用法:
var arr=new Array();
for(var x in arr){
arr[x];
}
注意x为数组的下标值,而不是数组的元素
<script type="text/javascript"> // var x;//两种x的声明方法都能够 var mycars = new Array(); mycars[0]="Saab"; mycars[1]="Volvo"; mycars[2]="BMW"; //使用for in 语句遍历数组 for(var x in mycars){ //注意x为数组的下标值,不是数组元素 document.write(mycars[x]+"<br/>"); } </script>
8、事件
事件是JS能够侦測到的行为,添加界面的交互能力,使我们有能力创建动态页面。
HTML页面中的每个元素都能够产生某些触发Js函数的事件,事件通常与函数结合使用,当事件触发时运行函数。
一些事件举例:鼠标点击、页面或图像加载、鼠标悬浮于页面的某个热点之上、键盘按键等
onload onUnload
onload事件发生在用户进入页面时,也就是浏览器载入页面时,该事件通常被用于检測訪问者的浏览器类型和版本号。然后依据这些信息载入特定版本号的网页。
onUnload事件发生在用户离开页面时。
这两个事件也通经常使用于处理cookies
HTML页面中body元素有onload和onUnload事件
<body onunload="" onload="">注意代码中,事件属性所有使用小写。
其它事件的使用后边学习。
9、try-catch语句
同java语言一样,try-catch语句是为了应对编程中出现的错误。try-catch语句能够在函数中使用,也能够不在函数中使用,一般常常使用在函数中。
用法
try{
检測代码。
}catch(err){
处理代码。
}
当中err能够写为别的名称,相同适用。
<script type="text/javascript"> function show(){ try{ allert("aaa"); }catch(err1){ alert("此页面出现错误:"+err1) } } </script>
10、throw
用于程序开发人员主动创建异常并抛出,能够结合try-catch语句,以达到控制程序流并产生精确错误消息的目的。用法:throw exception;
exception能够是字符串、数值,或者对象
<script type="text/javascript"> var x=prompt("请输入一个整数值:"); function message() { try{ if(x>=0) throw 1; if(x<0) throw -1; }catch(err){ if(err==1){ alert("err==1"); } else{ alert("err==-1"); } } } </script>
11、对象简单介绍
JavaScript是面向对象的编程语言OOP(Object Oriented Programming),能够自定义对象和变量类型。
同java语言一样,对象含有属性和方法。
属性:是与对象有关的值
方法:是对象能够完毕的行为
JS中有字符串的String对象。数组的Array对象,日期的Date对象,布尔型Boolean对象等。
String对象用例:String对象的length属性和toUpperCase()方法
<script type="text/javascript"> var x="hello world!"; //String对象的length属性 document.write(x.length);//12 //String对象的toUpperCase()方法 document.write("<br/>"+x.toUpperCase());//HELLO WORLD! </script>
12、字符串String
String对象用于处理字符串,双引號的"abcd"就是一个String对象。用法见上节。
创建String对象时使用:new String(參数) 以參数。创建字符串对象返回。也能够不使用String字眼,直接使用双引號的字符串。
<script type="text/javascript"> //var x=new String(222);//OK。能够使用数值作为參数 //var x=new String(abc);//错误,必须使用双引號 var x=new String("hello world!!!") //String对象的length属性 document.write(x.length);//14 //String对象的toUpperCase()方法 document.write("<br/>"+x.toUpperCase());//HELLO WORLD!!! </script>注意,new String(參数)的參数指定,能够为数值,字符必须有双引號,否则出错。
也能够不使用new ,直接String(參数),直接把參数转化为字符串对象(不是非常熟悉该方法的使用,待兴许学习)
注意。JS的字符串是不可变的,String定义的方法都不能改变字符串的内容,像toUpperCase()等方法返回的是新的字符串。
字符串对象能够使用 for in 遍历。
String对象的属性主要有三个:constructor(对象构造函数的引用),length(字符串的长度),prototype(同意向对象加入属性和方法)。
prototype比較重要,length常常使用。
String对象还有大量的方法,经常使用的有:
indexOf()检索字符串
concat()连接字符串
link()将字符串显示为链接
replace()替换与正則表達式匹配的值
toUpperCase()、toLowerCase()字符串大写和小写转换
兴许用到的继续学习。
13、日期Date
Date对象实现对日期的操作。用法new Date();返回Date对象。
Date对象仅仅有constructor和prototype属性,有非常多关于时间操作的方法
<script type="text/javascript"> //1.返回当前的日期的时间 new Date() 或直接Date() document.write(new Date());//Wed Mar 23 2016 13:13:29 GMT+0800 (中国标准时间) //这样的Date()返回的不是Date对象,应该是个字符串,由于不具备Date对象的方法 document.write("<br/>"+Date());//Wed Mar 23 2016 13:14:07 GMT+0800 (中国标准时间) //2.返回从1970.1.1日起至今的毫秒数,使用getTime()方法 document.write("<br/>"+new Date().getTime());//1458710189641 //3.设置详细的日期setFullYear(年。月-1,日),注意月份是从0開始的(实际为1月份) var date = new Date(); date.setFullYear(2106,2,22); document.write("<br/>"+date);//Mon Mar 22 2106 13:20:22 GMT+0800 (中国标准时间) //4.将时间以UTC格式显示toUTCString() document.write("<br/>"+new Date().toUTCString());//Wed, 23 Mar 2016 05:23:07 GMT //5.getDay()显示星期几,显示结果为数值。0位星期日,1为星期一 document.write("<br/>"+new Date().getDay());//3 </script>另外另一些经常使用的方法:
getDate()获取一个月中的某一天;
getMonth()获取月份数,从0到11。
getFullYear()获取四位数的年份;
getHours()、getMinutes()、getSeconds()、getMilliSeconds()获取时(0~23)、分、秒(0~59)、毫秒(0~999),另外这些方法还有相应的set系列的方法
14、数组Array
创建数组:三种方法
new Array();
new Array(size);创建对象时,指定数组的大小,后期能够扩展
new Array(e0,e1,e2...);通过指定数组元素创建数组
数组Array对象的属性有:constructor ,length, prototype ,还有 index, input(对这两个属性的用处未知中。
。。)
经常使用的方法有:
concat()连接两个数组
join()将数组的全部元素组成字符串
sort()对数组元素进行排序,使用此方法后。数组内部的元素就又一次进行了排序
reverse()颠倒数组中元素的顺序
pop()删除并返回数组的最后一个元素
shift()删除并返回数组的第一个元素
push()向数组的末尾加入一个元素或多个元素,并返回新的长度
<script type="text/javascript"> //创建数组对象new Array(); 指定大小创建数组new Array(size);new Array("aa","bb","cc") var arr = new Array(); arr[0]="AA"; arr[1]="BB"; arr[2]="CC"; showArr(arr); document.write("<br/>"); //注意限定数组大小的形式创建数组后,能够扩展 var arr2 = new Array(2); arr2[0]=1; arr2[1]=11; arr2[3]=111; showArr(arr2); document.write("<br/>"); /*显示: 1 11 111 */ var arr3 = new Array("aa","bb","cc"); showArr(arr3); showArr(arr2.concat(arr3));//不同类型的数组也能够组成新的数组 function showArr(arr){ for(var x in arr){ document.write(arr[x]+"<br/>") } } </script>
15、逻辑Boolean
用于检查逻辑对象是true还是false,事实上就是布尔型的封装类。
创建对象时,假设为无參数或者參数为0。-0。false,null。空字符串"",NaN。对象都是为false
參数为字符串或者其它数值,对象为true
<script type="text/javascript"> //下面输出所有为false document.write("无參数:"+new Boolean()+"<br/>"); document.write("參数为0:"+new Boolean(0)+"<br/>"); document.write("參数为-0:"+new Boolean(-0)+"<br/>"); document.write("參数为null:"+new Boolean(null)+"<br/>"); document.write("參数为false:"+new Boolean(false)+"<br/>"); document.write("參数为空字符串\"\":"+new Boolean("")+"<br/>"); document.write("參数为NaN:"+new Boolean(NaN)+"<br/>"); document.write("參数为空字符串\"\":"+new Boolean("")+"<br/>"); //下面输出为true document.write("參数为空字符串\"false\":"+new Boolean("false")+"<br/>"); document.write("參数为1:"+new Boolean(1)+"<br/>"); </script>
16、算数Math
Math不能创建对象。直接使用其属性和方法,进行算数任务。
Math有8中属性,自然对数的底数E,圆周率PI。ln2,以及其它的算数中经经常使用到的常量
<script type="text/javascript"> document.write("e:"+Math.E+"<br/>"); document.write("PI:"+Math.PI+"<br/>"); document.write("ln2:"+Math.LN2+"<br/>"); document.write("ln10:"+Math.LN10+"<br/>"); document.write("log2e:"+Math.LOG2E+"<br/>"); document.write("log10e:"+Math.LOG10E+"<br/>"); document.write("sqrt2:"+Math.SQRT2+"<br/>"); document.write("根号2的倒数 sqrt1_2:"+Math.SQRT1_2+"<br/>"); </script> </head>Math的方法有非常多:
abs(x)绝对值
min(x,y)和max(x,y)大小值
pow(x,y) x的y次幂
exp(x) e的x次指数
random() 返回0-1的随机值
floor(x), ceil(x), round(x) 不同的舍入方法,都是返回整数
log(x) 求自然对数
sqrt(x) 求开根号
sin(x), cos(x), asin(x), acos(x)等
<script type="text/javascript"> document.write("ceil(13.6):"+Math.ceil(13.6)+"<br/>");//14 document.write("floor(13.6):"+Math.floor(13.6)+"<br/>");//13 document.write("round(13.5):"+Math.round(13.5)+"<br/>");//14 </script>
17、RegExp对象
RegExp对象用于对正則表達式的封装。在对字符串的检索中使用。
new RegExp("ee") 指定检索模式。一个字符串或者正則表達式。
RegExp有三个方法。test("string"), exec("string"), compile("str");
test方法是根据检索模式对參数字符串进行匹配。有则返回true,否则返回false
exec方法也是根据检索模式对參数字符串进行匹配,有则返回匹配的字符串,否则返回null
compile是对检索模式进行改动,又一次指定检索模式。也能够加入第二个參数
<script type="text/javascript"> //创建RegExp对象。指定检索模式。能够是一个字符串。也能够是正則表達式 var reg = new RegExp("ee"); //RegExp有三个方法:test(), exec(), compile() //test(字符串)方法匹配參数字符串中是否有符合检索模式的,有返回true。否则false document.write(reg.test("aadees"));//true //exec(字符串)也是用于推断參数字符串中是否有符合检索模式的。有返回符合的字符串。否返回null document.write(reg.exec("adsswee"));//ee //compile("检索模式")。compile()方法是用来改变前边指定的检索模式的,能够加入或删除第二个參数 reg.compile("aa"); document.write(reg.test("aabdc"));//true </script>RegExp的属性有:global(RegExp对象是否具有标志"g"),ignoreCase(RegExp对象是否具有标志"i"),lastIndex。multiline,source 详细使用待学习
能够创建RegExp对象的时候指定第二个參数,相当于对属性进行操作
另外。String对象的支持正則表達式的方法有:
search()检索与正則表達式相匹配的值,
match()找到一个或多个正則表達式的匹配,
replace()替换与正則表達式相匹配的子串,
split()将字符表达式切割成字符数组
18、浏览器对象模型BOM
除了js的String、Array、Boolean、RegExp等基本内置对象外,JS还能够结合浏览器对象模型,调用浏览器对象。
浏览器对象模型BOM(Browser Object Model)的对象为Window,代表浏览器窗体。
Window对象经常使用的属性:
Navigator :包括client浏览器的信息
Screen:包括client显示屏的信息
History:浏览器窗体訪问过的URL信息
Location:包括当前URL的信息
Document:代表Html DOM (Docunmet Object Model)
通过这些属性能够获取到关于浏览器窗体的很多其它信息。当中通过Document对象能够对Html页面进行操作。也就是Js的DOM编程。
Js在执行中事实上就在一个Window 对象的作用域下执行,对Window的属性的使用不须要window.document(也正确),而是直接能够使用document对象。
同理,警告框alert()。确认框confirm()。提示框prompt(),都是Window对象的方法,能够在Js中直接使用。
Navigator对象有多个属性,当中appName保存浏览器的类型。和appVersion存有浏览器的版本号信息
使用Navigator对象获取浏览器信息:
<script type="text/javascript"> var bName = navigator.appName; var bVersion = navigator.appVersion; document.write("Browser name:"+bName+"<br/>");//Browser name:Netscape document.write("appVersion :"+bVersion); //appVersion :5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E; GWX:QUALIFIED; rv:11.0) like Gecko document.write("version :"+parseFloat(bVersion)); //version :5 parseFloat为js的全局函数 </script>不知道为什么在360浏览器和IE上浏览器的名字都是一样的Netscape
19、HTML DOM
HTML DOM :Document Object Model for HTML 定义了一套用于代表HTML元素的对象。以及訪问和处理的方法在BOM对象中的Document对象,就是代表HTML DOM的对象,通过此对象能够实现对HTML页面的处理。即JS DOM 编程。
通过DOM,能够訪问HTML页面全部的元素。以及元素的文本和属性。能够对元素节点进行改动,删除,和插入新的元素节点。
HTML DOM 独立于平台和编程语言,js ,java都可对其操作。
详情见 Js DOM编程
20、Cookies
Cookie表示计算机浏览器中存储的一个对象,用于存储客户訪问网页时,所记录的一些选择或信息。是一种client保持的方案。
用户下一次訪问同一站点时,通过提取client浏览器中的Cookies,能够针对用户推出合适的网页。
与其相对的是Session机制。Session是一种server端保持的方案,client通过发送一个标识,server端通过标识提取相应的Session查看。这个标识
也有可能通过Cookie机制进行存储,也能够通过其它方式。
Js代码能够提取client浏览器中的Cookie对象。在Js中相应的是Document对象的cookie属性。
即通过document.cookie就能够对浏览器中的Cookie进行操作。
详细代码在实现时,不知为什么。js一直提取不出。
21、Js的经常使用功能
应该说兴许的验证、动画、图像地图、计时等都是Js常见的应用了。
1.验证
在数据被提交给server前,对HTML中的表单数据进行验证,一般验证有:
a、是否已经填写了必填项目
b、邮件地址是否合法
c、是否输入合法的日期
d、是否在数据域中输入了文本?
验证是否在填写了必填项目:
<html> <head> <meta charset="utf-8"/> <script type="text/javascript"> function validate_required(field, allerttxt){ //with(对象)的使用:为了在代码块对对象的属性进行操作更加方便。直接使用,不须要加 对象.属性 with(field){ if(value == null || value ==""){ alert(allerttxt);return false; }else{ return true; } } } function validate_form(thisform){ with(thisform){ if(validate_required(email, "Email must be filled!")==false){ //focus是控制页面的焦点,这里是把焦点定位在email地方,你会看到一个框 email.focus(); return false; } } } </script> </head> <body> <!-- 事件中return的使用方法,return起到的是对事件的控制,return false是取消事件的默认行为。return function()目的是依据函数的返回值。决定事件的行为。 假设函数返回false。那么事件的默认行为就不运行。
表单中的onsubmit事件是向submitpage.htm页面提交数据,默认行为是提交, 可是假设onsubmit="return false"。默认就不提交。 假设这里是没有return,那么事件的默认行为必须运行,无论函数的返回为true或者false --> <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>
Email格式的验证:
<html> <head> <meta charset="utf-8"/> <script type="text/javascript"> //Email格式的验证 function validate_email(field,allertxt){ with(field){ apos = value.indexOf("@"); bpos = value.indexOf("."); if(apos<1 ||bpos-apos<2){ alert(allertxt); return false; }else{ return true; } } } function validate_form(thisform){ with(thisform){ if(validate_email(email, "Not a valid email address!")==false){ //focus是控制页面的焦点,这里是把焦点定位在email地方。你会看到一个框 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>
2.动画
Js能够用来产生动态的图像,利用两个事件来驱动两个对应的函数,来切换两张图片形成动画效果。
<html> <head> <meta charset="utf-8"/> <script type="text/javascript"> function mouseover(){ document.b1.src="2.png"; } function mouseout(){ document.b1.src="2.jpg"; } </script> </head> <body> <a href="www.baidu.com"><img name="b1" alt="study!" onmouseover="mouseover()" onmouseout="mouseout()" src="2.jpg"/></a> </body> </html>
3、地图
地图主要就是解决,在鼠标放置在不同的地方时,能够依据放置位置的不同,做出不同的操作。或者显示不同的内容。
主要在html中的map标签和area标签,结合js完毕操作
<html> <head> <meta charset="utf-8"/> <script type="text/javascript"> function writeText(txt){ document.getElementById("desc").innerHTML=txt; } </script> </head> <body> <img src="eg_planets.jpg" alt="Plants" usemap="#planetmap"> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" onMouseOver="writeText('直到 20 世纪 60年代。金星一直被觉得是地球的孪生姐妹,因为金星是离我们近期的行星。同一时候还因为两者拥有非常多共同的特征。')" href ="../example/html/venus.html" target ="_blank" alt="Venus" /> <area shape="circle" coords="129,161,10" onMouseOver="writeText('从地球上是非常难研究水星的,这是因为它和太阳的距离总是非常近。')" href ="../example/html/mercur.html" target ="_blank" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" onMouseOver="writeText('太阳和相似木星这种气态行星是到眼下为止太阳系中最大的物体。')" href ="../example/html/sun.html" target ="_blank" alt="Sun" /> </map> <!--预备一个文字框,在函数调用时显示文字在此--> <p id="desc"></p> </body> </html>
4、计时
在一个设定的时间段之后运行代码,而不是调用函数之后就立马运行,成为计时事件。
使用window对象的setTimeout("Js代码",毫秒时间),在指定时间之后,运行指定的Js代码,该方法会返回一个变量,利用返回的变量和clearTimeout(变量)能够停止计时事件
点击button,5秒后显示警告框
<script type="text/javascript"> function timealert(){ var t = setTimeout("alert('5s')",5000); } </script> </head> <body> <button onclick="timealert()">Click me</button> <p>点击按钮,5秒后显示警告框</p> </body>计时器,能够点击開始与停止
<script type="text/javascript"> var c=0; var t; function timeCount(){ c=c+1; document.getElementById("text").value=c+"s"; setTimeout("timeCount()",1000); } </script> </head> <body> <input type="button" onclick="timeCount()" value="点击開始"> <input typr="text" id="text"/> <input type="button" onclick="timeCount()" value="点击结束"> </body>