javascript(B站李立超老师)-01入门

最新推荐文章于 2024-07-30 17:19:26 发布

Daybreak丶丶

最新推荐文章于 2024-07-30 17:19:26 发布

阅读量337

点赞数 5

文章标签： javascript 前端

本文链接：https://blog.csdn.net/loveyouyhl/article/details/136701764

版权

视频地址:JavaScript核心基础_讲师（李立超）_JS教程_哔哩哔哩_bilibili

1.helloword.html

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Hello World</title>

        <!-- JS代码需要编写到script中 -->
        <script>
            alert("哈哈哈哈")

            console.log('你猜我在哪？')

            document.write('你猜我在哪？')

        </script>
    </head>
    <body></body>
</html>

2.编写位置.html

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>JS的编写位置</title>
        <!-- 
        1.可以将js编写到网页内部的script标签
        -->
        <!-- <script>
            alert("哈哈！")
        </script> -->

        <!-- 
            2.可以将js编写外部的js文件中，然后通过script标签进行引入
        -->
        <!-- <script src="./script/script.js"></script> -->
    </head>
    <body>
        <!--
            3.可以将js代码编写到指定属性中
        -->
        <button onclick="alert('你点我干嘛！')">点我一下</button>

        <hr>

        <a href="javascript:alert(123);">超链接</a>
        
        <hr>

        <a href="javascript:;">超链接</a>
    </body>
</html>

3.基本语法.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本语法</title>
    <script>
        /*
            1. 多行注释
                - 注释中的内容会被解释器忽略
                - 可以通过注释来对代码进行解释说明
                - 也可以通过注释来注释掉不想执行的代码
        */

        // 2. 单行注释
        // alert(123) // alert()用来弹出一个警告框

        /*
            3. JS严格区分大小写
        */
    //    alert(123)

        /*
            4. 在JS中多个空格和换行会被忽略
                可以利用这个特点来对代码进行格式化
        */
    //    alert(123)

        /*
            5. JS中每条语句都应该以分号结尾
                JS中具有自动添加分号的机制，所以如果不写分号解释器会自动添加
        */
    //    alert(111)
    //    console.log(222)
       

    </script>
</head>
<body>
    
</body>
</html>

4.字面量和变量.html

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>字面量和变量</title>
        <script>
            /*
            字面量
                - 字面量其实就是一个值，它所代表的含义就是它字面的意思
                - 比如：1 2 3 4 100 "hello" true null .....
                - 在js中所有的字面量都可以直接使用，但是直接使用字面量并不方便

            变量
                - 变量可以用“存储”字面量
                - 并且变量中存储的字面量可以随意的修改
                - 通过变量可以对字面量进行描述，并且变量比较方便修改
        */
            let x
            x = 80
            x = "哈哈"

            let age
            age = 80
            age = 81
            // console.log(age)

            /* 
                多行注释：shift + alt + a
                变量的使用 
                    声明变量 --> let 变量名 / var 变量
                    变量赋值 --> a = xx
                    声明和赋值同时进行 --> let 变量 = 值
            */
            let a
            let b, c, d

            var e
            var f, g, h

            a = 10
            a = "hello"
            a = true

            // console.log(a)

            let i = 100
            console.log(i)
        </script>
    </head>
    <body></body>
</html>

5.变量的内存.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量的内存</title>
    <script>

/* 
        变量中并不存储任何值，而是存储值的内存地址！

*/
        let a = '哈哈'
        let b = '哈哈'

    </script>
</head>
<body>
    
</body>
</html>

6..常量.html

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>常量</title>
        <script>
            /* 
                在JS中，使用const声明常量，常量只能赋值一次，重复赋值会报错
                    在JS中除了常规的常量外，有一些对象类型的数据我们也会声明为常量
            */
            const PI = 3.1415926
            // PI = 10

            console.log(PI)
        </script>
    </head>
    <body></body>
</html>

7.标识符.html

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>标识符</title>
        <script>
            /* 
                在JS中，所有可以由我们自主命名的内容，都可以认为是一个标识符
                    像 变量名 函数名 类名...
                使用标识符需要遵循如下的命名规范：
                    1. 标识符只能含有字母、数字、下划线、$，且不能以数字开头
                    2. 标识符不能是JS中的关键字和保留字，也不建议使用内置的函数或类名作为变量名
                    3. 命名规范：
                        - 通常会使用驼峰命名法
                            - 首字母小写，每个单词开头大写
                            - maxlength --> maxLength
                            - borderleftwidth --> borderLeftWidth

                        - 类名会使用大驼峰命名法
                            - 首字母大写，每个单词开头大写
                            - maxlength --> MaxLength

                        - 常量的字母会全部大写
                            - MAX_LENGTH
            */
            let a = 10
            let abc123_$ = 22
            let _abc = 33
            let $bcd = 44
            
            // let alert = 55
            //alert(123)

        </script>
    </head>
    <body></body>
</html>