前端基礎之javaScript

時間 2019-12-08

標籤前端基礎 javascript 欄目 JavaScript 简体版

原文原文鏈接

1、JS的引入的方式：html

1.直接編寫python

<script></script>

2.導入文件面試

<script src="hello.js"></script>

2、JS的變量數組

1.聲明變量時不用聲明變量類型，全都使用var關鍵字
2.一行能夠聲明多個變量，而且能夠是不一樣類型
如：var name="yuan",age="20",job="lecturer";
3.聲明變量時，能夠不用var。若是用var那麼他是全局變量
4.變量命名，首字符只能是字母，下劃線，$美圓符三選一，餘下的字符能夠是下劃線，
美圓符號或任何字母或數字字符且區分大小寫，x與X是兩個變量

常量：直接在程序中出現的數據值瀏覽器

3、標識符：dom

由不以數字開頭的字母、數字、下劃線(_)、美圓符號($)組成
經常使用於表示函數、變量等的名稱
例如：_abc,$abc,abc,abc123是標識符，而1abc不是
JavaScript語言中表明特定含義的詞稱爲保留字，不容許程序再定義爲標識符

4、字符串類型ide

是由Unicode字符、數字、標點符號組成的序列；字符串常量首尾由單引號或雙引號括起；JavaScript中沒有字符類型；經常使用特殊字符在字符串中的表達；
字符串中部分特殊字符必須加上右劃線\；經常使用的轉義字符 \n:換行 \':單引號 \":雙引號 \\:右劃線

5、運算符：函數

算術運算符：this

- + - * / % ++ --

比較運算符：spa

- > >= < <= != == === !==

邏輯運算符：

- && || ！

賦值運算符：

- = += -= *= /=

字符串運算符：

+ 鏈接，兩邊操做數有一個或兩個是字符串就作鏈接運算

6、分支結構：

if-else結構:

if (表達式){
語句１;
......
} else{
語句２;
.....
}

if-elif－else結構：

if (表達式1) {
語句1;
}else if (表達式2){
語句2;
}else if (表達式3){
語句3;
} else{
語句4;
}

示例：
var score=window.prompt("您的分數:");

if (score>90){
    ret="優秀";
}else if (score>80){
    ret="良";
}else if (score>60){
    ret="及格";
}else {
    ret = "不及格";

}
alert(ret);

switch-case結構

switch基本格式
switch (表達式) {
case 值1:語句1;break;
case 值2:語句2;break;
case 值3:語句3;break;
default:語句4;
}

switch(x){
case 1:y="星期一";    break;
case 2:y="星期二";    break;
case 3:y="星期三";    break;
case 4:y="星期四";    break;
case 5:y="星期五";    break;
case 6:y="星期六";    break;
case 7:y="星期日";    break;
default: y="未定義";
}

7、js字符串對象
字符串建立（兩種方式）
（1）、變量=「字符串」
（2）、字符串對象名稱=new String(字符串)

8、字符串對象的屬性和函數

x.length -------獲取字符串的長度
x.tolowerCase()------轉爲小寫
x.toUpperCase()------轉爲大寫
x.trim()----------去掉字符串兩邊的空格

---------字符串的查詢方法
x.charAt(index) -----strl.charAt(index);-----獲取指定位置字符，其中index爲要獲取的字符索引如：console.log(s.charAt(1))

x.indexOf(findstr,index)-------查詢字符串獲取索引如：console.log(s.indexOf("l"))
x.lastIndexOf(findstr)

字符串處理方法
x.substr(start,length)-------start表示開始位置，length表示獲取長度。如： console.log(s.substr(1,3))

x.substring(start,end)---------end是結束的位置如：console.log(s.substring(1,3))

x.slice(start,end)--------切片操做字符串

示例：
var str1="abcdefgh";
var str2=str1.slice(2,4);
var str3=str1.slice(4);
var str4=str1.slice(2,-1);
var str5=str1.slice(-3,-1);


alert(str2); //結果爲"cd"

