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

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

2024-09-25 20:27:39 214人阅读

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，标识符：

由不以数字开头的字母、数字、下划线(_)、美元符号($)组成
常用于表示函数、变量等的名称
例如：_abc,$abc,abc,abc123是标识符，而1abc不是
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 则用于表示尚未存在的对象
。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。

var 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------------------基础

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

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

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

javaScript概述

javascript基础：

3，ECMAscript运算符：

3,控制语句

看完仍有疑问？有类似问题直接问程序猿