Python基礎第26天

                                                                             

                                                                                            JavaScript 的基礎學習

JavaScript:　　1:ECMAScript

                         2:DOM  文檔對象模型

                         3：BOM  瀏覽器對象模型

一：引入方式

 

{#1 直接編寫#}
    <script>
        alert('hello yuan')
    </script>
{#2 導入文件#}
    <script src="hello.js"></script>

二：基礎

1： 變量命名,首字符只能是字母,下劃線,$美圓符 三選一，且區分大小寫，x與X是兩個變量

2 ：變量還應遵照如下某條著名的命名規則：  　　

   Camel 標記法
   首字母是小寫的，接下來的字母都以大寫字符開頭。例如：
   var myTestValue = 0, mySecondValue = "hi";
  Pascal 標記法
  首字母是大寫的，接下來的字母都以大寫字符開頭。例如：
  Var MyTestValue = 0, MySecondValue = "hi";
  匈牙利類型標記法
  在以 Pascal 標記法命名的變量前附加一個小寫字母（或小寫字母序列），說明該變量的類型。例如，i 表示整數，s 表示字符串，以下所示「
  Var iMyTestValue = 0, sMySecondValue = "hi";

3 ： 註釋 支持多行註釋和單行註釋. /* */  //

4 使用{}來封裝代碼塊

三：數據類型

Null & Undefined

Undefined 類型

Undefined 類型只有一個值，即 undefined。當聲明的變量未初始化時，該變量的默認值是 undefined。

當函數無明確返回值時，返回的也是值 "undefined";

Null 類型

另外一種只有一個值的類型是 Null，它只有一個專用值 null，即它的字面量。值 undefined 其實是從值 null 派生來的，所以 ECMAScript 把它們定義爲相等的。

儘管這兩個值相等，但它們的含義不一樣。undefined 是聲明瞭變量但未對其初始化時賦予該變量的值，null 則用於表示還沒有存在的對象（在討論 typeof 運算符時，簡單地介紹過這一點）。若是函數或方法要返回的是對象，那麼找不到該對象時，返回的一般是 null。

var person=new Person()

var person=null

類型查詢函數(typeof) 

函數typeof ：查詢數值當前類型
 (string / number / boolean / object )

例如typeof("test"+3)      "string"
例如typeof(null)          "object "
例如typeof(true+1)        "number"
例如typeof(true-false)    "number"

四：運算符

遞增(＋＋) 、遞減(－－)

 

var i=1;

console.log(i + + );  2

console.log( + + i);

console.log(i - - );  0

console.log( - - i);

 

邏輯 AND 運算符(&&)

邏輯 AND 運算的運算數能夠是任何類型的，不止是 Boolean 值。

若是某個運算數不是原始的 Boolean 型值，邏輯 AND 運算並不必定返回 Boolean 值：

• 若是一個運算數是對象，另外一個是 Boolean 值，返回該對象。 
• 若是兩個運算數都是對象，返回第二個對象。 
• 若是某個運算數是 null，返回 null。 
• 若是某個運算數是 NaN，返回 NaN。 
• 若是某個運算數是 undefined，返回undefined

for 循環

for循環基本格式
for (初始化;條件;增量){
    語句1;
    ...
}
功能說明
實現條件循環，當條件成立時，執行語句1，不然跳出循環體

for 循環實現100之內加法：

for(var sum=0,i=0;i<101;i++){
        sum+=i;
    }
    console.log(sum);

View Code

異常處理

try {

     / / 這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行

}

catch (e) {

     / /  若是 try 代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。

     / / e是一個局部變量，用來指向Error對象或者其餘拋出的對象

}

finally  {

      / / 不管 try 中代碼是否有異常拋出（甚至是 try 代碼塊中有 return 語句）， finally 代碼塊中始終會被執行。

 

//異常
    try{
        console.log(123);
        throw Error('define error')
    }
    catch(e){
        console.log(e);
    }
    finally {
        console.log('finally')
    }

六：對象（類）

object對象：ECMAScript 中的全部對象都由這個對象繼承而來；Object 對象中的全部屬性和方法都會出如今其餘對象中

11種內置對象

包括：

Array ,String , Date, Math, Boolean, Number  Function, Global, Error, RegExp , Object

1：String對象

• 建立字符串對象兩種方式：

 

//建立字符串對象兩種方式
    var str1='hello';
    var str2=new String('hello2');
    console.log(typeof str1);
    console.log(typeof str2);

 

字符串屬性：

//屬性
    console.log(str1.length);

方法（一）編排方法

//方法(一）編排方法
    console.log(str1.italics());  //<i>hello</i>
   console.log(str1.bold());

方法（二）大小寫轉換、獲取指定字符

//(二)大小寫、獲取指定字符
    var str1='AcvbnFHh';
    console.log(str1.toLocaleLowerCase());
    console.log(str1.charAt(5));
    console.log(str1.charCodeAt(5));
    console.log(str1.indexOf('n'));
    console.log(srt1.lastIndexOf('n'));

    var str1='hello';
    console.log(str1.substr(1,3));////x.substr(start, length)
    console.log(str1.substring(1,3));//x.substring(start, end)
    console.log(str1.slice(1,3));//x.slice(start, end)
    console.log(str1.replace('ll','hh'));//x.replace(findstr,tostr)
    console.log(str1.concat('ghj'));

Array對象

//Array
    var arr1=[1,2,3,4,'hello',[11,2],{'name':'yuan'}];
    var arr2=new Array(4);//4是大小
    var arr3=new Array(1,'world',true,[12,3]);
    console.log(arr3);
    
    
    var cnweek=new Array(7);
    cnweek[0]="星期日";
    cnweek[1]="星期一";
    cnweek[2]="星期二";
    cnweek[3]="星期三";
    cnweek[4]="星期四";
    cnweek[5]="星期五";
    cnweek[6]="星期六";
    for (var i=0;i<cnweek.length;i++){
      document.write(cnweek[i]+" | ");
    }
    var arr5=[1,2,3,4,5];
    var ret=arr5.join('**');
    console.log(ret);

Array對象的方法

方法以下：

//tosring
    var arr5=[1,2,3,4,5];
    var ret2=arr5.toString();
    console.log(ret2);
    console.log(typeof ret2);//string
    //concat
    var arr5=[1,2,34];
    var ret3=arr5.concat([4,'hj']);
    console.log(ret3);
    console.log(typeof ret3);//object
//    //reverse
    var arr6=[10,45,100,87];
    console.log(arr6.reverse());
    console.log(arr6.sort());
    function f(a,b) {
        if(a>b){
            return 1
        }
        else if(a<b){
            return -1
        }
        else{
            return 0
        }

    }
    //或者：
    function f2(a,b) {
        return a-b
//
    }
    console.log(arr6.sort(f));
    console.log(arr6.sort(f2));
    // splice
    var a=[1,2,3,4,5,6,7];
    a.splice(1,2);
    a.splice(1,0,44,6);
    var arr7=[1,2,3];
    //push pop 棧操做
    arr7.push([7,8,0]);
    arr7.push('hello',6);
    console.log(arr7);
    console.log(arr7.length);

    console.log(arr7.pop());
    console.log(arr7.length);

    //shift unshift  棧操做
    var arr8=[4,5,6];
    arr8.unshift([11,222]);
    arr8.unshift(true,'ii');
    console.log(arr8);

    console.log(arr8.shift());

Date對象

建立data對象

//方法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( ));
//毫秒並不直接顯示

Function 對象(重點)

1：函數的定義

function 函數名 (參數){
函數體;

     return  返回值;

}

2：函數的建立

function 函數名 (參數){
    
函數體;
   return 返回值;
}
//another way:
var 函數名 = new Function("參數1","參數n","function_body");


//函數的建立一
     function f(x,y) {
         alert(123);
         return x+y;

     }
     console.log(f(23,897));
//     //函數的建立二：
     var obj=new Function('name','console.log(\'hello\'+name)');
     obj('武大');

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

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

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

    }

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

View Code

3：函數的調用

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)

4：函數的內置對象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)

View Code

5：匿名函數

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

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

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

6：函數的做用域

 var city = 'beijing';

    function func(){
        var city = 'shanghai';
        function inner(){
            var city = 'shenzhen';
            console.log(city);
        }
        inner();
    }
    func();

    
    
var city = 'beijing';
function Bar(){
    console.log(city);
}
function func(){

    var city = 'shanghai';
    return Bar;
}
var ret = func();
ret();

View Code

下一節  BOM對象。。。。。