JavaScript初识

木白端墨
212 阅读3分钟

一、JavaScript简介

JavaScript是运行在浏览器端的，基于对象和事件驱动的脚本语言，JavaScript主要是解决前端与用户交互的问题，包括使用交互和数据交互。当前学习JavaScript的目的是为了给前端页面加一些特效功能

1、JavaScript组成

ECMAScript：基础语法，比如变量，数据类型，判断，循环等基础语言

DOM：文档对象模型，Document Object Model，用来获取和设置文档中的标签元素的

BOM：浏览器对象模型，Browser Object Model，用来获取和设置浏览器的属性和行为

2、JavaScript使用方式

（1）行内式

<input type="button" id="btn1" value="点击试试1" onclick="alert('哈喽')">

（2）页面script标签嵌入式

<script>
    alert("哈喽2")
</script>

（3）外部引入

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

3、JavaScript语法格式

（1）一条js代码语句应该以分号;结尾

（2）注释：1、单行//、多行/**/

4、JavaScript输出

（1）console.log将结果输出到浏览器的控制台

（2）alert以弹窗的形式输出

（3）document.write在页面中显示

二、JavaScript 变量及数据类型

1、JavaScript变量

JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值：

    <script>
        var num = 100;
        var name = "张三";
        var a=1,b=2,c=3;
    </script>

2、JavaScript数据类型

类型说明
数字（Number）可以是整数或者是小数，或者是科学计数(e)
字符串（String）可以使用单引号或双引号
布尔(Boolean)布尔数值，true 或 false
对空（Null）空值
未定义（Undefined）这个值表示变量不含有值

引用数据类型： 对象(Object)、数组(Array)、函数(Function)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var name = "张三";
        console.log(name,typeof name);

        var num1 = 10;
        var num2 = 3.14;
        console.log(num1,typeof num1,num2,typeof num2);

        var flag = true;
        console.log(flag,typeof flag);

        // 变量如果不赋值，默认值可以理解为是undefined
        var a=undefined;
        console.log(a,typeof a)
    </script>
</head>
<body>

</body>
</html>

三、JavaScript的数据转换

属性说明
typeof查看 JavaScript 变量的数据类型
onstructor返回所有 JavaScript 变量的构造函数
String()，toString()将数字转换为字符串
Number()将字符串转换为数字
parseFloat()解析一个字符串，并返回一个浮点数
parseInt()解析一个字符串，并返回一个整数
Boolean()解析一个字符串，并返回一个布尔值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var num = 100;
        console.log(num,typeof num)

        // 转字符串
        var num2 = String(num)
        console.log(num2,typeof num2)


        var s = "123"
        console.log(s,typeof s)

        // 转数字
        var s2 = Number(s)
        console.log(s2,typeof s2)
        // 转数字，如果失败，NaN  Not a number
        console.log(parseInt("123"),parseInt("123.456"),parseInt(123.456),parseInt("123.456abc"),parseInt("xx123.456abc"))
        console.log(parseFloat("123"),parseFloat("123.456"),parseFloat(123.456),parseFloat("123.456abc"),parseFloat("xx123.456abc"))

        // 转布尔
        console.log(Boolean("a"),Boolean("1"),Boolean("0"),Boolean(0),Boolean(null),Boolean(undefined),Boolean(""))
    </script>
</head>
<body>

</body>
</html>

四、JavaScript运算符

算术运算符

运算符描述例子x运算结果y运算结果
  • |加法| x=y+2 |7| 5
  • |减法| x=y-2 |3| 5
  • |乘法| x=y*2 |10| 5 / |除法| x=y/2 |2.5| 5 % |取模（余数）| x=y%2| 1| 5 ++ |自增 |x=++y |6| 6 ++ |自增|x=y++ |5| 6 -- |自减 |x=--y| 4 |4 -- |自减|x=y-- |5| 4

赋值运算符

运算符例子等同于运算结果
=x=yx=5
+=x+=yx=x+yx=15
-=x-=yx=x-yx=5
*=x*=yx=x*yx=50
/=x/=yx=x/yx=2
%=x%=yx=x%yx=0

比较运算符

运算符描述比较返回值
==等于x==8false
===绝对等于（值和类型均相等）x==="5"false
!=不等于x!=8true
!==不绝对等于（值和类型有一个不相等，或两个都不相等）x!=="5"true

| 大于| x>8| false < | 小于| x<8| true = | 大于或等于| x>=8| false <= | 小于或等于| x<=8| true

逻辑运算符