alert(str3); //結果爲"efgh"

alert(str4); //結果爲"cdefg"

alert(str5); //結果爲"fg"



x.replace(findstr,tpstr)-------字符串替換 如：console.log(s.replace("l","k"))



x.split();------------分割字符串

示列：
var str1="一,二,三,四,五,六,日"; 
var strArray=str1.split(",");
alert(strArray[1]);//結果爲"二"



x.concat(addstr) ---------------拼接字符串 如： console.log(s.concat("lop"));

一、數組建立
建立數組的三種方式：
建立方式一：
var arrname = [元素0，元素1,...]；   //var arr=[1,2,3];
建立方式二：
var arrname = new Array(元素0，元素1，...);//var test = new Array(100,"a",True);
建立方式三：
var arrname = new Array(長度)；

          //  初始化數組對象:
                var cnweek=new Array(7);
                    cnweek[0]="星期日";
                    cnweek[1]="星期一";
                    ...
                    cnweek[6]="星期六";


2.數組對象的屬性和方法

x.join(bystr);    -------將數組元素拼接成字符串

                          var arr1=[1, 2, 3, 4, 5, 6, 7];
                var str1=arr1.join("-");
                alert(str1);  //結果爲"1-2-3-4-5-6-7" 

concat 方法：
x.concat(value,...)  ----- 

           var a = [1,2,3];
                  var b=a.concat(4,5) ;
                  alert(a.toString());  //返回結果爲1,2,3            
                  alert(b.toString());  //返回結果爲1,2,3,4,5
 3.數組的排序：reverse sort:

       arr1.reverse(); //顛倒數組元素
alert(arr1.toString());
//結果爲444,111,12,32

arr1.sort();    //排序數組元素
alert(arr1.toString());
//結果爲111,12,32,444

===========================

arr=[1,5,2,100];

arr.sort();
alert(arr);
若是就想按着數字比較呢?

function intSort(a,b){
    if (a>b){
        return 1;//-1
    }
    else if(a<b){
        return -1;//1
    }
    else {
        return 0
    }
}

arr.sort(intSort);
alert(arr);




function IntSort(a,b){
    return a-b;
}
arr.sort(IntSort);

alert(arr);

1.數組切片:
x.slice(start,end)
//使用註解
//
//x表明數組對象
//start表示開始位置索引
//end是結束位置下一數組元素索引編號
//第一個數組元素索引爲0
//start、end可爲負數，-1表明最後一個數組元素
//end省略則至關於從start位置截取之後全部數組元素
如：
var arr1=['a','b','c','d','e','f','g','h'];
var arr2=arr1.slice(2,4);
var arr3=arr1.slice(4);
var arr4=arr1.slice(2,-1);

alert(arr2.toString());
//結果爲"c,d" 
alert(arr3.toString());
//結果爲"e,f,g,h"
alert(arr4.toString());
//結果爲"c,d,e,f,g"
 2.刪除子數組：
x.splice(start,deleteCount,value,...)

/使用註解

//x表明數組對象
//splice的主要用途是對數組指定位置進行刪除和插入
//start表示開始位置索引
//deleteCount刪除數組元素的個數
//value表示在刪除位置插入的數組元素
//value參數能夠省略 



var a = [1,2,3,4,5,6,7,8];
a.splice(1,2);    以索引1開始切兩個元素

alert(a.toString());//a變爲 [1,4,5,6,7,8]

a.splice(1,1);  以上面切除的結果爲題，一索引爲1開始切一個元素

alert(a.toString());//a變爲[1,5,6,7,8]

a.splice(1,0,2,3);  以上面切除的結果爲題，在索引爲0的後面加上2,3

alert(a.toString());//a變爲[1,2,3,5,6,7,8]
 3.數組的push和pop /push pop這兩個方法模擬的是一個棧操做

//x.push(value, ...)  壓棧
//x.pop()             彈棧      
//使用註解
//
//x表明數組對象
//value能夠爲字符串、數字、數組等任何值
//push是將value值添加到數組x的結尾
//pop是將數組x的最後一個元素刪除


