JavaScript基础

转载

mb5fed440247fb5 2021-09-08 22:10:00

文章标签 html 运算符 javascript 客户端脚本语言 文章分类 代码人生

JavaScript：概念：一门客户端脚本语言
运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
脚本语言：不需要编译，直接就可以被浏览器解析执行了

功能：

可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

JavaScript发展史：
1）1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为： C-- ，后来更名为：ScriptEase
2）1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
3）1996年，微软抄袭JavaScript开发出JScript语言
4）1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。
JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

ECMAScript：客户端脚本语言的标准

一、基本语法：

1、与html结合方式

1.1 内部js：定义<script>，标签体内容就是js代码

1.2 外部js：定义<script>，通过src属性引入外部的js文件

注意：

<script src="js/a.js"></script>

用户名： ``` 新建js文件夹，新增 a.js文件内容：`alert("我是外部的js文件");`

结果：先弹出helloworld 点击确认在弹出 a.js定义的内容：我是外部的js文件，最后点击确定再显示输入框用户名
JavaScript基础_客户端

2、注释

单行注释：//注释内容
多行注释：/*注释内容*/

3、数据类型

3.1 原始数据类型(基本数据类型)：

1) number：数字。整数/小数/NaN(not a number 一个不是数字的数字类型)
2) string：字符串。字符串 "abc" "a" 'abc'
3) boolean: true和false
4) null：一个对象为空的占位符
5) undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

3.2 引用数据类型：对象

4、变量

变量：一小块存储数据的内存空间

Java语言是强类型语言，而JavaScript是弱类型语言。

强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

例子1： var a =3 ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量</title>
    <script >
    //定义变量
       var a  = "第一次弹出";
        alert(a);
        a = "第二次弹出";
        alert(a);
       </script>
</head>
<body>
</body>
</html>

例子2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量</title>
    <script >
     //定义number类型
        var num = 1;
        var num2 = 1.2;
        var num3 = NaN;

        //输出到页面上
        document.write(num+"<br>");
        document.write(num2+"<br>");
        document.write(num3+"<br>");

        //定义string类型
        var str = "abc";
        var str2 = 'edf';
        document.write(str+"<br>");
        document.write(str2+"<br>");

        //定义boolean
        var flag = true;
        document.write(flag+"<br>");

        // 定义null,undefined
        var obj = null;
        var obj2 = undefined;
        var obj3 ;
        document.write(obj+"<br>");
        document.write(obj2+"<br>");
        document.write(obj3+"<br>");
    </script>
</head>
<body>
</body>
</html>

结果：
JavaScript基础_javascript_02

typeof运算符：获取变量的类型。

注：null运算后得到的是object

语法：typeof(变量名)

例子：

//定义number类型
 var num = 1;
 var num2 = 1.2;
 var num3 = NaN;

 //输出到页面上
 document.write(num+"---"+typeof(num)+"<br>");
 document.write(num2+"---"+typeof(num2)+"<br>");
 document.write(num3+"---"+typeof(num3)+"<br>");

 //定义string类型

 var str = "abc";
 var str2 = 'edf';
 document.write(str+"---"+typeof(str)+"<br>");
 document.write(str2+"---"+typeof(str2)+"<br>");

 //定义boolean
 var flag = true;
 document.write(flag+"---"+typeof(flag)+"<br>");

 // 定义null,undefined
 var obj = null;
 var obj2 = undefined;
 var obj3 ;
 document.write(obj+"---"+typeof(obj)+"<br>");
 document.write(obj2+"---"+typeof(obj2)+"<br>");
 document.write(obj3+"---"+typeof(obj3)+"<br>");

结果：null---object是个javascript的bug
JavaScript基础_客户端_03

5、运算符

5.1 一元运算符：只有一个运算数的运算符 a++ a-- +(正号)

++(--) 在前，先自增(自减)，再运算
++(--) 在后，先运算，再自增(自减)

+(-)：正负号

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一元运算符</title>
    <script>
        /*
        1. 一元运算符：只有一个运算数的运算符
               ++，-- ， +(正号) -（负号）
                * 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
                        * 其他类型转number：
                            * string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
                            * boolean转number：true转为1，false转为0
         */
        var num = 3;
        var a = ++ num ;
        document.write(num);// 4
        document.write(a); // 3 4
        document.write("<hr>"+"<br>");

        //转换错误
        var b = +"123abc";
        document.write(typeof (b)); //number
        document.write(b + 1+"<br>"); //NaN
        document.write("<hr>");

        var flag = + true;
        var f2 = + false;
        document.write(typeof (flag) + "<br>");//number
        document.write(flag + "<br>");// 1
        document.write(f2 + "<br>");// 0
    </script>
</head>
<body>
</body>
</html>

5.2 算数运算符：+ - * / % ...

<script>
    var a = 3;
    var b = 11;

    document.write(a+b +"<br>");
    document.write(a-b +"<br>");
    document.write(a*b +"<br>");
    document.write(a/b +"<br>");
    document.write(a%b +"<br>");

</script>

结果：
JavaScript基础_javascript_04

5.3 赋值运算符 = += -+....

5.4 比较运算符 > < >= <= == ===(全等于)

<script>
    /*
     * 比较运算符:
     *     * 比较方式
     *          1. 类型相同：直接比较
     *              * 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
     *          2. 类型不同：先进行类型转换，再比较
     *              * ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
     */

    document.write((3 > 4) +"<br>"); //fales
    document.write(("abc" < "acd") +"<br>"); //true
    document.write(("123" == 123) +"<br>"); //true
    document.write(("123" === 123) +"<br>"); //fales

</script>

5.5 逻辑运算符 && || !

其他类型转boolean：
1） number：0或NaN为假，其他为真
2）string：除了空字符串("")，其他都是true
3） null&undefined:都是false
4）对象：所有对象都为true

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>比较运算符</title>
    <script>
        /*
         * 逻辑运算符:
         *  &&: 与（短路）
         *  ||: 或 (短路)
         *  !：非
         *      * 其他类型转boolean：
         *          1. number：0或NaN为假，其他为真
         *          2. string：除了空字符串("")，其他都是true
         *          3. null&undefined:都是false
         *          4. 对象：所有对象都为true
         *
         *
         */
        var flag = true;
        document.write(flag+"<br>"); //true
        document.write(!flag+"<br>"); //false
        document.write("<hr>"); //分隔符

        //number转boolean，0为假 非0为真
        var num = 3;
        var num2 = 0;
        var num3 = NaN;
        document.write(!!num+"<br>"); //true
        document.write(!!num2+"<br>"); //false
        document.write(!!num3+"<br>"); //false
        document.write("<hr>");

        //string
        var str1 = "abc";
        var str2 = "";
        document.write(!!str1+"<br>"); //true
        document.write(!!str2+"<br>"); //false
        document.write("<hr>");


        // null & undefined
        var obj = null;
        var obj2;
        document.write(!!obj+"<br>");//false
        document.write(!!obj2+"<br>");//false
        document.write("<hr>");

        // 对象
        var date = new Date();
        document.write(!!date+"<br>"); //true
        document.write("<hr>");


        //第一种方法：判断对象是否为空
        obj = "123";
        if(obj != null && obj.length > 0){//防止空指针异常
            alert(123);
        }
        if(obj){//防止空指针异常
            alert(112);
        }
        //第二种方法：js中可以这样定义，简化书写。
        if(date){//防止空指针异常
            alert(111);
        }

    </script>
</head>
<body>

</body>
</html>

5.6 三元运算符 ? : 表达式

表达式? 值1:值2;

判断表达式的值，如果是true则取值1，如果是false则取值2；

var a = 3;
var b = 4;
//a大于b走1  否则走0
var c = a > b ? 1:0;  //0

6、流程控制语句

if...else...
switch: 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)

switch(变量):
case 值:
注意：在JS中,switch语句可以接受任意的原始数据类型

<script>
    var a;
    switch (a){
        case 1:
            alert("number");
            break;
        case "abc":
            alert("string");
            break;
        case true:
            alert("true");
            break;
        case null:
            alert("null");
            break;
        case undefined:
            alert("undefined");
            break;
    }
</script>

while 与 java语法一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>while语句</title>
    <script>
       //1 ~ 100 求和  5050
        var sum = 0;
        var num = 1;
        while(num <= 100){
            sum += num;
            num ++;
        }
        alert(sum); //5050
    </script>
</head>
<body>
</body>
</html>

do...while 与 java语法一致
for 与 java语法一致

//1 ~ 100 求和  5050 
 var sum = 0;
 for (var i = 1; i <= 100; i ++){
     sum += i;
 }
 alert(sum);

7、JS特殊语法

1）语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)

2）变量的定义使用var关键字，也可以不使用
用：定义的变量是局部变量
不用：定义的变量是全局变量(不建议)

//弹出4
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊语法</title>
    <script>
    		var b ;
    		//定义方法赋值
        function fun(){
            b = 4;
        }
        //调用方法
        fun();
        alert(b);
    </script>
</head>
<body>
</body>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。