js基础day2

最新推荐文章于 2024-08-10 16:15:00 发布
最新推荐文章于 2024-08-10 16:15:00 发布
阅读量96 收藏
点赞数
分类专栏： javascript 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52372037/article/details/129377685
版权

一、变量

1.什么是变量在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

2.变量的基本使用在这里插入图片描述

（1）变量的声明

在这里插入图片描述

（2）变量的赋值

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

代码
<!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>
    <script>
        // 1. 声明一个年龄变量
        // let age
        // 2. 赋值 赋值号 =   在编程语言中都是把右边给左边
        // age = 99
        // console.log(age)
        // 3. 声明的同时直接赋值
        // 声明变量的时候给它赋初值 变量的初始化
        // let age = 18
        // 小案例
        // 变量名不加引号 字符串才加   双击复制，双击粘贴
        let num = 20
        let uname = '张三'
        console.log(num)
        console.log(uname)
    </script>
</body>

</html>

3.变量的更新以及输入用户名案例

（1）变量的更新

在这里插入图片描述
行后报错的插件 error lens
在这里插入图片描述在这里插入图片描述在这里插入图片描述

代码
<!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>
    <script>
        // let age = 18
        //  让后面的去覆盖前面的
        // age = 19
        // 变量不可以重复声明，会报错
        // let age = 19
        // console.log(age)
        // 2. 声明多个变量
        /*  let age = 18, uname = '迪丽热巴'
         console.log(age, uname) */
        // 提倡的声明方式
        let age = 18
        let uname = '迪丽热巴'
        console.log(age, uname)
    </script>
</body>

</html>
（2）输入用户名案例

在这里插入图片描述

代码
<!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>
    <script>
        // 输出用户名案例
        // 1. 用户输入
        // prompt('请输入姓名')
        // 2. 内部处理： 保存数据
        // prompt()是一个函数，会得到一个结果，我们可以直接拿过来在一行上写
        let uname = prompt('请输入姓名')
        // 3. 打印输出
        document.write(uname)
    </script>
</body>

</html>
（3）交换两个变量案例

在这里插入图片描述在这里插入图片描述

代码
<!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>
    <script>
        let num1 = 10
        let num2 = 20
        let temp
        // 都是把右边给左边
        temp = num1
        num1 = num2
        num2 = temp
        console.log(num1, num2)
    </script>
</body>

</html>

4.变量的本质和命名规则

（1）变量的本质在这里插入图片描述
（2）变量命名规则与规范

在这里插入图片描述在这里插入图片描述在这里插入图片描述

代码
<!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>
    <script>
        // 1. 姓名
        // 输入的同时会得到一个值 把这个值保存起来 可以写在一起
        // prompt('请输入姓名')
        let uname = prompt('请输入姓名')
        let age = prompt('请输入年龄')
        let gender = prompt('请输入性别')
        document.write(uname, age, gender)
    </script>
</body>

</html>
（3）变量扩展-let和var的区别

在这里插入图片描述

代码
<!DOCTYPE html>
<html lang="en">

<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>let和var的区别</title>
</head>

<body>
    <script>
        /*   var num
          console.log(num)
          num = 10 */
        /* num = 10
        console.log(num)
        var num */
        /*  var num = 10
         var num = 20
         console.log(num) */
        // let就解决了这种问题，还没声明就使用，let会报错
        num = 10
        console.log(num)
        let num
        // let不允许多次声明
        /* let num = 20
        let num = 10
        console.log(num) */
    </script>
</body>

</html>

5.数组的基本使用

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

代码
<!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>
    <script>
        // let arr = [10,20,30]
        // 1. 声明数组 有序
        // 逗号后面加一个空格 看起来更专业
        32// 出现汉字一定要加引号 单引号双引号都可以
        let arr = ['小杨', '小李', '小熊']
        // 2. 使用数组 数组名[索引号] 从0开始
        // console.log(arr)
        console.log(arr[0])    //小杨
        // 尽量不要有这种情况 高版本浏览器能解析 低版本不行
        /*  let 刘德华 = 10
         console.log(刘德华) */
        //  3. 数组长度 = 索引号 + 1
        console.log(arr.length)
    </script>
</body>

</html>

在这里插入图片描述

代码
<!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>
   <script>
       let arr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
       console.log(arr[6])
   </script>
</body>

</html>

在这里插入图片描述在这里插入图片描述

二、常量

在这里插入图片描述

代码
<!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>
    <script>
        // 常量 不允许更改值
        const PI = 3.14
        console.log(PI)
        // 常量不可以再次赋值，而变量可以
        PI = 3.15
        console.log(PI)
        // 2. 常量声明的时候必须赋值，变量可以不用
        // const PI
    </script>