var arr1=[1,2,3];
arr1.push(4,5);
alert(arr1);
//結果爲"1,2,3,4,5"
arr1.push([6,7]);
alert(arr1)
//結果爲"1,2,3,4,5,6,7"
arr1.pop();
alert(arr1);
//結果爲"1,2,3,4,5"
 4.數組的shift和unshift: //x.unshift(value,...)
//x.shift()
//使用註解

//x表明數組對象
//value能夠爲字符串、數字、數組等任何值
//unshift是將value值插入到數組x的開始
//shift是將數組x的第一個元素刪除

var arr1=[1,2,3];
arr1.unshift(4,5);
alert(arr1);  //結果爲"4,5,1,2,3"

arr1. unshift([6,7]);
alert(arr1);  //結果爲"6,7,4,5,1,2,3"

arr1.shift();
alert(arr1);  //結果爲"4,5,1,2,3"

1.建立Date的對象 //方法1：不指定參數
var nowd1=new Date();
alert(nowd1.toLocaleString( ));
//方法2：參數爲日期字符串
var nowd2=new Date("2004/3/20 11:12");
alert(nowd2.toLocaleString( ));
var nowd3=new Date("04/03/20 11:12");
alert(nowd3.toLocaleString( ));
//方法3：參數爲毫秒數
var nowd3=new Date(5000);
alert(nowd3.toLocaleString( ));
alert(nowd3.toUTCString());

//方法4：參數爲年月日小時分鐘秒毫秒
var nowd4=new Date(2004,2,20,11,12,0,300);
alert(nowd4.toLocaleString( ));//毫秒並不直接顯示


2.獲取日期和時間
getDate()                 獲取日
getDay ()                 獲取星期
getMonth ()               獲取月（0-11）
getFullYear ()            獲取完全年份
getYear ()                獲取年
getHours ()               獲取小時
getMinutes ()             獲取分鐘
getSeconds ()             獲取秒
getMilliseconds ()        獲取毫秒
getTime ()                返回累計毫秒數(從1970/1/1午夜)

實例練習：
 function too() {
            var date=new Date();
            var year=date.getFullYear();
            var month=date.getMonth();
            var day=date.getDate();
            var Hours=date.getHours();
            var minutes=date.getMinutes();
            var week=date.getDay();

            var arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
            s=year+"-"+changemonth(month+1)+"-"+day+" "+Hours+":"+changeminutes(minutes)+" "+" "+arr[week];
            return s
        }
        function changemonth(num) {
            if (num<10){
                 return "0"+num
            }
            else{
                return num
            }

        }
        function changeminutes(num) {
            if (num<10){
                return "0"+num
            }
            else{
                return num
            }
        }
        console.log(too())



3.Date對象的方法--日期和時間的轉換：

getTimezoneOffset():8個時區×15度×4分/度=480;
返回本地時間與GMT的時間差，以分鐘爲單位
toUTCString()
返回國際標準時間字符串
toLocalString()
返回本地格式時間字符串
Date.parse(x)
返回累計毫秒數(從1970/1/1午夜到本地時間)
Date.UTC(x)
返回累計毫秒數(從1970/1/1午夜到國際時間)

1.Math對象：

 console.log(Math.max(12,34,33));   返回數最高值
        console.log(Math.min(12,34,33));   返回數的最小值
          console.log(Math.floor(1.23));   對數進行下舍入
        console.log(Math.floor(1.63));
        console.log(Math.floor(1.00));
        console.log(Math.ceil(1.34));      對數進行上舍入
        console.log(Math.ceil(1.67));
        console.log(Math.exp(1));        e的指數
        console.log(Math.pow(2,3));      冪
        console.log(Math.pow(2,3));
        random()    返回 0 ~ 1 之間的隨機數。
round(x)    把數四捨五入爲最接近的整數。
sin(x)    返回數的正弦。
sqrt(x)    返回數的平方根。
tan(x)    返回角的正切。