运算符描述例子
&&and(x < 10 && y > 1) 为 true
!not!(x==y) 为 true
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var age = 20;
        age++;
        console.log(age);

        var a = 10;
        // 先赋值再减1
        var b = a--;
        console.log(a,b);

        var a = 10;
        // 先减1再赋值
        var b = --a;
        console.log(a,b);

        console.log("a"+"b"); //"ab"
        console.log("a"+10); //"a10"

        var num = 10
        num+=20
        console.log(num)  //30


        console.log(10==10,10=="10",10==="10")  //true true false
        console.log(10!=10,10!="10",10!=="10")  //false false true


        console.log(true && false,true||false,100&&10,!false)  //false true 10 true

        var num = 10>100?1:2; //2
        console.log(num);
    </script>
</head>
<body>

</body>
</html>

五、JavaScript条件语句及循环

条件语句代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var num = 100
        if (num % 2 == 0) {
            console.log("偶数")
        } else {
            console.log("奇数")
        }

        var ret = "C"
        switch (ret) {
            case "A":
                console.log("90-100")
                break
            case "B":
                console.log("80-90")
                break
            case "C":
                console.log("70-80")
                break
            case "D":
                console.log("60-70")
                break
            case "E":
                console.log("0-60")
                break
            default:
                console.log("数据不合法")
        }
    </script>
</head>
<body>

</body>
</html>

循环代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var msg = "我爱北京天安门"
        for(var i in msg){
            console.log(i,msg[i])
        }
    </script>
    <script>
        var msg = "我爱北京天安门"
        for(var i=0;i<msg.length;i++){
            console.log(i,msg[i])
        }
    </script>
    <script>
        /*var msg = "我爱北京天安门"
        // 死循环
        for(var i=0;i<msg.length;i--){
            console.log(i,msg[i])
        }*/
    </script>
    <script>
        var msg = "我爱北京天安门"
        var i = 0
        while(i<msg.length){
            console.log(i,msg[i])
            i++
        }
    </script>
    <script>
        for(var i=1;i<11;i++){
            for(var j=11;j<21;j++){
                console.log(i,j)
            }
        }
    </script>
    <script>
        for(var i=1;i<11;i++){
            for(var j=11;j<21;j++){
                if(i==5 && j==15){
                    console.log("*****************************")
                    break
                }
                console.log(i,j)
            }
        }
    </script>
</head>
<body>

</body>
</html>

五、JavaScript函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // js解析的时候优先解析函数，将函数放到内存
        // 函数的定义
        function say_hello(num1, num2) {
            console.log("sayhello...")
            console.log(num1 + num2)
        }

        // 函数的调用
        say_hello(1, 2)


        // 函数的定义
        function say_hello2(num1, num2) {
            console.log("sayhello2...", arguments)
            console.log(arguments[0] + arguments[1])
        }

        // 函数的调用
        say_hello2(1, 2)


        // 函数的定义
        // 此时arguments拿不到默认值
        function say_hello3(num1, num2 = 100) {
            console.log("sayhello3...", arguments)
            console.log(num1 + num2)
        }

        // 函数的调用
        say_hello3(1)
        say_hello3(1, 2)


        // 函数的定义
        // 此时arguments拿不到默认值
        function say_hello4(num1, num2 = 100) {
            console.log("sayhello4...")
            // return num1+num2
            // return
        }

        // 函数的调用
        console.log(say_hello4(1, 2))


        //定义匿名函数
        var myfunc = function (a, b) {
            return a + b
        }
        console.log(myfunc, myfunc(1, 2));

        //定义自运行函数,注意这里需要使用；与前后隔开
        (function (a, b) {
            console.log("halou", a + b)
        })(1, 2);

        (function () {
            console.log("halou2")
        })();

    </script>
</head>
<body>

</body>
</html>

六、JavaScript创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //创建对象
        var person = new Object();
        //设置属性
        person.firstName = "王";
        person.lastName = "二";
        person.money = function () {
            console.log("工作...")
        }
        //调用对象
        console.log(person)
        console.log(person.firstName)
        person.money()


        //定义对象，这种一般称为"json"，类似于Python中的字典
        var person2 = {
            "firstName": "王",
            "lastName": "王",
            "money": function () {
                console.log("工作...")
            }
        }

        //调用对象
        console.log(person2)
        console.log(person2.firstName)
        person2.money()

        //定义类，此时的this 相当于py的self
        function Person(firstName, lastName, money) {
            this.firstName = firstName
            this.lastName = lastName
            this.money = money
        }
        //创建对象
        var person3 = new Person("王", "二", function () {
            console.log("工作")
        })
        //调用对象
        console.log(person3)
        console.log(person3.firstName)
        person3.money()
                //此时this是window对象
        console.log(this)

        //此时this是window对象
        function f() {
            console.log(this)
        }
        f()

        //此时this是person
        var person1 = {
            "name":"张三",
            "age":18,
            "show":function () {
                console.log(this,this.name,this.age)
            }
        }
        person1.show()
    </script>
</head>
<body>

</body>
</html>
avatar
文章
阅读
粉丝