JavaScript的基本介绍

我会带着你远行 2023-06-02 07:55 24阅读 0赞

# javascript #

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。  \[1\]

为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScrip [t][]。

## 组成部分 ##

ECMAScript，描述了该语言的语法和基本对象。

文档对象模型（DOM），描述处理网页内容的方法和接口。

浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

[![javascript组成][javascript]][javascript_javascript]

**JavaScript基础**

**JS的引入方式**

1 直接编写
        <script>
            alert('hello yuan')
        </script>
    2 导入文件
        <script src="hello.js"></script>
    3 内联（不推荐使用）

**JS的变量、**

1.声明变量时不用声明变量类型，全部使用var关键字

var a;<br>a=3;

2.一行可以声明多个变量.并且可以是不同类型

var name="yuan", age=20, job="lecturer";

3.一行可以声明多个变量.并且可以是不同类型

4.变量命名：

a.首字符只能是字母,下划线,$美元符 三选一，余下的字符可以是下划线、美元符号或任何字母或数字字符且区分大小写。

b.最好语义化，看其名之其意，使用数据类型的首字母做前缀。

c.不允许使用关键字和保留字。

**JS的数据类型**

数据类型有：

number     -----  数值
    boolean    -----  布尔值
    string     -----  字符串
    undefined  -----  undefined
    null       -----   null  
    object     -----  对象
    array      -----  数组
    function   -----  function

数字类型：

*  不区分整型数值和浮点型数值;

![1184802-20170922220844103-640841952.png][]

字符串类型（string）:

是由Unicode字符、数字、标点符号组成的序列；字符串常量首尾由单引号或双引号括起；JavaScript中没有字符类型；常用特殊字符在字符串中的表达；  
字符串中部分特殊字符必须加上右划线\\；常用的转义字符 \\n:换行 \\':单引号 \\":双引号 \\\\:右划线

布尔类型（bolean）:

Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0  
布尔值也可以看作on/off、yes/no、1/0对应true/false  
Boolean值主要用于JavaScript的控制语句，例如：

if (x==1){
          y=y+1;
    }else{
          y=y-1;
          }

Undefined类型

1.Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。

2.当函数无明确返回值时，返回的也是值 "undefined";

Null类型

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

尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。

对象类型（object）：

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...

此外，JavaScript 允许自定义对象。

数组（array）：

数组是特殊的对象。

**运算符**

运算符分类

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

算术运算符：自增，自减

++i:先计算后赋值
    i++：先赋值后计算

假如x=2，那么x++表达式执行后的值为3，x--表达式执行后的值为1；i++相当于i=i+1，i--相当于i=i-1；

**js不同于python，是一门弱类型语言**

能够进行数据转换的叫做弱类型
    console.log('1'==1)  //True
    console.log('1'===1)  //False
      
    强类型
    print(1='1') //False

** ****NaN**

var d="yuan";
        d=+d;
        alert(d);//NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
        alert(typeof(d));//Number
    
        //NaN特点:
        
        var n=NaN;
        
        alert(n>3);
        alert(n<3);
        alert(n==3);
        alert(n==NaN);
        
        alert(n!=NaN);//NaN参与的所有的运算都是false,除了!=
    　　　NaN不等于NaN

###  比较运算符 ###

>   >=   <    <=    !=    ==    ===   !==    (具有隐式类型转换规则)

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

console.log(2==2); //true
      console.log(2=='2'); //true  因为js是弱类型的，所以返回true
    
      console.log(2==='2'); //false (===判断的是类型，类型不一样就为false了)
      console.log(2!=='2'); //true ！==和===是相反的

** 注意：**

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码,如果最高位相等,继续取第二位比较.

**逻辑运算符**

||（或）；&&（且）； ！（非）
    console.log(1&&3); //3  两个为真才为真（0为假，其他的数字都代表真）
    console.log(0&&3); //0  只要有一个为假则为假
    console.log(0||3); //3  
    console.log(2||3); //2

**常量和标识符**

**常量** ：直接在程序中出现的数据值

**标识符**：

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

关键字：

![1184802-20170922220310478-432741606.png][]

![1184802-20170922220404134-1522010134.png][]

**流程控制**

*  顺序结构(从上向下顺序执行)
 *  分支结构
 *  循环结构

**分支结构：**

1.　if.....else结构：

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

2.**switch-case结构**

switch基本格式
    switch (表达式) {
        case 值1:语句1;break;
        case 值2:语句2;break;
        case 值3:语句3;break;  //break阻止case的穿透
        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="未定义";
    }

switch比else if结构更加简洁清晰，使程序可读性更强,效率更高。

**循环语句**

**for循环：（推荐使用）**

语法规则：
    
        for(初始表达式;条件表达式;自增或自减)
        {
                执行语句
                ……
        }

**for循环的另一种形式：**

for( 变量 in 数组或对象)
        {
            执行语句
            ……
        }

**while循环：**

语法规则：
    
    while (条件){
        语句1；
        ...
    }

**do**\-**while循环：**

语法规则：
    do{}
    while (条件){
        语句1；
        ...
    }

### 输出方式 ###

我们在编写`js`代码的时候，经常需要得到计算的值，用以判断得到的值与我们预期的值是否相符，所以我们需要了解下面的基本的输出方式。

// console.log() 将内容输出到浏览器的控制台 console.log(10+2); // document.write() 将内容输出到网页当中 document.write(10+2);

> 通常情况下我们通过`console.log()`这种形式输出代码我们称之为`代码打印`。

### 弹窗 ###

在`js`中，如果你的代码运行环境是在`浏览器`当中，那么就可以使用`浏览器`给我们提供的弹窗。

alert(10+2); confirm(10+2); prompt(10+2);

> 上述的三个弹窗只能够在**运行环境为浏览器的情况下使用。**

[ ][javascript_javascript]

转载于:https://www.cnblogs.com/yu412/p/11409992.html

[t]: https://baike.baidu.com/item/ECMAScript
[javascript]: https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D250/sign=103c88deb21c8701d2b6b5e3177f9e6e/730e0cf3d7ca7bcb3409f115bf096b63f624a89d.jpg
[javascript_javascript]: /images/20230601/74079f543b884a528298b5fb0b2eb6a4.png
[1184802-20170922220844103-640841952.png]: /images/20230601/98f247ce40be4cfe8421a62a66462c25.png
[1184802-20170922220310478-432741606.png]: /images/20230601/edb645ba742049ae9d7fd091529d1fd2.png
[1184802-20170922220404134-1522010134.png]: /images/20230601/2d610072f70a466c8b384cc0fa071b5f.png