</body>

</html>

在这里插入图片描述

三、数据类型

在这里插入图片描述在这里插入图片描述在这里插入图片描述

1.基本数据类型

（1）数字类型

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

代码
<!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>
    <script>
        // js 弱数据类型的语言
        // 只有当我们赋值了 才知道是什么数据类型
        /*  let num = 'black'
         console.log(num) */
        // java 强数据类型的语言 int num = 10
        console.log(1 + 1)
        console.log(1 * 1)
        console.log(1 / 1)
        console.log(4 % 2)   //求余数
        console.log(3 % 5)   //余3  结果是前面小的那个数
        // 余数经常用来判断是否是整数 比如判断这一年是否是闰年 比如所有偶数相加 能被2整除的就是偶数

        // NaN not a number
        console.log('black' - 6)
        console.log(NaN + 7)
        console.log(NaN === NaN)  //NaN自己都不等于NaN 结果是false
    </script>
</body>

</html>

在这里插入图片描述

代码
<!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>
    <script>
        // 1. 页面弹出输入框
        let r = prompt('请输入圆的半径：')
        // 2. 计算圆的面积（内部处理）
        let result = 3.14 * r * r
        // 3. 页面输出
        document.write(result)
    </script>
</body>

</html>

not a number
在这里插入图片描述

（2）字符串类型

在这里插入图片描述在这里插入图片描述

代码
<!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>
    <script>
        let str = 'blue'
        let str1 = "pink"
        // 反引号
        let str2 = `反引号`
        console.log(str2)
        console.log(11)
        // 字符串
        console.log(`11`)
        console.log(str)
        console.log('str')
        // 找离它最近的一个单引号配对
        console.log('海上月是天上月，"眼前人是心上人"')
        // 单引号找离他最近的一个配对 就会出错
        // console.log('海上月是天上月，'眼前人是心上人'')
        // 转义字符
        console.log('海上月是天上月，\'眼前人是心上人\'')
        console.log(1 + 1)
        // 字符串的拼接
        console.log('1' + '1')
        let age = 19
        document.write('我今年' + age)
        document.write('我今年', age)
        document.write('我今年age')
    </script>
</body>

</html>

在这里插入图片描述

代码
<!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>
    <script>
        // let age = 18
        // 模板字符串 外面用反引号包含 里面${变量名}
        // document.write(`我今年${age}岁了`)
        let uname = prompt('请输入您的姓名：')
        let age = prompt('请输入您的年龄：')
        // 输出
        document.write(`大家好，我叫${uname}，今年${age}岁了`)
    </script>
</body>

</html>

在这里插入图片描述在这里插入图片描述

（3）布尔类型

在这里插入图片描述

（4）未定义类型

在这里插入图片描述

（5）null空类型

在这里插入图片描述在这里插入图片描述在这里插入图片描述

代码
<!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>
    <script>
        //1. true false 是布尔型字面量
        /* let isCool = true
        console.log(isCool)
        console.log(3 > 4) */
        //2. 未定义类型  声明一个变量未赋值就是 undefined  js弱数据类型
        /*  let num
         console.log(num) */
        // 3. null 空的
        let obj = null
        console.log(obj)
        // undefined和null在计算上有区别
        console.log(undefined + 1) //NaN
        console.log(null + 1)  //1
    </script>
</body>

</html>

2.检测数据类型

在这里插入图片描述

（1）控制台

在这里插入图片描述

（2）typeof 关键字检测

在这里插入图片描述

代码
<!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>
    <script>
        let num = 9
        console.log(typeof num)
        let str = '10'
        console.log(typeof str)
        let str1 = 'pink'
        console.log(typeof str1)
        let flag = false
        console.log(typeof flag)
        let un
        console.log(typeof un)
        let obj = null
        console.log(typeof obj)
    </script>
</body>

