前端 -- JavaScript基礎

11.3 Javascript

Javascript介紹

• 能處理邏輯

• 能夠和瀏覽器交互

• 不夠嚴謹

ECMAscript : js的一種標準化規範,標出了一些基礎的js語法

DOM -- document object model 文本對象模型,主要操做文檔中的標籤

BOM -- browser object model 瀏覽器對象模型,主要用來操做瀏覽器

11.3.1 JS引入

方式一:
    <script>
        alert('XXX')  // 頁面彈出警告框
    </script>
方式二:
    <script src="連接"></script>
    
結束符: 分號 -- ;
單行註釋: // 
多行註釋: /* 內容 */

 

11.3.2 變量

• 變量名: 數字\字母\下劃線$

• 建立變量的關鍵字 : var a=1

  建立變量能夠不指定數據類型

• 建立變量但不賦值: var a; a建立出來就是一個underfind類型

11.3.3 輸入輸出

彈出框:alert
彈出輸入框:var inp=prompt('問句') 彈出輸入孔,輸入的內容會被返回給inp
控制檯輸出: console.log(變量或值)

 

11.3.4 數據類型

查看數據類型: typeof 變量; / typeof(變量);

數值類型

• 整數 \ 小數 : number

• 保留小數位: b.toFixed(2)

字符串: String

• '單引號' ; var s1 = '字符串1'

• "雙引號" ; var s2 = "字符串2"

屬性 : length
方法:
s.strm()          去兩端空白,獲得一個新值
a.concat('abc')   a拼接'abc'
.charAt(索引)      給索引求字符
.indexOf(字符)     給字符求索引
.slice(start,end) 顧頭不顧尾,能夠用負數,取子串
.toLowerCase()    所有變小寫 
.toUpperCase()    所有變大寫
.split(',',2)     根據(第一個參數)分隔符切割,取前多少個結果

 

11.3.5 boolean 布爾值

Boolean()
true  : [] {} 
false : undefined null NaN 0 '' 

 

11.3.6 null \ undefined

null 表示空  boolean值爲false
undefined 沒有定義 建立變量可是不賦值 boolean值爲false

 

11.3.7 內置對象類型

數組 Array

建立:
var arr = ['a','b','c'];
var arr2 = new Array();
索引操做:
arr[0] 查看
arr2[0] = 'alex' 賦值操做

 

Array經常使用的屬性和方法

屬性或方法	解釋
.length	數組長度
.push()	尾部追加元素
.pop()	獲取尾部的元素
.unshift()	頭部插入元素
.shift()	頭部移除元素
.slice(start, end)	切片
.reverse()	反轉原數組
.join(seq)	seq是鏈接符 將數組元素鏈接成字符串
.concat(val, ...)	數組合並,獲得一個新數組，原數組不變
.splice(a,b,c)	參數：1.從哪刪(索引), 2.刪幾個 3.刪除位置替換的新元素(可多個元素)
.sort()	排序

自定義對象

var str1 = '{"name": "chao", "age": 18}';
var obj1 = {"name": "chao", "age": 18};
// JSON字符串轉換成對象
var obj = JSON.parse(str1); 
// 對象轉換成JSON字符串
var str = JSON.stringify(obj1);

 

遍歷對象中的內容：

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

 

11.3.8 數據類型之間的轉換

string --> int
    parseInt('123') // 123
    parseInt('123abc') // 123
    parseInt('abc') // NaN  not a number
string --> float
    parseFloat('1.233') 
float/int --> String
    var num = 123
    String(num)  // "123"
    var str = num.toString()
任意類型 --> Boolean
    Boolean(數據)
​
字符串和數字相加 --> 字符串
字符串和數字相減 --> 數字

 

11.3.9 運算符

賦值運算符

= += -= *= /= %=

比較運算符

> < >= <= 
比較值,不比較類型
    ==  等於
    !=  不等於
比較類型和值(經常使用)
    === 等同於
    !== 不等同於

 

算數運算符

+ - * / % ** 
​
++ / --  自增 / 自減
var a = 1
undefined
var b = a++    // a=2  b=1
var c = ++a    // a=3  c=3

 

邏輯運算符

&& 邏輯與  ||邏輯或  !邏輯非
true && true //true
true || false //true
!true        //false

 

11.3.10 流程控制

特色:

• 全部的代碼塊都是用{}標識的

• 全部的條件都是用()標識的

if語句

if (條件) {
    執行操做
}else if(條件)){
    知足條件執行            
}else if(條件)){
    知足條件執行        
}else{
    知足條件執行
}

 

