目錄
JS(JavaScript)
簡介
- JS全稱:JavaScript
- JS是面向對象的編程語言,腳本語言
- JS的組成部分
- EMAScript:ES5 ES6 基礎語法和標准性的東西
- DOM:文檔元素進行操作
- BOM:對瀏覽器進行操作
JS的變量
怎樣定義變量?
Example : var a = 10;
- var :類型修飾符
- a :變量名,需要符合命名規范
- = :賦值運算符
- 10 :初始值
- ; :代表一條語句的結束
給變量重新賦值時,不需要再加var
變量名的命名規范
- 以數字,字母,下划線,$組成,不能以數字開頭,盡量保證見名知意
- 以駝峰結構命名 personName
- 不能使用系統關鍵字
JS的基礎變量類型
JS是弱類型編程語言
Q:怎樣判斷數字類型?
A:使用"typeof(變量名);"
可以寫"alert(typeof(變量名));"使用提示框顯示,也可以寫"console.log(變量名);"使用控制台顯示。
數字類型 number
Example : var a = 10;
Example : var b = 3.1415;
JS中沒有浮點類型 帶小數點的也是number
字符串類型 string
Example : var str = "abc"
字符串拼接
var str1 = "五一";
var str2 = "節后綜合征";
var str3 = str1 + str2;
隱式類型轉換
var str5 = "10" + 10;
console.log(str5);
結果是1010
布爾值類型 boolean
Example : var flag = true;
Example : var flag = false;
布爾值只有兩個值 真和假
未定義類型 undefined
Example : var c;
空類型 null
一般對象賦初值時候使用
JS的運算符
算術運算符
通常運算符
+ - * / %
取余 % Example : var m = 10 % 3;
第一組特殊運算符
++ --
n++; n--;
var n = 3;
var x = n++;
此時得出的結果是x = 3,n = 4;
先返回再自加;
var y = ++n;
此時得出的結果是y = 4,n = 4;
先自加再返回;
但是當++n和n++單獨作為一條語句出現時,因為返回值沒有任何變量去接受,所以n++和++n是一樣的;
第二組特殊運算符
+= -= *= /=
n += 2; 相當於 n = n + 2;
邏輯運算符
與運算
與運算 &&
只有當運算符左右兩邊同為真時,與運算才為真,其余都為假;
console.log (x && y);
console.log (x && y && z);
console.log (x && z);
或運算
或運算 ||
當運算符左右兩邊有一邊為真時,或運算即為真;
console.log (x || y);
console.log (x || y || z);
console.log (x || z);
非運算
非運算 !
非運算為給!后的變量/式子取反
console.log (!x);
給本身取反:
x = !x;
比較運算符
第一組比較運算符
> < >= <= !=
第二組比較運算符
== ===
== 判斷的是數值相等
var x = "10" == 10;
這條語句返回的是true;
=== 判斷的是數值和類型都相等
var x = "10" === 10;
這條語句返回的是false;
JS的邏輯結構
請問我不寫了可以嗎
分支結構
您好 if..else可以不寫的
三元表達式
也叫三目運算符,看個例子然后if變問號else變冒號就完事了
當a > b時,c = a,否則c = b;
var c = a > b ? a : b;
循環結構
您好 while do...while 和for循環也可以不寫的
文檔寫入
這個東西是往body里添加東西用的
document.write("123");//加字
document.write("<div></div>");//加標簽
document.write("<div class='name'></div>");//加帶class的標簽
Math對象
就是math函數
π
console.log(Math.PI);
max
var max = Math.max(10,20,30,1000);
console.log(max);
min
var min = Math.min(10,20,30,1000);
console.log(min);
向上取整
console.log(Math.ceil(1.1));//2
console.log(Math.ceil(-1.1));//-1
console.log(Math.ceil(1.9));//2
向下取整
console.log(Math.floor(1.1));//1
console.log(Math.floor(-1.1));//-2
console.log(Math.floor(1.9));//1
四舍五入
console.log(Math.round(3.1));//3
console.log(Math.round(3.5));//4
取絕對值
console.log(Math.abs(-100));
次冪
console.log(Math.pow(5,2));
開方
console.log(Math.sqrt(81));
隨機數
取值范圍是[0,1)
console.log(Math.random());
公式:Math.floor(Math.random() * (max - min + 1) + min));
隨機66到99的數
console.log(Math.floor(Math.random() * (99 - 66 + 1) + 66));
這樣吧寫個11選5今天中午就買這注
for (var i = 0; i < 5; i++) {
console.log(Math.floor(Math.random() * (10 - 1 + 1) + 1));
}
但是這樣就沒寫重復判斷 回頭再改
數組
數組的創建
創建空數組
這是個一般不用的方法:
var arr = new Array();
這是個最常用的方法:字面量
var arr = [];
創建有內容的數組
這是個一般不用的方法:
var arr = new Array(1,2,3);
這是個最常用的方法:
var arr = ["zaima?","buzai"]
創建長度為n的空數組
n是個數字
var arr = new Array(n);
數組中的元素賦值和取值
用下標
arr[1],arr[2],arr[3]......
當定義一個長度為10的數組時,
arr[100] = "111";//給下標100的元素賦值
這時typeof(arr[99]) = undefined.
數組的長度
arr.length
只能獲取,不能設置,可以改變
怎樣使用數組的長度向數組末尾添加元素?
arr[arr.length] = 777;
數組的遍歷
使用for循環,循環終止的條件是i < 數組的長度
var arr = [111,222,333,444,555,666];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
數組相關練習
求數組中所有元素的和
var arr = [555,666,777,888,999];
var sum = 0;
for (var i = 0; i < arr.length; i++) {
sum = sum + arr[i];
}
console.log(sum);
隨機十個數放進數組中
這里隨機的是取值范圍66-99的十個數
var arr = [];
for (var i = 0; i < 10; i++) {
num = Math.floor(Math.random()*(99 - 66 + 1) + 66);
arr.push(num); //向數組末尾添加一個元素
}
console.log(arr);
隨機十個偶數放進數組中
這里隨機的是取值范圍66-99的十個偶數
1.使用while循環的做法
(因為不知道循環多少次才能生成十個偶數)
var arr = [];
while (arr3.length != 10) {
num = Math.floor(Math.random()*(99 - 66 + 1) + 66);
if (num % 2 == 0) {
arr.push(num);
}
}
console.log(arr);
2.使用for循環的做法
(當生成的數不是偶數時,i--退回上一個)
var arr = [];
for (var i = 0; i < 10; i++) {
num = Math.floor(Math.random()*(99 - 66 + 1) + 66);
if (num % 2 == 0) {
arr.push(num);
} else {
i--;
}
}
打印數組中最小的數和它的下標
var arr = [90,88,40,11,8];
var min = arr[1];
var index = 1;
for (var i = 0; i < arr.length; i++) {
if (arr4[i] < min) {
index = i;
min = arr4[i];
}
}
console.log(min,index);
打印十個不重復的隨機數
這個這個 非常重要
是限(xie)時(bu)的(wan)代碼
var arr = [];
while (arr.length < 10) {
var num = Math.floor(Math.random() * 10);
var flag = true;
for (var i = 0;i < arr.length;i++) {
// 如果隨機數和數組中元素相等,不用繼續比較 直接跳出循環
if (num == arr[i]) {
flag = false;
break;
}
}
if (flag) {
arr.push(num);
}
}
console.log(arr);
二維數組
就是arr[i][j]嘛
//打印arr里的數
var a = [1,2,3];
var b = [4,5,6,7];
var c = [666,888,999];
var arr = [a,b,c];
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[i].length; j++) {
console.log(arr[i][j]);
}
}
數組的方法
Example:
var arr = ["mini","甲殼蟲","凱迪拉克","雷克薩斯","奧迪","JEEP"];
在末尾添加數據
Example:arr.push("寶馬");
在開頭添加數據
Example:arr.unshift("霸道");
刪除並返回數組中最后一個元素
Example:arr.pop();
當pop對空數組進行操作時,不會對數組造成影響 返回值為undefined
var car = arr.pop();//接受刪除的元素
console.log(car);
刪除並返回數組中第一個元素
Example:arr.shift();
刪除元素
Example:arr.splice(2,3);
splice(n,m) 從下標n開始刪除m個
也可以在刪除的位置添加元素
這么寫:
arr.splice(2,3,"雪鐵龍","捷達");
連接數組
Example:arrD = arrA.concat(arrB,arrC);
var arrA = [1,2,3];
var arrB = [4,5,6];
var arrC = [7,8,9];
var arrD = arrA.concat(arrB);
arrD = arrA.concat(1000);
arrD = arrA.concat(arrB,arrC);
console.log(arrD);
console.log(arrA,arrB);
數組轉換字符串
Example:var str = arr.join();
join的括號里寫什么 字符串就是用什么連接
var arr = ["111","222","333","444"];
var str = arr.join();
console.log(str);
獲取元素下標
Example: var num = arr.indexOf("a");
indexOf用來獲取元素下標
如果數組中括號內的元素不存在,則返回-1
var arr = ["a","b","c","d"];
var num = arr.indexOf("a");
console.log(num);
冒泡排序
這個這個 也非常重要
是限(xie)時(bu)的(wan)代碼
var a = 0;
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0;j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
a = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = a;
}
}
}
console.log(arr);
刪除數組中重復的數
var a = [5,7,6,8,7,9,6,5];
for (var i = 0; i < a.length; i++) {
for (var j = i + 1; j < a.length; j++) {
if (a[j] == a[i]) {
a.splice(j,1);
j--;
}
}
}
console.log(a);
定時器
普通定時器
var oBtn = document.getElementById("btn");
var timer = null;
var flag = true;
oBtn.onclick = function () {
var count = 0;
if (flag) {
timer = setInterval(function () {
count++;
console.log(count);
}, 400)
} else {
// 清除定時器
clearInterval(timer);
}
flag = !flag;
}
延時定時器
timer = setTimeout(function () {
console.log("5");
},5000);
//清定時器
clearTimeout(timer);
函數
無參無返回值的函數
var oDiv1 = document.getElementById("div1");
oDiv1.onclick = function () {
getSum();
}
//這是無參無返回值的函數getSum:
function getSum () {
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum = sum + i;
}
console.log(sum);
}
有參無返回的函數
什么是形式參數和實際參數?
形式參數:
在函數定義時,寫在括號內用來代表傳入參數的占位的參數,叫做形式參數
Example: a,b即為形式參數
function sum (a,b) {
...
}
實際參數:
在函數調用時,真正傳給函數內部的值叫做實際參數
Example: 10,20即為實際參數
sum(10,20);
注意:當形參沒有被傳實參時,它的類型是undefined
例子
function add (num1,num2) {
var sum = 0;
sum = num1 + num2;
console.log(sum);
}
add(10,20);
有參有返回值的函數
什么是返回值?
一個函數的函數名即是該函數的代表，也是一個變量。
由於函數名變量通常用來把函數的處理結果數據帶回給調用函數，即遞歸調用，所以一般把函數名變量稱為返回值。
例子
實現函數:
隨機-10 到10之間的數 如果是正數返回隨機數的平方
如果是負數,返回隨機數的絕對值 如果是0 什么執行return;
function getRandomNum1(min, max) {
var num = Math.floor(Math.random() * (max - min + 1) + min);
if (num > 0) {
console.log(num);
return Math.pow(num,2);
} else if (num < 0){
console.log(num);
return - num;
} else {
//當函數沒有返回值時調用后返回值類型是undefined
console.log(num);
return;
}
}
var a = getRandomNum1(-10,10);
console.log(a);
JS的作用域
回調函數
就是函數里面調用函數?
大概是這個意思
看個例子就明白了
function abc(callBack) {
console.log("11");
callBack();
console.log("22");
}
var a = function () {
console.log("!!!!!!");
}
// abc(a);
console.log(a);
console.log(abc);
console.log(a());
作用域
作用域有兩種
函數級作用域,塊級作用域
變量也可以設置全局變量和局部變量
和以前學的一樣
this的應用
this 指的是當前的選擇
可以是當前的點擊,也可以是當前的鼠標移入移出
自定義屬性
自定義一個對象的屬性,等於什么都可以
常用於獲取對象下標(?)
鼠標移入移出
可以用來寫hover效果(?)能用css做的為什么我要用js做 迷惑.jpg
oDiv1.onmouseover = function () {
oDiv1.style.backgroundColor = "green";
console.log("鼠標移入");
}
oDiv1.onmouseout = function () {
oDiv1.style.backgroundColor = "";
console.log("鼠標移出");
}
時間對象
獲取當前時間
var date = new Date();
console.log(date);
格式化時間
console.log(date.toLocaleString());
console.log(date.toLocaleDateString());
console.log(date.toLocaleTimeString());
獲取年月日星期小時分鍾秒
獲取年
var year = date.getFullYear();
console.log(year);
獲取月
注意:月份要 + 1,因為月份的取值范圍為0-11;
var month = date.getMonth() + 1;
console.log(month);
獲取日
var theDate = date.getDate();
console.log(theDate);
獲取星期幾
注意:周日的值是0;
var day = date.getDay();
console.log(day);
獲取小時
var hour = date.getHours();
console.log(hour);
獲取分鍾
var minute = date.getMinutes();
console.log(minute);
獲取秒
var seconds = date.getSeconds();
console.log(seconds);
時間戳
時間戳:1970到現在的毫秒數.
獲取當前時間戳
var times = date.getTime();
console.log(times);
時間戳轉化時間對象
var date1 = new Date(1557888889390);
console.log(date1);
固定時間轉化
var date2 = new Date("2017-06-22");//從八點開始
var date3 = new Date("2017/06/22");//從零點開始
var date4 = new Date("2017-06-22 12:05:09");
var date5 = new Date(2017,06,22,00,05,10);
console.log(date2);
console.log(date3);
console.log(date4);
console.log(date5);
字符串方法
首先定義一個字符串:
var str = "改革春風吹滿地";
獲取某個下標對應的字符
console.log(str.charAt(2));
console.log(str.indexOf("風"));//取"風"字對應的下標
console.log(str.indexOf("中"));//沒有這個字的話返回-1
遍歷字符串
for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i));
}
截取字符串
console.log(str.substring(2));//從下標2開始截取 截到最后
console.log(str.substring(2,3));//下標2開始截取 截到下標3
分離字符串
var str1 = "Play hard Study hard";
var str1Arr = str1.split(" ");
console.log(str1Arr);//使用空格分離
console.log(str1Arr.join("hard"));//使用hard作為分隔
拼接字符串
var str2 = "111";
var str3 = "222";
var newStr = str2.concat(str3);
console.log(newStr);
大小寫轉換
var str4 = "long time no see";
var str5 = str4.toUpperCase();
var str6 = str5.toLowerCase();
console.log(str5);
console.log(str6);
offsetLeft & offsetTop & offsetWidth
var oAll = document.getElementById("all");
console.log("offsetLeft:" + oAll.offsetLeft);
//offsetleft相對於定位父級左側的距離
//無定位時相對於瀏覽器左側
console.log(oAll.offsetTop);
//padding + border + width
console.log(oAll.offsetWidth);
獲取CSS樣式
獲取行間樣式
console.log(oAll.style.width);
獲取外部引入/內部引入
function getStyle(obj,attr) {
//因為除了ie別的這個oAll.currentStyle都沒有值 所以用這個來判斷
if (obj.currentStyle) {
//在ie里只能用這個來獲取樣式
//正常的方法獲取不着
//瀏覽十小時 八小時不兼容
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj)[attr];
}
}
函數自調用
function abc() {
console.log(1);
}
console.log(abc);
abc();
//代碼執行到函數定義后 馬上調用此函數
//常用在閉包和js的外部引入
//只執行一次
(function () {
console.log(1);
})();
限時代碼:勻速運動
div {
width: 100px;
height: 100px;
background: pink;
margin-bottom: 10px;
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var oDivs = document.getElementsByTagName("div");
for (var i = 0;i < oDivs.length;i++) {
oDivs[i].onmouseover = function () {
linear(this, "width", 500, 10);
}
oDivs[i].onmouseout = function () {
linear(this, "width", 100, 10);
}
}
function linear(obj, attr, des, speed) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var theWidth = getStyle(obj, attr);
var a = des - parseFloat(theWidth);
if (Math.abs(a) > speed) {
if (a > 0) {
obj.style[attr] = parseFloat(theWidth) + speed + "px";
} else {
obj.style[attr] = parseFloat(theWidth) - speed + "px";
}
} else {
obj.style[attr] = des + "px";
clearInterval(obj.timer);
}
})
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj)[attr];
}
}
</script>
獲取DOM節點
.name {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 10px;
}
<div id="all">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
var oAll = document.getElementById("all");
var oDivs = oAll.getElementsByTagName("div");
獲取子節點
只能取親兒子(兒子輩 孫子輩不行)
console.log(oAll.children);
創建新元素
var newDiv = document.createElement("div");
newDiv.innerHTML = "...我點子怎么這么正";
newDiv.className = "name";//加類名
在某標簽末尾添加元素
oAll.appendChild(newDiv);
在指定位置添加元素
var newP = document.createElement("p");
newP.innerHTML = "消防演習";
//在b之前插入a
//insertbefore(新元素a,元素b)
oAll.insertBefore(newP,oAll.children[5]);
刪除元素
//父標簽.removeChildren(子標簽)
oAll.removeChild(newImg);
或newImg.remove();
替換元素
//父標簽.replaceChild(新標簽 ,子標簽)
var newA = document.createElement("a");
newA.href = "#";
newA.innerHTML = "超鏈接";
oAll.replaceChild(newA,oAll.children[0]);
獲取父節點
var theParent = newP.parentNode;
theParent.style.border = "1px solid red";