</html>
澈如冬雪^
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript基础练习_day2
08-23
### JavaScript基础练习_day2知识点详解 #### 一、概述 本篇练习主要针对JavaScript初学者设计，涵盖了变量声明、数据类型、算术运算、字符串处理以及数组操作等基础概念。通过具体的代码示例来帮助读者理解和掌握...
JavaScript基础练习_day4
08-27
### JavaScript基础练习_day4 #### 知识点概述 本次基础练习主要针对JavaScript中的几个核心概念进行探讨，包括但不限于变量作用域、异步操作、定时器的行为以及闭包的应用等。通过具体的代码示例，帮助初学者理解...
JavaScript基础Day2
JOUKELOVE的博客
04-03 1778
算术运算符的优先级顺序： <script> let r = prompt('请输入半径值') let result = 3.14 * r * r document.write(`计算之后圆的面积是：${result}`) </script> 赋值运算符： num += 1 即为 num = num + 1 一元运算符： 像二元运算符，加减乘除这些，它至少需要两个数才能成立。 只有自增和自减，每次只能加减1 ..
JS基础day2 apis
qq_45867182的博客
03-28 62
JavaScript基础Day05：对象
落落free的博客
10-10 209
JavaScript基础Day05：对象 文章目录JavaScript基础Day05：对象一、对象1. 创建对象2. 自定义构造函数创建对象3. 通过字面量创建对象4. new关键字5. this关键字二、对象的使用1. 获取属性（两种写法）2. 遍历对象的属性：使用for-in语法3. 简单类型和复杂类型 一、对象 ​ JavaScript的对象是无序属性的集合。其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把JavaScript中的对象想象成键值对，其中值可以是数据和函数。（特征
JavaScript基础day01
m0_74153968的博客
07-23 656
定义：一种运行在客户端（浏览器）的编程语言，实现人机交互效果。作用：（1）网页特效 (监听用户的一些行为让网页作出对应的反馈)（2）表单验证 (针对表单数据的合法性进行判断)（3）数据交互 (获取后台的数据, 渲染到前端)（4）服务端编程 (node.js)组成：（1）ECMAScript:规定了js基础语法核心知识。比如：变量、分支语句、循环语句、对象等等（2）Web APIs : DOM 操作文档，比如对页面元素进行移动、大小、添加删除。
day15 JS基础2
m0_70619994的博客
07-13 210
目录一、运算符1、算术运算符2、赋值运算符3、一元运算符4、比较运算符5、逻辑运算符6、运算符优先级二、语句1、表达式和语句2、分支语句（1）什么是算术运算符？ 数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。（2）算术运算符执行的优先级顺序 同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级。JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行。（1）什么是赋值运算符？ 赋值运算符：对变量进行赋值的运算符，使用
JavaScript笔记 Day1 js基础
qq_49293318的博客
07-17 199
JavaScript笔记
js基础 day1
fasfh的博客
04-05 76
js日志 关于javascript javascript是一种什么语言 客户端脚本语言 javascript的用途 表单验证，网页特效，游戏开发，桌面程序，微信小程序，node后端服务器端开发（java） 浏览器执行js过程 js两大引擎 ① 渲染引擎（html+css） ② js引擎（js----v8） js如何执行代码的 js是一个解释性脚本语言 js执行的时候是从上至下（从左至右）一行一行执行的 js三部分组成 ECMAScript js语法 js基础阶段（在书写时js时以此来进行规
js基础day1
qq_45867182的博客
03-26 52
let不允许多次声明一个变量，多个变量中间用逗号隔开 显示转换
JavaScript 基础知识 Day01
qq_73990369的博客
07-19 1065
刚学习了JS的基础知识，JS数据类型中只有number这一个数字类型，所以number在计算的时候会保留小数，不会自动取整，需要通过另外一个方法parseInt来进行取整。
JavaScript基础知识 day1
m0_64105917的博客
05-28 690
JavaScript基础知识
JavaScript基础练习_day7
09-06
### JavaScript基础练习_day7知识点详解 #### 一、概述 本次练习主要针对JavaScript的基本概念进行了深入探讨，适合初学者巩固基础知识。练习题涵盖了变量声明、数据类型、类型转换等核心内容，通过具体示例帮助...
JavaScript基础练习_day9
10-24
### JavaScript基础练习_day9知识点详解 #### 一、JavaScript基础概念与练习背景 - **标题**: “JavaScript基础练习_day9”表明本练习旨在帮助初学者巩固JavaScript基础知识，并通过实际编程练习来加深理解。 - *...
JavaScript基础练习_day10
10-25
### JavaScript基础练习_day10知识点解析 #### 一、题目背景 本练习旨在帮助初学者掌握JavaScript的基础概念，尤其适合那些刚开始接触前端开发的同学。题目将重点围绕JavaScript的基础知识点进行展开，并随着练习的...
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 284
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
牛客JS题（三十四）监听对象
最新发布
不起眼小菜菜的博客
08-10 342
注释很详细，直接上代码……
【Vue3】图片未加载成功前占位
菜就多练
08-08 309
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 412
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
JavaScript Day_03：循环语句详解
"JavaScript Day_03 - 学习前端开发中的循环语句，包括while、do-while和for循环，以及break和continue关键字的使用" 在JavaScript中，循环语句是编程中非常重要的一部分，它允许我们重复执行一段代码，尤其在处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值