case語句

    var err_type = 'info'
    // case表示一個條件,知足這個條件就會走進來,遇到break跳出。若是某個條件中不寫break，那麼直到該程序遇到下一個break中止,case條件是根據switch中定義條件的進行判斷
    switch(err_type) {
        case 'warining':
            console.log('警告');
            break;
        case 'error':
            console.log('錯誤');
            break;
        default:
            console.log('沒錯')
    }

 

循環語句

var i = 1; //初始化循環變量
while(i<=9){ //判斷循環條件
    console.log(i);
    i = i+1; //更新循環條件
}
//方式一:
for(var i = 1;i<=10;i++){
        console.log(i)
}
​
//方式二:
var arr = [1,2,3,4,5]
for (n in arr){
        console.log(n)  // n是索引,取值arr[n]
}

 

三元運算符

var 結果 = boolean表達式 ? 爲true返回的值:爲false返回的值 
var a = 1
var b =2
var c = a>b ? a:b  //若是a>b成立返回a，不然返回b
console.log(c)

 

11.3.11 函數

函數的定義

function 函數名(參數){
    函數體
    return 返回值
}
函數名(參數)
//注意 : 傳遞的參數能夠和定義的個數不同,可是不要這麼寫
//      返回值只能有一個,若是有多個,默認返回最後一個
//arguments僞數組,傳遞多少個值,接收多少個
function add(){
    console.log(arguments);
}
add(1,2,3,4)
​
function add(a,b){
    console.log(arguments);
    console.log(add.length);         //獲取形參的個數
    console.log(arguments.length);  //獲取實參的個數
    arguments[0] = 99;  //將實參的第一個數改成99
}
add(1,2,3,4)

 

匿名函數

var add = function(){
    console.log('hello,world');
} 
//add()調用

 

自調用函數

(function(a,b){
    console.log(a,b)
})(1,2)

 

11.3.12 正則用法

建立一個正則:
var reg = new RegExp('正則表達式') //寫在字符串中全部帶\的元字符都會被轉移,應該寫 \\
var reg = / 正則表達式 /  //內部不須要寫成字符串
reg.text('待檢測的字符串') // 字符串中有符合表達式規則的內容就返回true不然返回false
​
在字符串中應用正則
var exp = 'Agoni4017'
exp.match(/\d/) //只匹配符合規則的第一個
exp.match(/\d/) //匹配全部符合規則的,返回一個數組
var exp = 'my heart beat with you'
exp.match(/a/) //只匹配小寫a
exp.match(/a/i) //i表示不區分大小寫
exp.match(/a/gi) //不區分大小寫匹配全部
exp.search(/正則表達式/i) // 不區分大小寫,找到符合條件的第一個索引位置
exp.split(/正則表達式/i,n) //不區分大小是,根據正則切割,返回前n個結果
exp.replace(/正則/gi,'新值') //將符合條件的全部內容替換成新的值
reg.lastIndex() //查看索引的位置
​
小問題1
var reg = /\d/g //表示匹配多個值
reg.test('a1b2c3')  //屢次test會的到true true true false 繼續test會循環以前的結果
​
​
小問題2
var reg = /\w{5,10}/  //5-10位字母數字下劃線
reg.test() //若是什麼都不寫,那麼默認test中傳遞undefined參數,9位字符串符合正則條件

 

11.3.13 date對象

建立對象
var dt = new Date() // 獲取當前的時間
dt.toLocalString()  // 轉換成'2019/8/13 10:18:12
dt.getFullYear()   // 年
dt.getMonth()      // 月,從0來時
dt.getday()       // 週中天,從0開始,週日爲0
dt.getDate()      //月中天,1號是1
dt.getHours()     // 時,從0開始
dt.getMinutes()   // 分,從0開始
dt.getSeconds()   // 秒,從0開始
​
自定義時間
var dt = new Date('2018/1/1 12:12:12')   1月1日
var dt = new Date(2018,1,1);             2月1日

 

11.3.14 math對象

Math.floor()  //向下取整
Math.ceil()   //向上取整
Math.max()    //求最大值
Math.min()    //求最小值
Math.random() //隨機數,默認0-1之間.
Math.abs()    //絕對值
Math.round()  //四捨五入取整
求min-max之間的隨機數: min+Math.random()*(max-min)

 

11.3.15 面向對象

function Student(name,age){                
    this.stu_name = name     //綁定屬性
    this.stu_age  = age
}
Student.prototype.show = function(){        // 綁定方法
    console.log(this.stu_name,this.stu_age)
}
var stu = Student('Agoni',24) // 實例化
stu.stu_name  // 查看屬性
stu.stu_age
stu.show()    // 調用方法