（三、JS基础）JS介绍+变量+数据类型

已于 2023-02-20 13:23:09 修改
阅读量231 收藏 1
点赞数
文章标签： javascript 前端 开发语言
于 2022-06-30 14:29:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40832034/article/details/125508535
版权
本文介绍了JavaScript的基础知识，包括它的概念、组成、书写位置和注释方式。详细讲解了变量的声明、赋值、本质及命名规则，强调了let与var的区别。此外，还探讨了数组的使用、数据类型的分类，如数字、字符串、布尔值、未定义和空类型，并展示了如何检测数据类型。最后，文章通过一个用户订单信息案例展示了在实际中如何运用这些基础知识进行用户交互和数据处理。
摘要由CSDN通过智能技术生成

一、JS介绍

1、JS概念

  • 是什么：是一种运行在客户端（浏览器）的编程语言，实现人机交互效果
  • 作用：
     网页特效 (监听用户的一些行为让网页作出对应的反馈)
     表单验证 (针对表单数据的合法性进行判断)
     数据交互 (获取后台的数据, 渲染到前端)
     服务端编程 (node.js)
  • 浏览器执行JS

通过JS引擎将脚本语言（JS）转化为机器语言，让计算机能看懂

在这里插入图片描述

2、JS组成

  • ECMAScript:
    规定了js基础语法核心知识，比如：变量、分支语句、循环语句、对象等等
  • Web APIs :
    DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
    BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等
    在这里插入图片描述

3、JS书写位置

  • 行内 JavaScript
  • 内嵌 JavaScript
  • 外部 JavaScript
<!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>Document</title>
    <!-- 3、外部js -->
    <script src="./my.js"></script>     //外部 js 的script标签中间不要写代码，否则会被忽略
    
    <!-- 2、内嵌式的js-->
    <script>
        alert('弹出');
    </script>
</head>

<body>
    <!-- 1、行内式的js 直接写到元素内部 -->
    <input type="button" value="点我" onclick="alert('弹出')">
</body>
</html>

4、JS 注释

  • 单行注释
     符号：//
     作用：//右边这一行的代码会被忽略
     快捷键：ctrl + /
  • 块注释
     符号：/* /
     作用：在/     和 */ 之间的所有内容都会被忽略
     快捷键：shift + alt + A

5、JS结束符

  • 结束符 分号 ；
  • 结束符可以省略, 因为JS中换行符（回车）会被识别成结束符
  • 但为了风格统一，要写结束符就每句都写，要么每句都不写

6、输入和输出语法

  • 输入语法：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
<!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>Document</title>
    <script>
        prompt('请输入您的年龄:')
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述

  • 输出语法：
    ① alert弹出警示框，输出需要输出的内容，给用户看的
<!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>Document</title>
    <script>
       alert('警告')
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述

② console控制台输出，给程序员看的

<!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>Document</title>
    <script>
      console.log('控制台输出')
    </script>
</head>
<body>
</body>
</html>

console.log()
③ document.write 向body内输出内容

<!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>Document</title>
    <script>
      document.write('Hello')
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述

7、字面量

在计算机科学中，字面量（literal）是在计算机中描述 事/物
比如：
 我们工资是： 1000 此时 1000 就是 数字字面量
 ‘黑马程序员’ 字符串字面量
 还有接下来我们学的 [] 数组字面量 {} 对象字面量 等等

二、变量

1、变量概念

变量是计算机中用来存储数据的“容器“，它不是数据本身
在这里插入图片描述

2、变量的使用

（1）声明变量

