JavaScript
目錄javascript
JavaScript
JavaScript介紹
JavaScript是什麼？
JavaScript是一種web前端的描述語言，也是一種基於對象（Object）和事件驅動（Event Driven）的、安全性好的腳本語言。它運行在客戶端從而減輕服務器的負擔。css
JavaScript的特色：html
- JavaScript主要用來向html頁面中添加交互行爲
- JavaScript是一種腳本語言，語法和C語言系列語法相似，屬於弱語言類型
- JavaScript通常用來編寫客戶端腳本，如node.js例外
- JavaScript是一種解釋性語言，邊執行邊解釋無需另外編譯
在此之間咱們就已經學過了HTML+CSS，那麼咱們就須要從新瞭解下web前端：前端
- HTML：從語義的角度，描述頁面結構
- CSS：從審美的角度，描述樣式（美化頁面）
- JavaScript：從交互的角度，描述行爲（提高用戶體驗）
JavaScript歷史背景介紹
布蘭登 • 艾奇（Brendan Eich，1961年～），1995年在網景公司，發明的JavaScript。java
一開始JavaScript叫作LiveScript，可是因爲當時Java語言特別火，因此爲了傍上打牌，就更名爲JavaScript。Java和JavaScript的關係，就如同北大和北大青鳥的關係。node
在同時期還有其餘的網頁語言，好比VBScript、JScript等等，後來都被JavaScript戰勝了，因此如今的瀏覽器中，只運行一種腳本語言就是JavaScript。python
JavaScript的用途
JavaScript的用途是解決頁面交互和數據交互，最終目的是峯峯客戶端效果以及數據的有效傳遞。web
- 實現頁面交互，提高用戶體驗實現頁面特效。即js操做html的dom結構或操做樣式
- 客戶端表單驗證，即在數據送達服務端以前進行用戶提交信息及時有效地驗證，減輕服務器壓力。即數據交互
JavaScript和ECMAScript的關係
ECMAScript是一種由Ecma國際（前身爲 歐洲計算機制造商協會）制定的一種標準。windows
JavaScript是由公司開發而成的，問題是不便於其餘的公司拓展和使用。因此ECMA組織牽頭執行了JavaScript的標準，取名爲ECMAScript。數組
簡單的說，ECMAScript不是一門語言，而是一個標準。符合這個標準的比較常見的有：JavaScript、Action Script(Flash)。就是說當你的JavaScript學完了，那麼Flash程序也就垂手可得了。
ECMAScript在2015年6月，發佈了ECMAScript6版厄本那，語言能力更強（也包含了不少新特性）。可是，瀏覽器的廠商不能那麼快追上這個標準。
更多信息請點擊：
JavaScript入門易學性
- JavaScript對初學者比較友好
- JavaScript是有界面效果的
- JavaScript是弱語言，變量只須要var來聲明。而Java中變量的聲明，要根據變量的類型來定義
好比Java中須要定義如下變量：
int a; float a; double a; String a; boolean a;
可是在JavaScript中，只用定義一個變量：
var a;
- JavaScript不用關心其餘的事情，更關心本身的業務
JavaScript的組成
JavaScript基礎分爲三個部分：
- ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等
- DOM：操做網頁上的元素的API。好比讓盒子移動、變色、輪播圖等
- BOM：操做瀏覽器部分功能的額API。好比讓瀏覽器自動滾動
PS：JavaScript重複性的勞動幾乎爲0，基本都是創造性的勞動。而不像HTML、CSS這種的margin、padding都是機械重複勞動。
第一個JavaScript實例
引入JavaScript的3種方式
- 外鏈式
- 行內式
- 內部式
外鏈式
也就是和咱們引入外部CSS文件同樣，在head頭部引入咱們自定義JavaScript腳本：
<script src="01%20index.js">
行內式
由於咱們的JavaScript是能夠操做咱們的標籤的，也就是說咱們能夠把標籤當成DOM（Document Object Module），因此咱們就可使用行內式來引入JavaScript：
<body>
<p id="p1" onclick="clickHandler()">你好，JavaScript!</p>
</body>
可是咱們發現給了p標籤id和onclick屬性後，依然是沒有任何效果，因此，咱們須要講一下咱們的內部式
內部式
在咱們寫的HTML代碼中，拿到瀏覽器那邊，瀏覽器是從上到下開始解析的，那麼咱們須要把JavaScript寫在最後面，等所有加載成功後，再來加載JavaScript：
<script type="text/javascript">
</script>
咱們的內部式就是這樣引入的，那麼咱們如今能夠去寫咱們的第一個JavaScript實例了
Hello,JavaScript!
當咱們點擊P標籤的時候，彈框輸出：Hello,JavaScript!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1" onclick="clickHandler()">你好，JavaScript!</p>
</body>
<script type="text/javascript">
function clickHandler(){
alert('Hello,JavaScript!')
}
</script>
</html>
alert語句
alert（英文翻譯爲「警報」）的用途：彈出警告框
alert('這是個人第一個JavaScript程序！')
當咱們保存後在瀏覽器刷新，那麼就會出現這樣的效果：
JavaScript的語法規則
學習程序，是有規律可循的，就是程序中有相同的部分，這些部分就是一種規定，不能更改，咱們稱爲：語法
- JavaScript對換行、縮進、空格不敏感
備註：每一條語句末尾都要加上分號，雖然分號不是必須添加的，可是爲了程序從此要壓縮，若是不加分號，那麼壓縮後的程序將不能運行
- 全部的符號，都是英語的。好比括號、引號、分號
- JavaScript的註釋：
單行註釋：
// 我是註釋
多行註釋：
/*
多行註釋1
多行註釋2
*/
JavaScript在網頁中輸出信息的寫法
在JavaScript中，網頁輸出新的寫法有三種：
- 使用window.alert()輸出警告框
- 使用document.write()方法將內容寫到html文檔中
- 使用innerHTML寫入到HTML元素
- 使用console.log()寫入到瀏覽器的控制檯
使用window.alert()輸出警告框
windos.alert(""),彈框效果，window是BOM對象，指的是整個瀏覽器，能夠省略不寫。彈框比較忽然，對用戶來講體驗不是太好，基本上就是測試代碼使用的：
<script type="text/javascript">
window.alert('星兒今天很漂亮') # window是能夠忽略的
alert('星兒今天很漂亮')
</script>
使用document.write()方法將內容寫到HTML文檔中
document.write("")會直接在頁面上輸出內容
<script type="text/javascript">
document.write('星兒今天很漂亮')
</script>
既然咱們說過，JavaScript是用來操做DOM的，那麼咱們就能夠來嘗試一下：
<script type="text/javascript">
document.write("星兒今天很漂亮")
document.write("<h1>我是一級標題</h1>")
</script>
使用innerHTML寫入到HTML元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 id="demo1">我是一級標題</h1>
<button type="button" onclick="changeContent()">更改內容</button>
</body>
<script type="text/javascript">
function changeContent(){
document.getElementById("demo1").innerHTML = "經過innerHTML方法向頁面輸出內容"
}
</script>
</html>
當咱們尚未點擊的時候是這樣的：
當咱們點擊按鈕後是這個樣子的：
使用console.log()寫入到瀏覽器的控制檯
其實console是一個系列，不只僅以後console.log()方法，還有console.error(),console.warn()，固然這些都是輸出在控制檯上面的:
<script type="text/javascript">
//控制檯日誌
console.log("控制檯.日誌")
</script>
<script type="text/javascript">
//控制檯警告
console.warn("控制檯.警告")
</script>
<script type="text/javascript">
//控制檯錯誤
console.error("控制檯.錯誤")
</script>
prompt()方法
prompt()方法用於顯示可提示用戶進行輸入的對話框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" onclick="hello_user()" value="點我點我"/>
</body>
<script type="text/javascript">
function hello_user(){
var name = prompt("請輸入用戶名：")
if(name != null && name != ''){
document.write("hello,"+name+"!")
}
}
</script>
</html>
點咱們沒有點擊的時候，此時就只有一個button按鈕
當咱們點擊按鈕的時候，會彈框讓咱們輸如用戶名
當點擊肯定後，會在瀏覽器界面輸出一句話
JavaScript中的變量
變量的含義
變量，便是在程序運行過程當中它的值是容許修改的量，與他相對應的就是常量：在程序運行過程當中它的值不容許修改的量
JavaScript和Python是同樣的弱類型語言，Python中定義變量沒有關鍵字:username = 'xiao'，可是在JavaScript中定義變量使用關鍵字: var name = 'xiao';
var name = "xiao";
變量的聲明和定義
有兩種方式：
- 先聲明後定義
- 聲明馬上定義
先聲明後定義
//1.先聲明 var dog; console.log(dog) //undefined表明未定義
//2.後定義 dog = "校長"; console.log(dog)
聲明馬上定義(經常使用)
<script type="text/javascript">
var dog2 = "雪兒";
console.log(dog2)
</script>
變量名的命名規範
- 嚴格去分大小寫
- 命名時能夠出現字母、數字、下劃線、$，可是不能數字開頭，也不能是純數字，不能包括JavaScript的關鍵字和保留字
- 推薦駝峯命名法
- 匈牙利命名法
JavaScript的保留關鍵字
https://www.runoob.com/js/js-reserved.html
JavaScript基本數據類型
JavaScript數據類型包括：基本數據類型和引用數據類型
基本數據類型指的是簡單的數據段，引用數據類型指的是具備多個值構成的對象
當咱們把變量賦值給一個變量時，解析器首先要確認的是這個值是基本數據類型仍是引用數據類型
基本數據類型
基本數據類型分爲如下五種：
- number
- string
- boolean
- null
- undefined
數字類型:number
<script type="text/javascript">
var num = 123;
console.log(num)
</script>
number類型在控制檯輸出是藍色的
字符串類型:string
<script type="text/javascript">
var str = "泰然城";
console.log(str)
</script>
字符串類型在控制檯輸出是黑色的
布爾類型:boolean
<script type="text/javascript">
var b1 = true;
console.log(b1)
console.log(typeof b1)
</script>
空對象:null
<script type="text/javascript">
var n1 = null;
console.log(n1)
console.log(typeof n1)
</script>
null表明的是空對象
未定義:undefined
這個在剛剛咱們講變量的聲明和定義已經說過了，若是一個變量聲明瞭可是沒有定義，那麼就是undefined
<script type="text/javascript">
var name1;
console.log(name1)
console.log(typeof name1)
</script>
其實還有一種數據類型,Infinity 屬性用於存放表示正無窮大的數值：
<script type="text/javascript">
var dev = 5/0;
console.log(dev)
console.log(typeof dev)
</script>
引用數據類型
- Function
- Object
- Array
- String
- Date
後面會慢慢講解
JavaScript的運算符
JavaScript運算符分爲四種：
- 算術運算符
- 賦值運算符
- 比較運算符
- 邏輯運算符
算數運算符和賦值運算符請參考：http://www.w3school.com.cn/js/js_operators.asp
比較運算符和邏輯運算符請參考：http://www.w3school.com.cn/js/js_comparisons.asp
特殊狀況
字符串拼接
咱們有這麼一段文字須要拼接：
相比10年前的北京奧運，這一次，你們選擇了少而精的策略，真正在舞臺上的演員只有70餘人。
那麼此時咱們想把北京奧運和70拿出來再經過字符串進行拼接，作法是這樣的：
<script type="text/javascript">
var n1 = "北京奧運";
var n2 = 70;
var str = "相比10年前的"+n1+"，這一次，你們選擇了少而精的策略，真正在舞臺上的演員只有"+n2+"餘人。";
console.log(str)
</script>
字符串運算
字符串相加
<script type="text/javascript">
var str1 = "1";
var str2 = "2";
var newStr = str1+str2;
console.log(newStr)
console.log(typeof newStr)
</script>
雖然結果是12，可是仍是string類型
若是咱們想要將string類型轉換成int類型，須要使用到parseInt()方法
<script type="text/javascript">
//將string類型轉換成int類型
var newStr2 = parseInt(newStr);
console.log(typeof newStr2)
</script>
當咱們使用字符串相減的時候：
<script type="text/javascript">
var str1 = "1";
var str2 = "2";
var newStr3 = str1-str2;
console.log(newStr3)
</script>
一樣，在咱們使用字符串相乘/相除都是能夠執行成功不須要轉換數據類型的，驗證結果略過
咱們來嘗試下兩個都是字符串且不像數字的相乘：
<script type="text/javascript">
var n1 = 'one';
var n2 = 'two';
console.log(n1*n2)
</script>
輸出爲NaN,即Not a Num
JavaScript中的流程控制語句
- if
- switch
- while
- do while
- for
if語句
定義雞爲20，若是大於15則大吉大利今晚吃雞
<script type="text/javascript">
var ji = 20;
if (ji >=20) {
console.log("大吉大利，今晚吃雞！")
}
</script>
if...else
<script type="text/javascript">
var ji = 15;
if (ji >=20) {
console.log("大吉大利，今晚吃雞！")
} else{
console.log("很遺憾，今晚不能吃雞！")
}
</script>
if...else if
<script type="text/javascript">
var mathScore = 140;
var totalScore = 500;
if (mathScore >= 138 && totalScore >= 680) {
console.log("恭喜你被清華大學錄取！")
} else if( totalScore >= 700 || mathScore >= 139){
console.log("恭喜你被複旦大學錄取！")
}else {
console.log("很抱歉！")
}
</script>
switch
switch和case一塊兒用，case表示的是一個條件，知足這個條件就會走進來，遇到break就會跳出
<script type="text/javascript">
var gameScore = "best";
switch (gameScore){
case "best":
console.log('大吉大利今晚吃雞！')
break;
case "better":
console.log("你是最優秀的！")
break;
default:
break;
}
</script>
while
while循環有3個條件：
- 初始化循環變量
- 循環判斷條件
- 更新循環變量
<script type="text/javascript">
var n = 1;
while (n<=100){
console.log(n)
n++;
}
</script>
練習：打印1-100之間3的倍數
<script type="text/javascript">
var n = 1;
while (n<=100){
if (n%3===0) {
console.log(n)
}
n++
}
</script>
do...while
do...while和while不同，do...while無論符不符合條件，至少會運行一次
<script type="text/javascript">
var n = 3;
do{
console.log(n)
n++
}while (n<10){
}
</script>
for循環
打印1-100之間9的倍數
<script type="text/javascript">
for (var n=1;n<=100;n++) {
if (n%9==0) {
console.log(n)
}
}
</script>
計算1-100的和
<script type="text/javascript">
var sum=0;
for (var n=1;n<=100;n++) {
sum+=n
}
console.log(sum)
</script>
數組的建立和使用
在Python中，能存放數據的有列表，用[]表示，可是在JavaScript中，[]被當作爲數組，所謂的數組看以當作是一個容器，用來存放東西的容器。
數組建立的兩種方式：
- 字面量方式建立
- 使用構造函數的方式建立
字面量方式建立
所謂字面量的方式，是咱們最常常用的，這種方法簡單直觀
//由於Array是一個對象，那麼這個對象就有本身的方法和屬性 var arr = ['red','yellow','black'] //建立一個空數組 var arr2 = []
使用構造方法建立數組
<script type="text/javascript">
var arr1 = new Array();//建立的是空數組
//萬事萬物皆對象，沒有對象new一個，此時的Array能夠當作是一個類
var colors = new Array('red','blue','yellow');
console.log(colors)
</script>
數組的基本操做
數組的賦值
<script type="text/javascript">
//1.建立一個空的數組
var colors = new Array();
//2.爲數組賦值
colors[0] = "red";
colors[1] = "black";
colors[2] = "white";
//3.打印數據
console.log(colors)
</script>
經過下標獲取元素的值
<script type="text/javascript">
//1.建立一個空的數組
var colors = new Array();
//2.爲數組賦值
colors[0] = "red";
colors[1] = "black";
colors[2] = "white";
//3. 經過下標獲取數組的值
console.log(colors[0])
console.log(colors[2])
</script>
獲取數組的長度
<script type="text/javascript">
//1.建立一個空的數組
var colors = new Array();
//2.爲數組賦值
colors[0] = "red";
colors[1] = "black";
colors[2] = "white";
//3.獲取數組的長度
console.log(colors.length)
</script>
遍歷數組
<script type="text/javascript">
//1.建立一個空的數組
var colors = new Array();
//2.爲數組賦值
colors[0] = "red";
colors[1] = "black";
colors[2] = "white";
//3.遍歷數組
for (var count=0;count<=colors.length;count++) {
console.log(colors[count])
}
</script>
這裏在後面有個undefined，是由於咱們在設置循環條件的時候設置成了小於等於數據的長度，可是數組的第一個元素是從0開始的，因此纔會有undefined
數組的經常使用方法
concat():數組的合併
<script type="text/javascript">
//1.首先建立兩個數組
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信陽']
//2.concat():兩個數組的合併
var newN = n1.concat(n2)
console.log(newN)
</script>
toString()：將數組轉換成爲字符串
<script type="text/javascript">
//1.首先建立兩個數組
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信陽']
//2.concat():兩個數組的合併
var newN = n1.concat(n2)
//console.log(newN)
//3.將數組轉換成字符串
var num = [98,54,66,100,0]
var newNum = num.toString()
console.log(newNum)
</script>
join()：將數組裏的字符串按照指定的字符鏈接起來
<script type="text/javascript">
//1.首先建立兩個數組
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信陽']
//2.concat():兩個數組的合併
var newN = n1.concat(n2)
//console.log(newN)
//3.將數組轉換成字符串
var num = [98,54,66,100,0]
var newNum = num.toString()
//console.log(newNum)
//4.join()
console.log(newN.join('__'))
</script>
indexOf():經過內容查找下標，正向查找
<script type="text/javascript">
//1.首先建立兩個數組
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信陽']
//2.concat():兩個數組的合併
var newN = n1.concat(n2)
//console.log(newN)
//3.將數組轉換成字符串
var num = [98,54,66,100,0]
var newNum = num.toString()
//console.log(newNum)
//4.join()
//console.log(newN.join('__'))
//5.經過內容查找下標
console.log(newN.indexOf("固始"))
</script>
lastindexOf():反向查找
<script type="text/javascript">
//1.首先建立兩個數組
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信陽']
//2.concat():兩個數組的合併
var newN = n1.concat(n2)
//console.log(newN)
//3.將數組轉換成字符串
var num = [98,54,66,100,0]
var newNum = num.toString()
//console.log(newNum)
//4.join()
//console.log(newN.join('__'))
//5.經過內容查找下標
//console.log(newN.indexOf("固始"))
//6.lastIndexOf()
console.log(newN.lastIndexOf("固始"))
</script>
咱們能夠看到這個值依然是3，由於無論你正向仍是反向，順序是不會變的
sort():數組的排序
<script type="text/javascript">
//1.首先建立兩個數組
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信陽']
//2.concat():兩個數組的合併
var newN = n1.concat(n2)
//console.log(newN)
//3.將數組轉換成字符串
var num = [98,54,66,100,0]
var newNum = num.toString()
//console.log(newNum)
//4.join()
//console.log(newN.join('__'))
//5.經過內容查找下標
//console.log(newN.indexOf("固始"))
//6.lastIndexOf()
//console.log(newN.lastIndexOf("固始"))
//7.sort()：對數組排序
var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
console.log(names.sort())
</script>
這樣是按照26個字母進行排序的，若是首字母相同，那麼就比較第二個字母，以此類推
reverse()：反轉數組
<script type="text/javascript">
//1.首先建立兩個數組
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信陽']
//2.concat():兩個數組的合併
var newN = n1.concat(n2)
//console.log(newN)
//3.將數組轉換成字符串
var num = [98,54,66,100,0]
var newNum = num.toString()
//console.log(newNum)
//4.join()
//console.log(newN.join('__'))
//5.經過內容查找下標
//console.log(newN.indexOf("固始"))
//6.lastIndexOf()
//console.log(newN.lastIndexOf("固始"))
//7.sort()：對數組排序
var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
//console.log(names.sort())
//8.reverse()反轉數組
console.log(names.reverse())
</script>
僅僅是對數組的反轉，並不會排序
shift():移除掉數組中的第一個元素，返回的是移除掉元素的值
<script type="text/javascript">
//1.首先建立兩個數組
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信陽']
//2.concat():兩個數組的合併
var newN = n1.concat(n2)
//console.log(newN)
//3.將數組轉換成字符串
var num = [98,54,66,100,0]
var newNum = num.toString()
//console.log(newNum)
//4.join()
//console.log(newN.join('__'))
//5.經過內容查找下標
//console.log(newN.indexOf("固始"))
//6.lastIndexOf()
//console.log(newN.lastIndexOf("固始"))
//7.sort()：對數組排序
var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
//console.log(names.sort())
//8.reverse()反轉數組
console.log(names.reverse())
//9.移除元素和添加元素
var shiftNames = names.shift();
console.log(shiftNames)
</script>
unshift()：向數組的第一個元素插入一個或者多個值，並返回新的長度
<script type="text/javascript">
//1.首先建立兩個數組
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信陽']
//2.concat():兩個數組的合併
var newN = n1.concat(n2)
//console.log(newN)
//3.將數組轉換成字符串
var num = [98,54,66,100,0]
var newNum = num.toString()
//console.log(newNum)
//4.join()
//console.log(newN.join('__'))
//5.經過內容查找下標
//console.log(newN.indexOf("固始"))
//6.lastIndexOf()
//console.log(newN.lastIndexOf("固始"))
//7.sort()：對數組排序
var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
//console.log(names.sort())
//8.reverse()反轉數組
console.log(names.reverse())
//9.移除元素和添加元素
//var shiftNames = names.shift();
//console.log(shiftNames)
var unShiftNames = names.unshift("liming","王鵬飛")
console.log(unShiftNames)
</script>
push():向數組的尾部添加一個或者多個值，並返回數組的長度
<script type="text/javascript">
//1.首先建立兩個數組
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信陽']
//2.concat():兩個數組的合併
var newN = n1.concat(n2)
//console.log(newN)
//3.將數組轉換成字符串
var num = [98,54,66,100,0]
var newNum = num.toString()
//console.log(newNum)
//4.join()
//console.log(newN.join('__'))
//5.經過內容查找下標
//console.log(newN.indexOf("固始"))
//6.lastIndexOf()
//console.log(newN.lastIndexOf("固始"))
//7.sort()：對數組排序
var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
//console.log(names.sort())
//8.reverse()反轉數組
console.log(names.reverse())
//9.移除元素和添加元素
//var shiftNames = names.shift();
//console.log(shiftNames)
var unShiftNames = names.unshift("liming","王鵬飛")
//console.log(unShiftNames)
//10.push():在數組的尾部添加一個或多個值，返回的是數組的長度
var pushNames = names.push("lihaiming","languansheng")
console.log(pushNames)
</script>
pop()：刪除數組尾部的一個元素，並返回這個元素的值
<script type="text/javascript">
//1.首先建立兩個數組
var n1 = ['北京','上海','深圳']
var n2 = ['固始','信陽']
//2.concat():兩個數組的合併
var newN = n1.concat(n2)
//console.log(newN)
//3.將數組轉換成字符串
var num = [98,54,66,100,0]
var newNum = num.toString()
//console.log(newNum)
//4.join()
//console.log(newN.join('__'))
//5.經過內容查找下標
//console.log(newN.indexOf("固始"))
//6.lastIndexOf()
//console.log(newN.lastIndexOf("固始"))
//7.sort()：對數組排序
var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
//console.log(names.sort())
//8.reverse()反轉數組
console.log(names.reverse())
//9.移除元素和添加元素
//var shiftNames = names.shift();
//console.log(shiftNames)
var unShiftNames = names.unshift("liming","王鵬飛")
//console.log(unShiftNames)
//10.push():在數組的尾部添加一個或多個值，返回的是數組的長度
var pushNames = names.push("lihaiming","languansheng")
//console.log(pushNames)
//11.pop():刪除數組的最後一個元素,而且返回刪除的元素值
var popNames = names.pop();
console.log(popNames)
</script>
對字符串進行反轉
<script type="text/javascript">
var str = "hello Javascript!"
console.log(str.split("").reverse().join(""))
</script>
函數的使用
字面量方式建立
<script type="text/javascript">
//1.字面量方式的建立
function add(){
alert("add函數被調用了！")
}
add()
</script>
無論在什麼語言中，定義了函數那麼就須要有調用，在JavaScript是這樣的：
定義函數時須要攜帶參數
<script type="text/javascript">
//1.字面量方式的建立
function add(){
alert("add函數被調用了！")
}
//add()
//第二種方式：定義函數時攜帶參數
function add2(a,b){
console.log(a*b)
}
add2(4,5)
</script>
定義函數值須要有返回值
<script type="text/javascript">
//1.字面量方式的建立
function add(){
alert("add函數被調用了！")
}
//add()
//第二種方式：定義函數時攜帶參數
function add2(a,b){
console.log(a*b)
}
//add2(4,5)
//第三種方式：定義函數須要有返回值
function add3(a,b){
return a*b
}
var a = add3(5,9)
console.log(a)
</script>
Object_構造函數
對象的建立有如下幾種方式：
- 字面量方式建立
- 使用Object()建立對象
- 使用構造函數方式建立對象
字面量方式建立
在JavaScript中，對象的屬性是用key:value的方式存儲的
<script type="text/javascript">
var stu = {
name:"(*^_^*)亞飛",
age:22,
fav:"雞湯",
}
console.log(stu)
</script>
推薦使用這種字面量方式建立，這種方式簡單直觀
若是想要設置name屬性的值，那麼咱們須要用點語法，也就是在python中的get方法和set方法
<script type="text/javascript">
var stu = {
name:"(*^_^*)亞飛",
age:22,
fav:"雞湯",
}
console.log(stu)
stu.name = "li"
console.log(stu)
</script>
使用Object()建立對象
使用Object構造函數 特色： 首字母要大寫 想要建立對象就須要本身new一個
<script type="text/javascript">
var Stu = new Object();
Stu.name = "小明";
console.log(Stu)
</script>
使用構造函數方式建立對象
<script type="text/javascript">
var Student = function(){
this.name = "海明";
this.age = 22;
this.fav = function(){
alert('旅遊')
}
}
//建立對象
var stu1 = new Student();
console.log(stu1)
</script>
使用構造函數建立對象，有如下三點：
- 函數名首字母大寫
- 構造函數不須要return
- 爲對象添加成員變量：this.name = 'guansheng';
可是使用構造函數方式建立對象有一個弊端：每new一次對象，裏面的成員變量和方法都是同樣的，因此咱們在調用的時候不知道調用的是哪一個
固然，到最後咱們推薦的是構造函數方式
<script type="text/javascript">
function Animal(){
this.name = "jingjing";
this.age = 21;
}
Animal.prototype.shownames1 = function(){
alert('調用了shownames1方法！')
}
Animal.prototype.shownames2 = function(){
alert('調用了showname2方法！')
}
var a = new Animal();
a.shownames1()
</script>
String_Number
String字符串對象，那麼這是一個對象就會有本身的方法
obj.length獲取字符串的長度
<script type="text/javascript">
var str = "hello,world!"
console.log(str.length)
</script>
toUpperCase(obj)把小寫變大寫
<script type="text/javascript">
var str = "hello,world!"
console.log(str.toUpperCase())
</script>
toLowerCase()把大寫變成小寫
<script type="text/javascript">
var str = "hello,world!"
var bigStr = str.toUpperCase();
console.log(bigStr.toLowerCase())
</script>
obj.split("",n)以xx進行切割，並返回數組的最大長度爲m
<script type="text/javascript">
var str = "hello,world!"
console.log(str.split(" "))
</script>
obj.sunstring(n,m)左開右閉的方式獲取str的n到m元素的值
<script type="text/javascript">
var str = "hello,world!"
console.log(str.substring(2,5))
</script>
Number類型
obj.toString()將number裝換成字符串類型
<script type="text/javascript">
var num = 123.4567
var num2String = num.toString();
console.log(num2String)
console.log(typeof num2String)
</script>
toFixed(n)四捨五入，最大長度爲n
<script type="text/javascript">
var num = 123.4567
console.log(num.toFixed(2))
</script>
Date對象的使用
<script type="text/javascript">
var myDate = new Date();
//1.獲取今天是第幾號
console.log(myDate.getDate())
//2.獲取當天的日期和時間
console.log(Date())
//3.獲取今天是星期幾 0表明週日 6表明週六
console.log(myDate.getDay())
//4.獲取如今是幾時
console.log(myDate.getHours())
//5.獲取一年中的幾個月 0表明1月 11表明12月
console.log(myDate.getMonth()+1)
</script>
Date對象的小練習
在桌面顯示當前時間：
<script type="text/javascript">
function getCurrentTime(){
//1.建立一個時間對象
var date = new Date();
//2.獲取當前時間
var timeInfo = date.getFullYear()+"年"+num(date.getMonth()+1)+"月"+num(date.getDate())+"日 "+ num(date.getHours())+":"+num(date.getMinutes())+":"+num(date.getSeconds());
//3.獲取span1這個元素
var oSpan = document.getElementById('span1');
//4.將時間寫到span標籤中
oSpan.innerHTML = timeInfo.fontcolor('red');
}
getCurrentTime()
//5.設置定時器
setInterval("getCurrentTime()",1000)
//咱們發現：秒鐘走到59後 就變成了0 而不是00
function num(n){
if (n<10) {
return "0"+n
} else{
return n
}
}
</script>
Math對象的使用
Math對象用於執行數學任務
<script type="text/javascript">
//1.ceil() 天花板函數 向上取整 大於等於1，而且最接近的整數
var reg1 = Math.ceil(1.12131)
console.log(reg1)
//2.floor() 地板函數 向下取整 小於等於1，而且最接近的整數
var reg2 = Math.floor(1.12131)
console.log(reg2)
//3.最大值與最小值
var reg3 = Math.max(4,5)
console.log(reg3)
var reg4 = Math.min(1,9)
console.log(reg4)
//4.取隨機數 這個是0-1之間的隨機數
var reg5 = Math.random()
console.log(reg5)
//獲取100-200之間的隨機數
var reg6 = 100+Math.random()*100
console.log(reg6)
</script>
JavaScript案例
模態框案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
#box{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.3);
}
#content{
width: 400px;
height: 200px;
line-height: 200px;
background-color: white;
position: relative;
top: 150px;
margin: auto;
text-align: center;
color: red;
}
#span1{
position: absolute;
top: 0px;
right: 0px;
background-color: red;
color: white;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
}
</style>
</head>
<button id="btn">點我</button>
<body>
</body>
<script type="text/javascript">
var myBtn = document.getElementById('btn');
var myDiv = document.createElement('div');
var myP = document.createElement('p');
var mySpan = document.createElement('span')
myDiv.id = 'box';
myP.id = 'content';
mySpan.id = "span1";
myP.innerHTML = "成功彈出模態框";
mySpan.innerHTML = "x";
myDiv.appendChild(myP);
myP.appendChild(mySpan);
myBtn.onclick = function(){
//console.log(myBtn.parentNode)
myBtn.parentNode.insertBefore(myDiv,myBtn)
}
mySpan.onclick = function(){
myDiv.parentNode.removeChild(myDiv)
}
</script>
</html>
點一點有驚喜
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
text-align: center;
line-height: 200px;
margin: 20px auto;
color: white;
font-size: 22px;
font-weight: blod;
}
</style>
</head>
<body>
<div class="box">
點擊有驚喜
</div>
</body>
<script type="text/javascript">
//getElementsByClassName獲取的是全部符合條件的元素,用數組保存的
var myBox = document.getElementsByClassName("box")[0];
var a = 0;
myBox.onclick = function(){
a++;
if (a%4===1) {
this.style.background = "green";
this.innerText = "逗你玩呢";
} else if(a%4===2){
this.style.background = "blue";
this.innerText = "再點一次";
} else if(a%4===3){
this.style.background = "transparent";
this.innerText = "";
} else{
this.style.background = 'red';
this.innerText = "點擊有驚喜"
}
}
</script>
</html>
簡易留言框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
</div>
<textarea id='msg'></textarea>
<input type="button" id="btn" value="提交" />
<button onclick="sum()">統計</button>
</body>
<script type="text/javascript">
var ul = document.createElement('ul')
var box = document.getElementById('box');
box.appendChild(ul)
var msg = document.getElementById('msg');
var btn = document.getElementById('btn');
var count=0;
btn.onclick = function(){
var li = document.createElement('li');
li.innerHTML = msg.value + "<span> X</span>";
var lis = document.getElementsByTagName('li');
if (lis.length==0) {
ul.appendChild(li);
count++;
} else{
ul.insertBefore(li,lis[0]);
count++;
}
msg.value = "";
var spans = document.getElementsByTagName('span');
for (var i=0;i<spans.length;i++) {
spans[i].onclick = function(){
ul.removeChild(this.parentNode)
count--;
}
}
}
function sum(){
alert("一共有"+count+"條留言")
}
</script>
</html>
選項卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
#tab{
width: 480px;
margin: 20px auto;
border: 1px solid red;
}
ul li{
float: left;
width: 160px;
height: 60px;
text-align: center;
line-height: 60px;
background-color: #CCCCCC;
}
ul li a{
color: #000000;
}
li.active{
background-color: #FFFFFF;
}
p{
height: 200px;
display: none;
}
p.active{
display: block;
height: 200px;
text-align: center;
line-height: 200px;
background-color: #FFFFFF;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active"><a href="">個人商城</a></li>
<li><a href="">個人收藏</a></li>
<li><a href="">個人訂單</a></li>
</ul>
<p class="active">商城展現</p>
<p>收藏展現</p>
<p>訂單展現</p>
</div>
</body>
<script type="text/javascript">
var tabli = document.getElementsByTagName('li')
var tabContent = document.getElementsByTagName('p')
for (var i=0;i<tabli.length;i++) {
tabli[i].index = i;
tabli[i].onclick = function(){
for (var j=0;j<tabli.length;j++) {
tabli[j].className = '';
tabContent[j].className = '';
}
this.className = 'active';
console.log(this.index)
tabContent[this.index].className = 'active';
}
}
</script>
</html>
仿淘寶搜索框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿淘寶搜索框</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
input{
outline: none;
display: block;
width: 390px;
height: 40px;
margin-top: 20px;
font-size: 20px;
border: 2px solid red;
border-radius: 5px;
}
label{
position: absolute;
top: 32px;
left: 10px;
font-size: 20px;
color: gray;
}
</style>
</head>
<body>
<div id="search">
<input type="text" name="" id="text" value="" />
<label for="text" id="msg">泰然城</label>
</div>
</body>
<script type="text/javascript">
var txt = document.getElementById('text');
var msg = document.getElementById('msg');
txt.oninput = function(){
if (txt.value == '') {
msg.style.display = 'block'
} else{
msg.style.display = 'none'
}
}
</script>
</html>
勻速移動案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>勻速移動</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50px;
left: 0px;
}
</style>
</head>
<body>
<button id="btn">點我</button>
<div id="box">
</div>
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var count = 0;
var timer = null;
//當點擊按鈕時
btn.onclick = function(){
setInterval(function(){
count++;
if (count >1000) {
clearInterval(timer)
box.style.display = 'none'
} else{
box.style.left = count +'px'
}
},1)
}
</script>
</html>
5秒自動關閉廣告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
}
img{
position: fixed;
}
#left{
left: 0px;
}
#right{
right: 0px;
}
ul li{
font-size: 26px;
}
</style>
</head>
<body>
<img src="../JS_dom/1.gif" id="left"/>
<img src="../JS_dom/1.gif" id="right"/>
<ul>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
<li>屠龍寶刀 點擊就送</li>
</ul>
</body>
<script type="text/javascript">
var left = document.getElementById('left')
var right = document.getElementById('right')
var timer = null;
timer = setTimeout(function(){
left.style.display = 'none'
right.style.display = 'none'
},5000)
</script>
</html>
小米輪播圖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米滾動框</title>
<style type="text/css">
*{padding: 0;margin: 0;}
.wrap{
width: 512px;
height: 400px;
border: 3px solid #808080;
position: relative;
overflow: hidden;
margin: 100px auto;
}
.wrap span{
width: 100%;
height: 200px;
position: absolute;
}
.up{
top: 0;
}
.down{
bottom: 0;
}
img{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="box" class="wrap">
<img src="../JS_dom/mi.png" id="xiaomi"/>
<span id="picUp" class="up"></span>
<span id="picDown" class="down"></span>
</div>
</body>
<script type="text/javascript">
var up = document.getElementById('picUp');
var down = document.getElementById('picDown');
var img = document.getElementById('xiaomi');
var count = 0;
var timer = null;
//鼠標移入的時候吧
up.onmouseover = function(){
//無論怎樣 上來先清定時器
clearInterval(timer);
timer = setInterval(function(){
count-=3;
count >= -1070 ? img.style.top = count + 'px': clearInterval(timer);
},30)
}
down.onmouseover = function(){
clearInterval(timer)
timer = setInterval(function(){
count += 1;
count < 0 ? img.style.top = count + 'px': clearInterval(timer);
})
}
</script>
</html>
輪播圖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>無縫輪播</title>
<style type="text/css">
*{padding: 0;margin: 0;}
ul{list-style: none;}
.box{
width: 600px;
height: 200px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
ul li{
float: left;
}
.box ul{
width: 400%;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="../JS_dom/image/01.jpg"/></li>
<li><img src="../JS_dom/image/02.jpg"/></li>
<li><img src="../JS_dom/image/03.jpg"/></li>
<li><img src="../JS_dom/image/04.jpg"/></li>
</ul>
</div>
</body>
<script type="text/javascript">
var box = document.getElementsByClassName('box')[0];
console.log(box)
var ul = box.children[0];
var num = 0;
function autoPlay(){
num--;
num <= -600 ? num=0 : num ;
ul.style.left = num +'px';
}
//鼠標移動上去
box.onmouseover = function(){
clearInterval(timer)
}
//鼠標拿開的時候
box.onmouseout = function(){
timer = setInterval(autoPlay,30)
}
</script>
</html>
JavaScript的BOM知識點
瀏覽器對象模型（BOM）
IE 3.0 和 Netscape Navigator 3.0 提供了一種特性 - BOM（瀏覽器對象模型），能夠對瀏覽器窗口進行訪問和操做。使用 BOM，開發者能夠移動窗口、改變狀態欄中的文本以及執行其餘與頁面內容不直接相關的操做。
BOM輸出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//DOM輸出系列
//1.alert() 彈框輸出
//2.console.log() 用於瀏覽器調試
console.log('111')
//3.prompt() 獲取用戶輸入
var pro = prompt('請輸入你的名字：');
console.log(pro)
//prompt(value,defaultValue) 自動輸入defaultValue
var pro1 = prompt('請輸入你的學校：','城關中學');
console.log(pro1)
//4.confirm() 彈框 若是選擇肯定則返回true，若是選擇取消則返回false
var con = confirm('是否要關閉？')
console.log(con)
</script>
</html>
open_close方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="window.open('https://www.baidu.com')">打開百度首頁</button>
<button>小米官網</button>
<button>關閉當前頁面</button>
<button id="new">打開一個空白頁</button>
</body>
<script type="text/javascript">
//open和close方法
//1.open() 打開方法
var btn = document.getElementsByTagName('button')[1];
console.log(close)
btn.onclick = function(){
open("https://www.mi.com")
}
var close1 = document.getElementsByTagName('button')[2];
close1.onclick = function(){
if (confirm('是否關閉? ')) {
console.log(111)
close();
}
}
//打開一個空白頁
var openNew = document.getElementById('new');
openNew.onclick = function(){
open('about:blank','_self')
}
</script>
</html>
BOM的其餘元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//1.獲取瀏覽器的信息 返回瀏覽器的用戶設備信息
console.log(window.navigator.userAgent)
//2.windows.location用於得到當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。
// console.log(window.location)
//這個方法使用的比較多
//window.location.href = 'https://www.baidu.com';
//3.全局刷新 window.location.reload() 儘可能少用
//window.location.reload()
</script>
</html>
client系列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
width: 200px;
height: 200px;
border: 5px solid red;
padding: 10px;
/*margin: 10px auto;*/
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
<script type="text/javascript">
var box = document.getElementById('box')
/*
clientTop:指的是上面border的寬度
clientLeft:指的是左邊border的寬度
clientWidth：指的是整個內容區域加上上下兩個padding的寬度
clientHeight:指的是整個內容區域加上左右兩個padding的寬度
* */
console.log(box.clientTop)
console.log(box.clientLeft)
console.log(box.clientHeight)
console.log(box.clientWidth)
</script>
</html>
屏幕的可視區域
所謂的屏幕克是區域，就是當你首次打開瀏覽器 能看見的區域。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//
window.onload = function(){
console.log(document.documentElement.clientWidth)
console.log(document.documentElement.clientHeight)
}
</script>
</html>
咱們也能夠對屏幕的大小進行監聽，當屏幕或寬度改變，那麼咱們的值也跟着改變
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//
window.onload = function(){
console.log(document.documentElement.clientWidth)
console.log(document.documentElement.clientHeight)
window.onresize = function(){
console.log(document.documentElement.clientWidth)
console.log(document.documentElement.clientHeight)
}
}
</script>
</html>
offset系列
沒有設置盒子定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#wrap{
}
#box{
width: 200px;
height: 200px;
border: 1px solid red;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="box">
</div>
</div>
</body>
<script type="text/javascript">
var box = document.getElementById('box');
/*
若是沒有設置定位，那麼：
offsetTop是指上方盒子margin的寬度
offsetLeft指的是左邊盒子margin的寬度
offsetHeight指的是盒子 border+padding+content的高度
offsetWidth指的是盒子border+padding+content的寬度
* */
console.log(box.offsetTop)
console.log(box.offsetLeft)
console.log(box.offsetWidth)
console.log(box.offsetHeight)
</script>
</html>
若是設置了父相子覺，那麼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#wrap{
position: relative;
width: 400px;
height: 400px;
border: 1px solid black;
}
#box{
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
border: 1px solid red;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="box">
</div>
</div>
</body>
<script type="text/javascript">
var box = document.getElementById('box');
/*
若是設置定位，那麼：
offsetTop是指上方盒子外邊框到父盒子頂部的距離
offsetLeft指的是左邊盒子的外邊框到父盒子左邊的距離
offsetHeight指的是盒子 border+padding+content的高度
offsetWidth指的是盒子border+padding+content的寬度
* */
console.log(box.offsetTop)
console.log(box.offsetLeft)
console.log(box.offsetWidth)
console.log(box.offsetHeight)
</script>
</html>
相關文章
- 1. Javascript---Javascript簡介
- 2. Javascript- Javascript學習
- 3. javascript --- javascript與DOM
- 4. [Javascript] Decorators in JavaScript
- 5. JavaScript（一）：JavaScript簡介
- 6. javascript[1] — 初識 javascript
- 7. 【JavaScript】——淺談js（JavaScript）
- 8. Web 開發技術- JavaScript- JavaScript - JavaScript -String
- 9. Javascript Objects - Javascript語法基礎 - Javascript核心
- 10. JavaScript基礎:javaScript基本語法,javaScript DOM,javaScript事件,javaScript綜合案例
- 更多相關文章...
- • JavaScript 指南 - 網站建設指南
- • ASP 子程序 - ASP 教程
- • YAML 入門教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 外部其他進程嵌入到qt FindWindow獲得窗口句柄 報錯無法鏈接的外部符號 [email protected] 無法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的應用-TOPK問題
- 6. 實例演示ElasticSearch索引查詢term,match,match_phase,query_string之間的區別
- 7. 數學基礎知識 集合
- 8. amazeUI 復擇框問題解決
- 9. 揹包問題理解
- 10. 算數平均-幾何平均不等式的證明,從麥克勞林到柯西
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Javascript---Javascript簡介
- 2. Javascript- Javascript學習
- 3. javascript --- javascript與DOM
- 4. [Javascript] Decorators in JavaScript
- 5. JavaScript（一）：JavaScript簡介
- 6. javascript[1] — 初識 javascript
- 7. 【JavaScript】——淺談js（JavaScript）
- 8. Web 開發技術- JavaScript- JavaScript - JavaScript -String
- 9. Javascript Objects - Javascript語法基礎 - Javascript核心
- 10. JavaScript基礎:javaScript基本語法,javaScript DOM,javaScript事件,javaScript綜合案例