javascript
用途:
javascript是一种嵌入html中的脚本语言,它弥补了html不能动态改变的不足,可以动态的创建网页,验证表单,创建cookies等。与php,python,asp,vbscript等脚本语言类似,但是后者更多是用于服务器,而jsp更多是在前台的html中。虽然jsp比较强大,但是由于与html结合在一起,比较凌乱,因此在使用起来还是有局限性。
简介:
1.jsp需要嵌套在<script></script>中;
2.jsp是大小写敏感的;
3.jsp每句话后面要有分号分割“;”
数据:
jsp是动态数据类型,意思是不需要事前定义数据类型,这点与python很像;
jsp只有一种数字类型,可以带小数点也可不带。jsp实际上使用64位的寄存器来存储数字。
八进制数前缀是0,十六进制前缀是0x;
注释:
//表示单行注释
/××/表示多行注释
变量:
变量用var来表示
对象:
jsp中几乎所有事物都是对象:字符串、数字、数组、日期、函数等;
对象就是包括数据和方法的集合体,相当于类的实例。
例如 var message="hello";
var x=message.length;
语法结构:
与c类似,包括条件,循环这里就不在赘述。
jsp中的异常用try{..}catch() throw来实现
函数:
函数可用来响应事件。
例如:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myfun(id){
id.innerHTML="hello";
}
</script>
</head>
<body>
<p onclick="myfun()">tom</p>
<body>
</html>
dom:document object modal
dom描述整个页面,通过dom可以获得其中的元素,修改或添加,删除。
<html>
<body>
<p id="p1">hello world</p>
<p id="p2">this is orignal text</p>
<script>
document.getElementById("p1").innerHTML="new text";
</script>
<body>
dom的对象是document,其方法有:
getElementById,getElementByTagName,getElementByClassName获得元素后,可以对其html的属性进行修改:
getElementById("p1").style.color="red";
如果是图像对象,可以修改图像
getElementById("p1").src="a.jpg"
或者创建:
var para=document.createElement('p');
var node=document.createTextNode('this is a node');
para.appendChild(node);
window对象:
window对象表示浏览器窗口,document是window的属性之一,比如window.document.
window对象包括screen,Location,History,Navigator,PopupAlert,Timing,Cookies;
以上对象可以不用window前缀,直接使用。
jsp library:
jsp的库包括jquery,yui-yahoo user interface framework,extjs-可定制的widget,dojo-用于dom操作,uize-widget、ajax、dom、模板等。
jquery:
用途:
jquery是为处理html事件特别设计的,以下是jquery的一些事件:
ready,click,dblclick,focus,mousemove等。通过jquery可以方便的设计jsp
jquery库包括以下功能:
html元素的选取,元素操作,css操作,事件函数,特效和动画,dom的遍历和修改,ajax,utilities。
添加jquery
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
or
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.0.min.js"></script>
基本语法:
$(selector).action
$-表示是jquery
selector-表示查询html元素,selector元素要用引号包括。元素可以是this,#元素(用id标识的元素),p等在html中已经定义的元素,.元素(样式表中的元素)
action-表示需要执行的动作。
比如hide。一般来说jquery的函数之前要调用document.ready函数,防止在文档完全加载完之前就执行jquery代码。
jquery与html
获取和设置html元素:.text-返回所选元素中的文本内容;.html-返回所选元素中的所有内容(包括标记),.val-返回或设置表单中字段的值。
$("#btn1").click(function(){
alert("text:"+$("#test").text());
});
$("#btn2").click(function(){
alert("Html:"+$("#test").html());
});
$("#btn3").click(function(){
alert("value:"+$("test").val());
});
注意上面的function括号的写法。
用上面三个函数也可以用来对元素进行设置。
添加元素:
方法有append,prepend,after,before
$("p").append("some appended test.");
删除元素:
方法有:remove,empty
css:
方法有addClass,removeClass,toggleClass,css-设置或返回样式属性;
.blue{
color:blue;
}
$("button").click(function){
$("h1,h2,p").addClass("blue");
};
遍历:
遍历的方法有parent,parents,parentsUntil,children,find,
siblings,next,nextAll,nextUtil,prev,preAll,preUntil
first,last,eq
例子:
$("span").parent();//return direct parent
$("span").partnts();//return all span parents
$("span").children();//return dircet children
$("div").find("span");//return all childrens with name span of div
ajax:asynchronous javascript and xml
用途是在不重载页面的情况下,与后台交互少量的数据,以达到快速形成动态页面的目的;
ajax介绍:
ajax的基础是XMLHttpRequest,其基本的应用是request,reponse。
通过request和reponse与服务器交换数据,对于ie5,ie6采用的是activex实现,现代的浏览器都支持xmlhttprequest
例子:
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.xmlhttp");
}
xmlhttp.open("GET","demo.asp",true);//open语法(method,url,syn);method:get,post;syn-true,false
xmlhttp.send();
var rep;
rep=xmlhttp.reponseText;
or if reponse is a xml
rep=xmlhttp.reponseXML;
function state_Change(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
//200 is ok
document.getElementById('t1').innerHTML=xmlhttp.responseText;
}
else{
alert(Problen retrieving xml data);
}
}
}
jquery中ajax方法有load,post,get
<html>
<head>
<script src="jquery.js">
$(document).ready(function(){
$("#btn1").click(function(){
$("#p1").load("demo.txt");//load(url,data,callback);callback参数(reponse,status,xmlhttprequest)
)};
$("#btn2").click(function(){
$.post("demo.asp",{name:"john",age:"24"},function(data,status){//post语法:post(url,data,callback);callback参数:reposne,status
alert(data);
});
});
$("#btn3").click(function(){
$.get("demo.asp",function(data,status){//get语法:get(url,callback);callback参数:reponse,status
alert(data);
});
});
)};
</head>
<body>
<div id='div1'>
<p id="p1">test</p1>
</div>
<br/>
<button id="btn1">click me</button><br/>
<button id="btn2">click me</button><br/>
<button id="btn3">click me</button><br/>
</body>
</html>
json:javascript object notation
是一种轻量级的文本交换格式,独立于语言,自我描述,更容易理解。
json的后缀名是json,在文件中的类型是mime=application/json
json采用名称/值构成
对象用大括号{}
数组用中括号[]
数据由逗号分开
example
var employees=[
{"name":"john","age":24},
...
]
employees[0].age=...//visit employees
dhml
dhml是html与css,javascript的结合,共同构成了动态页面。
e4x
javascript的正式标准是ECMAScript;
ecma是欧洲计算机协会
e4x是支持xml的ECMSScript,通过e4x可以方便的创建javascript对象;
xml对象
<note>
<from>john</form>
<to>tom</to>
</note>
var x=new XML(note);