初识JS（变量+数据类型+类型转换）

你想要那颗糖

已于 2023-03-16 01:11:44 修改

阅读量186

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端

于 2023-03-14 15:27:03 首次发布

本文链接：https://blog.csdn.net/qq_50260510/article/details/129516717

版权

JavaScript 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

一、初识JS

JavaScript 是什么？

是一门运行在客户端（浏览器）的编程语言，实现人机交互效果。

二、 JavaScript 的作用（做什么？）

➢ 网页特效 (监听用户的一些行为让网页作出对应的反馈)

➢ 表单验证 (针对表单数据的合法性进行判断)

➢ 数据交互 (获取后台的数据, 渲染到前端)

➢ 服务端编程 (node.js)

三、JavaScript的组成（有什么？）

➢ ECMAScript: 规定了js基础语法核心知识。比如：变量、分支语句、循环语句、对象等等

➢ Web APIs :

DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作

BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

四、JavaScript 书写位置

我们将 <script> 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。

1. 内部 JavaScript

（1）直接写在html文件里，用script标签包住

（2）规范 ：script标签写在</body>上面

（3）拓展： alert(‘你好，JavaScript’) 页面弹出警告对话框

2. 外部 JavaScript

（1）代码写在以.js结尾的文件里

（2）语法： 通过script标签，引入到html页面中。

（3）注意：

1. script标签中间无需写代码，否则会被忽略！

2. 外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。

3. 行内 JavaScript

代码写在标签内部

语法： 直接标签内部写js代码（后面vue框架会用这种模式）

五、JavaScript的注释和结束符

1.单行注释

符号：//

作用：//右边这一行的代码会被忽略

快捷键：ctrl + /

2.块注释

符号：/* */

作用：在/* 和 */ 之间的所有内容都会被忽略

快捷键：shift + alt + a

3.结束符

作用： 使用英文的 ; 代表语句结束

实际情况： 实际开发中，可写可不写，浏览器(JavaScript 引擎) 可以自动推断语句的结束位置

现状： 在实际开发中，越来越多的人主张，书写 JavaScript 代码时省略结束符

约定： 为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求）

六、JavaScript 输入输出语句（重点）

交互： 用户输入数据 → 数据处理 → 输出结果展示给用户

1.输出语句：

alert('页面弹出警告框')

document.write('在body标签内输出内容；')

document.write('<h4>如果输出的内容写标签，也会被解析成网页元素</h4>')

console.log('给程序员使用，在控制台查看')

2.输入语句：

prompt ： 提示 的意思，显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

七、JavaScript 的变量

1.变量： 变量是计算机中用来存储数据的“容器”（盒子）

2.作用：记录计算机中数据的不同状态。（变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。）

3.注意：

（1）数字直接存储

（2）字符用单引号引起来，表示一段信息

4. 声明变量： 要想使用变量，首先需要创建变量（也称为声明变量或者定义变量）

（1）声明变量有两部分构成：声明关键字、变量名（标识）

