首页 > 代码库 > javaScript------------------基础

javaScript------------------基础

javaScript概述

javaScript的历史:

 

  • 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言)
  • Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript
  • 微软随后模仿在其IE3.0的产品中搭载了一个JavaScript的克隆版叫Jscript.
  • 为了统一三家,ECMA(欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会(ISO/IEC)也采纳 ECMAScript 作为标准(ISO/IEC-16262)。从此,Web 浏览器就开始努力(虽然有着不同的程度的成功和失败)将 ECMAScript 作为 JavaScript 实现的基础。EcmaScript是规范.

ECMAscript:

ECMAscrpipt是javascript的重要标准,他只是javascript的一部分,实际上,一个完整的javascript是由以下三部分组成的:

1,核心:ECMAscript

2,文档对象模型:DOM(Document object model)整合js,css,html

3,浏览器对象模型:BOM(Broswer object model)整合js,浏览器

javascript在开发中绝大多数是基于对象开发色,也是一种面向对象的语言。

技术分享

ECMAscript描述了下面内容:

  • 语法
  • 类型
  • 语句
  • 关键字
  • 保留字
  • 运算符
  • 对象(多态,封装,继承)

javascript的引入方式,也就是调用方式,有两种:

  • 直接在HTML文件中以script关键字编写js代码
  • 在HTML文件中导入有js代码的js文件

 

1,直接引用

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!------直接引用js------>
    <script>
        var a = "hello";
        console.log(a);
    </script>
</head>
<body>

<div>hello world</div>


</body>
</html>

 

 

 

2,导入js文件(推荐用法),使HTML文件变得清晰客观

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <!------导入js文件------>
    <script src="index.js"></script>
</head>
<body>

<div>hello world</div>


</body>
</html>

 

javascript基础:

1,变量:

 var a = 1

 var b = 2

var c = a + b

在javascript中,a,b,c,都是变量,存储值,声明变量时全部使用var关键字,不适用var关键字,比如变量a就变成了全局变量。

一行可以声明多个不同类型的变量,

//每行代码结尾要加上分好 ‘ ; ‘ 
var name="jon",age=20,job="IT";

变量命名,不能以关键字,保留字,数字,下划线命名,

命名最好用首字母大写,驼峰命名法,

//变量名长的时候用,见名之意
var MyJavaScript = 100;

2,标识符:

  1. 不以数字开头的字母、数字、下划线(_)、美元符号($)组成
  2. 用于表示函数、变量等的名称
  3. 例如:_abc,$abc,abc,abc123是标识符,而1abc不是
  4. JavaScript语言中代表特定含义的词称为保留字,不允许程序再定义为标识符

  关键字:

 

技术分享

2,数据类型

数字类型(number)整形和浮点型属于number类型

  • 整形int,浮点型float

字符串类型(sring)

  • 是由Unicode字符,数字,标识符组成的序列,
  • 由双引号或单引号阔起来,如"hello",‘world‘

布尔类型(boolean)

  • 只有两个值true和false,
  • 在python中是首字母大写True,False

Null和Undefined// undefined 类型


// undefined类型只有一个值,就是undefined,有两种情况返回undefined
// 1,当声明变量未初始化时,该变量的默认值是undefined
// 2,当函数没有明确的返回值时,返回的也是undefined
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //只是声明了变量test,没有使用
        var test;
        console.log(test);//结果 undefined
        
        
        //test函数没有给一个明确的返回值
     // test十一个空函数
function foo() {

} console.log(foo());//undefined </script> </head> <body> </body> </html>
// Null 类型

只有一个值的类型是 Null,它只有一个专用值 null,即它的字面量。值 undefined 实际上是从值 null 派生来的,因此 ECMAScript 把它们定义为相等的。

尽管这两个值相等,但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值,null 则用于表示尚未存在的对象
。如果函数或方法要返回的是对象,那么找不到该对象时,返回的通常是 nullvar person=new Person() var person=null

数据类型转化:

javascript是一种弱性语言,也是松散型的

变量在声明的时候不需要指定数据类型

变量在赋值的时候才会确定数据类型

在表达式中,包含不同类型的运算在计算过程中会强制进行类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>

        //字符串和数字相加,
        // javascript自动把整形1转成字符串了,在拼接字符串
        console.log(1+" hello");// 1 hello

        //布尔值和数字相加,true是1,false是0
        console.log(true+1); //2
        console.log(false+1); //1

        //布尔值和字符串相加,把true转换成字符串true
        console.log(true+"hello"); //truehello

        //强制类型转化函数

        // parseInt函数:把浮点型强转成整数
        console.log(parseInt(3.1314)); // 3

        // parsrFloat函数 :把浮点型强转成整形
        parseFloat(3); //3.0

        // eval函数 :将字符串强转成表达式计算结果
        console.log(eval("1+2"));// 3

        // typeof函数 :查询当前数据类型
        console.log(typeof("hello"));//string
        console.log(typeof(10));// number
        console.log(typeof(10.11));// number
        console.log(typeof(NaN)); //number
        console.log(typeof(null)); //object


        //注意:表达式运算的结果不是数字,就会返回NaN
        // 因为NaN代表的就是number类型
        console.log(123+"test"*12)//NaN
    </script>

</head>
<body>

</body>
</html>

 3,ECMAscript运算符:

算术运算符:

加(+)减(-)乘(*)除(/)取余(%) - ‘ 除了当做减法,还可以用作负数 如 -2
‘ + ‘除了当做加法,还可以用于字符串连接 如 "hello"+"world"

++ 自加1 -- 自减1 var i=1; i++ // 2 i-- // 0
i++和i-- 是先引用,后运算

++i //2
--i //0
这是先运算,后引用
 

逻辑运算符:

==    等于
!=    不等于
>    大于
<    小于
>=    大于等于
<=    小于等于
===    完全等于
!==    完全不等于
&&||!    非

赋值运算符:

 等号= 
在javascript是代表赋值

var a = 10;//把10赋值给a变量

等性运算符:

执行类型转换的规则如下:

  • 如果一个运算数是 Boolean 值,在检查相等性之前,把它转换成数字值。false 转换成 0,true 为 1。 
  • 如果一个运算数是字符串,另一个是数字,在检查相等性之前,要尝试把字符串转换成数字。 
  • 如果一个运算数是对象,另一个是字符串,在检查相等性之前,要尝试把对象转换成字符串。 
  • 如果一个运算数是对象,另一个是数字,在检查相等性之前,要尝试把对象转换成数字。 

在比较时,该运算符还遵守下列规则:

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

技术分享

 关系运算符:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>

<script>
    //字符串 "Blue" 小于 "alpha",因为字母 B 的字符代码是 66,字母 a             的字符代码是 97。
      var bar = "Blue" < "alpha";
      arelt(bar) // true
 



    //比较数字的字符串

    //两个数字的字符串比较,则按照ascall码表来比较
    var bar = "25" < "3";
    alert(bar); //true

    //数字字符串和数字比较

    // 把字符串转为整形,在比较,25 < 3,结果是false
    var foo = "25" < 3;
    alert(foo)//false
</script>
</html>      

3,控制语句

if else控制语句

if (表达式){
     语句1  
}else{
    语句2    
}

表达式的结果为true执行语句1,否则执行else的语句2

<script>
    // 结果为false,
    var num = 100;
    if (num>101){
        console.log("true")
    }else {
        console.log("false")
    }

</script>

if else if 控制语句:

<script>
     // 结果为 no
    var num = 10;
    if (num < 10 ){
        console.log("yes")
    } else if(num < 20 ){
        console.log("no")
    }else {
        console.log("yes or no")
    }

</script>

switch case选择控制语句

<script>
    // 表达式的条件满足哪个case,就执行哪个,跳出switch语句
    switch (表达式){
        case 值1:语句1;break;
        case 值2:语句2;break;
        case 值3:语句3;break;
        case 值4:语句4;break;
    }
</script>
 
 //switch语句里的表达式结果,直接找对应的case值没找到执行case语句
    var x =1;
    switch(x){
        case 1:console.log(y="星期一");    break;
        case 2:console.log(y="星期二");    break;
        case 3:console.log(y="星期三");    break;
        case 4:console.log(y="星期四");    break;
        case 5:console.log(y="星期五");    break;
        case 6:console.log(y="星期六");    break;
        case 7:console.log(y="星期日");    break;
        default: y="未定义";}
        // 结果 星期一

switch比eles if 给够更清晰,更简洁,是程序可读性更强,效率更高

 

技术分享
首先要看一个问题,if 语句适用范围比较广,只要是 boolean 表达式都可以用 if 判断;而 switch 只能对基本类型进行数值比较。两者的可比性就仅限在两个基本类型比较的范围内。
说到基本类型的数值比较,那当然要有两个数。然后重点来了——
if 语句每一句都是独立的,看下面的语句:
if (a == 1) ...
else if (a == 2) ...
这样 a 要被读入寄存器两次,1 和 2 分别被读入寄存器一次。于是你是否发现其实 a 读两次是有点多余的,在你全部比较完之前只需要一次读入寄存器就行了,其余都是额外开销。但是 if 语句必须每次都把里面的两个数从内存拿出来读到寄存器,它不知道你其实比较的是同一个 a。
于是 switch case 就出来了,把上面的改成 switch case 版本:
switch (a) {
        case 0:
                break;
        case 1:
}
                
总结:

1.switch用来根据一个整型值进行多路分支,并且编译器可以对多路分支进行优化
2.switch-case只将表达式计算一次,然后将表达式的值与每个case的值比较,进而选
  择执行哪一个case的语句块
3.if..else 的判断条件范围较广,每条语句基本上独立的,每次判断时都要条件加载
  一次。
所以在多路分支时用switch比if..else if .. else结构要效率高。
总结switch和else if

 

for 循环控制语句

for循环基本格式

for (初始化;条件;增量){
    语句.....
}

当条件满足时执行,不满足 跳出循环
<script>
    // 5个hello
    for (i=0;i<5;i++){
        console.log("hello")
    }
    
</script>

 

while 循环

while循环基本格式

while (条件){
    语句  
}
    //5个world
    var i = 0;
    while (i<5){
        console.log("world");
        i++;
    }

 

 

 

 

javaScript------------------基础