JavaScript-簡介、ECMAScript5.0

時間 2020-05-27

標籤 javascript 簡介 ecmascript5.0 ecmascript 欄目 JavaScript 简体版

原文原文鏈接

Javascript簡介

web前端有三層：javascript

HTML：從語義的角度，描述頁面的結構
CSS：從審美的角度，描述樣式（美化頁面）
Javascript：從交互的角度，描述行爲（提高用戶體驗）

JavaScript的組成

ECMAScript5.0：定義了js的語法標準：包含變量、表達式、元素符、函數、if語句 for循環 while循環、內置的函數
DOM：操做網頁上元素的API。好比讓盒子顯示隱藏、變色、動畫form表達驗證
BOM：操做瀏覽器部分功能API。好比刷新頁面、前進後退、讓瀏覽器自動滾動

ECMAScript 5.0

JS的引入方式
註釋
調試語句
變量的聲明
變量的命名規範
基本數據類型
複雜(引用)數據類型
運算符
數據類型轉換
流程控制
經常使用內置對象(複雜數據類型)（重點）
函數（重點）
僞數組arguments
對象Object(重點)
Date日期對象
JSON(重點)

JS的引入方式

內接式

<script type="text/javascript">

</script>

外接式

<!--至關於引入了某個模塊-->
<script type="text/javascript" src = './index.js'></script>

註釋

#### 調試語句 - alert(''); 彈出警告框 - console.log(''); 控制檯輸出 #### 變量的聲明 在js中使用var關鍵字 進行變量的聲明,注意 分號做爲一句代碼的結束符 ```javascript var a = 100; (es6 常量用const定義，其餘建議用let(塊級)定義，特殊清空用以用var)

建立變量的方法前端

var a; //先定義
a = 100; // 後賦值 //也能夠直接定義變量+賦值
var a = 100;

基本數據類型

數值類型numberjava

若是一個變量中，存放了數字，那麼這個變量就是數值型的python

var a = 100;    //定義了一個變量a，而且賦值100
console.log(typeof a);    //輸出a變量的類型 使用typeof 函數 檢測變量a的數據類型 //特殊狀況
var b = 5/0; console.log(b); //Infinity 無限大
console.log(type of b);    //number 類型

ps:在JavaScript中，只要是數，就是數值型(number)的。不管是整數，浮點數（即小數）、不管大小、不管正負，都是number類型的。es6

字符串類型:string

var a = "abcde"; var b = "路飛"; var c = "123123"; var d = "哈哈哈哈哈"; var e = "";     //空字符串

連字符和+號的區別web

鍵盤上的 + 多是連字符，也多是數字的加號。如編程

console.log("我" + "愛" + "你");   //連字符，把三個獨立的漢字，鏈接在一塊兒了
console.log("我+愛+你");           //原樣輸出
console.log(1+2+3);             //輸出6

總結：若是加號兩邊都是數值，此時是加。不然，就是連字符（用來鏈接字符串）json

布爾類型：boolean

var isShow = false; console.log(typeof b1);

空對象：null

var c1 = null;//空對象. object
console.log(typeof c1);

未定義：undefined

var d1; //表示變量未定義
console.log(typeof d1);

運算符

賦值運算符

以var x = 12,y=5來演示示例數組

算數運算符

var a = 5,b=2;瀏覽器

前自增和後自增的異同點：

　　相同點：不管是前自增仍是後自增，對於變量而言，沒有區別，都是自身+1

　　不一樣點：

　　　　前自增：先+1（變量自身+1），後賦值（將變量的值賦值給自增表達式的結果）

　　　　後自增：先賦值，後+1

比較運算符

var x = 5;

數據類型轉換

將number類型轉換成string類型

隱式轉換

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())

將string類型轉換成number類型

var  stringNum = '789.123wadjhkd'; var num2 = Number(stringNum); console.log(num2); //NaN Not a Number 可是一個number類型 // parseInt()能夠解析一個字符串 而且返回一個整數
console.log(parseInt(stringNum))； //789
console.log(parseFloat(stringNum)); //789.123

任何的數據類型均可以轉換爲boolean類型

var b1 = '123'; //true
var b2 = 0; //false
var b3 = -123 //true
var b4 = Infinity; //true
var b5 = NaN; //false
var b6; //false
var b7 = null; //false //使用Boolean(變量) 來查看當前變量的真假

流程控制

if

var age = 20; if(age>18){ //{}至關於做用域
    console.log('能夠去會所'); } alert('alex'); //下面的代碼照樣執行

if-else

