JavaScript---day01

原创已于 2024-12-16 14:43:13 修改 · 1k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2024-12-06 21:44:10 首次发布

JS 专栏收录该内容

13 篇文章

订阅专栏

JS权威网址MDN Web Docshttps://developer.mozilla.org/zh-CN/

面向开发者的 Web 技术 | MDNhttps://developer.mozilla.org/zh-CN/docs/Web

一.JavaScript介绍

1.1JavaScript是什么

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

注：HTML是一种标记语言

2.作用：

网页特效（监听用户的一些行为让网页做出对应的反馈）
表单验证（针对表单数据的合法性进行判断）
数据交换（获取后台的数据渲染到前端）
服务端编程（node.js）

3.组成

ECMAScript

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

WEB APIs

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

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

1.2JavaScript怎么写

1.书写位置同CSS的位置一样，JavaScript的书写位置包括行内，内部和外部三种。

内部：
<body>

<script>
    alert("努力，奋斗")
</script>
</body>
外部：
<body>
<script src="hello.js"></script>
</body>
//hello.js的代码内容
alert("努力，奋斗")
console.log('你好')
内联：
<body>
<button onclick="alert('逗你玩')">点击我即刻升仙</button>
</body>
2.注释：单行注释// 快捷键ctrl+/

多行注释/* */ 快捷键 IDEA是ctrl+shift+/

3.结束语使用英文的;表示语句结束。JavaScript一般都是看团队约定，要么都写要么都不写。

1.3 JavaScript输入输出语法

1.输入

prompt('请输入你的年龄')

2.输出

        A 向文档内容进行输出document.write()

写内容document.write('你好~js')

在里面加标签document.write('<h1>我是一级标题</h1>')

B 警示窗弹出

                alert('你好，初升的太阳')

C 控制台输出

console.log('控制台输出')//可以直接打log

3. JavaScrip代码的执行顺序

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

alert()和prompt()他们会跳过渲染先被执行

1.4 字面量

在计算机科学中，字面量（literal）是在计算机中描述事/物

比如工资1000 1000指的数字字面量

'你好' 是字符串字面量

[] 是数组字面量

{} 是对象字面量等。

二.变量

2.1变量是什么

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

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

变量： HTML标签，教师，宿舍等都属于变量

2.2变量的使用

2.2.1 变量的声明

声明变量： let 变量名

关键字：let (var 已被淘汰)

标识符：变量名

2.2.2 变量的赋值

对变量进行初始化赋值，推荐在声明时就给变量赋值

我们可以通过变量名来获取变量里面的数据

2.2.3 更新变量

变量赋值后，还可以通过赋值运算符等给他一个不同的值来更新它

2.2.4 一次声明多个变量

多个变量中间用, 号隔开（但是不提倡这种做法），不具有很好的可读性

2.3变量的本质

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

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

我们可以通过变量名来找到数据所在的这片空间，所有变量名也叫标识符

2.4变量命名的规范与规则

规则：

不能用关键字

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

只能用下划线、字母、数字、$组成，且数字不能开头
字母严格区分大小写，如 Name 和 name 是不同的变量

规范：

起名要有意义
遵守小驼峰命名法

( 第一个单词首字母小写，后面每个单词首字母大写如userName,以后和后端返回的数据会有关联)

2.5 let 和var的区别

var 声明:

        可以先使用在声明 (不合理)

        var 声明过的变量可以重复声明(不合理)

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

let 为了解决 var 的一些问题，所有现在都在用let不用var

2.6 数组

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

2.6.1 数组的基本使用

声明语法：

        let 数组名 = [数据1, 数据2, 数据3, 数据4, 数据5, ......]

注：

        数组是按顺序保存，所以每个数据都有自己的编号

        在数组中，数据的编号也叫索引或下标，从0开始

在JavaScript中数组可以存储任意类型的数据

取值语法

数组名[下标]

注：

        通过下标取数据

        取出来是什么类型的，就根据这种类型特点来访问

数组的一些术语

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

下标：数组中数据的编号

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

三.常量

声明：const

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

命名规范：和变量一致

注：

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

四.数据类型

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

        基本数据类型：number 数字型，string 字符串型，boolean 布尔型，undefined 未定义型，null 空类型

        引用数据类型：object 对象

注：

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

相对的Java是强数据类型

4.1 数字类型（Number）

4.1.1 算术运算符

+：求和，-：求差，*：求积，/：求商，%：取模（取余数）（取模，开发中经常作为某个数字是否被整除）

优先级：JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行。

先乘除后加减，有括号先算括号里面的~~~

4.1.2 NaN

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

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

NaN与NaN也是不相等的

4.2 字符串类型（string）

4.2.1 基本使用

字符串使用单引号，双引号，反引号都可以

单引号和双引号可以相互嵌套

4.2.2 字符串拼接

+ 运算符可以实现字符串的拼接，数字相加，字符相连

4.2.3 模板字符串

拼接字符串和变量

语法：

        `` (反引号)

        在英文输入模式下按键盘的tab键上方那个键（1左边那个键）

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

4.3 布尔类型（boolean）

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

注：

除了 0 所有的数字都为真

除了空字符串'' 所有的字符串都为真

4.4 未定义类型（undefined）

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

只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

使用场景：

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

4.5 null（空类型）

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

开发使用场景：

将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

4.6 null 和 undefined区别

undefined 表示没有赋值

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

4.7 检测数据类型

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

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

函数形式： typeof(x)

五.类型转换

为什么：

JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。坑：使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

定义：把一种数据类型的变量转换成我们需要的数据类型。

5.1 隐式转换

定义：

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

规则：

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

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

小技巧

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

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

5.2 显示转换

出现原因：

为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

概念：

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

5.2.1 转为数字型

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

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

方法一：Number( )

方法二：parseInt(' ') 只取整数部分

方法三：parseFloat(' ')

方法二和方法三必须是数字开头

5.2.2 转为字符型

方法一：String( )

方法二：变量.toString( )

六.实战案例

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

分析：

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

        ②：需要计算总的价格 total

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

        ④：记得最好使用模板字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    h2{
        /*文字居中对齐*/
        text-align: center;
    }
    table {
        /*合并相邻边框*/
        border-collapse: collapse;
        height: 80px;
        /*居中*/
        margin: 0 auto;
        /*文字居中对齐*/
        text-align: center;
    }
    /*表格加边框*/
    table,th,td{
        border: 1px solid black;
    }
    /*各小表格的空间*/
    th {
        padding: 10px 40px;
    }
</style>
<body>
<h2>订单确认</h2>

<script>
    let name = prompt('请输入商品名称')
    let price = +prompt('请输入商品价格')
    let number = +prompt('请输入商品数量')
    let address = prompt('请输入收获地址')
    let total = price * number
    //页面打印渲染 css语句剪切
    document.write(`
    <table>
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品数量</th>
        <th>总价</th>
        <th>收货地址</th>
    </tr>
    <tr>
        <td>${name}</td>
        <td>${price}元</td>
        <td>${number}</td>
        <td>${total}元 </td>
        <td>${address}</td>
    </tr>
</table>
    `)
</script>
</body>
</html>