JSP学习

来源：互联网发布：js正则表达式匹配括号编辑：程序博客网时间：2024/06/01 15:17

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描述整个页面，通过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$-表示是jqueryselector-表示查询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,falsexmlhttp.send();var rep;rep=xmlhttp.reponseText;or if reponse is a xmlrep=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);

0 0