2024-09-03 JS基础笔记

.Javascript介绍

JavaScript(简称“JS”)是当前最流行、应用最广泛的客户端脚本语言,用来在网页中添加一些动态
效果与交互功能,在 Web 开发领域有着举足轻重的地位。
JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页
HTML 用来定义网页的内容,例如标题、正文、图像等
CSS 用来控制网页的外观,例如颜色、字体、背景等
JavaScript 用来实时更新网页中的内容,例如从服务器获取数据并更新到网页中,修改某些标签的
样式或其中的内容等,可以让网页更加生动。

JS使用方法

   <title>Document</title>
    <!-- 外部式--在head头部标签中 通过script引入t同级别 .js 结尾的js文件 script 空格 src ./-->
     <!-- 或者 ../ 找到外部js文件 -->
    <script src="这里 ./ -- ../  快速找到js文件"></script>

</head>
<body>
    <!-- 内部式--在body内部写script标签 在标签内写js代码 -->
     <script>
        // 这里写js代码
     </script>
</body>

JS输出

<body>
    <script>
        // print()  print 可以将当前网页内容打印
        // console.log 在控制台输出内容  右击 检查 控制台
        console.log('啊实打实大师大师');
        // alert("hello js") 在网页直接弹出 
        alert('打开网页自动弹出') 
    </script>
</body>

JS注释

<body>
   <script>
       // 这是单行注释
       /*
       这是多行注释
       */
   </script>
</body>

JS变量

<body>
    <!-- JS不需要指定变量的类型,JS的变量类型由他的值来决定 -->
    <script>
        // 声明变量let  变量赋值     简写            多个变量赋值        打印
        // let a;       a='哈哈'   let b='哈哈'     let c=10,d=20      console.log(a,b,c,d);
        // var const
        var aa = '你好'
        const ss = 'nihao'
        console.log(aa,ss);
        /*let用于定义变量 const用来定义常量  var可以先使用在定义*/
        
    </script>
</body>

JS数据类型

<body>
<!-- 分为基础类型 引用类型 -->
<!-- 基本数据类型 字符串型 (String)数值型 (Number)布尔 (Boolean)undefined (Undefined)null (Null)-->
    <script>
        // String用于表示一个字符序列,即字符串。字符串需要使用 '单引号' 或 "双引号" 括起来。
        let a = "这是字符串a"
        let b = '这是字符串b'
        //  Number 类型用来表示整数和浮点数,最常用的功能就是用来表示10进制的整数和浮点数。数值类型有颜色
        // 整数       
        let c = 10
        //  浮点数
        let d = 10.01
        // Boolean布尔型也被称为逻辑值类型或者真假值类型 首字母 t f 为小写
        // true  真
        let aa = true
        // false 假
        let as = false
        // 在使用 let 声明变量但未对其加以初始化赋值时,这个变量的值就是 undefined
        // 变量声明 没有赋值 就会打印undefined
        let aq;
        console.log(a);
        //  Null空,表示空对象,一般用来初始化变量
        // 当变量需要为空的时候 就可以写null
        let ab = null
        let ba = null



        /*引用数据类型--数组 (Array)是一组按顺序排列的数据的集合,数组中的每个值都称为元素,
        而且数组中可以包含任意类型的数据。在 JavaScript 中定义数组需要使用方括号 [ ] 
        数组中的每个元素使用逗号进行分隔  跟python中列表相似*/
        let ar = [1, 2, 3, 4]
        // 通过索引取值
        // 引用数据类型
        // 1.数组 []表示
        // 我们可以通过索引取值
        let arr = [1, 2, 3, 4, 5, 6]
        console.log(arr[0]);
        // 不支持负数索引//逆向索引
        console.log(arr[-2]);
        // 获取数组的长度 length
        // 从数组最后添加和删除数据
        // push() 方法用于向数组的末尾添加一个或多个元素
        // pop() 方法用于删除并返回数组的最后一个元素
        arr.push(5);
        console.log(arr);
        arr.pop();
        console.log(arr);
        console.log(arr.length);
        // 根据下标添加和删除元素 splice
        arr.splice(start, num, element1, ...elementN)

        /*参数解析:
        1、start:必需,开始删除的索引
        2、num:可选,删除数组元素的个数
        3、elementN:可选,在start索引位置要插入的新元素
        此方法会删除从start索引开始的num个元素,并将elementN参数插入到start索引位置*/
        let arra = [1, 2, 3, 4, 5]
        arra.splice(1, 0, "苹果")
        console.log(arra);
        arra.splice(1, 2)
        console.log(arra);
        arra.splice(1, 0, "鸭梨", "香蕉")
        console.log(arra);

        //对象 (Object)在 JavaScript 中,对象是一种复合数据类型,用于存储键值对。对象可以包含各种类型的数据
        let bq = {
            name: "景明",
            age: 18,
            sex: "男",
        }
        // 对象取值  需要通过.来取值
        console.log(bq);
        console.log(bq.name);
        console.log(bq.age);

判断类型

        // typeof 判断类型  场景:基本数据类型的判断
        let aw = '我是字符串类型'
        let bw = 10
        let cw = undefined
        let dw = null
        let ew = true
        console.log(typeof aw); // string
        console.log(typeof bw); // number
        console.log(typeof cw); // undefined
        console.log(typeof dw); // 如果值是null 打印会为object类型
        console.log(typeof ew); // boolean

运算符

<body>
    <script>
        // 运算符  字符串拼接 字符串拼接使用"+"运算符
        let ae = 33
        let be = 40
        // 77
        console.log(ae + be);
        let cq = "33"
        let dq = 44
        // 字符串和数字进行拼接,自动把数字类型转换成字符串
        // 3344
        console.log(cq + dq);
        // 算数运算符 用于表达式计算。加+  减- 乘* 除/ 自增++ 自减 --
        let a = 10
        let b = 20
        console.log(a + b); // 30
        console.log(a - b); //-10
        console.log(a * b); //200
        console.log(a / b); //0.5
        console.log(++a); //11
        console.log(--b); //19
        // 赋值运算符 赋值运算符用于给 JavaScript 变量赋值。=  +=  -=
        let aq = 10
        let bq = 20
        console.log(aq = 100); //结果 100
        console.log(aq += bq); // a=a+b 结果 30
        console.log(aq -= bq); // a=a-b 结果 -10
        // 比较运算符  == 判断两边的值是否相等 不判断类型 如果相等返回true,否则返回false 只要值相等就相等
        let aw = 30
        let bw = "30"
        console.log(aw == bw); //值相等就会相等  true
        //  != 用来判断两个值是否不相等  如果不相等返回true,否则返回false
        let aa = 30
        let bb = "30"
        console.log(aa != bb); //值相等就会相等  false
        // === 判断两边的值 和数据类型是否相等 ---判断全等
        let ar = 30
        let br = "30"
        console.log(ar === br); //  false
        // 值和类型都相等就会相等 相等返回 true
    </script>
</body>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容