python之路_前端基础之JS(1)

  一个完整的javascript实现是需要如下三个不同组成部分:(1)核心ECMAScript:主要描述了语法、类型、语句、关键字、保留字、运算符、对象等(注:avascript 在开发中绝大多数情况是基于对象的.也是面向对象的);(2)文档对象模型(DOM) Document object model (整合js,css,html);(3)浏览器对象模型(BOM) Broswer object model(整合js和浏览器)。

一、javascript基础

1、js的引入方式

  js的引入方式包含两种,介绍如下:

1 直接编写
    <script>
        alert('hello yuan')
    </script>
2 导入文件
    <script src="hello.js"></script>

2、js的变量

  变量名由字母、数字、下划线及美元符组成,且不能以数字开头,字母区分大小写。

  (1)声明变量时不用声明变量类型. 全都使用var关键字;

var a;
a=3;

  (2)一行可以声明多个变量.并且可以是不同类型,以逗号分开;

var a=3,name="alex",b=6;

  (3)声明变量时 可以不用var. 如果不用var 那么它是全局变量

  几种常用的命名规范介绍如下:

/*
Camel 标记法
首字母是小写的,接下来的字母都以大写字符开头。例如:
var myTestValue = 0, mySecondValue = "hi";
Pascal 标记法
首字母是大写的,接下来的字母都以大写字符开头。例如:
Var MyTestValue = 0, MySecondValue = "hi";
匈牙利类型标记法
在以 Pascal 标记法命名的变量前附加一个小写字母(或小写字母序列),说明该变量的类型。例如,i 表示整数,s 表示字符串,如下所示“
Var iMyTestValue = 0, sMySecondValue = "hi";
*/

3、数据类型

  js包括如下几种基本数据类型,强调一下,其中数字类型number不分整型和浮点型:

  (1)undefined数据类型

  Undefined 类型只有一个值,即 undefined。当声明的变量未初始化时,该变量的默认值是 undefined。当函数无明确返回值时,返回的也是值 "undefined";

  (2)另一种只有一个值的类型是 Null,它只有一个专用值 null,即它的字面量。值 undefined 实际上是从值 null 派生来的,因此 ECMAScript 把它们定义为相等的。尽管这两个值相等,但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值,null 则用于表示尚未存在的对象。如果函数或方法要返回的是对象,那么找不到该对象时,返回的通常是 null。

  数据类型查看实例如下:

var a,i=10, f=3.14, s="hello", b=true, obj=[22,333,4444];
console.log(i,typeof i);  // 10 "number"
console.log(f,typeof f);   // 3.14 "number"
console.log(s,typeof s);   // hello string
console.log(a,typeof a);   // undefined 'undefined'
console.log(b,typeof b);   // true "boolean"
console.log(obj,typeof obj);  // [22, 333, 4444] "object"

4、常见运算符

  基本运算符介绍如下:

算术运算符:
    +   -    *    /     %       ++        -- 
比较运算符:
    >   >=   <    <=    !=    ==    ===   !==
逻辑运算符:
     &&   ||   !
赋值运算符:
    =  +=   -=  *=   /=
字符串运算符:
    +  连接,两边操作数有一个或两个是字符串就做连接运算

  算数运算符需要注意自加与自减符号的使用,实例如下:

// 先赋值再计算      
var i=10;
var ret=i++; 
console.log(i);                                          //结果为:11
console.log(ret);                                       //结果为:10
//  先计算后赋值
var ret=++i;
console.log(i);                                        //结果为:11
console.log(ret);                                     //结果为:11

  等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号相同,只是它们在检查相等性前,不执行类型转换。如下实例:

console.log(2!="2");                                  //执行类型转换,结果为false
console.log(2=="2");                                  //执行类型转换,结果为true
console.log(2==="2");                                 //不执行类型转换,结果为false
console.log(2!=="2");                                 //不执行类型转换,结果为true

注意1:

