JavaScript 01

软工211-429-张婍妍

已于 2023-03-19 15:10:38 修改

阅读量349

点赞数

分类专栏： JS 文章标签： javascript 前端开发语言 Powered by 金山文档

于 2023-03-14 19:19:30 首次发布

本文链接：https://blog.csdn.net/weixin_62443949/article/details/129516251

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JavaScript介绍

JavaScript是什么

JavaScript是什么？

JavaScript是一种运行在客户端（浏览器）的编程语言

JavaScript组成是什么？

ECMAScript（基础语法）、web APIs （DOM、BOM）

JavaScript书写位置

内部JavaScript

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

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

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

外部JavaScript

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

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

注意：外部js标签中间不要写代码，否则会被忽略

        <body>
           <script src="文件路径.js”></script>
        </body>

外联JavaScript

代码写在标签内部

语法：

<body>
    <button onclick="alert('hahahaha')">点击我</button>
</body>

注意：此处作为了解即可，但是后面vue框架会用这种模式

JavaScript的注释

单行注释

符号：//

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

快捷键：ctrl+/

块注释

符号：/* */

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

快捷键：shift+alt+a

JavaScript的结束符

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

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

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

约定：为了风格统一，结束符要么每句都写，要么每句都不写

（区别CSS，一定要写分号）

输入与输出语法

输出语法

语法1： ducument.write('要出的内容')

作用：像body内输出内容

语法2： alert('要出的内容')

作用：页面弹出警告对话框

语法3： console.log('控制台打印')

作用：控制台输出语法，程序员调试使用

输入语法

语法： prompt('请输入您的姓名：')

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

JS代码执行顺序

按HTML文档流顺序执行JS代码

alert()和prompt()它们会跳过页面渲染先被执行

字面量

定义：是在计算机中描述事/物

数字字面量 ''字符串字面量 []数组字面量 {}对象字面量

变量

变量是什么

白话：变量就是一个装东西的盒子

通俗：变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆

注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子

变量基本使用

变量的声明

声明变量：

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

语法： let 变量名

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

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

变量的赋值

变量赋值：

定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值

let age=18

更新变量

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

let age=18
age=19
/*但不能写成
let age=18
let age=19
*/

声明多个变量

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

语法：多个变量中间用逗号隔开

注意：虽然代码看上去很简短，但不推荐这样，更推荐分行书写

let age= 18, uname ='pink'
console.log(age,uname)
/*提倡声明的方式*/
let age=18
let uname='pink'
console.log(age,uname)

代码练习

1.用户名输入案例

<body>
    <script>
        // 输出用户名案例
        // 1.用户输入
        prompt('请输入姓名')
        // 2.内容处理保存数据
        let uname =  prompt('请输入姓名')
        // 3.打印输出
        document.write(uname)
    </script>
</body>

2.交换变量的值

需求：有2个变量：num1里面放的是10，num2里面放的是20，最后变为num1里面放的是20， num2里面放的是10

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

步骤：

声明一个临时变量temp

把num1的值赋值给temp

把num2的值赋值给num1

把temp的值给num2

结束，临时变量不用自动销毁

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

变量的本质

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

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

变量命名规则与规范

规则：必须遵守，不遵守报错（法律层面）

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

规则：

不能用关键字

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

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

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

规范：

起名要有意义

遵守小驼峰命名法

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

变量练习案例

需求：让用户输入自己的名字、年龄、性别，再输出到网页

分析：

弹出输入框（prompt）：请输入您的姓名（uname）：用变量保存起来

弹出输入框（prompt）：请输入您的年龄（age）：用变量保存起来

弹出输入框（prompt）：请输入您的性别（gender）：用变量保存起来

页面分别输出（document.write）刚才的3个变量

<body>
    <script>
        let uname = prompt('请输入姓名')      // 直接存起来
        let age = prompt('请输入年龄')      // 直接存起来
        let gender = prompt('请输入性别')      // 直接存起来
        document.write(uname,age,gender)
    </script>
</body>

变量拓展—let和var的区别

let和var的区别：

在较旧的JavaScript，使用关键字var来声明变量，而不是let

var现在开发中一般不再使用它，只是我们可能在老版本程序中看到它

let为了解决var的一些问题

var声明：

可以先使用再声明（不合理）

var声明过的变量可以重复声明（不合理）

比如变量提升、全局变量、没有块级作用域等

变量拓展—数组

数组（Array）——一种将一组数据存储在单个变量名下的优雅方式

数组的基本使用

声明语法： let 数组名 = [数据1，数据2，...，数据n] 字面量用中括号[]表示

例： let names =['小明','小刚','小红','小丽','小米']

对应下标/索引号 0 1 2 3 4

取值语法：数组名[下标]

3.一些术语：

元素：数组中保存的每个数据都叫数组元素

下标：数组中数据的编号

长度：数组中数据的个数，通过数组的length属性获得 arr.length

常量

概念：使用const声明的变量成为“常量”

使用场景：当某个变量永远不会改变的时候，就可以使用const来声明，而不是let

命名规则：与变量一致

常量使用：

//声明一个常量
const G =9.8
//输出这个常量
console.log(G)

注意：常量不允许重新赋值，声明的时候必须赋值（初始化）

小技巧：不需要重新赋值的数据使用const

数据类型

基本数据类型

1.number 数字型

即我们数学中学习到的数字，可以是整数、小数、正数、负数。

注意：JS是弱数据类型，变量到底属于哪种类型，只有赋值之后，我们才能确认

Java是强数据类型，例如 int a=3 必须是整数