//方法練習:
        //alert(Math.random()); // 得到隨機數 0~1 不包括1.
        //alert(Math.round(1.5)); // 四捨五入
        //練習：獲取1-100的隨機整數，包括1和100
             //var num=Math.random();
             //num=num*10;
             //num=Math.round(num);
             //alert(num)
        //============max  min=========================
        /* alert(Math.max(1,2));// 2
        alert(Math.min(1,2));// 1 */
        //-------------pow--------------------------------
        alert(Math.pow(2,4));// pow 計算參數1 的參數2 次方.

9、函數定義：

function 函數名 (參數){?<br> 函數體;
return 返回值;
}

功能說明：

可使用變量、常量或表達式做爲函數調用的參數
函數由關鍵字function定義
函數名的定義規則與標識符一致，大小寫是敏感的
返回值必須使用return
Function 類能夠表示開發者定義的任何函數。

用 Function 類直接建立函數的語法以下：

1
var 函數名 = new Function("參數1","參數n","function_body");
雖然因爲字符串的關係，第二種形式寫起來有些困難，但有助於理解函數只不過是一種引用類型，它們的行爲與用 Function 類明確建立的函數行爲是相同的。

示例：



function func1(name){
    alert('hello'+name);
    return 8
}

    ret=func1("yuan");
    alert(ret);


var func2=new Function("name","alert(\"hello\"+name);")
func2("egon")

注意：js的函數加載執行與python不一樣，它是總體加載完纔會執行，因此執行函數放在函數聲明上面或下面均可以：



<script>
    //f(); --->OK

    function f(){
        console.log("hello")

    }

    f() //----->OK
</script>

Function 對象的屬性
如前所述，函數屬於引用類型，因此它們也有屬性和方法。
好比，ECMAScript 定義的屬性 length 聲明瞭函數指望的參數個數。


alert(func1.length)

Function 的調用


function func1(a,b){

    alert(a+b);
}

    func1(1,2);  //3
    func1(1,2,3);//3
    func1(1);    //NaN
    func1();     //NaN

    //只要函數名寫對便可,參數怎麼填都不報錯.

-------------------面試題-----------
 function a(a,b){
    alert(a+b);
}

   var a=1;
   var b=2;
   a(a,b)

函數的內置對象arguments


function add(a,b){

        console.log(a+b);//3
        console.log(arguments.length);//2
        console.log(arguments);//[1,2]

    }
    add(1,2)

    ------------------arguments的用處1 ------------------
    function nxAdd(){
        var result=0;
        for (var num in arguments){
            result+=arguments[num]
        }
        alert(result)

    }

    nxAdd(1,2,3,4,5)

//     ------------------arguments的用處2 ------------------

    function f(a,b,c){
        if (arguments.length!=3){
            throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments")
        }
        else {
            alert("success!")
        }
    }

    f(1,2,3,4,5)

匿名函數

// 匿名函數
    var func = function(arg){
        return "tony";
    }

// 匿名函數的應用
    (function(){
        alert("tony");
    } )()

    (function(arg){
        console.log(arg);
  })('123')

window對象

全部瀏覽器都支持 window 對象。
概念上講.一個html文檔對應一個window對象.
功能上講: 控制瀏覽器窗口的.
使用上講: window對象不須要建立對象,直接使用便可.



Window 對象方法

alert() 顯示帶有一段消息和一個確認按鈕的警告框。 confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。 prompt() 顯示可提示用戶輸入的對話框。 open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。 close() 關閉瀏覽器窗口。 setInterval() 按照指定的週期（以毫秒計）來調用函數或計算表達式。 clearInterval() 取消由 setInterval() 設置的 timeout。 setTimeout() 在指定的毫秒數後調用函數或計算表達式。 clearTimeout() 取消由 setTimeout() 方法設置的 timeout。 scrollTo() 把內容滾動到指定的座標。