var bResult = "Blue" < "alpha";
alert(bResult); //输出 true  
在上面的例子中,字符串 "Blue" 小于 "alpha",因为字母 B 的字符代码是 66,字母 a 的字符代码是 97。

比较数字和字符串

另一种棘手的状况发生在比较两个字符串形式的数字时,比如:

var bResult = "25" < "3";
alert(bResult); //输出 "true"
上面这段代码比较的是字符串 "25" 和 "3"。两个运算数都是字符串,所以比较的是它们的字符代码("2" 的字符代码是 50,"3" 的字符代码是 51)。

不过,如果把某个运算数该为数字,那么结果就有趣了:

var bResult = "25" < 3;
alert(bResult); //输出 "false"

这里,字符串 "25" 将被转换成数字 25,然后与数字 3 进行比较,结果不出所料。

总结:

比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.
比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较.

注意2:

等性运算符:执行类型转换的规则如下:

如果一个运算数是 Boolean 值,在检查相等性之前,把它转换成数字值。false 转换成 0,true 为 1。 
如果一个运算数是字符串,另一个是数字,在检查相等性之前,要尝试把字符串转换成数字。 
如果一个运算数是对象,另一个是字符串,在检查相等性之前,要尝试把对象转换成字符串。 
如果一个运算数是对象,另一个是数字,在检查相等性之前,要尝试把对象转换成数字。 
在比较时,该运算符还遵守下列规则:

值 null 和 undefined 相等。 
在检查相等性时,不能把 null 和 undefined 转换成其他值。 
如果某个运算数是 NaN,等号将返回 false,非等号将返回 true。 
如果两个运算数都是对象,那么比较的是它们的引用值。如果两个运算数指向同一对象,那么等号返回 true,否则两个运算数不等。

二、循环语句

1、for循环

//   for方式1: 推荐
    for (var i=0;i<10;i++){
        console.log(i)
    }

//  for方式2:
    arr=[111,222,333,444];
    for (var i in arr){
        console.log(arr[i]);                     //i为列表的索引值
    }

  上述方式2对列表的in循环也可以改成方式1的形式,具体如下:

    arr=[111,222,333,444];
    for(var i=0;i<arr.length;i++){              //arr.length求出列表的长度
        console.log(arr[i])
    }

2、while循环

var n=0;
var sum=0;
while (n<101){
            sum+=n;
             n++;
            }
console.log(sum)

三、分支结构

1、if..else

  实例如下:

var
score = 87;
if (score > 90){
alert("优秀")
}
else if (score > 80) {
alert("凑合")
}
else{
    alert("不及格!")
}

2、switch

  实例如下:

var x = 5;
switch(x)
{
case1: alert("星期1");break;
case 2: alert("星期2");break;
case 3: alert("星期3");break;
case 4: alert("星期4");break;
case 5: alert("星期5");break;          #执行此满足条件的语句
case 6: alert("星期6");break;
case 7: alert("星期日");break;
}

 四、函数对象

1、函数定义

  函数由关键字function定义,返回值必须为return,定义函数的基本结构如下:

function 函数名(参数){
 
       函数体;
      return 返回值;
      }

  除了上述定义函数的方式外,还可以通过Function类直接创建函数,语法如下:

var 函数名 = new Function("参数1","参数n","function_body");

  上述实例如下:

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不同,它是整体加载完才会执行,所以执行函数放在函数声明上面或下面都可以。实例如下:

foo();   //函数调用
function foo(){
    alert(123);
    }

2、函数的调用

      只要函数名写对即可,参数怎么填都不报错,当传入参数个数大于等于所需个数,取前两个参数进行函数执行,当所传参数小于所需个数,返回NaN

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)     //报错,无结果,因为a不是一个函数

3、函数的内置对象及属性

  函数属于引用类型,所以它们也有属性和方法。比如,ECMAScript 定义的属性 length 声明了函数期望的参数个数,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)

4、匿名函数

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

// 匿名函数的应用
    (function(){
        alert("tony");
    } )()

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



  

原文地址:https://www.cnblogs.com/seven-007/p/7805241.html