要想使用变量，首先需要创建变量（专业说法： 声明变量）

  • 语法：let 变量名
    ✔ 声明变量有两部分构成：声明关键字、变量名（标识）
    ✔ let 即关键字 (let: 允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义）变量的词语

（2）变量赋值

  • 定义了一个变量后，就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。
    在这里插入图片描述
  • 也可以声明变量的时候同时给变量初始化。
    在这里插入图片描述

（3）更新变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它。
在这里插入图片描述

注意： let 不允许多次声明一个变量。

（4）声明多个变量

在这里插入图片描述

3、变量的本质

内存：计算机中存储数据的地方，相当于一个空间
变量：是程序在内存中申请的一块用来存放数据的小空间
在这里插入图片描述

4、变量命名规则与规范

规则：必须遵守，不遵守报错
规范：建议，不遵守不会报错，但不符合业内通识

  • 规则：
    ✔ 不能用关键字
    关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等
    ✔ 只能用下划线、字母、数字、$组成，且数字不能开头
    ✔ 字母严格区分大小写，如 Age 和 age 是不同的变量
  • 规范：
    ✔ 起名要有意义
    ✔ 遵守小驼峰命名法：第一个单词首字母小写，后面每个单词首字母大写。例：userName

5、let和var的区别

  • 两个都可以定义变量；
  • let 为了解决 var 的一些问题
    var 声明:
    ✔ 可以先使用 在声明 (不合理)
    ✔ var 声明过的变量可以重复声明(不合理)
    ✔ 比如变量提升、全局变量、没有块级作用域等等
  • 结论：
    以后声明变量统一使用 le

三、变量拓展–数组

数组(Array)是一种可以按顺序保存多个数据
在这里插入图片描述

1、 数组的基本使用

  • 声明语法
    在这里插入图片描述

数组是按顺序保存，所以每个数据都有自己的编号
计算机中的编号从0开始
在数组中，数据的编号也叫索引或下标
数组可以存储任意类型的数据

  • 取值语法
    在这里插入图片描述
    在这里插入图片描述
  • 一些术语
    元素：数组中保存的每个数据都叫数组元素
    下标：数组中数据的编号
    长度：数组中数据的个数，通过数组的length属性获得
    在这里插入图片描述

四、数据类型

1、数据类型

  • 计算机世界中的万事万物都是数据。
  • 计算机程序可以处理大量的数据，为什么要给数据分类？
    更加充分和高效的利用内存
    也更加方便程序员的使用数据
  • JS 数据类型整体分为两大类：
    • 基本数据类型：
      number 数字型
      string 字符串型
      boolean 布尔型
      undefined 未定义型
      null 空类型
    • 引用数据类型：
      object 对象
      function 函数
      array 数组

（1）数字类型（number）

即我们数学中学习到的数字，可以是整数、小数、正数、负数。
在这里插入图片描述

注意：
✔JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认
✔Java是强数据类型 例如 int a = 3 必须是整数

（2）字符串类型（string）

通过单引号（ ‘’） 、双引号（ “”）或反引号( `` ) 包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

注意事项：
✔无论单引号或是双引号必须成对使用
✔单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
✔必要时可以使用转义符 \，输出单引号或双引号

  • 字符串拼接：
    在这里插入图片描述
  • 模板字符串
    • 作用：拼接字符串和变量，在没有它之前，要拼接变量比较麻烦
      在这里插入图片描述
    • 符号：反引号 ``
      内容拼接变量时，用 ${} 包住变量
      在这里插入图片描述

（3）布尔类型（boolean）

表示肯定或否定时在计算机中对应的是布尔类型数据。
它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。

（4）未定义类型（undefined）

  • 未定义是比较特殊的类型，只有一个值 undefined。
  • 什么情况出现未定义类型？
    只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为
    undefined。
    在这里插入图片描述

工作中的使用场景：我们开发中经常声明一个变量，等待传送过来的数据。
如果我们不知道这个数据是否传递过来，此时可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。

（5）null（空类型）

  • null 表示值为空
    在这里插入图片描述
  • null 和 undefined 区别：
    ✔ undefined 表示没有赋值
    ✔ null 表示赋值了，但是内容为空

null 开发中的使用场景：
官方解释：把 null 作为尚未创建的对象
大白话： 将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

2、检测数据类型

  • 通过控制台输出语句的颜色判断：
    数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色
    在这里插入图片描述

  • 通过 typeof 关键字检测数据类型
    在这里插入图片描述

五、类型转换

1、为什么要类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行运算，需要转换变量的数据类型
在这里插入图片描述

2、隐式转换

  • 某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
  • 规则：
    +号两边只要有一个是字符串，都会把另外一个转成字符串
    +号作为正号解析可以转换成Number，如+'11’是number型
    除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
    在这里插入图片描述

3、显式转换

  • 编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。
  • 转换为数字型

① Number(数据)
✔ 转成数字类型
✔ 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
✔ NaN也是number类型的数据，代表非数字

② parseInt(数据)
✔ 只保留整数，没有四舍五入

③ parseFloat(数据)
✔ 可以保留小数

注意
Number只能转换数字类型的字符串，
但是parseFloat不仅可以转换数字类型的字符串，还可以过滤其中的非数字内容
在这里插入图片描述

  • 转换为字符型

① String(数据)：

  console.log(String(10))

② 变量.toString(进制)

  x=10
  console.log(x.toString())

六、用户订单信息案例

需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息
在这里插入图片描述

<!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>Document</title>
    <style>
         * {
            margin: 0;
            padding: 0;
        }
        table{
            margin: 0 auto;
            text-align: center;
            border-collapse: collapse;
        }
        table th,
        td{
            border: 1px solid #000;
            padding: 15px;
        }

    </style>
</head>
<body>
    <script>
        // 1、输入变量
        let price = prompt('请输入商品单价')
        let amount = prompt('请输入商品数量')
        let address = prompt('请输入收获地址')
        let totol = price*amount
        // 2、渲染表格，填充数据
        // 反引号可以换行
        document.write(`    
            <table>
                <caption>
                    <h2>订单确认</h2>
                </caption>
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>总价</th>
                    <th>收货地址</th>
                </tr>
                <tr>
                    <td>小米手机青春PLUS</td>
                    <td>${price}元</td>
                    <td>${amount}</td>
                    <td>${totol}元</td>
                    <td>${address}</td>
                </tr>
            </table>
        `)
    </script>
</body>
</html>
qq_40832034
关注
专栏目录
【JavaScript】初识JavaScript+变量+数据类型
qq_30148319的博客
05-02 879
学习视频及笔记来源： JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili 一、JS简介 1、HTML/CSS/JS的关系 2、JS的组成 2.1ECMAScript ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际..
js变量前的+是什么意思
weixin_30872337的博客
12-14 625
if (+value >= distance) {这个+什么意思 可以理解为 Number(value) 会将其按照Number函数的规则转换为数值或者NaN,规则大概如下： Boolean:true返回1，false返回0 数据值，直接返回 null，返回0 undefined，返回NaN 对于字符串，将其转换为十进制数值，会忽略前面的0（16进制除外），空字符串返回0...
JS--变量
m0_62697087的博客
02-19 330
变量在使用时分为两步：声明变量、赋值。 1.声明变量 var age; //声明一个名称为age的变量。 * var是一个JS关键词，用来声明变量。使用该关键词声明变量后，计算机会 自动为变量分配内存空间，不需要程序员管。 * age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间。 2.赋值 age = 10; //给age这个变量赋值为10. * 变量值是程序员保存到变量空间里的值。 <script>
JS变量
qq_51481160的博客
11-06 279
JS变量 一些输出语句 方法 说明 归属 alert（msg） 浏览器弹出警示框 浏览器 console.log(msg) 浏览器控制台打印输出信息 浏览器 promp(info) 浏览器弹出输出框，用户可以输入 浏览器 第二个是控制台输出的，给程序员测试用的 JS注释 1.单行注释：Ctrl+/ 2.多行注释：vscode中修改为Ctrl+Shift+/ 变量 本质：变量是程序在内存中申请的一块用来存放数据的空间 声明变量 形如：var age；//声明一个名为age的变量
浅析JS中变量前面的加号 + 的含义
青春木鱼的博客
07-04 1592
javascript中经常会看到在变量前面有个加号+，它有什么用处呢？其实很简单，就是把变量转换成 number 类型（另外，变量 - 0也是把变量的值转为数值的一种写法）
JavaScript+js语法基础+js数据类型+js数据类型转换+js运算符
08-02
本文将深入探讨JavaScript的基础语法，包括变量、数据类型、数据类型转换和运算符。 1. 变量（Variable） 变量是JavaScript中存储数据的容器。它们允许我们多次使用相同的值，而无需反复输入。在JavaScript中，变量...
JavaScript基础语法+变量与数据类型+流程控制：条件语句与循环+函数与作用域+对象与原型链全套教程
07-30
变量与数据类型 流程控制：条件语句与循环 函数与作用域 对象与原型链 数组与字符串操作 DOM操作与事件处理 JavaScript面向对象编程 异步编程：回调函数与Promise 模块化编程与CommonJS ES6新特性：箭头函数，let与...
学习js变量+数据类型+查看数据类型+数据长度+字符串转为数值型
10-18
1.js变量 2.数据类型 3.两个变量交换的三种方法 4.查看数据类型的方法 5.string int方法 6.数据长度 7.变量名的命名规则和规范 8.关键字保留字 标识符
JavaScript基础语法+变量与数据类型+流程控制：条件语句与循环+函数与作用域+对象与原型链+数组与字符串操作等全套教程
最新发布
08-01
变量与数据类型 流程控制：条件语句与循环 函数与作用域 对象与原型链 数组与字符串操作 DOM操作与事件处理 JavaScript面向对象编程 异步编程：回调函数与Promise 模块化编程与CommonJS ES6新特性：箭头函数，let与...
js是什么+变量+常量+数据类型
weixin_68665257的博客
03-22 141
js是什么？ 是一种运行在客户端（浏览器）的编程语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画等交互效果
+变量，JS规则/数据转换
weixin_45629623的博客
08-04 134
+变量：这是规则转换，可以理解为Number（变量） 对于boolean：true返回1，false放回0 对于null：返回0 对于undefined，放回NaN -对于字符串，返回十进制，忽略前面的0，空字符串返回0， 十分方便 ...
js基础语法（变量）
qq_49019178的博客
07-11 223
js基础语法 ，变量
1js引入方式+变量+数据变量
weixin_49986131的博客
10-16 839
系列文章目录 文章目录系列文章目录js引入方式变量数据类型 js引入方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> // jsonp跨域 屏幕适配 </script> </head> <body>
js中的“===”运算符
qq_42108331的博客
05-28 2847
js中的“===”运算符
js神奇的“+”运算
weixin_43169949的博客
07-07 753
众所周知，js是一门弱语言，不像Java一样，定义一个变量时得先申明这个变量的类型，通常我们在使用‘+’运算时，仅仅是对数字相加或者拼成字符串，但是也有一些意外，比如： 1.先来个简单的： true+true 打印出来是2，原因是js在执行的时候会把true转成数字1，false转成0； 2.再来个变态的： [3,4]+[5,6]=? 如果知道原理的童鞋很快会告诉我答案是：3,45,6，为什...
Javascript变量的学习
zcb981008的博客
08-01 334
Javascript的学习JavaScript的组成JS的三种引用方式JS注释JS输入输出语句JS变量JS 数据类型JS数据类型转换关键字、保留字、标识符 JavaScript的组成 JavaS是解释性语言，解释一行执行一行 1.ECMAScript —————规定了JS的编程语法和基础核心知识 2.DOM————文档对象模型（通过 DOM 提供的接口可以对页面上的各种元素进行操作，如大小） 3.BOM————浏览器对象模型（可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率） JS的三种引用方式
03_JavaScript 数据类型
wkjwkj_的博客
11-17 850
数据类型 一、数据类型简介 1.为什么需要数据类型 在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利 用存储空间，于是定义了不同的数据类型。 简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的 2.变量的数据类型 变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的 内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程
js中const,var,let区别
10-10 2403
今天第一次遇到const定义的变量，查阅了相关资料整理了这篇文章。主要内容是：js中三种定义变量的方式const， var， let的区别。 1.const定义的变量不可以修改，而且必须初始化。 1 const b = 2;//正确 2 // const b;//错误，必须初始化 3 console.log('函数外const定义b：' + b);//有输出值 4 // ...
JS变量，值类型
VVVZCS的博客
08-19 867
变量申请： 申请多个单一变量： 尽量不要像下面这样申请： 命名规则： 变量名字必须要以英文字母，下划线，$开头 变量名可以包括英文字母，下划线，$，数字 不可以用系统的关键字（现在使用的系统的有特殊含义的词），保留字（未来也许系统使用的关键字）用做变量名   值类型：首先先将值分为原始值和引用值 原始值： Number String Boolean undefine...
JavaScript基础：数据类型与变量详解
"这篇资源是关于JavaScript数据类型和变量的介绍，主要涵盖了JavaScript中的Number、String、Boolean等基本数据类型，以及NaN、Infinity等特殊值的讲解。" JavaScript是一种动态类型的编程语言，它允许开发者在运行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值