一、什么是JavaScript
JavaScript世界上最流行的腳本語言
一個合格的后端人員，必須精通JavaScript
二、快速入門
2.1、引入JavaScript
-
內部引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> alert('hello,JavaScript'); </script> </head> <body> </body> </html> -
外部引入
alert('hello,JavaScript');<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://www.cnblogs.com/Alaskaboo/p/js/1.第一個JavaScript.js"/> </head> <body> </body> </html>
2.2、基本語法
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 1.定義變數 變數型別 變數名 = 變數值；
var num = 80;
// alert(num);
// 2. 條件陳述句
if (num>70&&num<=100){
alert("70~100");
}else if(num>60&&num<=70){
alert("60~70");
}else{
alert("other");
}
</script>
</head>
<body>
</body>
</html>
2.3、資料型別
number數
js不區分小數和整數，Number
123//整數123
123.1//浮點數123.1
1.123e3//科學計數法
-99//負數
NaN // not a number信用證不是數字
Infinity //表示無限大
字串
'abc' "abc"
布林值
true , false
邏輯運算
&& 兩個都為真，結果為真
|| 一個為真，結果為真
! 真即假，假即真
比較運算子！！！重要！
=
==等于（型別不一樣，值一樣，也會判斷為true)
===絕對等于(型別一樣,值一樣，結果true)
浮點數問題
避免使用浮點數進行運算，存在精度的問題
Math.abs(1/3-(1-2/3))<0.00000001
null和undefined
- null空
- undefined未定義
陣列
Java一些列相同型別的物件 ~，JS中不需要這樣!
var arr = [1,2,3,4,5, 'he11o',nu11,true]
2.4、嚴格檢查模式
'use strict'
區域變數建議都用let去定義
三、資料型別
3.1、字串
1、多行字串撰寫
var msg = `hello
你好呀
world
`
2、模板字串
'use strict';
let name = '小菜';
let msg = `你好呀，${name}`;
alert(msg);
3、substring
[)
str.substring(1)//從第一個字串截取到最后一個字串
str.substring[1，3)//從第一個字串截取到第三個字串，前面可以取到
3.2、陣列
Array可以包含任意的陣列型別
var arr = [1,2,3,4,5]
1、長度
arr.length
注意：加入給arr.length賦值，陣列大小就會發生變化~，如果賦值過小，元素就會丟失
2、indexOf，通過下標索引
3、slice（）截取Array的一部分，回傳一個新的陣列
4、push，pop
push//往陣列最后面加入值
pop//往尾部剔除值
5、unshift() shift
unshift//往陣列頭部加入值
shift//往頭部剔除值
6、排序
str.sort()
7、原數反轉
str.reverse()
8、拼接concat()
str.concat([1,2,3])//生成一個新陣列
9、連接符join
["c"，"B"，"A"]
arr.join('-')
"C-B-A"
3.3、物件
var person = {
name: "kuangsnen",
age: 3,
emai1: "[email protected]",
score: 0
}
Js中物件，{..…}表示一個物件，鍵值對描述屬性xxxx: xxxx，多個屬性之間使用逗號隔開，最后一個屬性不加逗號!
1、物件賦值
person.name = "qinjiang"
>"qinjiang"
person.name
>"qinjiang"
2、使用一個不存在的物件屬性，不會報錯！undefined
person.haha
undefined
3、動態的刪減屬性
delete person. name
true
person
4、動態的添加，直接給新的屬性添加值即可
person. haha = "haha"
"haha"
person
5、判斷屬性值是否在這個物件中!xxx in xxx!
'age' in person
true
//繼承
'tostring' in person
true
6、判斷一個屬性是否是這個物件自身擁有的hasOwnProperty()
person. hasownProperty('tostring')
false
person.hasownProperty( 'age')
true
3.4、流程控制
if
while
for
do...while
3.5、Map和Set
ES6新特性
map:
//Es6 Map
//學生的成績，學生的名字
// var names = ["tom" , "jack" , "haha"];
// var scores = [100, 90,80];
var map = new Map([[ 'tom' ,100],[ 'jack ' ,90], [ 'haha',80]]);
var name = map.get('tom');//通過key獲得value
map.set('admin',123456)//新增或修改
map.delete("tom")
Set：無序不重復的集合
var set = new Set([3,1,1,1]);//set去重
set.add(2);//添加set.delete(1);//洗掉
console.log(set.has (3));//是否包含某個元素
3.6、iterator
迭代Map和Set
遍歷map：var x of map
var map = new Map([[ "tom" ,100],["jack",90], [ "haha",80]]);
for ( let x of map){
console.log(x)
}
遍歷set
var set = new set([5,6,7]);
for (let x of set) {
console. log(x)
}
四、函式及面向物件
4.1、函式定義及變數作用域
絕對值函式
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦執行到return代表函式結束，回傳結果!
如果沒有執行return，函式執行完也會回傳結果，結果就是undefined
4.2、變數的作用域
區域函式：
這個是在JavaScript建立之初就存在的特性，養成規范:所有的變數定義都放在函式的頭部，不要亂放，便于代碼維護;
全部變數：
都可以使用
規范
如果內外函式重名，由內向外查找
由于我們所有的全域變數都會系結到我們的window上，如果不同的js檔案，使用了相同的全域變數，沖突~>如果能夠減少沖突?
//唯一全域變數
var KuangApp = {};
//定義全域變數
KuangApp.name = 'kuangshen ';
KuangApp.add = function (a,b) {
return a + b;
}
把自己的代碼全部放入自己定義的唯一空間名字中，降低全域命名沖突的問題~
區域作用域 let
function aa(){
for(var i = 0;i < 100; i++){
console.log(i)
}
console.log(i+1)
}
解決問題：
function aa(){
for(let i = 0;i < 100; i++){
console.log(i)
}
console.log(i+1)
}
建議let
常量 const
定義一個常量用const來定義，例如：const PI='3.14';
const PI='3.14';
4.3、方法
方法就是把函式放在物件的里面，物件只有兩個東西:屬性和方法
let Aaron = {
name: '小菜',
birth: 2001,
age: function () {
let nowAge = new Date().getFullYear();
return (nowAge - this.birth);
}
}
//屬性
Aaron.name
//方法,帶括號
Aaron.age()
Apply應用
通過使用apply，改變this的指代
function getAge() {
let nowAge = new Date().getFullYear();
return (nowAge - this.birth);
}
let Aaron = {
name: '小菜',
birth: 2001,
age:getAge
}
getAge.apply(Aaron,[])
五、常用物件
標準物件
5.1、Date
console.log(now)
5.2、JSON
早期，所有資料傳輸習慣使用XML檔案!
- JSON(JavaScript Object Notation,JS物件簡譜)是一種輕量級的資料交換格式，
- 簡潔和清晰的層次結構使得JSON成為理想的資料交換語言，
- 易于人閱讀和撰寫，同時也易于機器決議和生成，并有效地提升網路傳輸效率，
在JavaScript一切皆為物件、任何js支持的型別都可以用SON來表示; number，string...
格式：
- 物件都用{}
- 陣列都用[]
- 所有的鍵值對都是用 key : value
let user = {
name: "Aaron",
age: 21,
sex: '男'
};
//物件轉化為json字串{"name":"Aaron","age":21,"sex":"男"}
let jsonUser = JSON.stringify(user);
let obj = JSON.parse(jsonUser);
結果
console.log(user)
VM62:1 {name: 'Aaron', age: 21, sex: '男'}
undefined
console.log(jsonUser)
VM110:1 {"name":"Aaron","age":21,"sex":"男"}
六、面向物件編程
class繼承
class關鍵字，ES6引入的
1、定義一個類，屬性方法
class Student{
constructor(name){
this.name = name;
}
hello(){
alert('hello')
}
}
class pupil extends Student{
constructor(name,grade){
super(name);
this.grade = grade;
}
myGrade(){
alert('我是一名小學生')
}
}
var xiaoming = new Student("xiaoming");
本質：看原型
七、操作Bom物件（重點）
document代表當前的頁面，HTML DOM檔案樹
document.title
"百度一下，你就知道"
document.title='狂神說'
"狂神說"
獲取具體的檔案樹節點
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>javaEE</dd>
</dl>
<script>
var dl = document. getElementById( 'app ' );
</script>
劫持cookie原理
服務器可以設定cookie：httpOnly來防止被劫持
history瀏覽器的歷史記錄
history.back//后退
history.forward//前進
7.1、操作Dom物件
核心
瀏覽器網頁就是一個Dom樹形結構!
- 更新：更新Dom節點
- 遍歷dom節點:得到Dom節點
- 洗掉：洗掉一個Dom節點
- 添加：添加一個新的節點
- 要操作一個Dom節點，就必須要先獲得這個Dom節點
獲得dom節點
<div id="father">
<h1>標題一</h1>
<p id="p1">p1</p>
<p >p2</p>
</div>
<script>
//對應css選擇器
var h1 = document.getElementsByTagName( ' h1' );
var p1 = document.getElementById( 'p1' );
var p2 = document.getElementsByclassName( 'p2 ' ) ;
var father = document.getElementById( 'father' );
var childrens = father.children;//獲取父節點下的所有子節點
后期jQuery代替
7.2、更新Dom
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id');
</script>
操作文本：
- id1.innerText='456' 修改文本的值
- id1.innerHTML='123' 可以決議HTML文本標簽
操作JS
id1.style.color = 'yellow';
id1.style.fontSize = '20px';
id1.style.padding = '2em';
7.3、洗掉Dom
洗掉節點的步驟：
先獲取父節點，再通過父節點洗掉自己
<div id="father">
<h1>標題一</h1>
<p id="p1">p1</p>
<p >p2</p>
</div>
<script>
var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(self)
//洗掉是一個動態的程序;
father.removechi1d(father.chi7dren[0])
father.removechild(father.children[1])
father.removechild(father.children[2])
</script>
注意：洗掉多個節點的時候，children是在時刻變化的，洗掉節點的時候一定要注意！
7.4、插入Dom節點
追加
<p id="js">javascript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me ">avaME</p>
</div>
<script>
var js = document.getElementById( 'js ');
var list = document.getElementById( ' list' );
list.appendchild(js);
</script>
創建一個新的標簽
<script>
var js = document.getElementBy1d('js');//已經存在的節點
var list = document.getElementById('list');
//通過js 創建一個新的節點
var newP = document.createElement('p');//創建一個p標簽
newP.id = 'newP' ;
newP.innerText = 'He11o,Kuangshen';
//創建一個標簽節點(通過這個屬性，可以設定任意的值)
var myscript = document.createElement('script');
myscript.setAttribute( 'type' , 'text/javascript')
</script>
八、操作表單（驗證）
8.1、表單
表單是什么form DOM樹
- 文本框 text
- 下拉框 < select>
- 單選框 radio
- 多選框 checkbox
- 隱藏域 hidden
- 密碼框 password
目的：提交資訊
8.2、提交表單(加密演算法)
普通演算法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--MD5工具類-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="https://www.baidu.com/" method="post" onsubmit="return a()">
<p>
<span>用戶名:</span> <input type="text" id="username" name="username">
</p>
<p>
<span>密碼:</span> <input type="password" id="input_password">
</p>
<input type="hidden" id="md5_password" name="password">
<!--系結事件-->
<button type="submit">提交</button>
</form>
<script>
function a() {
alert(1);
var username = document.getElementById('username');
var password = document.getElementById('input_password');
var md5_password = document.getElementById('md5_password');
//console.log(username.value);
password.value = https://www.cnblogs.com/Alaskaboo/p/md5(password.value);
//MD5 演算法
md5_password.value = md5(password.value);
//console.log(md5_password.value);
return true;
}
</script>