数字可以有很多操作，比如，乘法*，除法/，加法+，减法-等，所以经常和算术运算符一起

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

+：求和

-：求差

*：求积

/：求商

%：求余数（取模）

开发使用场景：来判断某个数字能否被整除

总结：先乘除后加减，有括号先算括号里面的

案例：计算圆的面积

需求：对话框中输入圆的半径，算出圆的面积并显示到页面

分析：1.面积的数学公式：π*r²

2.转换为JavaScript写法：变量*r*r

拓展：NaN （Not a Number）

NaN代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果

console.log('老师'-2)     //NaN

NaN是粘性的。任何对NaN的操作都会返回NaN

console.log(NaN+2)    //返回值还是NaN

2.string 字符串型

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

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

必要时可以使用转义符\，输出单引号或双引号

字符串拼接：

场景：+运算符可以实现字符串的拼接

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

let age=20
document.write('我今年'+age+'岁'）

模板字符串：

使用场景：

拼接字符串和变量

在没有它之前，要拼接变量比较麻烦

语法：

必须使用反引号``

内容拼接变量时，用${}包住变量

<body>
    <script>
        let age =20
        document.write(`我今年${age}岁了`)
    </script>
</body>

案例：页面输出用户信息案例

需求：页面弹出对话框，输入名字和年龄，页面显示：大家好，我叫×××，今年××岁了

<body>
    <script>
        // 输入
        let uname=prompt('请输入您的姓名：')
        let age=prompt('请输入您的年龄：')
        // 输出
        document.write(`大家好，我叫${uname}，我今年贵庚${age}岁了`)
    </script>
</body>

3.boolean 布尔型

它有两个固定的值true和false，表示肯定的数据用true（真），表示否定的数据用false（假）

console.log(3>4)
let isCool = false
console.log(isCool)

4.undefined 未定义型

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

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

let sum
console.log(num)
//输出打印结果为undefined

5.null 空类型

如果一个变量里面确定存放的是对象，如果还没准备好对象，可以放个null

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

let obj = null
console.log(obj)    //输出为null

null和undefined区别：

undefined表示没有赋值

null表示赋值了，但是内容为空

console.log(undefined+1）     //输出为NaN
console.log(null+1)        //输出为1

检测数据类型

通过typeof关键字检测数据类型

typeof运算符可以返回被检测的数据类型。它支持两种语法形式：

作为运算符：typeof x（常用的写法）

函数形式：typeof（x）

引用数据类型

object 对象

类型转换

JS是弱数据类型。在使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算

转换方式：

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换

规则：

+号两边只要有一个是字符串，都会把另外一个转成字符串

除了+以外的算术运算符比如-*/等都会把数据转成数字类型

缺点：

转换类型不明确，靠经验才能总结

小技巧：

+号作为正号解析可以转换成数字型

任何数据和字符串相加结果都是字符串

<body>
    <script>
        console.log(1+1)
        //2
        console.log('pink'+1)
        //pink1
        console.log(2+2)
        //4
        console.log(2+'2')
        //22
        console.log(2-2)
        //0
        console.log(2-'2')
        //0
        console.log(+12)
        //12
        console.log(+'123')
        //123   转换为数字型
    </script>
</body>

显示转换

自己写代码告诉系统该转成什么类型

转换成数字型

Number（数据）

转成数字类型

如果字符串内容有非数字，转换失败时结果为NaN，即不是一个数字

NaN也是number类型的数据，代表非数字

parselnt（数据）

只保留整数

parseFloat（数据）

可以保留小数

console.log(parseInt('12px'))    //12
        console.log(parseInt('12.34px'))    //12
        console.log(parseInt('12.94px'))    //12
        console.log(parseInt('abc12.94px'))    //NaN
        
        console.log(parseFloat('12px'))    //12
        console.log(parseFloat('12.34px'))    //12.34
        console.log(parseFloat('12.94px'))    //12.94
        console.log(parseFloat('abc12.94px'))    //NaN

案例：输入2个数，计算两者的和，打印到页面中

<body>
    <script>
        // 1.用户输入   prompt得到的是字符串类型 要转换为 数字型
        let num1 = +prompt('请输入第一个数字：')
        let num2 = +prompt('请输入第二个数字：')
        // 2.输出
        alert(`两个数相加的和是：${num1+num2}`)
    </script>
</body>

用户订单信息案例

需求：用户输入商品价格和数量，以及收货地址，可以自动打印订单信息

分析：

需要输入3个数据，所以需要3个变量来存储 price num address

需要计算总的价格total

页面打印生成表格，里面填充数据即可

记得最好使用模块字符串

<style>
        h2{
            text-align: center;
        }
        table{
            /* 合并相邻边框 */
            border-collapse: collapse;
            height: 80px;
            margin: 0 auto;
            text-align: center;
        }
        th{
            padding: 5px 30px;
        }
        table,th,td{
            border: 1px solid #000;
        }
    </style>


<body>
    <h2>订单确认</h2> 
    <script>
        //1.用户输入
        let price = +prompt('请输入商品价格：')
        let num = +prompt('请输入商品数量：')
        let address = prompt('请输入收货地址：')
        // 2.计算总额
        let total = price *num
        // 3.页面打印渲染
        document.write(`
        <table>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收货地址</th>
        </tr>
        <tr>
            <td>小米青春版PLUS</td>
            <td>${price}元</td>
            <td>${num}</td>
            <td>${total}元</td>
            <td>${address}</td>
        </tr>
    </table>
        `)
    </script>
</body>