JavaScript是一種弱類型，直譯式腳本語言，主要用于向HTML頁面添加動態交互行為，它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，Js支持跨平臺使用。
JavaScript組成
1.ECMAScript（核心）
規定了該語言的語法和基本對象
2.DOM（文檔對象模型）
包含整個Html頁面的內容，規定處理網頁內容的方法和接口。
3.BOM（瀏覽器對象模型）
包含整個瀏覽器相關的內容，規定與瀏覽器交互的方法和接口。
應用場景
1.讀寫HTML元素
2.控制Cookies，包括創建和修改等
3.對瀏覽器事件做出響應
4.檢測訪客的瀏覽器信息，對瀏覽器事件做出響應
5.基于Node.js技術進行服務器端編程
Js基本使用
1.Js引入
可以在<html>標簽中，任何地方添加<script></script>標簽，標簽中內容就是js代碼。
雖然可以放在頁面的任何地方，但是規范放在<head>標簽中。
<html>
<head>
<title>Demo</title>
1.直接引入
<script type="text/javascript">
alert("Demo")
</script>
2.單獨使用一個文件來編寫javascript代碼,在需要使用的頁面中引入該文件
<script src="demo.js" type="text/javascript"/>
</head>
<body>
3.把代碼編寫放置在a標簽的href屬性中,點擊a標簽的時候,就執行里面代碼
<a href="javascript:alert('測試')">點擊</a>
</body>
</html>
2.Js基本語法
1.變量和常常量
Js區分大小寫，弱類型。
每行結尾的分號可有可無，但是建議都寫。
1.變量聲明的關鍵字：var
var userName;
Js定義變量無需指定類型，任何類型都使用var聲明，var類似java中的Object類型。
變量打印
alert(內容);
console.debug(內容)
2.Js的基本數據類型和常量
整型常量：10進制，8進制，16進制
實型常量：12.32，5E7，4e5
Boolean：true，false
String字符串
注意：Js沒用char類型，所以'a'也是一個字符串
字符串中的特殊字符，需要以反斜杠(\)后跟一個普通字符來表示。
null：表示引用任何的內容空間
undefined：未定義，定義未賦值
3.Js運算符和Java相同
注意
= ：賦值
== ：用來比較變量或常量的內容，不管數據類型
===：比較數據類型和內容，若數據類型相同，且內容相同返回true
2.函數定義
4.函數定義
函數調用時才會執行，將腳本編寫為函數，就可以避免頁面載入時執行該腳本。
1.定義函數
<script type="text/javascript">
function demo(){
console.debug("打印到控制臺");
}
demo(); //調用
</script>
2.帶參數和返回值
<script type="text/javascript">
function demo(a, b) {
return a + b;
}
var res = demo(1, 1);
console.debug(res);
</script>
3.匿名函數
在定義函數的時候，沒有定義函數名稱
此時，可以把函數當作是一個變量賦值
<script type="text/javascript">
var res = function (a, b) {
return a + b;
}
console.debug(res(1,1));
</script>
3.Js構建類
js創建一個類，只需要定義類的構造方法
this關鍵字
1.在構造方法中：this指新創建的對象
2.在方法中：誰調用this所在的方法，this就是誰
<head>
<title>Demo</title>
<script type="text/javascript">
function User() {
this.name;
this.age;
this.info = function () {
console.debug(this.name+"："+this.age);
}
}
var user = new User();
user.name = "演示";
user.age = 18;
user.info();
</script>
</head>
4.for in
作用
1.遍歷數組里所有的數組元素的索引
2.遍歷Js對象的所有屬性
<head>
<title>Demo</title>
<script type="text/javascript">
function User() {
this.name = "演示";
this.age = 18;
this.info = function () {
printf(this.name+"："+this.age);
}
}
function printf(p) {
console.debug(p);
}
var user = new User();
for (var item in user){
printf("打印屬性名："+ item);
printf("打印屬性值："+ user[item])
}
</script>
</head>
補充
eval()：將參數字符串作為一個JavaScript表達式執行。
效果
5.數組
Js中的數組類似于Java中的ArrayList
聲明
var arr = [ "數據1", "數據2" ];
/*
* arr.splice(start, deletecount, items)
* 從哪個索引開始操作
* 操作元素的個數
* 要改變的元素結果
*/
<head>
<title>Demo</title>
<script type="text/javascript">
var arr = ["data1","data2"];
arr.splice(1,1); //刪除元素
arr.splice(1,2,"添加元素");
arr.splice(0,1,"修改元素");
for(var item in arr){
console.debug(arr[item])
}
</script>
</head>
| 方法 | 作用 |
|---|---|
| arr.length | 獲取數組長度 |
| arr.unshift(values); | 在前面追加元素 |
| arr.pop(); | 刪除最有一個元素 |
| arr.shift(); | 移除第一個元素 |
| arr.sort(funct); | 數組排序 |
| arr.reverse(); | 顛倒數據中的元素順序 |
| arr.join(seperator) | 數組轉換成字符串 |
| arr.splice(start, deletecount, items) | 截取字符串 |
6.Js原型
原型即得到對象的時，已經有自定義的方法
關鍵字prototype
Array.prototype.setFunc = function(){
console.debug("");
}
var arr = [];
//調用
arr.setFunc();
BOM，DOM
1.BOM（瀏覽器對象模型）
瀏覽器對象模型，包含整個瀏覽器相關的內容
瀏覽器對象模型
Window
setTimeout(code,time):指定多少秒后執行
setInterval(code,time):指定每隔多少秒執行一次
clearTimeout(code):清除定時器
clearInterval():清除定時器
彈窗：confirm("確認刪除");
2.DOM（文檔對象模型）
Document
每個載入瀏覽器的HTML文檔，都會成為Document對象，通過Document對象，可以訪問HTML頁面中所有的元素。
事件
onsubmit="寫在form標簽中，必須有返回值"
onload="此事件只能寫一次并且放到body標簽中"
onfocus="獲取焦點"
onblur="失去焦點"
onmouseover="鼠標經過"
onmouseout="鼠標離開"
獲取元素
document.getElementById("id")
獲取元素里面的值
document.getElementById("id").value
向頁面輸出
彈窗：alert();
向瀏覽器中寫入內容：document.write(內容)；
向頁面指定位置寫入內容：innerHTML
document.forms：獲取HTML中所有表單元素
document.forms[0]：通過索引指定獲取HTML中指定的表單
document.links：獲取HTML中所有鏈接對象
document.writeln("向頁面輸出數據");
根據Id or Name獲取操作的元素
document.getElementById("user")
document.getElementsByName("user")
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script type="text/javascript">
//當文檔加載完后，執行
window.onload = function (){
console.debug(document.forms[0]);
console.debug(document.forms);
console.debug(document.links)
}
function getContent() {
var userName = document.getElementById("user").value;
console.debug("獲取內容：" + userName);
}
</script>
</head>
<body>
<form action="#" method="get">
<input type="text" id="user" name="name" placeholder="用戶名" >
<input type="button" onclick="getContent()" value="獲取">
</form>
</body>
</html>
案例
1.前臺校驗
當用戶輸入的數據不符合要求時，不提交表單。
思路
通過onsubmit()事件，控制表單提交。
onsubmit() 需要在定義函數的時候給出一個返回值。
return false時表單不能提交。
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script type="text/javascript">
function checkInfo() {
var userName = document.getElementById("user").value;
if(userName != "demo"){
alert("請輸入demo");
return false;
}
}
</script>
</head>
<body>
<form action="#" method="get" onsubmit="checkInfo()">
<input type="text" id="user" name="name" placeholder="用戶名">
<input type="submit" value="提交">
</form>
</body>
</html>
2.替換圖片/輪播
當網頁加載完成時，圖片開始輪播
頁面加載完成事件onload()，此事件只能寫一次并且放到body標簽中
思路
1.輪播的圖片前綴名稱相同，僅標識的數字不同
img1，img2...
2.開啟定時器，不斷調用圖片切換方法
window.setInterval(code,time)
參數：開啟函數，切換時間，setInterval有返回值，用于清除定時器。
<html>
<head>
<title>Demo</title>
<script type="text/javascript">
var i = 1;
function toggleImg() {
i++;
if(i == 4){
i = 1;
}
document.getElementById("img").src="img/img"+ i +".jpg";
}
//頁面加載后調用
function init() {
//定時器
var code = window.setInterval("toggleImg()",2000);
// window.clearInterval(code);
}
</script>
</head>
<body onload="init()">
<img id="img" src="img/img1.jpg">
<br/>
<input type="button" onclick="toggleImg()" value="下一張">
</body>
</html>
Json（JavaScript Object Notation)
JSON是JavaScript原生格式，是一種簡單的數據格式，比XML更輕巧，易于閱讀和編寫，也易于機器解析和生成。
JSON規則
一個對象以"( { "開始，以" }) "結束，()可以省略不寫。
對象是一個無序的 " 名稱:值 " 集合。
多個" 名稱:值 " 之間用" , "分隔。
并列數據的集合，用("[]")表示。
[
{名稱1:值1,名稱2:值2}
{名稱1:值1,名稱2:值2}
]
元素值可具有的類型：string,number,object,array,true,false,null
<head>
<title>Demo</title>
<script type="text/javascript">
var user = [
{
name:"user1",
age:18,
hobby:["Java","Android"],
data:{
other:"Other"
}
},
{
name:"user2",
age:18,
hobby:["Web","C"],
data:{
other:"Other"
}
}
]
console.debug(user[0].hobby[1])
console.debug(user[1].data.other)
</script>
</head>
補充
字符串轉換為Json
<script type="text/javascript">
var str = "({name:'demo',age:18})"
var user = eval(str);
console.debug(user);
</script>
JQuery
JQuery封裝了Js常用的功能代碼，JQuery的加載比Js的加載要快，是一個快速、簡潔的Js框架。
IDEA引入JQuery
在線引入
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
IDEA補全JQuery
基本語法
JQuery 的入口函數是在 html 所有標簽都加載之后，就會去執行。
Js的 window.onload 事件是等到所有內容，包括外部圖片之類的文件加載完后，才會執行。
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
type="text/javascript">
</script>
<script>
$(function () {
//相當于document.getElementById("btn")
$("#btn").click(function () {
alert("demo")
})
})
</script>
</head>
<body>
<input id="btn" type="button" value="Demo">
</body>
</html>
JQuery使用教程
Ajax
Ajax可以使網頁實現異步更新，是一種在無需重新加載整個網頁的情況下，更新部分網頁的技術。
Ajax的基本使用
Ajax使用JQuery的方式
1.Post方式
$.post(url, [data], [callback], [type])
url：請求路徑，可以用${pageContext.request.contextPath}獲取根路徑
data：請求參數
callback：回調函數
type：返回內容格式，默認的是text，xml，html，script，json。
2.Get方式
$.get(url, [data], [callback], [type]);
3.$.ajax(url,[settings])
url：請求路徑。
settings：AJAX 請求設置，所有選項都是可選的。
<script type="text/javascript">
function demo(){
$.ajax({
url:"/demo", //url地址
async:true, //是否異步
type:"POST", //請求方式
data:{"name":"張三","age":25},//請求參數
success:function(data){ //響應成功后的回調
alert(data.name);
},
error:function(){ //響應失敗后的回調
alert("請求失敗");
},
dataType:"json" //返回數據的類型，確定是Json還是文本(text)
});
}
</script>
案例
檢驗用戶名是否存在
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
type="text/javascript">
</script>
<script>
function checkUserName() {
$.get(
"/a",
{username: $("#username").val()},
function (data) {
$("#label").html(data);
},
"text"
);
}
</script>
</head>
<body>
<input id="username" type="text" name="username"
placeholder="用戶名">
<input type="button" value="提交" onclick="checkUserName()">
<br/>
<label id="label"></label>
</body>
</html>
public class UserBean {
private String userName;
public UserBean() {
}
public UserBean(String userName) {
this.userName = userName;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
}
public class AServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
// 獲取用戶名參數
String username = req.getParameter("username");
// 模擬查詢用戶
UserBean user = new UserBean("demo");
if (!user.getUserName().equals(username)) {
resp.getWriter().write("用戶名可用");
} else {
resp.getWriter().write("用戶名不可用");
}
}
}
