JavaScript

javascript介紹

能夠處理邏輯
可以和瀏覽器交互
但是不夠嚴謹

javascript包含:
    ECMAscript:js的一種標準化規(guī)范,標出了一些基礎(chǔ)的js語法.
    DOM(document object model):文本對象模型,主要操作文檔中的標簽.比如讓盒子移動、變色、輪播圖
    BOM(browser object model):瀏覽器對象模型,主要用來操作瀏覽器.比如讓瀏覽器自動滾動

js引入和script標簽

方式一:在html頁寫js代碼
    <script>
        alert("hello,world")
    </script>
方式二:引入js文件
    <script src="first.js"></script>

結(jié)束符和注釋

結(jié)束符
;是js代碼中的結(jié)束符

單行注釋
// alert("hellow,world")
多行注釋
/*多行注釋*/

輸入輸出

彈出框alert
    alert("hello")彈出框中的內(nèi)容是"hello"
彈出輸入框
    var inp = prompt(">>>")彈出輸入框,輸入的內(nèi)容會被返回給inp
控制臺輸出
    console.log(變量或值)

<script>
    var inp=prompt(">>>");
    console.log(inp)
</script>

1.基礎(chǔ)數(shù)據(jù)類型

查看類型

typeof 變量;
typeof(變量);

<script>
    var a = 1;
    console.log(typeof(a)); //number
</script>

數(shù)字number

整數(shù) var a = 1
小數(shù) var b = 1.2347
保留小數(shù) b.toFixed(2) //1.23

<script>
    var a = 1;
    var b = 1.237;
    console.log(typeof(a));    //number
    console.log(typeof(b));    //number
    console.log(b.toFixed(2)); //1.24
</script>

字符串string

var s1 = '單引號'
var s2 = "雙引號都是字符串的表達方式"

string類型的常用方法

屬性:length
方法:
.trim()去空白
a.concat('abc') a拼接'abc'字符串
.charAt(索引) 給索引求字符
.indexOf(字符) 給字符求索引
.slice(start,end) 顧頭不顧尾,可以用負數(shù),取子串
.toLowerCase() 全部變小寫
.toUpperCase() 全部變大寫
.split(",",2) 根據(jù)(第一個參數(shù))分隔符切割

boolean布爾值

true:[] {}
false:underfined null NaN 0 ''

null 空和undefined未定義

null 表示空  boolean值為false
undefined 沒有定義 創(chuàng)建變量但是不賦值 boolean值為false

2.內(nèi)置對象類型

數(shù)組 Array

創(chuàng)建:
var arr = ["a","b","c"];
var arr2 = new Array();
索引操作:
arr[0] 查看
arr2[0] = 'alex'賦值操作

Array常用的屬性和方法

屬性:length
方法:
.push() 尾部追加元素
.pop()  獲取數(shù)組尾部的元素
.unshift() 頭部插入元素
.shift() 頭部移除元素

.slice(start,end) 切片
.reverse() 在原數(shù)組上的修改 翻轉(zhuǎn)
.join(seq) a1.join("+"),seq是連接符  將數(shù)組元素連接成字符串
.concat(val,...) 多個數(shù)組合并,得到一個新數(shù)組,原數(shù)組不變,連接數(shù)組
.sort() 排序  如果是數(shù)字會轉(zhuǎn)成字符串進行(Ascll碼表)進行第一個字符排序
    正常的按照數(shù)字大小排序方法:若a小于b,a出現(xiàn)在b前;反之a(chǎn)大于b,b出現(xiàn)在a前
function sortNumber(a,b){
    return a - b //(b - a是降序排列)
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)

.splice() 參數(shù) 1.從哪刪(索引) 2.刪幾個 3.刪除位置替換的新元素(可多個元素)

自定義對象

var d = {'name':'alex','age':84}
d['name']
d['age']

<script>
    var d = {'name':'alex','age':84};
    var str1 = '{"name": "chao", "age": 18}';
    var obj1 = {"name": "chao", "age": 18};
    console.log(d['name']);
    var obj = JSON.parse(str1);
    console.log(obj,typeof obj); // object
    // json字符串轉(zhuǎn)換成對象
    var str = JSON.stringify(obj1);
    console.log(str,typeof str) // string
    // 對象轉(zhuǎn)換成json字符串
