JavaScript详说
一:JavaScript概述:
首先JavaScript是一种脚本语言。我们平时在做网站的时候,前端使用HTML和CSS样式,后台可能用PHP或者是JSP......,那么JavaScript是负责什么呢?她可以修改HTML代码(改善用户体验)、可以在不刷新页面的情况下与服务器进行交互、还可以存储数据。 前面我们说到的改善用户体验这一块,JavaScript更是有JQuery库,对于页面美化效果更是一件让人津津乐道的事情(我们暂且先不谈论JQuery)。
二:JavaScript如何写?写在哪?
JavaScript如何写:和面向对象语言Java相似,JavaScript也有函数(方法)、变量、条件、循环语句......
写在哪:和CSS样式表相似。JavaScript可以有:内联脚本代码、嵌入式脚本代码、外联时代码。 他们的优先级是:内联>嵌入>外联。
三:JavaScrip对DOM元素的操作:
四:JavaScript对DOM元素的定位:
五:JavaScript处理DOM元素中的属性节点:
六:JavaScript处理文本节点可以使用innerHTML="";的方法
对上面的小结(代码),下面做的案例是,在一个div中动态的创建一个元素,并且写上Text文本,最后添加属性,并且运用css样式修饰该节点:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
//页面准备完成便新建一个元素
window.onload=function(){
//在对DOM元素的操作时,不管是,新建一个元素还是删除一个元素,
//一定要建立在其父节点的基础上
var target=document.getElementById("div1");
//新建一个<p>元素
var newDom=document.createElement("p");
//新建一个文本元素
var newText=document.createTextNode("这是新的DOM元素");
//将文本元素添加到DOM元素中
newDom.appendChild(newText);
//将新建的DOM元素添加到父节点中
target.appendChild(newDom);
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
七:HTML中节点之间的关系,以及常用操作节点的方法:
八:JavaScript有很多常用的数据类型,这里和Java是一样的,我说一下关于数组:
(有一点需要着重说的是:JavaScript中没有int,boolean...因为JavaScript对于变量的是弱类型的,只要关键字var声明该变量就好。这样做有好处也有坏处:坏处就是,在后期维护代码的时候,有时候不太知道这个变量到底装的是什么呢;优点就是,声明变量变得更加的方便)
1、Java中的数组定义:String[] str=new String[]{"张三",“李四","王五"};
JavaScript中数组的定义:var str=["张三",“李四","王五"];
2、下面在代码中说明数组中各个方法的作用: (下面使用了join、slice、pop、concat、shift、unshift方法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
//定义两个一维数组
var str1=["Tim","Peter","Json"];
var str2=["SSH","Java","Ajax"];
//输出Tim,Peter,Json
alert(str1);
//使用join方法
//输出Tim Peter Json(将都好换成了空格)
alert(str1.join(" "));
//使用Slice方法,作用,选取slice(index,index2),下标为index到index2的数据,包括
//index不包括index2,其中第二个参数省略代表,一直到最后,包括输出最后一个
//下面这句话输出:Peter
alert(str1.slice(1,2));
//shift和unshift使用
//输出:删除对头元素:Time ,原数组变成了:Peter,Json
alert("删除对头元素:"+str1.shift()+" ,原数组变成了:"+str1);
//输出 3 Annay,Peter,Json
alert("给str1添加一个对头:"+str1.unshift("Annay")+" ,原数组变成了:"+str1);
//输出:Json Annay,Peter
alert("移除str1最后一个元素:"+str1.pop()+",原数组变成了:"+str1);
//使用concat拼接两个数组 输出Annay,Peter,SSH,Java,Ajax
alert(str1.concat(str2));
</script>
</head>
<body>
</body>
</html>
九:JavaScript中灵活的对象(比Java中的对象灵活的多):
为什么说‘灵活’,这是因为:JavaScript中的对象里面可以存放任意类型的数据,布尔类型,字符串类型,数组类型,甚至是一个函数。最后在脚本中,如果想要访问对象里面的数据,可以直接通过对象名称.数据前面的key即可。
十:网络存储数据:
1、首先必须要说的是,我们看到网络存储数据,大家很可能会想到使用cookies技术,事实上,cookies这项技术非常的不安全。使用cookies保存一些用户隐私信息是绝对不推荐的;
2、现在很多浏览器支持用户关闭cookies的方式,如果Web开发中还涉及了cookies这门技术,那样的话还能实现功能的话就是无稽之谈了。
3、可以使用localStorage和sessionStorage来替代cookies存储,下面展示一下,localStorage的用法,贴上代码:
//存入一条数据
localStorage.setItem("name","Tim");
//输出Time
alert(localStorage.getItem("name"));
localStorage.removeItem("name");
//输出null
alert(localStorage.getItem("name"));
十一:JavaScript中几个函数的区别:(匿名函数、回调函数、普通函数):
1、普通函数:关键字function来标识,要有一个函数名称(和匿名函数最大的区别),还有一对大括号包裹上一些语句,便是普通函数了。
2、回调函数:回调函数也非常的好理解,就是一个函数,在另一个函数中被触发调用便是回调函数了。
3、匿名函数:首先我们要对变量的作用域有所了解(全局变量和局部变量就是一个范例),匿名函数,他也是一种函数,只不过没有函数名称而已,因为没有名称所以不能靠调用,所以匿名函数建立之后,函数里面的语句会自动执行。那么,你是否在想,既然有那么大的局限,JavaScript还要引入匿名函数有什么作用呢:问的好。我再开头处已经暗示了。加入你有一些变量,不在其他普通函数中,但又不想让他成为全局变量,那么这个时候最好的方式就是将变量放在匿名函数中了。
十二:JavaScript中事件监听器:
步骤1:首先得到某一个元素的节点;
步骤2:通过if判断,当前客户使用的浏览器是否支持addEventListener,如果支持,那么通过得到的DOM元素.addEventListener("事件","匿名函数",false/true)如果当前客户端不支持addEventListener则使用attachEvent("事件","匿名函数");
步骤3:使用完毕之后,可以解除该事件监听,这和步骤2有点相似。首先,通过该DOM元素,在if中判断.removeEventListener("事件","匿名函数",false/true),如果不存在,那么则使用detachEvent("事件","匿名函数")来解除事件。
十三:JavaScript中有很多事件处理,分为几类:键盘处理事件,焦点处理事件,鼠标处理事件和数据改变事件。这里比较可以查看W3C来学习一下,JavaScript中的事件。
十四:终于讲到了一个重点内容:Ajax(异步通信)。她的作用非常多。最让人着迷的就是她的响应机制。 无刷新,更新页面。
既然,Ajax可以在无刷新的可以和服务器通信,那么首先了解一下,正常情况下,客户端是如何和服务器通信的呢?请看图片:
看一下我绘的X-Mind,对Ajax开发流程图:
看完上面的理论知识,现在,耐心的结合理论,看完我下面给出的案例。你一定会高清Ajax的来龙去脉。
下面贴上一个简单的实例吧:
功能介绍:利用Ajax完成客户上传图片的实时预览。
首先,先给出前端代码(不要着急,我会在重要的地方都加上注释):
/*
前台所做的事情:首先先创建一个表单,在表单上,首先出现一个空白头像的图片,但客户点击浏览完图像之后,Ajax大显神威,将input框中的value取到,后然进行正则表达式将‘\’换成‘/’(因为JavaScript中没有replaceAll方法,想要全部替换只能使用正则表达式和replace方法替换全部),Ajax将数据发送给后台,后台进行处理之后,将地址返回给Ajax,最后,Ajax拿到服务器响应之后,动态的创建一个img元素,将服务器返回的地址传入,这样,客户刚刚浏览的图片就可以异步无刷新的情况下展示出。(不要忘了让起初的那张空白头像hidden吧)。
*/
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.displayElement{
display:hidden;
}
.newStyle{
position:absolute;
top:0px;
left:5px;
}
</style>
<script type="text/javascript">
//声明一个XMLHttpRequest对象(注意浏览器版本)
var XMLHttp;
function getHttpObject(){
if(window.XMLHttpRequest){
XMLHttp=new XMLHttpRequest();
}else{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return XMLHttp;
}
//这是<input type="file" onchange="finish()">
function finish(){
var targetValue=document.getElementById("input1").value;
if(targetValue!==""){
//在这一步中获取数据
//tomcat对URL 中的中文不认识
var newValue;
//JS中没有replaceAll的方法,所以,必须使用真则表达式和raplace连用,才可以全部替换
newValue=targetValue.replace(new RegExp("\\\\",'gm'),"/");
document.getElementById("p1").innerHTML="地址为:"+targetValue;
//这是服务器端地址,这里我们使用的是Get请求方式,因此,KeyWord要拼接在URL中
var url="http://localhost:8080/Project-ajax-02/PicPath?KeyWord="+newValue;
//调用getHttpObject方法,得到XMLHttpRequest对象
XMLHttp=getHttpObject();
//打开与服务器的链接
XMLHttp.open("GET",url,true);
//因为使用的是Get方式,所以,参数都已经拼装在了URL中,所以这个地方的send中不需要再
//发送参数了。加入我们使用的是POST方式,那么这个地方还要注意的是,我们必须要写一个
//setRequestsHeader();方法了。
XMLHttp.send(null);
//在对服务器连接进行监听,并且写上一个回调函数。注意,这个地方是将callback整个函数赋值
//给XMLHttp.onreadystatechange,所以callback函数,不要加上‘()’了。
XMLHttp.onreadystatechange=callback;
}
}
function callback(){
if(XMLHttp.readyState==4 && XMLHttp.status==200){
//先让一开始页面上的空白头像隐藏
document.getElementById("noPic").className="displayElement";
//动态的生成一个图片节点
var img=document.createElement("img");
img.setAttribute("width",100);
img.setAttribute("height",100);
//新创建的节点,所需要的样式
img.className="newStyle";
//使用responseText方法,得到服务器传递来的地址,然后通过setAttribute方法,将src放入节点中
img.setAttribute("src",XMLHttp.responseText);
var body=document.getElementsByTagName("body")[0];
//将新产生的节点放入父节点中,就可以展示了
body.appendChild(img);
}
}
</script>
</head>
<body>
<img id="noPic" alt="" width="100" height="100" src="picture/empty.png"><br/>
<form action="" enctype="multipart/form-data">
头像:<input type="file" id="input1" name="file" onchange="finish(this)"><br>
姓名:<input type="text" name="name1">
<input type="submit" value="提交">
</form>
<p id="p1"></p>
</body>
</html>
其次,给出后台代码:
/*
相比刚刚的前台,后台的代码就简单了很多,只要将Ajax传递的数据,传递给Ajax就行。
*/
package njcc.action;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/PicPath")
public class GetPic extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
String keyWord=req.getParameter("KeyWord");
if(keyWord!=null && !keyWord.equals("")){
resp.getWriter().write(keyWord);
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
super.doGet(req, resp);
}
}
最后,让我们运行项目,查看结果吧:
这样的例子还有很多,比如说,实现百度中的查找框,你可以把所有的关键字封装成JSON数据,放在后台,前台呢,随着搜索框使用AJax,不断的和后台交互,最终实现,百度搜索框的功能,快动手试试看吧~