var age = 20; if(age>18){ //{}至關於做用域
    console.log('能夠去會所'); }else{ console.log('好好學js,年紀夠了再去會所'); } alert('alex'); //下面的代碼照樣執行

if-else if -else

var age = 18; if(age==18){ //{}至關於做用域
    console.log('能夠去會所'); }else if(age==30){ console.log('該娶媳婦了！！'); }else{ console.log('隨便你了') } alert('alex'); //下面的代碼照樣執行

邏輯與&&, 邏輯或||

//1.模擬 若是總分 >400 而且數學成績 >89分 被清華大學錄入 //邏輯與&& 兩個條件都成立的時候 才成立
if(sum>400 && math>90){ console.log('清華大學錄入成功') }else{ alert('高考失利') }

//2.模擬 若是總分>400 或者你英語大於85 被複旦大學錄入 //邏輯或 只有有一個條件成立的時候 才成立
if(sum>400 || english>85){ alert('被複旦大學錄入') }else{ alert('高考又失利了') }

switch 語句

var gnamescore = 'better'; switch(gnamescore){ case 'good': console.log('玩的很好') break;        //表示退出
    case 'better': console.log('玩的老牛逼了') break; case 'best': console.log('吃雞成功') break; default: console.log('很遺憾'); } //注意：switch至關於if語句， 當心case穿透

while循環

循環三步走：

1.初始化循環變量

2.判斷循環變量

3.更新循環變量

//例子：打印1-9之間的數
var i = 1;     //初始化循環變量

while(i <= 9){    //判斷循環條件
 console.log(i); i = i + 1;    //更新循環條件
}

練習：將1~100全部是2的倍數在控制檯打印。使用while循環

var i = 1; while(i <= 100){ if(i%2==0){ console.log(i); } i +=1; }

do-while循環

用途不大：就是先作一次，上來再循環

// 無論有沒有知足while中的條件do裏面的代碼都會走一次
var i = 3;//初始化循環變量
do{ console.log(i) i++;//更新循環條件
 }while (i<10) //判斷循環條件

for循環

for循環遍歷列表是最經常使用的對數據的操做！！！！！！

//輸出1~10之間的數
for(var i = 1;i<=10;i++){ console.log(i) }

練習：輸入1~100之間全部數之和

var sum = 0; for(var j = 1;j<=100;j++){ sum = sum+j } console.log(sum);

for循環嵌套的練習

document.write('');　　往瀏覽器文檔中寫

