1228-js的变量常量声明与赋值及数据类型

js的三种引入方式

属性级: 事件属性为在元素内使用
script标签:如果说这个js脚本只在当前html文档中使用
src属性引入: script标签引入外部脚本,将js保存为一个单独的js文件,再通过script标签引入到当前html文档中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js的三种引入方式</title>
</head>
<body>
     <button onclick="show(this)">属性级</button>
    <!--js: JavaScript的简称,是异步的单线程的脚本语言.active -->
    <!-- 1. 属性级: 事件属性为在元素内使用 -->
    <script>
        function show(ele){
            console.log(ele.innerHTML);
            ele.style.background = '#ef5b9c';
        }
    </script>
    <hr>
    <!-- 2. script标签:如果说这个js脚本只在当前html文档中使用 -->
    <button class="btn2">script标签</button>
    <script>
        const btn2 = document.querySelector('.btn2');
        btn2.addEventListener('click',show3);
        function show3(){
            btn2.style.background = '#f15b6c';
        }
    </script>
    <hr>
    <!--3. src属性引入: script标签引入外部脚本,将js保存为一个单独的js文件,再通过script标签引入到当前html文档中 -->
    <button class="btn" onclick="show1(this)">src属性引入</button>
    <script src="js.js"></script>
</body>
</html>

js的变量常量声明与赋值

变量 :用let声明变量变量声明和初始化可以分开
2.常量：常量是特殊的变量: 只读变量，声明后即不能删除,也不能更新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // 1. 变量 :用let声明变量 
        let name; 
        //初始化: 第一次为变量赋值
        name = '张三';
        console.log(name);
        // 更新: 第二次以上的赋值
        name = '李四';
        console.log(name);
        // 可将声明与初始化同步完成
        let id = '1';
        // 注：let 不能进行重复声明
        // 2.常量：常量是特殊的变量: 只读变量，声明后即不能删除,也不能更新
        // 常量的声明与初始化必须同步完成
        const app ='hollo';
        console.log(app);
        //变量/常量的命名规范：只能字母,数字,下划线,$,且第一个不能是数字并严格区分大小写的
        // 1. 蛇形,下划线
        let user_name = '张三';
        // 2. 驼峰式
        let userName = '李四';
        // 3. 大驼峰,帕斯卡
        let UserName = '王五';
        // 4. 匈牙利式
        let oBody = document.body;
        // console.log(oBody);
        oBody.style.background = 'lightgreen';
        // 注：实际工作中,尽可能首选const常量,其次才考虑let
    </script>
</body>
</html>

js数据类型
js数据类型有二种: 原始类型,引用类型

原始类型：数值: 整数和小数，字符串，布尔，undefined，null
2.引用类型：对象,数组,函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // js数据类型有二种: 原始类型,引用类型
        // 1.  原始类型：数值: 整数和小数，字符串，布尔，undefined，null
        // 数值: 整数和小数
        let age = 30;
        // 用typeof操作符来查看类型 返回值为number时 为整数类型
        console.log(age, typeof age);
        // 字符串 返回值为string
        let email = 'a@php.cn';
        console.log(email, typeof email);
        // 布尔:返回值boolean
        let isMarried = true;
        console.log(isMarried,typeof isMarried);
        // undefined，未初始化变量的默认值：返回值undefined
        let gender;
        console.log(gender, typeof gender);
        // null,空对象：返回值null
        let obj = null;
        console.log(obj, typeof null);
         // 符号, 创建对象属性的唯一标识：返回值symbol
        let s = Symbol('custom symbol');
        console.log(s, typeof s);
        // 2.引用类型：对象,数组,函数
        // 对象字面量
        let user = {
            // 属性,相当于变量
            id: 1,
            name: '2222',
            'my email': 'aa@php.cn',
            // 方法: 函数
            getName: function () {
                // this表示当前的上下文,当前对象
                return '我的名字:' + this.name;
            }
        }
        // 访问对象中的变量
        // console.log(user.id, user.name);
        // // 注：访问非法表示符是要在外面加上[]
        // console.log(user['my email']);
        // // 访问对象中的方法
        // console.log(user.getName());
        let name = '222333'
        // 对象字面量的简写
        user = {
            // 当前对象中有一个与共同作用域内的一个变量同名
            name,
            // getName() {
            //     return '我的名字' + this.name;
            // }
            // 方法还可以简写为
            getName: () => 'My name is' + this.name
        }
        console.log(user.name);
        console.log(user.getName());
         // 数组
         let course = [1, 'js入门教程', 88];
         console.log(course, typeof course);
        //  alert(course[1]);
        // Array.isArray()检查数组返回对象 是数组返回true不是返回false
        console.log(Array.isArray(course));
        console.log(Array.isArray(user));
        //注： 数组中的元素索引是从0开始,按索引来访问元素
        // alert(course[1]);  
         // 函数
         function hello() { }
         console.log(hello, typeof hello);
        //  给函数添加属性
         hello.email = 'aa@php.cn';
         console.log(hello.email);
         // 函数传值
         function hello1(a, b, c){
            console.log(arguments);
         }
         hello1(1,2,3,4,5,6);
    </script>
</body>
</html>

相关文章