前端- JavaScript - 總結
阿新 • • 發佈：2018-06-24
oat 驅動 CM mes 事件 完成 script money python
1、JavaScript的介紹
javaScript是一種web前端的描述語言，也是一種基於對象（object）和事件驅動（Event Driven）的、安全性好的腳本語言。 它運行在客戶端從而減輕服務器的負擔。
1.javaScript的特點： javaScript主要用來向html頁面中添加交互行為 javaScript是一種腳本語言，語法和c語言系列語言的語法類似，屬弱語言類型。 javaScript一般用來編寫客戶端腳本，如node.js例外。 javaScript是一種解釋型語言，邊執行邊解釋無需另外編譯。2.javaScript的用途: 解決頁面交互和數據交互，最終目的是豐富客戶端效果以及數據的有效傳遞。 1.實現頁面交互，提升用戶體驗實現頁面特效。即js操作html的dom節構或操作樣式。 2.客戶端表單驗證即在數據送達服務端之前進行用戶提交信息即時有效地驗證，減輕服務器壓力。即數據交互。 3.javaScript和ECMAScript的關系： ECMAScript是歐洲計算機制造商協會，基於美國網景通訊公司的Netscape發明的javaScript和 Microsoft公司隨後模仿javaScript推出JScript腳本語言制定了ECMAScript標準。4.javaScript的組成： ECMAScript、DOM、BOM
2、三種引入方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 外鏈式 --> <script src="./1.js"></script> </head> <body> <!-- 行內式引入--><p id=‘p1‘ onclick="clickhandler()">123</p> </body> <!-- 內部式 --> 建議 引入的時候要在body之後，我們要等待所有的dom元素加載完成之後再去執行相應的js操作 <script type="text/javascript"> document.write(‘<span class="span1">233</span>‘) console.log(‘星兒今天很漂亮！‘) </script> </html>
3、變量
1.變量與常量
變量：即在程序運行過程中它的值是允許改變的量。
常量：即在程序運行過程中它的值是不允許改變的量
2.變量的聲明和定義
#1.先聲明後定義 var dog; // alert(dog) //undefined 未定義 // 定義 dog = ‘小黃‘; #2.聲明立刻定義 var dog_2 = ‘小紅‘; console.log(dog_2); //小紅
3.變量名規範
1.嚴格區分大小寫 2.命名時名稱可以出現字母、數字、下劃線、$ ,但是不能數字開頭，也不能純數字 ，不能包含關鍵字和保留字。 關鍵字：var number 除了關鍵字 top name 也盡量不使用。 3.推薦駝峰命名法：有多個有意義的單詞組成名稱的時候，第一個單詞的首字母小寫，其余的單詞首字母寫 4.匈牙利命名：就是根據數據類型單詞的的首字符作為前綴
4、javascript中的數據類型
數據類型包括：基本數據類型和引用數據類型
# 5種基本數據類型
基本數據類型指的是簡單的數據段
1.number var a = 123; 2.string var str = ‘123‘ 3.boolean var b1 = false; 4.null var c1 = null;//空對象. object 5.undefined var d1; //表示變量未定義
#5種引用數據類型 引用數據類型指的是有多個值構成的對象 Function Object Arrray String Date
查看數據類型： console.log(typeof b1);
5、數據類型的轉換
<script type="text/javascript">
// 1.將數字類型 轉換成字符串類型
var n1 = 123;
var n2 = ‘123‘;
var n3 = n1+n2;
// 隱式轉換
console.log(typeof n3);
// 強制類型轉換 String() toString()
var str1 = String(n1);
console.log(typeof str1);
var num = 234;
console.log(num.toString())
// 2.將字符串類型 轉換成數字類型
var stringNum = ‘789.123wadjhkd‘;
var num2 = Number(stringNum);
console.log(num2)
// parseInt()可以解析一個字符串 並且返回一個整數
console.log(parseInt(stringNum))
console.log(parseFloat(stringNum));
// 3.在我們js中所有的數據類型 都被轉化為boolean類型
var b1 = ‘123‘;
var b2 = 0;
var b3 = -123
var b4 = Infinity; //
var b5 = NaN;
var b6; //undefined
var b7 = null;
// 非0真1
console.log(Boolean(b7))
</script>
6、js的運算符
1，算術運算符(+ - * / % ++ -- ) 2，比較運算符(> >= < <= != == === !==) 3，邏輯運算符(&& || ！) 4，賦值運算符(= += -= *= /=) 5，字符串運算符(+ 連接，兩邊操作數有一個或兩個是字符串就做連接運算)
<script type="text/javascript">
// 1.賦值運算符
var money = prompt(‘請輸入金額....‘);
var saveMoney = money * (1+0.02);
console.log(saveMoney)
// 2.算數運算 + - * / %
var a = 10;
var b = 9;
var sum = a + b;
var min = a - b;
var div = a /b;
var lef = a % b;
// 3.復合運算符 a++ ++a
var c = 7,d = 8;
// d = c + d;
d+=c;
console.log(d);
d++; //d = d+1
console.log(d);
// 自增 自減
// d++ :先賦值後++ 先將d的值賦值給c1 然後再讓d加上1 對d賦值
var c1 = d++;
console.log(c1); //8
console.log(d); //9
// ++d:先相加後賦值
var c2 = ++d;
console.log(c2); //10
// 3.比較運算符
// > ,<, >=, <=,== ,===
console.log(5>6);
// 隱式轉換== 比較的是值的大小。=== 是類型和值都進行比較
console.log("5" === 5);
// 4.邏輯運算符 && and || or
console.log(false && false); // && 都真為真 只要有一個是假就為假
console.log(false || false); // || 有真就真。或者的意思
</script>
特殊：字符串拼接
// 不能對字符串進行+運算 只能拼接 var a1 = ‘1‘; var a2 = ‘2‘; console.log(a1+a2); //12 console.log(typeof(a1*a2));
6、流程控制
1.if語句： if (true) { //執行操作 }else if(true){ //滿足條件執行 }else if(true){ //滿足條件執行 }else{ //滿足條件執行 } 註意：瀏覽器解析代碼的順序 是從上往下執行，從左往右 2.switch: var gameScore = ‘good‘; switch(gameScore){ case ‘best‘: console.log(‘best‘); break; case ‘good‘: console.log(‘good‘); break; case ‘better‘: console.log(‘better‘); break; default: console.log(‘default‘) } 3.while: 循環三步走： 1.初始化循環變量 2.判斷循環條件 3.更新循環變量 var j=1; while(j<=100){ if(j%3===0){ console.log(j) } j++; } 4.do_while: 1.初始化循環變量 2.判斷循環條件 3.更新循環變量 //不管有沒有滿足while中的條件do裏面的代碼都會走一次 var i = 3; do{ console.log(i); i++; }while(i<=5); 5.for: 1.初始化 2.循環條件 3.更新循環變量 for(var i = 0; i < 100; i++){ if(i%2 === 0){ console.log(i) } } for(var i=1;i<=3;i++){ for(var j=1;j<=6;j++){ document.write(‘*‘) } document.write(‘<br>‘) }
# 打印三角形 1 * * * * * * * * * * * * * * * * * * * * * for(var i=1;i<=6;i++){ for(var j=1;j<=i;j++){ document.write(‘*‘) } document.write(‘<br>‘) } # 打印三角形 2 * 2*1-1 *** 2*2-1 ***** 2*3-1 ******* 2*4-1 ********* 2*5-1 *********** 2*6-1 for(var m=1;m<=6;m++){ for(var n1=m;n1<6;n1++){ document.write(‘ ‘) } for(var n2=1;n2<=2*m-1;n2++){ document.write(‘*‘) } document.write(‘<br>‘) } # 打印三角形 3 * 2*1-1 *** 2*2-1 ***** 2*3-1 ******* 2*4-1 ********* 2*5-1 *********** 2*6-1 ********* ******* ***** *** * for(var a=1;a<=11;a++){ if(a<=6) { for (var a1 = a; a1 < 6; a1++) { document.write(‘ ‘) } }else{ for(var a2=7;a2<=a; a2++){ document.write(‘ ‘) } } if(a<=6){ for(var a3=1;a3<=2*a-1;a3++){ document.write(‘*‘) } }else{ for(var a4=a*2-1;a4<22;a4++){ document.write(‘*‘) } } document.write(‘<br>‘) }
7.內置對象
數組Array，字符串String，日期Date，Math內置對象
內置對象就是ECMAScript提供出來的一些對象，我們知道對象都是有相應的屬性和方法
http://www.cnblogs.com/venicid/p/9128094.html
前端- JavaScript - 總結