JSP学习

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);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值