（2）let ：即关键字 (let: 允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义）变量的词语。

（3）定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。（通过变量名来获得变量里面的数据）

（4）更新变量： 变量赋值后，还可以通过简单地给它一个不同的值来更新它。

（5）声明多个变量： 多个变量中间用逗号隔开。（不推荐）

变量案例- 交换变量的值

需求：

①：有2个变量： apple 里面放的是 ‘苹果汁’， orange 里面放的是 ‘橙子汁’

②：经过处理，最后 apple 里面放的是 ‘橙子汁’ ， orange 里面放的是 ‘苹果汁’

核心思路：使用一个空变量用来做临时中间存储

<!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>
        // 有2个变量： apple 里面放的是 ‘苹果汁’， orange 里面放的是 ‘橙子汁’ ；
        // 经过处理，最后 apple 里面放的是 ‘橙子汁’ ， orange 里面放的是 ‘苹果汁’
        let apple ='苹果汁'
        let orange='橘子汁'
        // 给个空杯子
        let tamp
        // 把苹果汁倒入空杯子
        tamp='苹果汁'
        // 把橘子汁倒进苹果汁的杯子
        apple='橘子汁'
        // 把空杯子的苹果汁倒回橘子汁杯子
        orange=tamp
        // 输出
        console.log(apple,orange)
    </script>
</body>
</html>

6.变量本质：是程序在内存中申请的一块用来存放数据的小空间

（1）内存： 计算机中存储数据的地方，相当于一个空间

（2）变量很多时内存中会开辟很多小空间，如何找到对应的变量？通过变量名；通过变量名可以到内存中找到对应的空间，就可以得到里面的数据

7.变量命名规则与规范

1. 规则： 必须遵守，不遵守报错 (法律层面)

（1）不能用关键字

关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等

（2）只能用下划线、字母、数字、$组成，且数字不能开头

（3）字母严格区分大小写，如 Age 和 age 是不同的变量

2. 规范： 建议，不遵守不会报错，但不符合业内通识（道德层面）

（1）起名要有意义

（2）遵守小驼峰命名法

第一个单词首字母小写，后面每个单词首字母大写。例：userName

八、常量

1.常量 const ：也是一个容器，用于保存数据的（const 单词常量的意思）

2.和变量的区别： 常量里面保存的值是不允许改变的

3.使用场景： 当某个值永远 不会改变 的时候，我们可以使用常量来保存，目的为了程序的安全

4.注意：

（1）常量不允许重新赋值，可以理解为是只读的

（2）声明的时候必须赋值（初始化）

九、数据类型

为什么要对数据分类型？

生活中会把物品进行归类，不同的物品不能混淆在一起。计算机程序可以处理大量的数据，方便程序员的使用数据。

JS 数据类型整体分为两大类：

1.基本数据类型（简单数据类型）

（1）数字

数字可以用于运算操作，比如对数字的加减乘除等操作。JavaScript 中的整数、小数等统一称为数字类型。通过 typeof 关键字检测数据类型。

（2）字符串：

1）字符串是被引号包裹的一段文字信息。 JS中的字符串: 通过单引号（ ‘’）、双引号（ “”）或反引号( `` ) 包裹的数据都属于字符串；单引号和双引号没有本质上的区别，推荐使用单引号。反引号是为了解决字符串拼接的问题，使用反引号（模板字符串）会非常方便。

2）单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）

3）一定注意变量名不要加引号，否则认为是字符串

4） 字符串拼接 使用场景 ： + 可以实现字符串的拼接，最常见是字符串拼接变量

口诀：数字相加，字符相连；

这样写稍微有点麻烦，所以推荐模仿字符串写法

5）模范字符串：拼接字符串和变量

语法：`` (反引号) ；内容拼接变量时，用 ${ } 包住变量（口诀：反引中间变量套，直接$大括号）

反引号中间的字符串可以换行的

（3）布尔类型（boolean）

布尔型:用于判断真假的数据类型，通常用来判断条件是否成立。它有两个固定的值 true 和 false

表示肯定的数据用 true（真），表示否定的数据用 false（假）。

（4）未定义类型（undefined）

1）未定义是比较特殊的类型，只有一个值 undefined。

2）什么情况出现未定义类型？ 只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

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

（5）– 空类型（null）

1）JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

2）null 和 undefined 区别：

undefined 表示没有赋值, 不存在 ( 期房）

null 表示赋值了，但是内容为空（毛坯房）

3）注意：

typeof null 返回的是 ‘object’ 返回的是对象类型但这只是JavaScript 存在的一个悠久 Bug，不代表null就是引用数据类型,null

（2）引用数据类型（复杂数据类型）

十、运算符

1.算术运算符

数字是用来计算的，比如：乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。

算术运算符： 也叫数学运算符，主要包括加、减、乘、除、取余（求模）等

（1） +：求和

（2） -：求差

（3） *：求积

（4） /：求商

（5） % ：取模（取余数）

（6）开发中经常作为某个数字是否被整除

（7）在计算失败时，显示的结果是 NaN （ not a number）

<!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 price = prompt('请输入商品单价')
        let num = prompt('请输入购买数量')
        let result = price*num
        document.write(`小计：￥${result}`)
    </script>
</body>
</html>

2.赋值运算符

1.赋值运算符：对变量进行赋值的运算符

2.已经学过的赋值运算符： = 将等号右边的值赋予给左边, 要求左边必须是一个容器

3.其他赋值运算符：

（1） +=

（2） -=

（3） *=

（4） /=

（5） %=

（6）使用这些运算符可以在对变量赋值时进行快速操作，从而可以简化代码

3.自增/自减运算符

（1）自增：‘++ ’ 变量自身的值加1，例如: x++；

（2）自减：‘-- ’ 变量自身的值减1，例如: x--；

（3）只有变量能够使用自增和自减运算符；++、-- 可以在变量前面也可以在变量后面，比如: x++ 或者 ++x

（4）单独使用的时候，++在前和在后没有区别，但是如果要参与运算就有区别了。

4.比较运算符（关系运算符）

比较运算符 ：比较两个数据大小、是否相等，根据比较结果返回一个布尔值（true / false）

5.逻辑运算符

（1）逻辑运算符：可以把多个布尔值放到一起运算，最终返回一个布尔值

（2）案例：用户输入一个，判断这个数是4的倍数，并且不是100的倍数，如果是则页面弹出true，否则弹出 false

分析： ①：输入数据 ②：处理数据，倍数怎么判断→ 能被整除 → 余数是 0 ③：输出结果

<!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 = prompt('请输入一个数字')
        let re = num % 4 === 0 && num % 100 !== 0
        alert(re)
    </script>
    
</body>
</html>

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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        table{
            margin: 0 auto;
            border-collapse:collapse;
        }

        td{
            width: 200px;
            height: 100px;
            border: 1px solid aqua;
            background-image: radial-gradient(rgb(123, 218, 247),rgb(37, 194, 241));
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <script>
        let name = prompt('请输入姓名')
        let price = prompt('请输入单价')
        let num = prompt('请输入数量')
        let adress = prompt('请输入收货地址')
        let result = price*num
        document.write(`
            <table >
        <tr>
            <td>姓名</td>
            <td>单价</td>
            <td>数量</td>
            <td>总价</td>
            <td>收货地址</td>
        </tr>
        <tr>
            <td>${name}</td>
            <td>${price}元</td>
            <td>${num}件</td>
            <td>${result}元</td>
            <td>${adress}</td>
        </tr>
        
    </table>`


        )

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