10、DOM對象
DOM節點：
節點類型：
HTML文檔中的每個成分都是一個節點
在節點中，document與element節點是重點

節點查找：
直接查找節點：
document.getElementById("idname")
document.getElementsByTagName("tagname")
document.getElementsByName("name")
document.getElementsByClassName("name")

<div id="div1">

    <div class="div2">i am div2</div>
    <div name="yuan">i am div2</div>
    <div id="div3">i am div2</div>
    <p>hello p</p>
</div>

<script>

   var div1=document.getElementById("div1");

////支持;
//   var ele= div1.getElementsByTagName("p");
//   alert(ele.length);
////支持
//   var ele2=div1.getElementsByClassName("div2");
//   alert(ele2.length);
////不支持
//   var ele3=div1.getElementById("div3");
//   alert(ele3.length);
////不支持
//   var ele4=div1.getElementsByName("yuan");
//   alert(ele4.length)

</script>

注意：設計到尋找元素，注意<script>標籤的位置！

導航節點的屬性：
'''
parentElement 父節點標籤元素
children 全部子標籤
firstElementChild 第一個子標籤元素
lastElementChild 最後一個子標籤元素
nextElementtSibling 下一個兄弟標籤元素
previousElementSibling 上一個兄弟標籤元素
'''
注意，js中沒有辦法找到全部的兄弟標籤

節點操做：
節點屬性操做：
1.獲取文本節點的值：innerText  innerHTML


綁定事件的方式： 方式1: <!--事件綁定方式1--> <div onclick="foo(this)">DIV</div> <script> function foo(self) { console.log(self); // var ele=document.getElementsByTagName("div")[0]; self.style.color="red"; } </script> 方式2： <div class="c1">DIV2</div> <script> // 事件綁定方式2: 標籤對象.on事件=function(){} var ele=document.getElementsByClassName("c1")[0]; ele.onclick=function () { console.log(this); // this 代指： 當前觸發時間的標籤對象； this.style.fontSize="30px" }; </script> ul li 事件 <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> <script> var eles_li=document.getElementsByTagName("li"); var eles_li0=document.getElementsByTagName("li")[0]; var eles_li1=document.getElementsByTagName("li")[1]; var eles_li2=document.getElementsByTagName("li")[2]; var eles_li3=document.getElementsByTagName("li")[3]; eles_li0.onclick=function () { console.log(this) // this：<li>111</li> }; eles_li1.onclick=function () { console.log(this) // this：<li>111</li> }; eles_li2.onclick=function () { console.log(this) // this：<li>111</li> }; eles_li3.onclick=function () { console.log(this) // this：<li>111</li> }; // 改成for 循環： for (var i=0;i<eles_li.length;i++){ eles_li[i].onclick=function () { console.log(i); // i 爲何是4？ // console.log(this.innerText); //console.log(eles_li[i].innerText); } } </script>

屬性操做： <div class="c1" id="d1">DIV</div>

<script>
    // 文本屬性：
    var ele=document.getElementsByClassName("c1")[0];

    // ele.id="d2";


    // 取屬性值
//    console.log(ele.getAttribute("id"));
//    console.log(ele.id);

    // 屬性賦值：
    //ele.setAttribute("id","d2")
    //ele.id="d2";

    // class屬性

    console.log(ele.className);
    ele.classList.add("hide");
    ele.classList.remove("hide");
</script>
 屬性操做2： <div class="c1"><a href=''>click</a></div>

<script>
    // 文本屬性：
    var ele=document.getElementsByClassName("c1")[0];

     // innerText 取值操做
//     console.log(ele.innerText); // DIV
     // innerText 賦值操做
//     ele.innerText="Egon";

     //ele.innerText="<a href=''>click</a>";
//============================================================
    // innerHTML 取值操做
    // console.log(ele.innerHTML)

    // innerHTML 賦值操做

//    ele.innerHTML="<a href=''>click</a>";

    console.log(ele.innerText);
    console.log(ele.innerHTML);

</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。