JavaScript-ECMAScript
一.Javacsript簡介
Web前端有三層：
HTML：從語義的角度，描述頁面結構
CSS：從審美的角度，描述樣式（美化頁面）
JavaScript：從交互的角度，描述行爲（提高用戶體驗）
JavaScript歷史背景介紹
布蘭登 • 艾奇（Brendan Eich，1961年～），1995年在網景公司，發明的JavaScript。
一開始JavaScript叫作LiveScript，可是因爲當時Java這個語言特別火，因此爲了傍大牌，就更名爲JavaScript。如同「北大」和「北大青鳥」的關係。「北大青鳥」就是傍「北大」大牌。
同時期還有其餘的網頁語言，好比VBScript、JScript等等，可是後來都被JavaScript戰勝了，因此如今的瀏覽器中，只運行一種腳本語言就是JavaScript
JavaScript和ECMAScript的關係
ECMAScript是一種由Ecma國際（前身爲歐洲計算機制造商協會,英文名稱是European Computer Manufacturers Association）制定的標準。
JavaScript是由公司開發而成的，問題是不便於其餘的公司拓展和使用。因此歐洲的這個ECMA的組織，牽頭制定JavaScript的標準，取名爲ECMAScript。
簡單來講，ECMAScript不是一門語言，而是一個標準。符合這個標準的比較常見的有：JavaScript、Action Script（Flash中用的語言）。就是說，你JavaScript學完了，Flash中的程序也就垂手可得了。
ECMAScript在2015年6月，發佈了ECMAScript 6版本，語言的能力更強（也包含了不少新特性）。可是，瀏覽器的廠商不能那麼快去追上這個標準。
JavaScript的發展：蒸蒸日上
http://2004.sina.com.cn/
http://2008.sina.com.cn/
http://2012.sina.com.cn/
上面三個網站能夠感覺一下網頁技術的發展。
2003年以前，JavaScript被認爲「牛皮鮮」，用來製做頁面上的廣告，彈窗、漂浮的廣告。什麼東西讓人煩，什麼東西就是JavaScript開發的。因此瀏覽器就推出了屏蔽廣告功能。
2004年，JavaScript命運開始改變，那一年，谷歌公司開始帶頭使用Ajax技術，Ajax技術就是JavaScript的一個應用。而且，那時候人們逐漸開始提高用戶體驗了。Ajax有一些應用場景。好比，當咱們在百度搜索框搜文字時，輸入框下方的智能提示，能夠經過Ajax實現。好比，當咱們註冊網易郵箱時，可以及時發現用戶名是否被佔用，而不用調到另一個頁面。
2007年喬布斯發佈了第一款iPhone，這一年開始，用戶就多了上網的途徑，就是用移動設備上網。
JavaScript在移動頁面中，也是不可或缺的。而且這一年，互聯網開始標準化，按照W3C規則三層分離，JavaScript愈來愈被重視。
2010年，人們更加了解HTML5技術，HTML5推出了一個東西叫作Canvas（畫布），工程師能夠在Canvas上進行遊戲製做，利用的就是JavaScript。
2011年，Node.js誕生，使JavaScript可以開發服務器程序了。
現在，WebApp已經很是流行，就是用網頁技術開發手機應用。手機系統有iOS、安卓。好比公司要開發一個「攜程網」App，就須要招聘三隊人馬，好比iOS工程師10人，安卓工程師10人，前端工程師10人。共30人，開發成本大；並且若是要改版，要改3個版本。如今，假設公司都用web技術，用html+css+javascript技術就能夠開發App。也易於迭代（網頁一改變，全部的終端都變了）。
雖然目前WebApp在功能和性能上的體驗遠不如Native App，可是「WebApp慢慢取代Native App」頗有多是將來的趨勢。
JavaScript入門易學性
JavaScript對初學者比較友好。
JavaScript是有界面效果的（好比C語言只有白底黑字）。
JavaScript是弱變量類型的語言，變量只須要用var來聲明。而Java中變量的聲明，要根據變量的類型來定義。
好比Java中須要定義以下變量：
int a;
float a;
double a;
String a;
boolean a;
而JavaScript中，只用定義一個變量：
var a;
JavaScript不用關心其餘的一些事情（好比內存的釋放、指針等），更關心本身的業務。
JavaScript是前臺語言
JavaScript是前臺語言，而不是後臺語言。
JavaScript運行在用戶的終端網頁上，而不是服務器上，因此咱們稱爲「前臺語言」。JavaScript就是一個簡單的製做頁面效果的語言，就是服務於頁面的交互效果、美化、絢麗、不能操做數據庫。
後臺語言是運行在服務器上的，好比PHP、ASP、JSP等等，這些語言都可以操做數據庫，都可以對數據庫進行「增刪改查」操做。Node.js除外。
JavaScript的組成
JavaScript基礎分爲三個部分：
ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。
DOM：操做網頁上的元素的API。好比讓盒子移動、變色、輪播圖等。
BOM：操做瀏覽器部分功能的API。好比讓瀏覽器自動滾動。
PS：JS機械重複性的勞動幾乎爲0，基本都是創造性的勞動。而不像HTML、CSS中margin、padding都是機械重複勞動。
JavaScript的特色
（1）簡單易用：可使用任何文本編輯工具編寫，只須要瀏覽器就能夠執行程序。
（2）解釋執行（解釋語言）：事先不編譯、逐行執行、無需進行嚴格的變量聲明。
（3）基於對象：內置大量現成對象，編寫少許程序能夠完成目標
二.代碼編寫
1.引入JavaScript代碼的方式
在body標籤中插入<script type="text/javascript"></script>
2.語法規則
(1)javascript對換行,縮進,空格不敏感
(2)爲了程序壓縮後能正常使用,每一條語句末尾都要加分號
(3)單行註釋//
多行註釋/* */
單行註釋的快捷鍵是ctrl+/，多行註釋的快捷鍵是ctrl+shift+/
3.JavaScript在頁面中輸出信息
(1)彈出警告框:alert('xxx')
(2)控制檯輸出:console.log('xxx')
此時輸出的xxx至關於 window.xxx, window能夠省略不寫
4.用戶輸入:prompt()
此時無論用戶輸入的是什麼,咱們獲得的都是字符串
<script type="text/javascript">
a=prompt('今天心情怎麼樣?')
console.log(a)
</script>
5.直接量
數字語法:直接寫
字符串語法:加引號
6.變量
語法:var 變量名
var a;
a=2; 先聲明變量,再賦值
var b=3; 直接聲明賦值
7.變量命名規範
只能以數字,字母,下劃線組成,且不能以數字開頭(除保留字外)(對大小寫敏感)
8.變量的類型
變量會自動根據存儲內容的類型,來決定本身的類型
獲取變量的類型:
typeof 變量/變量名
數值型:number
var a=100;
在JavaScript中，只要是數，就是數值型(number)的。不管整浮、浮點數（即小數）、不管大小、不管正負，都是number類型的。
字符串型:string
a='asdf';
若是加號兩邊都是數值，此時是加。不然，就是連字符（用來鏈接字符串）。
a='asdf';
b='jkjk';
c=1;
d=2;
console.log(a+b);
console.log(a+c);
console.log(c+d);
字符串(字符串類型的數字) - 數值 = 數值
var a=3;
var b='1';
console.log(a-b);
布爾型:boolean
var a=true;
console.log(typeof a);
null:
var a=null; #空對象
console.log(typeof a); #object
undefined:表示變量定義了,可是沒有被賦值
var a;
console.log(typeof a);
9.變量格式轉換:parseInt
a='5';
b=parseInt(a)
console.log(b)
(1)parseInt自動帶有淨化功能,只保留字符串最開頭的數字，後面的中文自動消失
var a='2018你真帥！！';
b=parseInt(a);
console.log(b);
(2）自動帶有截斷小數的功能：取整，不四捨五入
var a='1.23456';
console.log(parseInt(a))
三.運符
1.賦值運算符javascript
2.算數運算符css
包括 + - * / %,與python中徹底相同html
除此以外還有前端
++ 自增java
// alert(2); var a = 5; //var x = a++; 先將a的值賦值給x，x輸出5，再對a++ a就是6 // var x = a++; // console.log(a); //6 // console.log(x); //5 var x = ++a; // 先a++,再賦值 console.log(a); //6 console.log(x); //6
-- 自減(同上)python
3.比較運算符web
4.特殊狀況(字符串拼接的兩種狀況)數據庫
var name='尚宏運'; var time=12; var a=name+'今天學習了'+time+'個小時'; console.log(a) var b=`${name}今天學習了${time}個小時`; console.log(b);
四.數據類型轉換
1.將數值類型轉換成字符串類型
隱式轉換
var a=1;
var b='2';
var c=a+b;
console.log(typeof c);
console.log(c);
強制類型轉換( String toString)
var n=1;
var str=String(n);
console.log(str)
console.log(typeof str)
var a=1;
console.log(a.toString())
console.log(typeof a.toString())
2.將字符串類型轉換成數值型(Number)
var a='123';
var b=Number(a);
console.log(b)
console.log(typeof b)
var a='123asas'; //NaN
var b=Number(a);
console.log(b)
console.log(typeof b)
3.任何數據類型均可以轉換成布爾類型
var b1 = '123';
var b2 = 0; //false
var b3 = -123
var b4 = Infinity;
var b5 = NaN;//false
var b6; //undefined //false
var b7 = null;//false
console.log(Boolean(b1))
console.log(typeof Boolean(b1))
console.log(Boolean(b2))
console.log(typeof Boolean(b2))
console.log(Boolean(b3))
console.log(typeof Boolean(b3))console.log(Boolean(b4))
console.log(typeof Boolean(b4))
console.log(Boolean(b5))
console.log(typeof Boolean(b5))console.log(Boolean(b6))
console.log(typeof Boolean(b6))
console.log(Boolean(b7))
console.log(typeof Boolean(b7))
五.流程控制
1.if
var a=15;
if(a<18){
console.log('未成年')
}
alert('測試完畢')
2.if else
var a=16;
if(a>18){
console.log('成年了')
}else{
console.log('未成年')
}
3.if else-if else
var a=10;
if(a>10){
console.log('大於十')
}else if(a<10){
console.log('小於10')
}else{
console.log('等於10')
}
六.邏輯與,邏輯或
與(&&) 或(||)
var a=20;
if(a>0||a<9){
console.log('0-9')
}else if(a>9&&a<11){
console.log('9-11')
}else{
console.log('<0||>11')
}
七.switch
var haha='5';
switch(haha){ //知足條件就會進來
case '1'://分號
console.log('1');
break;//只有遇到break纔會跳出循環,若是沒寫,就走下一個case,直到走到default
case'2':
console.log('2');
break;
case'3':
console.log('3')
break;
default:
console.log('0')
}
八.while循環
1.while
循環三步走
1.初始化循環變量
2.判斷循環條件
3.更新循環變量
var a=1;//初始化循環變量
while(a<=5){//判斷循環條件
console.log(a);//具體操做
a+=1;//更新循環條件
}
2.do_while
var a=1;
do{
console.log(a);
a++;
}while(a>5);
九.for循環
(1)單層for循環
for(var a=1;a<20;a=a+2){
console.log(a);
}
求1-100之間全部數的和
var sum=0;
for(var a=1;a<=100;a++){
sum=sum+a;
}
console.log(sum);
(2)雙層for循環
for(var i=1;i<3;i++){
for(var j=0;j<6;j++){
document.write('*')
}
document.write('<br>');
}
練習:在瀏覽器中輸出直角三角形
for(i=0;i<6;i++){
for(j=0;j<=i;j++){
document.write('*')
}
document.write('<br>');
}
在瀏覽器中輸出等腰三角形
for(var i=0;i<6;i++){
for(var j=1;j<6-i;j++){
document.write(' ');
console.log('aaa')
}
for(j;j<= 6+i;j++){
document.write('*');
}
document.write('<br>');
}
10.經常使用內置對象
1.數組
建立方式
字面量方式建立
var a=['1','2','3'];
構造函數的方式建立
var a=new Array();
數組的賦值
var a=new Array();
a[0]='你好';
a[1]='hello';
a[0]='haha';//會覆蓋你好
console.log(a)
數組的經常使用方法
(1)concat() 數組的合併
var a=['a','s'];
var b=['d','f'] ;
var c=a.concat(b);
console.log(c);
(2)join() 將數組中的元素使用指定的字符串鏈接起來，它會造成一個新的字符串
var a=['a','s'];
var str=a.join('@');
console.log(str);
(3)toString() 將數組轉換成字符串
var a=['1',2];
var str=a.toString();
console.log(str);//1,2 每一個元素之間使用逗號隔開
console.log(str[0]) //能夠得到每一個元素
(4)slice(start,end) 獲得的是一個新的數組,顧頭不顧尾
var a=[1,2,3,4,5];
var b=a.slice(2,4);
console.log(b)
(5)pop() 移除數組的最後一個元素
var a=[1,2,3,4,5];
var b=a.pop(); 返回值是被移除的元素
console.log(b);
console.log(a);//[1,2,3,4]
(6)push() 向數組最後添加一個元素
var a=[1,2,3,4,5];
var b=a.push(6); 返回值是添加的元素6
console.log(a);
console.log(b);
(7)reverse() 反轉數組
var a=[1,2,3,4,5];
console.log(a.reverse())
(8)sort() 對數組排序
var a=[1,2,6,3,4,5];
console.log(a.sort())
(9)isArray() 判斷是否爲數組 返回值爲布爾類型
var a=[1,2,6,3,4,5];
console.log(Array.isArray(a));
2.字符串
(1)chartAt() 返回指定索引位置的字符
var str='qwerty';
var element=str.charAt(0);
console.log(element)
(2)concat() 拼接兩個或多個字符串
var str1='as';
var str2='qw';
var str3=str1.concat(str2,str2);
console.log(str3)
(3)replace(a,b) 將字符串a中的某一部分替換成字符串b
var a='我叫嘻嘻嘻';
var b=a.replace('嘻嘻嘻','xxx');
console.log(b)
(4)indexOf() 查找字符串的下標,返回第一個符合條件的下標,沒有返回-1
var a='我叫嘻嘻嘻';
var b=a.indexOf('叫');
console.log(b);
(5)slice(start,end) 分割字符串 左閉右開
var a='我叫嘻嘻嘻';
var b=a.slice(1,3)
console.log(b)
(6)split('q',2) 用某一個小的字符串分割大的字符串,獲得的是一個新的數組,第二個參數沒寫,默認返回整個數組,定義了參數,表明返回數組的最大長度
var a='qawsedrfdsaqetgvcqdf';
var c=a.split();
console.log(c);
var b=a.split('q');
console.log(b)
var d=a.split('q',2);
console.log(d)
(7)substr(a,b) 從a索引開始取,取b個,
var a='我叫嘻嘻嘻sdfdgdf';
var b=a.substr(4,4);
console.log(b)
(8)toLowerCase 轉小寫
var a='drDDGFtfftGG';
console.log(a.toLowerCase())
(9)toUpperCase() 轉大寫
var a='drDDGFtfftGG';
console.log(a.toUpperCase())
(10)toString() 將number類型轉換成字符串類型
var a=132564;
var b=a.toString();
console.log(b)
console.log(a)
(11)toFixed(a)四捨五入 保留a位小數
var a=2.5617;
var b=a.toFixed(3);
console.log(b)
3.Data日期對象
建立日期對象只能用new關鍵字
new a=new Data();
建立日期對象只能用new關鍵字
var time=new Date();
獲取一個月中的某一天
console.log(time.getDate());
返回本地時間
console.log(time.toLocaleString());
4.Math內置對象
(1)Math.ceil() 向上取整,天花板函數 var a=2.565; var topa=Math.ceil(a); console.log(topa); (2)Math.floor() 向下取整,地板函數 var a=2.565; var topa=Math.floor(a); console.log(topa); (3)Math.max() Math.min() 求幾個數的最大值和最小值 console.log(Math.max(1,2.2,2.6)); console.log(Math.min(1,2.2,2.6)); (4)Math.random() 隨機數 console.log(Math.random()) (取100-200之間的隨機數) var a=Math.random(); console.log(100+a*100) 公式：min - max之間的隨機數： min+Math.random()*(max-min)十一.函數 函數：就是將一些語句進行封裝，而後經過調用的形式，執行這些語句。 函數的做用： 將大量重複的語句寫在函數裏，之後須要這些語句的時候，能夠直接調用函數，避免重複勞動。 簡化編程，讓編程模塊化。 (1)函數的定義語法: function 函數名(){ 函數體 } function：是一個關鍵字。 函數名字：命名規定和變量的命名規定同樣。只能是字母、數字、下劃線、美圓符號，不能以數字開頭。 (2)函數的調用 函數名(); 例:(求和函數) le.log(sum(2,3));十二.僞數組 arguments arguments表明的是實參,只在函數中使用 例: function a(x,y){ console.log(arguments); console.log(a.length);//獲取形參的個數 console.log(arguments.length);//獲取實參的個數 console.log('!!!!!!!!!!!!!!!'); } a(1,2); a(1,2,3,4,5); 之因此說arguments是僞數組，是由於：arguments能夠修改元素，但不能改變數組的長短。 例: function a(x,y){ arguments[0]=5;//arguments能夠修改元素 console.log(arguments); arguments.push(0);//但不能改變數組的長短 } a(1,2);
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