</script>

//遍歷對象中的內(nèi)容
var a = {'name':'alex','age':18};
for (var i in a){
    console.log(i,a[i]);
}

數(shù)據(jù)類型之間的轉(zhuǎn)換

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(123)
var str = num.toSpring()
任意類型 --> Boolean
    Boolean(數(shù)據(jù))
 
字符串和數(shù)字相加 -->字符串
字符串和數(shù)字相減 -->數(shù)字

3.運算符

賦值運算符

=、+=、-+、*+、/=、%=

比較運算符

>、 <、 >=、 <=
==、!= 不比較類型
===、!== (比較類型和值)常用

<script>
    var a = 10;
    var b = "10";
    // console.log(a+=1);
    console.log(a==b); //true
    console.log(a===b); //false
    console.log(a!=b); //false
    console.log(a!==b); // true
</script>

算數(shù)運算符

+、-、*、/、**次冪、%
++、--
var a = 1
var b = a++  // a=2 b=1 先計算b=a,再計算a++
var c = ++a  // a=3 c=3 先計算++a,再計算c=a

Math.ceil()天花板函數(shù)
Math.floor()地板函數(shù)

邏輯運算符

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

字符串 - 數(shù)值 = 數(shù)值
var a = "3";
var b = 2;
console.log(a-b)   //1
console.log(b-a)   //-1  字符串與數(shù)字之間相減的結(jié)果是數(shù)字

console.log('吃了'+'么') //'吃了么'
console.log(12+3)       //15
console.log('吃了'+3)   //'吃了3'

4.流程控制

特點:
所有的代碼塊都是用{}標識
所有的條件都是用()標識

條件判斷

if語句

if (true){
    //執(zhí)行操作
}else if(true){
    //滿足條件執(zhí)行
}else if(true){
    //滿足條件執(zhí)行
}else{
    //滿足條件執(zhí)行
}

case語句

var err_type = "info";
switch(err_type){
    case "warning":
        console.log("警告");
        break;
    case "error":
        console.log("錯誤");
        break;
    default: //相當于else
        console.log("沒錯");
}

循環(huán)語句

while

var i = 1;//初始化循環(huán)變量
while(i<=9){//判斷循環(huán)條件
    console.log(i);
    i = i + 1
}

do while

<script>
    //不管有沒有滿足while中的條件do里面的代碼都會走一次
var i = 3;//初始化循環(huán)變量
do{
    console.log(i)
    i++;//更新循環(huán)條件

}while (i<10) //判斷循環(huán)條件
3,4,5,6,7,8,9

for

//方式一:
for(var i = 1;i<=10;i++){
    console.log(i)
}
//1,2,3,4,5,6,7,8,9


//方式二:
var arr = [1,2,3,4,5]
for (n in arr){
    consle.log(n) //結(jié)果是索引 0,1,2,3,4
    consle.log(arr[n]) //1,2,3,4,5
}

//盡量使用下面的方式
for(i=0;i<arr.length;i++){
    console.log(arr[i])
}

三元運算符

var 結(jié)果 = boolean表達式 ? 為true返回的值:為false返回的值
<script>
    var a = 1;
    var b = 2;
    var c = a>b ? a:b;
    console.log(c)
</script>

5.函數(shù)

function 函數(shù)名(參數(shù)){
    函數(shù)體
    return 返回值
}
函數(shù)名(參數(shù))
//注意:傳遞的參數(shù)可以和定義的個數(shù)不一樣,但是不要這么寫
//返回值只能有一個

//arguments偽數(shù)組
function add(){
    console.log(arguments);
}
add(1,2,3,4)

function add(a,b){
    console.log(arguments);
}
add(1,2,3,4)

匿名函數(shù)

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

自調(diào)用函數(shù)

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

關(guān)于arguments

<script>
    function fn(a,b,c) {
    console.log(arguments);
    console.log(fn.length);         //獲取形參的個數(shù)
    console.log(arguments.length);  //獲取實參的個數(shù)
    console.log("----------------");
}
    fn(2,4);      //[2,4]     3   2
    fn(2,4,6);    //[2,4,6]   3   3
    fn(2,4,6,8);  //[2,4,6,8] 3   4
</script>