for(var i=1;i<=3;i++){ 　　for(var j=0;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.在瀏覽器中輸出 等腰三角形 *  
          ***  
        ***** 
       ******* 
      ********* 
     ***********        

for(var i=1;i<=6;i++){ //控制行數，一共顯示6行 記得換document.write('<br>'); //控制咱們的空格數
        for(var s=i;s<6;s++){ document.write('&nbsp;'); } //控制每行的輸出*數
        for(var j=1;j<=2*i-1;j++){ document.write('*'); } document.write('<br>'); }

View Code

經常使用內置對象（複雜數據類型）

所謂內置對象就是ESMAScript提供出來的一些對象，對象都有相應的屬性和方法。

數組Array

字面量方式建立（推薦你們使用這種方式，簡單粗暴）

var colors = ['red','green','yellow'];

使用構造函數的方式建立使用new關鍵詞對構造函數進行建立對象,構造函數與後面的面向對象有關係

var colors = new Array(); //經過下標進行賦值
colors[0] = 'red'; colors[1] = 'green'; colors[2] = 'yellow'; console.log(colors);

數組的合併 concat()

var north = ['北京','山東','天津']; var south = ['東莞','深圳','上海']; var newcity = north.concat(south); console.log(newcity);

join() 將數組中元素使用指定的字符串鏈接起來，它會造成一個新的字符串

var score = [98,78,76,100,0]; var str = score.join('|'); console.long(str);    //"98|78|76|100|0"

slice(start,end); 返回數組的一段記錄，顧頭不顧尾

var arr = ['張三','李四','王文','趙六']; var newArr = arr.slice(1,3); console.log(newArr); //["李四", "王文"]

pop 移除數組的最後一個元素(有返回值)

var arr = ['張三','李四','王文','趙六']; arr.pop(); console.log(arr);//["張三", "李四"，"王文"]

push() 向數組最後添加一個元素

var arr = ['張三','李四','王文','趙六']; arr.push('小馬哥'); console.log(arr);//["張三", "李四"，"王文"，"趙六"，"小馬哥"]

reverse() 翻轉數組

var names = ['alex','xiaoma','tanhuang','angle']; //4.反轉數組
names.reverse(); console.log(names);

sort對數組排序

var names = ['alex','xiaoma','tanhuang','abngel']; names.sort(); console.log(names)；// ["alex", "angle", "tanhuang", "xiaoma"]

判斷是否爲數組：isArray()

布爾類型值 = Array.isArray(被檢測的值) ;

補充！！！！！ splice

splice() 方法向/從數組中添加/刪除項目，而後返回被刪除的項目。 註釋：該方法會改變原始數組。

http://www.w3school.com.cn/jsref/jsref_splice.asp

字符串string

chartAt() 返回指定索引的位置的字符

var str = 'alex'; var charset = str.charAt(1); console.log(charset);//l

concat 返回字符串值，表示兩個或多個字符串的拼接

var str1 = 'al'; var str2  = 'ex'; console.log(str1.concat(str2,str2));//alexex

replace(a,b) 將字符串a替換成字符串b

var a = '1234567755'; var newStr = a.replace("4567","****"); console.log(newStr);//123****755

indexof() 查找字符的下標，若是找到返回字符串的下標，找不到則返回-1 。跟seach()方法用法同樣

var str = 'alex'; console.log(str.indexOf('e'));//2
console.log(str.indexOf('p'));//-1

slice(start，end) 左閉右開分割字符串

var str = '小馬哥'; console.log(str.slice(1,2));//馬

split('a',1) 以字符串a分割字符串，並返回新的數組。若是第二個參數沒寫，表示返回整個數組，若是定義了個數，則返回數組的最大長度

var  str =  '個人天呢,a是嘛,你在說什麼呢?a哈哈哈'; console.log(str.split('a'));//["個人天呢,", "是嘛,你在說什麼呢?", "哈哈哈"]

substr(statr,end) 左閉右開

var  str =  '個人天呢,a是嘛,你在說什麼呢?a哈哈哈'; console.log(str.substr(0,4));//個人天呢

toLowerCase()轉小寫

var str = 'XIAOMAGE'; console.log(str.toLowerCase())；//xiaomage

toUpperCase()轉大寫

var str = 'xiaomage'; console.log(str.toUpperCase());//XIAOMAGE

特別：

//1.將number類型轉換成字符串類型
var num = 132.32522; var numStr = num.toString() console.log(typeof numStr) //四捨五入
var newNum = num.toFixed(2) console.log(newNum)

Math內置對象

Math.ceil() 向上取整，'天花板函數'

var x = 1.234; //天花板函數 表示大於等於 x，而且與它最接近的整數是2
var a = Math.ceil(x); console.log(a);//2

Math.floor 向下取整，'地板函數'

var x = 1.234; // 小於等於 x，而且與它最接近的整數 1
var b = Math.floor(x); console.log(b);//1

求兩個數的最大值和最小值

//求 兩個數的最大值 最小值
console.log(Math.max(2,5));//5
console.log(Math.min(2,5));//2

隨機數 Math.random()

var ran = Math.random(); console.log(ran);[0,1)

函數

函數：就是把一些語句進行封裝，而後經過調用的形式，執行這些語句。

函數的做用：

解決大量的重複性的語句
簡化編程，讓編程模塊化

# python 中聲明函數 def add(x,y): return x+y # 調用函數 print(add(1,2))

// js中聲明函數
function add(x,y){ return x+y; } // js中調用函數
console.log(add(1,2));

解釋以下：

function：是一個關鍵字。中文是"函數"、「功能」。
函數名字：命名規範和變量同樣。只能是字母，數字，下劃線，美圓符號，不能以數字開頭。
參數：後面有一對小括號，裏面是放參數用的。
大括號裏面是這個函數的語句。

僞數組 arguments

arguments表明的是實參。有個講究的地方是：arguments只在函數中使用。

fn(2,4); fn(2,4,6); fn(2,4,6,8); function fn(a,b,c) { console.log(arguments); console.log(fn.length); //獲取形參的個數
        console.log(arguments.length);  //獲取實參的個數
 console.log("----------------"); }

結果：

（2）之因此說arguments是僞數組，是由於：arguments能夠修改元素，的那不能改變數組的長短。

fn(2,4); fn(2,4,6); fn(2,4,6,8); function fn(a,b) { arguments[0] = 99;  //將實參的第一個數改成99
        arguments.push(8);  //此方法不經過，由於沒法增長元素
    }

清空數組的幾種方式：

var array = [1,2,3,4,5,6]; array.splice(0);      //方式1：刪除數組中全部項目
    array.length = 0;     //方式2：length屬性能夠賦值，在其它語言中length是隻讀
    array = [];           //方式3：推薦

對象Object

使用object或對象字面建立對象
工廠模式建立對象
構造函數模式建立對象
原型模式建立對象

使用Object或字面量方式建立對象

JS中最基本建立對象的方式：

var student = new Object(); student.name = "easy"; student.age = "20";

這樣，一個student對象就建立完畢，擁有2個屬性name以及age，分別賦值爲"easy"和20。

若是你嫌這種方法有一種封裝性不良的感受。來一個對象字面量方式建立對象。

var student = { name: "easy", age: 20 };

這樣看起來彷佛就完美了。可是立刻咱們就會發現一個十分尖銳的問題：當咱們要建立同類的student1，student2，…，studentn時，咱們不得不將以上的代碼重複n次....

咱們看」工廠模式」

工廠模式建立對象

JS中沒有類的概念，那麼咱們不妨就使用一種函數將以上對象建立過程封裝起來以便於重複調用，同時能夠給出特定接口來初始化對象

function createStudent(name, age){ var obj = new.Object(); obj.name = name; obj.age = age; return obj; } var student1 = createStudent("easy1", 20); var student2 = createStudent("easy2", 20); ... var studentn = createStudent("easyn", 20);

構造函數模式建立對象

在上面建立Object這樣的原生對象的時候，咱們就使用過其構造函數：

var obj = new Object();

在建立原生數組Array類型對象時也使用過其構造函數：

var arr = new Array(10);  //構造一個初始長度爲10的數組對象

在進行自定義構造函數建立對象以前，咱們首先了解一下構造函數和普通函數有什麼區別。

實際上並不存在建立構造函數的特殊語法，其與普通函數惟一的區別在於調用方法。對於任意函數，使用new操做符調用，那麼它就是構造函數；不是用new操做符調用，那麼它就是普通函數。
按照慣例，咱們約定構造函數名以大寫字母開頭，普通函數以小寫字母開頭，這樣有利於顯性區分兩者。如new Array()，new Object()。
使用new操做符調用構造函數時，會經歷（1）建立一個新對象；（2）將構造函數做用域賦給新對象（3）執行構造函數代碼；（4）返回新對象 4個階段

瞭解了構造函數和普通函數的區別以後，咱們使用構造函數將工廠模式的函數重寫，並添加一個方法屬性：

function Student(name, age) { this.name = name; this.age = age; this.alertName = function(){ alert(this.name) }; } function Fruit(name, color) { this.name = name; this.color = color; this.alertName = function(){ alert(this.name) }; }

原型的模式建立對象

function Student() { this.name = 'easy'; this.age = 20; } Student.prototype.alertName = function(){ alert(this.name); }; var stu1 = new Student(); var stu2 = new Student(); stu1.alertName(); //easy
stu2.alertName();  //easy
 alert(stu1.alertName == stu2.alertName);  //true 兩者共享同一函數

Date日期對象

建立日期對象只有構造函數一種方式，使用new關鍵字

//建立了一個date對象
var myDate = new Date();

//返回本地時間
console.log（myDate().toLocalString()）;

JSON

概念簡介:

JSON是一種輕量級的數據交換格式，採用徹底獨立於語言的文本格式，是理想的數據交換格式。同時，JSON是javascript原生格式，這意味着在javascript中處理JSON數據不須要任何特殊的API或工具包。

在JSON中，有兩種結構：對象和數組。

對象

var packJSON = {"name":"alex", "password":"123"};

數組

var packJSON = [{"name":"alex", "password":"123"}, {"name","wusir", "password":"456"}];

數組是值的有序集合。一個數組以「[」開始，「]」結束。值之間運用「,」分隔。

JSON對象和JSON字符串轉換

在數據傳輸過程當中，JSON是以字符串的形式傳遞的，而JS操縱的是JSON對象，因此，JSON對象和JSON字符串之間的相互轉換是關鍵。例如：

JSON字符串:

var jsonStr ='{"name":"alex", "password":"123"}' ;

JSON對象：

var jsonObj = {"name":"alex", "password":"123"};

JSON字符串轉換成JSON對象

var jsonObject = jQuery.parseJSON(joinStr)

JSON對象轉換成JSON字符串

var jsonstr = JSON.stringify(jsonObject);

遍歷JSON對象和JSON數組

遍歷JSON對象：

var packAlex  = {"name":"alex", "password":"123"} ; for(var k in packAlex ){//遍歷packAlex 對象的每一個key/value對,k爲key
   alert(k + " " + packAlex[k]); }

遍歷JSON數組代碼

var packAlex = [{"name":"alex", "password":"123"}, {"name":"wusir", "password":"456"}]; for(var i in packAlex){//遍歷packJson 數組時，i爲索引
   alert(packAlex[i].name + " " + packAlex[i].password); }