javascript
dya50 javascript
01-JAVAscript 簡(jiǎn)介:
HTML: 從語(yǔ)義的角度,描述頁(yè)面結(jié)構(gòu)。
CSS:從審美的角度,描述樣式(美化頁(yè)面)
JavaScript:從交互的角度,描述行為(提升用戶(hù)體驗(yàn))
?
?
?
Java中需要定義如下變量:
int a;float a;double a;String a;boolean a;而JavaScript中,只用定義一個(gè)變量:
var a;- JavaScript不用關(guān)心其他的一些事情(比如內(nèi)存的釋放、指針等),更關(guān)心自己的業(yè)務(wù)。
?
?
?
JavaScript是前臺(tái)語(yǔ)言
?
?
JavaScript的組成
JavaScript基礎(chǔ)分為三個(gè)部分:
-
ECMAScript:JavaScript的語(yǔ)法標(biāo)準(zhǔn)。包括變量、表達(dá)式、運(yùn)算符、函數(shù)、if語(yǔ)句、for語(yǔ)句等。
-
DOM:操作網(wǎng)頁(yè)上的元素的API。比如讓盒子移動(dòng)、變色、輪播圖等。
-
BOM:操作瀏覽器部分功能的API。比如讓瀏覽器自動(dòng)滾動(dòng)。
?
?
JavaScript的特點(diǎn)
(1)簡(jiǎn)單易用:可以使用任何文本編輯工具編寫(xiě),只需要瀏覽器就可以執(zhí)行程序。
(2)解釋執(zhí)行(解釋語(yǔ)言):事先不編譯、逐行執(zhí)行、無(wú)需進(jìn)行嚴(yán)格的變量聲明。
(3)基于對(duì)象:內(nèi)置大量現(xiàn)成對(duì)象,編寫(xiě)少量程序可以完成目標(biāo)
?
第一個(gè)JavaScript代碼:
代碼格式:
<script type = 'text/javascript'> </script>?
alert語(yǔ)句(警告彈出框):
<script type = 'text/javascript'>
alert('Json')
</script>
?
語(yǔ)法規(guī)則:
1.JavaScript對(duì)換行、縮進(jìn)、空格不敏感。 # 但是每一條語(yǔ)句末尾末尾都要加上分號(hào)。雖然分分號(hào)不是必須加的,但是為了程序今后要壓宿,如果不加分號(hào)壓縮之后將不能運(yùn)行。
2.所有的符號(hào),都要是英文的,比如括號(hào)、引號(hào)、分號(hào)、
?
3.JavaScript的注釋:
單行注釋:
// 我是注釋多行注釋:
/*多行注釋1多行注釋2 */備注:我們常用的sublime中:??
單行注釋的快捷鍵: ctrl+/
多行注釋的快捷鍵: ctrl +shift+ /
?
JavaScript:
彈出警告框:alert('')
控制臺(tái)輸出: console.log('')
用戶(hù)輸出:prompt('今天天氣好嗎?')
代碼示例:
<script type = 'text/javascript'>alert('是否確認(rèn)提交?')var a = prompt('今天星期幾?');console.log(a); </script>注意:prompt()語(yǔ)句中,用戶(hù)不管輸入什么內(nèi)容,都是字符串。
alert和prompt的區(qū)別:
alert('Are You Ok ?');
var a = prompt('請(qǐng)輸入一個(gè)數(shù)字');
?
常量: 數(shù)字、字符串。
1.alet(886);
2.字符串必須要加上引號(hào)(單、雙無(wú)所謂)
?
變量的定義:
var a = 1;var 是'variant' 變量的縮寫(xiě)。后面一定要用一個(gè)空格和變量名割開(kāi)。
——定義變量:var是一個(gè)關(guān)鍵字,用來(lái)定義變量。
——變量的賦值:等號(hào)表賦值,把右邊的值賦給左邊的變量
注意:在JavaScript中:永遠(yuǎn)都是用var來(lái)定義變量
<script type = 'text/javascript'>var a = 1;console.log(a); </script>?
?
JavaScript: (變量命名規(guī)范):
變量命名:只能由英文、數(shù)字、字母、下劃線、$符號(hào)構(gòu)成,且不能以數(shù)字開(kāi)頭、不能是JavaScript的保留字(關(guān)鍵字);
?
JavaScript中的關(guān)鍵字:
abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile?
JavaScript中的一些常見(jiàn)數(shù)據(jù)類(lèi)型:
?
數(shù)值型 : number<script type = 'text/javascript'>
var a = 100;console.log(typeof a);</script>
?
typeof() 表示 “獲取變量類(lèi)型” :
格式: typeof 變量
在JavaScript中,只要是數(shù),就是數(shù)值類(lèi)型的(number).無(wú)論正負(fù)、浮點(diǎn)數(shù)(小數(shù))、等都是number類(lèi)型的。
?
字符串類(lèi)型:string
var a = 'abcde';var b = '路飛';var c = '123123';var c = '索隆';var e = ''; //空字符串 console.log(typeof a);console.log(typeof b);console.log(typeof c);console.log((typeof d);console.log(typeof e);
?
鍵盤(pán)上的+可能是連字符,也可能是數(shù)字的加號(hào)。如下:
console.log("我" + "愛(ài)" + "你"); //連字符,把三個(gè)獨(dú)立的漢字,連接在一起了console.log("我+愛(ài)+你"); //原樣輸出console.log(1+2+3); //輸出6總結(jié):如果加號(hào)兩邊都是數(shù)值,此時(shí)是加。否則,就是連字符(用來(lái)連接字符串)。
?
變量值的傳遞(賦值):
a = b;
?
var a = "3";var b = 2;console.log(a-b);效果:(注意,字符串 - 數(shù)值 = 數(shù)值)
?
變量格式轉(zhuǎn)換:
字符串轉(zhuǎn)數(shù)字:
parseInt()
<script type = 'text/javascript'>var a = '2r24rwfdsf'var b = parseInt(a); </script>?
parseInt()還具有以下特性:
(1)帶有自動(dòng)凈化的功能;只保留字符串最開(kāi)頭的數(shù)字,后面的中文自動(dòng)消失。例如:
console.log(parseInt("2018你真帥!!");(2)自動(dòng)帶有截?cái)嘈?shù)的功能:取整,不四舍五入。
var a = parseInt(5.8) + parseInt(4.7); console.log(a); var a = parseInt(5.8 + 4.7);console.log(a);?
?
3、數(shù)據(jù)類(lèi)型:
數(shù)據(jù)類(lèi)型包括:基本數(shù)據(jù)類(lèi)型和引用數(shù)據(jù)類(lèi)型
基本數(shù)據(jù)類(lèi)型指的是簡(jiǎn)單的數(shù)據(jù)段,引用數(shù)據(jù)類(lèi)型指的是有多個(gè)值構(gòu)成的對(duì)象。
當(dāng)我們把變量賦值給一個(gè)變量時(shí),解析器首先要確認(rèn)的就是這個(gè)值是基本類(lèi)型值還是引用類(lèi)型值
1.基本數(shù)據(jù)類(lèi)型
- number
- string
?
- boolean
?
- null
?
- undefined
2.引用數(shù)據(jù)類(lèi)型
- Function
- Object
- Arrray
- String
- Date
04-運(yùn)算符
js中的運(yùn)算符跟python中的運(yùn)算符有點(diǎn)類(lèi)似,但也有不同。所謂運(yùn)算,在數(shù)學(xué)上,是一種行為,通過(guò)已知量的可能的組合,獲得新的量。
1.賦值運(yùn)算符
以var x = 12,y=5來(lái)演示示例|
?
2.算數(shù)運(yùn)算符
var a = 5,b=2
3.比較運(yùn)算符
var x = 5;
4.特殊情況
字符串拼接+字符串運(yùn)算 特殊情況。python中有拼接字符串中更簡(jiǎn)便的辦法,其實(shí)在js中也有,大家可以百度引擎搜索es6模板字符串。(擴(kuò)展)
var firstName = '趙'; var lastName = '森'; var name = '伊拉克'; var am = '美軍'; // 字符串拼接 var str = "2003年3月20日,"+name+"戰(zhàn)爭(zhēng)爆發(fā),以美軍為主的聯(lián)合部隊(duì)僅用20多天就擊潰了薩達(dá)姆的軍隊(duì)。這是繼十多年前的海灣戰(zhàn)爭(zhēng)后,"+am+"又一次取得的大規(guī)模壓倒性軍事勝利。" var fullStr = str; console.log(fullStr)var fullName = firstName +" "+ lastName; console.log(fullName) // 不能對(duì)字符串進(jìn)行+運(yùn)算 只能拼接 var a1 = '1'; var a2 = '2'; console.log(a1-a2) //12 var b1 = 'one'; var b2 = 'two';// NaN. ==== not a number 是number類(lèi)型 console.log(typeof(b1*b2))
?
05-數(shù)據(jù)類(lèi)型轉(zhuǎn)換
語(yǔ)言中我們的數(shù)據(jù)類(lèi)型有很多,在某個(gè)頁(yè)面中展示的數(shù)據(jù)類(lèi)型也不同,比如說(shuō)電話(huà)號(hào)碼我就要求number的類(lèi)型,而輸入姓名的時(shí)候就要求string類(lèi)型的。那么在適當(dāng)?shù)那闆r下我們可以將數(shù)據(jù)類(lèi)型進(jìn)行轉(zhuǎn)換。
1.將數(shù)值類(lèi)型轉(zhuǎn)換成字符串類(lèi)型
隱式轉(zhuǎn)換
var n1 = 123; var n2 = '123'; var n3 = n1+n2; // 隱式轉(zhuǎn)換 console.log(typeof n3);強(qiáng)制類(lèi)型轉(zhuǎn)換
// 強(qiáng)制類(lèi)型轉(zhuǎn)換String(),toString() var str1 = String(n1); console.log(typeof str1);var num = 234; console.log(num.toString())?
2.將字符串類(lèi)型轉(zhuǎn)換成數(shù)值類(lèi)型
var stringNum = '789.123wadjhkd'; var num2 = Number(stringNum); console.log(num2)// parseInt()可以解析一個(gè)字符串 并且返回一個(gè)整數(shù) console.log(parseInt(stringNum)) console.log(parseFloat(stringNum));3.任何數(shù)據(jù)類(lèi)型都可以轉(zhuǎn)換為boolean類(lèi)型
var b1 = '123'; var b2 = 0; var b3 = -123var b4 = Infinity; var b5 = NaN;var b6; //undefined var b7 = null;// 非0既真 console.log(Boolean(b7))?
06-流程控制
1.if 、if-else、if-else if-else
var ji = 20; if(ji >= 20){console.log('恭喜你,吃雞成功,大吉大利') } alert('alex');//下面的代碼還會(huì)執(zhí)行 var ji = 20; if(ji>=20){console.log('恭喜你,吃雞成功,大吉大利') }else{console.log('很遺憾 下次繼續(xù)努力')} if (true) {//執(zhí)行操作 }else if(true){//滿(mǎn)足條件執(zhí)行 }else if(true){//滿(mǎn)足條件執(zhí)行 }else{//滿(mǎn)足條件執(zhí)行 } 注意:瀏覽器解析代碼的順序 是從上往下執(zhí)行,從左往右2.邏輯與&&、邏輯或||
//1.模擬 如果總分 >400 并且數(shù)學(xué)成績(jī) >89分 被清華大學(xué)錄入 //邏輯與&& 兩個(gè)條件都成立的時(shí)候 才成立 if(sum>400 && math>90){console.log('清華大學(xué)錄入成功') }else{alert('高考失利') } //2.模擬 如果總分>400 或者你英語(yǔ)大于85 被復(fù)旦大學(xué)錄入 //邏輯或 只有有一個(gè)條件成立的時(shí)候 才成立 if(sum>500 || english>85){alert('被復(fù)旦大學(xué)錄入') }else{alert('高考又失利了') }3.switch
var gameScore = 'better';switch(gameScore){//case表示一個(gè)條件 滿(mǎn)足這個(gè)條件就會(huì)走進(jìn)來(lái) 遇到break跳出。break終止循環(huán)。如果某個(gè)條件中不寫(xiě) break,那么直到該程序遇到下一個(gè)break停止case 'good':console.log('玩的很好')//break表示退出break;case 'better':console.log('玩的老牛逼了')break;case 'best':console.log('恭喜你 吃雞成功')break;default:console.log('很遺憾')}4.while循環(huán)
循環(huán)三步走:
1.初始化循環(huán)變量
2.判斷循環(huán)條件
3.更新循環(huán)變量
var i = 1; //初始化循環(huán)變量while(i<=9){ //判斷循環(huán)條件console.log(i);i = i+1; //更新循環(huán)條件 }練習(xí):將1-100所有是2的倍數(shù)在控制臺(tái)中打印。使用while循環(huán)
5.do_while
?
//不管有沒(méi)有滿(mǎn)足while中的條件do里面的代碼都會(huì)走一次 var i = 3;//初始化循環(huán)變量 do{console.log(i)i++;//更新循環(huán)條件}while (i<10) //判斷循環(huán)條件6.for循環(huán)
for(var i = 1;i<=10;i++){console.log(i)}課堂練習(xí):
for(var i = 1;i<=100;i++){if(i%2==0){//是偶數(shù)console.log(i)} }1-100之間所有數(shù)之和
var sum = 0; for(var j = 1;j<=100;j++){sum = sum+j } console.log(sum)雙重fo循環(huán)
for(var i=1;i<=3;i++){for(var j=0;j<6;j++){document.write('*')}document.write('<br>')}?
小作業(yè):
1.在瀏覽器中輸出直角三角形
* ** ******************代碼:
for(var i=1;i<=6;i++){for(var j=1;j<=i;j++){document.write("*");}document.write('<br>'); }2.在瀏覽器中輸出
* *** ***** ******* ********* ***********代碼:
for(var i=1;i<=6;i++){ //行數(shù)//控制我們的空格數(shù)for(var s=i;s<6;s++){document.write(' ')}for(var j=1;j<=2*i-1;j++){document.write('*')}document.write('<br>')}?
?
?
07-常用內(nèi)置對(duì)象
所謂內(nèi)置對(duì)象就是ECMAScript提供出來(lái)的一些對(duì)象,我們知道對(duì)象都是有相應(yīng)的屬性和方法
數(shù)組Array
1.數(shù)組的創(chuàng)建方式
- 字面量方式創(chuàng)建(推薦大家使用這種方式,簡(jiǎn)單粗暴)
- 使用構(gòu)造函數(shù)(后面會(huì)講)的方式創(chuàng)建 使用new關(guān)鍵詞對(duì)構(gòu)造函數(shù)進(jìn)行創(chuàng)建對(duì)象
2.數(shù)組的賦值
var arr = []; //通過(guò)下標(biāo)進(jìn)行一一賦值 arr[0] = 123; arr[1] = '哈哈哈'; arr[2] = '嘿嘿嘿'3.數(shù)組的常用方法
3.1 數(shù)組的合并?concat()
var north = ['北京','山東','天津']; var south = ['東莞','深圳','上海'];var newCity = north.concat(south); console.log(newCity)?
3.2 join()?將數(shù)組中的元素使用指定的字符串連接起來(lái),它會(huì)形成一個(gè)新的字符串
var score = [98,78,76,100,0]; var str = score.join('|'); console.log(str);//98|78|76|100|03.3?將數(shù)組轉(zhuǎn)換成字符串 toString()
var score = [98,78,76,100,0]; //toString() 直接轉(zhuǎn)換為字符串 每個(gè)元素之間使用逗號(hào)隔開(kāi)var str = score.toString(); console.log(str);//98,78,76,100,03.4 slice(start,end); 返回?cái)?shù)組的一段,左閉右開(kāi)
var arr = ['張三','李四','王文','趙六']; var newArr = arr.slice(1,3); console.log(newArr);//["李四", "王文"]3.5 pop 移除數(shù)組的最后一個(gè)元素
var arr = ['張三','李四','王文','趙六']; var newArr = arr.pop(); console.log(newArr);//返回值是‘趙六’3.6 push() 向數(shù)組最后添加一個(gè)元素
var arr = ['張三','李四','王文','趙六']; var newArr = arr.push('小馬哥'); console.log(newArr);// 返回值是5;3.7 reverse() 翻轉(zhuǎn)數(shù)組
var names = ['alex','xiaoma','tanhuang','angle'];//4.反轉(zhuǎn)數(shù)組 names.reverse(); console.log(names);3.8 sort對(duì)數(shù)組排序
var names = ['alex','xiaoma','tanhuang','abngel']; names.sort(); console.log(names);//?["alex", "angle", "tanhuang", "xiaoma"]?3.9?判斷是否為數(shù)組:isArray()
布爾類(lèi)型值 = Array.isArray(被檢測(cè)的值) ;?
4.字符串String
字符串方法
?
4.1 chartAt() 返回指定索引的位置的字符
var str = 'alex'; var charset = str.charAt(1); console.log(charset);//l4.2 concat 返回字符串值,表示兩個(gè)或多個(gè)字符串的拼接
var str1 = 'al'; var str2 = 'ex'; console.log(str1.concat(str2,str2));//alexex4.3 replace(a,b) 將字符串a(chǎn)替換成字符串b
var a = '1234567755'; var newStr = a.replace("4567","****"); console.log(newStr);//123****7554.4 indexof() 查找字符的下標(biāo),如果找到返回字符串的下標(biāo),找不到則返回-1 。跟seach()方法用法一樣
var str = 'alex'; console.log(str.indexOf('e'));//2 console.log(str.indexOf('p'));//-14.5 slice(start,end) 左閉右開(kāi) 分割字符串
var str = '小馬哥'; console.log(str.slice(1,2));//馬4.6 split('a',1) 以字符串a(chǎn)分割字符串,并返回新的數(shù)組。如果第二個(gè)參數(shù)沒(méi)寫(xiě),表示返回整個(gè)數(shù)組,如果定義了個(gè)數(shù),則返回?cái)?shù)組的最大長(zhǎng)度
var str = '我的天呢,a是嘛,你在說(shuō)什么呢?a哈哈哈'; console.log(str.split('a'));//["我的天呢,", "是嘛,你在說(shuō)什么呢?", "哈哈哈"]4.7 substr(statr,end) 左閉右開(kāi)
var str = '我的天呢,a是嘛,你在說(shuō)什么呢?a哈哈哈'; console.log(str.substr(0,4));//我的天呢4.8 toLowerCase()轉(zhuǎn)小寫(xiě)
var str = 'XIAOMAGE'; console.log(str.toLowerCase());//xiaomage4.9 toUpperCase()轉(zhuǎn)大寫(xiě)
var str = 'xiaomage'; console.log(str.toUpperCase());特別:
//1.將number類(lèi)型轉(zhuǎn)換成字符串類(lèi)型 var num = 132.32522; var numStr = num.toString() console.log(typeof numStr) //四舍五入 var newNum = num.toFixed(2) console.log(newNum)5.Date日期對(duì)象
創(chuàng)建日期對(duì)象只有構(gòu)造函數(shù)一種方式,使用new關(guān)鍵字
//創(chuàng)建了一個(gè)date對(duì)象 var myDate = new Date(); //創(chuàng)建日期對(duì)象 var myDate=new Date();//獲取一個(gè)月中的某一天 console.log(myDate.getDate());//返回本地時(shí)間 console.log(myDate().toLocaleString());//2018/5/27 下午10:36:23?注意: 是‘toLocaleString’? 是? locale 而不是 local?
?
6.Math 內(nèi)置對(duì)象
常用內(nèi)置對(duì)象
?6.1 Math.ceil() 向上取整,'天花板函數(shù)'
var x = 1.234; //天花板函數(shù) 表示大于等于 x,并且與它最接近的整數(shù)是2 var a = Math.ceil(x); console.log(a);//26.2 Math.floor 向下取整,'地板函數(shù)'
var x = 1.234; // 小于等于 x,并且與它最接近的整數(shù) 1 var b = Math.floor(x); console.log(b);//16.3 求兩個(gè)數(shù)的最大值和最小值
//求 兩個(gè)數(shù)的最大值 最小值 console.log(Math.max(2,5));//5 console.log(Math.min(2,5));//26.4 隨機(jī)數(shù) Math.random()
var ran = Math.random(); console.log(ran);[0,1)如果讓你取100-200之間的隨機(jī)數(shù),怎么做?
背過(guò)公式:min - max之間的隨機(jī)數(shù): min+Math.random()*(max-min)
?
?
函數(shù):就是將一些語(yǔ)句進(jìn)行封裝,然后通過(guò)調(diào)用的形式,執(zhí)行這些語(yǔ)句。
函數(shù)的作用:
-
將大量重復(fù)的語(yǔ)句寫(xiě)在函數(shù)里,以后需要這些語(yǔ)句的時(shí)候,可以直接調(diào)用函數(shù),避免重復(fù)勞動(dòng)。
-
簡(jiǎn)化編程,讓編程模塊化。
第一步:函數(shù)的定義
函數(shù)定義的語(yǔ)法:
function 函數(shù)名字(){}解釋如下:
-
function:是一個(gè)關(guān)鍵字。中文是“函數(shù)”、“功能”。
-
函數(shù)名字:命名規(guī)定和變量的命名規(guī)定一樣。只能是字母、數(shù)字、下劃線、美元符號(hào),不能以數(shù)字開(kāi)頭。
-
參數(shù):后面有一對(duì)小括號(hào),里面是放參數(shù)用的。
-
大括號(hào)里面,是這個(gè)函數(shù)的語(yǔ)句。
第二步:函數(shù)的調(diào)用
函數(shù)調(diào)用的語(yǔ)法:
函數(shù)名字();函數(shù)的參數(shù):形參和實(shí)參
函數(shù)的參數(shù)包括形參和實(shí)參
注意:實(shí)際參數(shù)和形式參數(shù)的個(gè)數(shù),要相同。
例子:
sum(3,4);sum("3",4);sum("Hello","World");//函數(shù):求和function sum(a, b) {console.log(a + b);}函數(shù)的返回值
例子:
console.log(sum(3, 4));//函數(shù):求和function sum(a, b) {return a + b;}?
09-偽數(shù)組 arguments
arguments代表的是實(shí)參。有個(gè)講究的地方是:arguments只在函數(shù)中使用。
(1)返回函數(shù)實(shí)參的個(gè)數(shù):arguments.length
例子:
fn(2,4);fn(2,4,6);fn(2,4,6,8);function fn(a,b,c) {console.log(arguments);console.log(fn.length); //獲取形參的個(gè)數(shù)console.log(arguments.length); //獲取實(shí)參的個(gè)數(shù)console.log("----------------");}結(jié)果:
(2)之所以說(shuō)arguments是偽數(shù)組,是因?yàn)?#xff1a;arguments可以修改元素,但不能改變數(shù)組的長(zhǎng)短。舉例:
fn(2,4);fn(2,4,6);fn(2,4,6,8);function fn(a,b) {arguments[0] = 99; //將實(shí)參的第一個(gè)數(shù)改為99arguments.push(8); //此方法不通過(guò),因?yàn)闊o(wú)法增加元素}清空數(shù)組的幾種方式:
var array = [1,2,3,4,5,6];array.splice(0); //方式1:刪除數(shù)組中所有項(xiàng)目array.length = 0; //方式1:length屬性可以賦值,在其它語(yǔ)言中l(wèi)ength是只讀array = []; //方式3:推薦?
轉(zhuǎn)載于:https://www.cnblogs.com/zsdbk/p/9113069.html
總結(jié)
以上是生活随笔為你收集整理的dya50 javascript的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 小米强推5G手机,自家的4G手机却被迫大
- 下一篇: 攻防世界逆向高手题之crazy