学习笔记之JS(0830)

news2024/11/13 9:32:54

1、介绍

1.1 JavaScript (是什么?)

  1. javascript是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。
  2. 作用(做什么?)
    • 网页特效(监听用户的一些行为让万叶做出对应的反馈
      • 表单验证(针对表单数据的合法性进行判断)
      • 数据交互(获取后台的数据,渲染到前端
      • 服务端编程(node.js)
        请添加图片描述
  3. JavaScript的组成(有什么?)
  • ECMAScript:规定了js基础语法核心知识。如:变量,分支语句,循环语句,对象等。

  • Web APIs:

    • DOM操作文档,比如对页面元素进行移动、大小、添加删除等操作
    • BOM操作浏览器,比如页面弹窗,检测窗口宽度,存储数据到浏览器等

    JS权威网站:MDN

请添加图片描述

  1. 内部JavaScript

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

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

拓展:alert(‘你好,js’)页面弹出警告对话框

注意事项:我们将<script>放在HTML文件底部的附近的原因是浏览器会按照代码在文件中的顺序加载HTML。如果我们先加载的JavaScript期望修改其下方的HTML,那么可能由于HTML尚未被加载而失败。

  1. 外部JavaScript
代码卸载以 .js 结尾的文件里
语法:通过script 标签引入到html页面中

注意事项

  • script标签中间无需写代码,否则会被忽略!
  • 外部JavaScript会使代码更加有序,且没有了脚本的混合,HTML也会更加易读,因此这个是个好的习惯。
  1. 内联Javascript
代码写在标签内部
语法:注意(此处了解即可,但是后面Vue 框架会用这种模式

代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  

  <!-- 内部js -->
  <script>
alert("你好,JS!")
  </script>

  <script src="../第一天/js/02-书写位置.js">
    // 中间不能写代码
  </script>

<!-- 行内部js -->
  <button onclick="alert('逗你玩呢~~~')">点我月薪过万</button>



</body>
</html>

js:

alert("努力,奋斗")

1.3 注释和结束符

  1. 单行注释

    • 符号: //
    • 作用: // 右边这一行的代码会被忽略
    • 快捷键: CTRL + /
  2. 块注释

    • 符号: /* */
    • 作用 : 符号之间的所有内容都会被忽略
    • 快捷键: shift + alt + a
  3. 结束符

    • 作用:使用英文的 ;表示语句的结束
    • 实际情况:实际开发中,可写可不写,浏览器(JavaScript引擎自动变更推断语句的结束位置
    • 现状:在实际开发中,越来越多的人主张,书写JavaScript代码时省略结束符
    • 约定:为了风格统一,结束符要么每句都写,要么每句都不写(按照团队要求)

    1.5 JavaScript输入输出语法

  • 目标:能写出常见JavaScript输入输出语法
  • 输出和输入也可理解为人和计算机的交互,用户通过键盘、鼠标等向计算机输入信息,计算机处理后再展示结果,这便是一次输入和输出的过程。
  1. 输出语法
  • 语法1
document.write(要出的内容')
  • 作用:向body内输出内容

  • 注意:如果输出的内容写的是标签,也会被解析成网页元素

  • 语法2

alert('hello js')
  • 作用:页面弹出警告对话框

  • 语法3

console.log("控制台打印")
  • 作用:控制台输出语法,程序员测试使用
  1. 输入语法
  • 语法
prompt("请输入您的姓名")
  • 作用:显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字

JavaScript代码执行顺序:

  • 按HTML文档流顺序执行JavaScript代码
  • alert()和prompt()它们会跳过页面渲染先被执行(目前作为了解,后期讲解详细执行过程)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    // 1.文档输出内容
    document.write('我是div标签')
    document.write('<h1>我是一级标题</h1>')
    alert('我是alert')
    console.log('我是console' );


    // 输入
    let age =  prompt("请输入你的年龄:")
    document.write(age)
  </script>
</body>
</html>

1.6 字面量

  • 目标:能说出什么是字面量
    在计算机科学中,字面量(literal)是在计算机中描述事/物
  • 我们工资是:1000此时1000就是数字字面量
    黑马程序员字符串字面量
    还有接下来我们学的【】数组字面量对象字面量等等

练习- 输出用户信息

  • 需求:让用户输入自己的名字、年龄、性别,再输出到网页
  • 分析:
    • 弹出输入框(prompt):请输入您的姓名(uname):用变量保存起来。
    • 弹出输入框(prompt):请输入您的年龄(age):用变量保存起来。
    • 弹出输入框(prompt):请输入您的性别(gender):用变量保存起来。
    • 页面分别输出(document.write)刚才的3个变量。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>

    let uname = prompt('请输入您的姓名')
    let age = prompt('请输入您的年龄')
    let gender = prompt('请输入您的性别')
    document.write('<h1>欢迎您,'+uname+'</h1>')
    document.write('<h1>您的年龄是'+age+'</h1>')
    document.write('<h1>您的性别是'+gender+'</h1>')

    // 模板字符串
    document.write(`
    <h1>欢迎您,${uname}</h1>
    <h1>您的年龄是${age}</h1>
    <h1>您的性别是${gender}</h1>
    `)
 
  </script>
</body>
</html>
  • 运行结果

请添加图片描述

2、变量

2.1 变量是什么?

  • 目标:理解变量是计算机存储数据的“容器”
  1. 变量
  • 白话:变量就是一个装东西的盒子。
  • 通俗:变量是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆。

请添加图片描述

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

2.2 变量的基本使用

  • 目标:能够声明一个变量并完成赋值操作
  1. 变量的声明:要想使用变量,首先需要创建变量(也称为声明变量或者定义变量)
  • 语法:
let 变量名
  • 声明变量有两部分构成:声明关键字、变量名(标识)
  • let即关键字(let:允许、许 可、让、要),所谓关键字是系统提供的专门用来声明(定义)变量的词语
  1. 变量的赋值:定义了一个变量后,你就能够初始化它(赋值)。在变量名之后跟上一个“=”,然后是数值。

请添加图片描述

  • 注意:是通过变量名来获得变量里面的数据
  • 简单点,也可以声明变量的时候直接完成赋值操作,这种操作也称为变量初始化。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 1.声明一个年龄变量
    let age 
    // 2.赋值 =
    age = 18

    // 3.输出age变量


    // 声明的同时,赋值
    let Age = 19
    alert(age)
  </script>
</body>
</html>
  • 课堂练习
    • 需求:
    • 声明一个变量,用于存放用户购买的商品数量(num)为20件
    • 声明一个变量,用于存放用户的姓名(uname)为’张三
    • 依次控制台打印输出两个变量
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let num = 20
    let uname = '张三'
    console.log(num,uname)
  </script>
</body>
</html>
  • 运行结果

请添加图片描述
3. 更新变量:变量赋值后,还可以通过简单地给它一个不同的值来更新它。

目标:掌握变量的更新以及了解同时声明多个变量的写法

  • Code
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
     /* 3.声明的同时直接赋值变量的初始化 */
    let age = 18
    console.log(age);
      age  = 19
    console.log(age);
    
    // 声明多个变量
    let name = '张三', Age = 18, height = 1.88
    console.log(name,Age,height);
    
    
  </script>
</body>
</html>
  1. 声明多个变量:变量赋值后,还可以通过简单地给它一个不同的值来更新它

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

let age = 19,uname = 'pink'

练习1

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let name = prompt("请输入姓名")
    document.write("您的姓名是",name)
  </script>
</body>
</html>
  • 运行结果:请添加图片描述
    练习2

  • 交换两个变量的值

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let num1 = 10,num2 = 20,num
    document.write(num1,"  ",num2)
    document.write("<br>")
    num = num1
    num1 = num2
    num2 = num
    document.write(num1,"  ",num2)
    document.write('<br>')
    document.write(num)
  </script>
</body>
</html>
  • 运行结果请添加图片描述

2.3变量的本质

  • 目标:能够说出变量的本质是什么
  • 内存:计算机中存储数据的地方,相当于一个空间
  • 变量本质:是程序在内存中申请的一块用来存放数据的小空间

请添加图片描述

2.4 变量命名规则与规范

  • 目标:能写出符合规范的变量名
  • 规则:必须遵守,不遵守会报错(法律层面)
  • 规范:建议,不遵守不会报错,但不符合业内通识(道德层面)
  1. 规则:
    • 能用关键字
      • 关键字:有特殊含义的字符,JavaScript内置的一些英语词汇。例如:let、var、if、for等
    • 能用下划线、字母、数字、$组成,且数字不能开头
    • 字母严格区分大小写,如Age和age是不同的变量
  2. 规范:
    • 名要有意义
    • 遵守小驼峰命名法
      • 一个单词首字母小写,后面每个单词首字母大写。例:userName

2.5 变量let和var的区别

在较l旧的JavaScript,使用关键字var来声明变量,而不是let。var现在开发中一般不再使用它,只是我们可能再老版程序中看到它,let为了解决var的一些问题。
var声明:

  • 可以先使用在声明(不合理)
  • var声明过的变量可以重复声明(不合理)
  • 比如变量提升、全局变量、没有块级作用域等等

3、变量扩展-数组

3.1 数组的基本使用

目标:够声明数组并且能够获取里面的数据

  1. 声明语法
let 数组名= [数据1,数据2... , 数据n]
eg:
let names=['小明',‘小刚','小红',‘小丽',‘小米']
  • 数组是按顺序保存的,所以每个数据都有自己的编号
  • 计算机中的编号从0开始
  • 在数组中,数据的编号业绩哦啊索引或下标
  • 数组可以存储任意类型的数据
  1. 取值语法
//数组名[下标]
  • 通过下标取数据
  • 取出来是什么类型的,就根据这种类型特点来访问
  1. 一些术语
  • 元素:数组中保存的每个数据都叫数组元素
  • 下标:数组中数据的编号
  • 长度:数组中数据的个数,通过数组的length属性获得

练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 数组取值案例
    // 需求:定义一个数组,里面存放星期一、星期二....直直到星期日(共7天),在控制台输出:星期日
    let  data = ["星期一",'星期二','星期三','星期四','星期五','星期六','星期日']
    document.write(data[6])
    document.write(data.length)
 </script>
</body>
</html>

运行结果请添加图片描述

4、数据类型

目标:能说出JS中基本数据类型有哪些

计算机世界中的万事万物都是数据
计算机程序可以处理大量的数据,为什么要给数据分类?

  • 更加充分和高效的利用内存
  • 也更加方便程序员的使用数据

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

  • 基本数据类型
类型名称表示
number数字型
string字符串型
boolean布尔型
undefined未定义型
null空类型
  • 引用数据类型
类型名称表示
object对象

4.1 数据类型-数字类型(Number)

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

JavaScript中的正数、负数、小数等统一称为数字类型。

注意事项

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

数字可以有很多操作,比如,乘法*、除法/、加法+、减法-等等,所以经常和算术运算符一起。
数学运算符也叫算术运算符,主要包括加、减、乘、除、取余(求模)。

  • +:求和
  • -:求差
  • *:求积
  • /:求商
  • %:取模(取余数)
    • 开发中经常作为某个数字是否被整除

优先级

目标:能说出JavaScript算术运算符执行的优先级顺序

同时使用多个运算符编写程序时,会按着某种顺序先后执行,我们称为优先级。
JavaScript中优先级越高越先被执行,优先级相同时以书从左向右执行。

  • 乘、除、取余优先级相同
  • 加、减优先级相同
  • 乘、除、取余优先级大于加、减
  • 使用()可以提升优先级
  • 总结:先乘除后加减,有括号先算括号里面的~~~
    提问:

NaN

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

console.log('老师' - 2)

NaN 是粘性的。任何对NaN的操作都会返回NaN(包括NaN)

console.log(NaN +2) // NaN

练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 弱数据类型的语言 只有赋值了才知晓是什么数据类型
    let num = 2
//     计算圆的面积
// 需求:对话框中输入圆的半径,算出圆的面积并显示到页面
     let r = prompt('请输入圆的半径')
     let area = 3.14*r*r
     document.write(area)
     document.write('<br>')
     //not a number(NAN)   document.write('<br>')
     document.write("'pink' - 2",'pink' - 2)
     document.write('<br>')
     document.write('NaN - 1=',NaN - 1)
     document.write('<br>')
    document.write('NaN + 1=',NaN + 1)
    document.write('<br>')
    document.write('NaN+NaN=',NaN + NaN)
    // 输出为false
    // document.write(NaN === NaN)
  </script>
</body>
</html>

运行结果:

请添加图片描述

4.2 数据类型-字符串类型(String)

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

注意事项

  • 无论单引号或是双引号必须成对使用
  • 单引号/双引号可以互相嵌套,但是不以自已嵌套自已(口诀:外双内单,或者外单内双)
  • 必要时可以使用转义符\,输出单引号或双引号

练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let str = 'pink'
    let str1 = "pink1"
    let str2 = `pink3`
    console.log(str2);
    console.log('数字:',11); //蓝色
    console.log('字符串','11'); //黑色
    
    
    // 引号必须成对出现
    console.log('pink老师讲课非常有"基情" ' );
    console.log("pink老师讲课非常有'基情' " );
    console.log("pink老师讲课非常有\"基情\" " ); //转义符
    

    // 字符串拼接
    document.write(1+1);
    document.write('<br>')
document.write('pink'+'老师')
document.write('<br>')
let age = 20
document.write('我今年'+age+'岁了(拼接)')
document.write('<br>')
document.write(`我今年${age}岁了(模版字符串)`)





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

运行结果:请添加图片描述
模板字符串

使用场景:

  • 拼接字符串和变量
  • 在没有它之前,要拼接变量比较麻烦
document.write('大家好,我叫’+name+',今年’+age+‘岁')

语法:

  • ``(反引号)
  • 在英文输入模式下的按键盘的tab键上方的那个键(1左边那个键)
  • 内容拼接变量是,用${变量名}包住变量

练习

页面输出用户信息案例

需求:页面弹出对话框,输入名字和年龄,页面显示:大家好,我叫xxx,今年xx岁了

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
  // 页面输出用户信息案例
  // 需求:页面弹出对话框,输入名字和年龄,页面显示:大家好,我叫xxx,今年xx岁了
  let name = prompt('请输入您的名字')
  let age = prompt('请输入您的年龄')
  document.write(`大家好!我叫${name},今年${age}岁了`)
</script>
</body>
</html>

运行结果请添加图片描述

4.3 数据类型-布尔型(boolean)

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

4.4 数据类型-未定义类型(undefined)

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

声明情况出现未定义类型?

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

let age //声明未赋值
document.write(age) //输出undefined

工作中的使用场景

我们开发中经常声明一个变量,等待传送过来的数据。

如果我们不知道这个数据是否传递过来,此时我们可以通过检测这个变量是不是undefined就判断用户是否有数据传递过来。

4.5 数据类型- null (空类型)

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

let obj = null
console.log(obj) // null

null和undefined的区别

  • undefined表示没有赋值
  • null 表示赋值了,但是内容为空

null开发中的使用场景

  • 官方解释:把null作为尚未创建的对象
  • 大白话:将来有个变量里面存放的是一个对象,但是对象还没创建好,可以先给个null

练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 布尔
    let isCool  = true
    console.log(isCool);

    // 声明一个变量未给值就是undefined
    let gg 
    console.log(gg);
    
    // 空
    let obj = null
    console.log(obj);
    
    // null 和 undefined区别:null是空值,undefined是未定义
    console.log("null == undefined? ",null == undefined);
    console.log("null === undefined? ",null === undefined);
    console.log('undefined + 1=',undefined + 1) ; //NaN
    console.log('null + 1=',null + 1);
    
  </script>
</body>
</html>

Result:

请添加图片描述

4.6 数据类型-检测数据类型

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

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

  1. 作为运算符:typeof x(常用的写法)
  2. 函数形式:typeof(x)

换言之,有括号和无括号,得到的结果是一样的,所以我们直接使用运算符的写法。

练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let age = 19
    let uname = '刘德华'
    let flag = false
    let buy
    let obj = null
    console.log(age);
    console.log(uname);
    console.log(flag);
    console.log(buy);

    console.log(typeof age);
    console.log(typeof uname);
    console.log(typeof flag);
    console.log(typeof buy);
    console.log(typeof obj);
  
  </script>
</body>
</html>

Result:

请添加图片描述

5、类型转换

5.1 为什么要类型转换

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

console.log('10000' + '2000') //输出结果 100002000

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

练习:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let num1 = prompt("请输入第一个数")
    document.write('num1的数据类型是:',typeof num1);
    document.write('<br>')
    let num2 = +prompt("请输入第二个数")
    document.write('num2的数据类型是:',typeof num2);
    
  </script>
</body>
</html>

运行结果:请添加图片描述

5.2 隐式转换

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

规则

  • +号两边只要有一个是字符串,都会把另外一个转成字符串
  • 除了+以外的算术运算符比如-*/等都会把数据转成数字类型

缺点:

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

小技巧

  • +号作为正号解析可以转换成数字型
  • 任何数据和字符串相加结果都是字符串

练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 隐式转换
    document.write('<br>')
    document.write(1 + 1)
    document.write('<br>')
    document.write('pink' + 1)
    document.write('<br>')
    document.write(2 + '2') //22
    document.write('<br>')
    document.write(2 - '2') // 0
    document.write('<br>')
    document.write('2' - 2)
    document.write('<br> "2" + 2  ' )
    document.write('2' + 2)
    document.write('<br>')
    document.write("+12:",+12)
    document.write('<br>')
    document.write("+'123':",+123,typeof +123) // numbe 

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

Result

请添加图片描述

5.3 显示转换

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

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

转换为数字型

  • 格式:Number(数据):
    • 转成数字类型
    • 如果字符串内容里有非数字,转换失败时结果为NaN(Not a Number)既不是一个数字
    • NaN也是number类型的数据,代表非数字
  • parsetInt(数据)
    • 只保留整数
  • parsetFloat(数据)
    • 可以保留小数

练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script> 

    // 显式转换
    let str = '123'
    console.log(str);
    
    console.log(Number(str));
    console.log(Number('pink')); //NaN
    
    let num = +prompt('请输入你的年薪1')//隐式转换
    let num1 = Number(prompt('请输入你的年薪2'))
    console.log('年薪:',typeof num)
    console.log('年薪2:',typeof num1);
    
    // 自动取前面的数字(整数部分) (12)
    console.log(parseInt('12px'));
    console.log(parseInt('12.3px'));
    console.log(parseInt('12.9876px'));
    console.log(parseInt('abc12.9876px')); //错误
    console.log('float');
    
    console.log(parseFloat('12px'));
    console.log(parseFloat('12.3px'));
    console.log(parseFloat('12.9876px'));
    console.log(parseFloat('abc12.9876px')); //错误
  </script>
</body>
</html>

运行结果

请添加图片描述

6、综合案列

用户订单信息案例

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

图示请添加图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>综合案例</title>
  <style>
  * {
    padding: 0;
    margin: 0;
  }
  .app {
    width: 800px;
    height: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #ccc;
  }
  .title,table,th,td,tr {
    border-collapse: collapse;
  }
  .container {
    width: 100%;   
    display: flex;
    flex-direction: column;
    border: 1px solid black;
    th,td { 
      padding: 0;
      margin: 0;
      text-align: center;
    }
  }
  </style>
</head>
<body>
     

  <script>
    let price = +prompt('请输入商品价格')
    let num = +prompt('请输入商品数量')
    let address = prompt('请输入收货地址')
    let total = price * num
    document.write(`
    <div class="app">
      <!-- 大标题 -->
      <div class="title">
        <h2>订单确认</h2>
      </div>

      <div class="container">
        <table>
          <!-- 表头 -->
          <thead>
            <tr>
              <th>商品名称</th>
              <th>商品价格</th>
              <th>商品数量</th>
              <th>总价</th>
              <th>收货地址</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>小米手机青春PLUS </td>
              <td>${price}元 </td>
              <td>${num} </td>
              <td>${total}元</td>
              <td>${address}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    `)
  </script>
</body>
</html>

Result

请添加图片描述
Day01,Game Over!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2092867.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java 集合框架与泛型实战指南

Collection&#xff1a; Collection 不唯一&#xff0c;无序 List 不唯一&#xff0c;有序 Set 唯一&#xff0c;无序 ArrayList&#xff1a;内部使用长度可变的数组&#xff0c;遍历查询效率高 LinkedList&#xff1a;采用双向链表实现&#xff0c;增删改效率比较高 ArrayL…

【智能排班系统】Hibernate Validator 参数校验

&#x1f3af;导读&#xff1a;本文档介绍了参数校验的重要性及其在软件开发中的作用&#xff0c;强调了数据完整性、安全性、用户体验、系统稳定性及开发效率等方面的关键价值。文档详细阐述了Hibernate Validator这一流行的Java验证框架的使用方法&#xff0c;展示了如何利用…

适马相机cf卡剪切的数据还能恢复吗?可尝试这几种方法

“本想把适马相机CF卡里的珍贵数据剪切到电脑上&#xff0c;‌以备不时之需&#xff0c;‌但是不知道怎么回事&#xff0c;剪切后数据既不在电脑上&#xff0c;‌CF卡里也没了&#xff0c;这可真是让我心急如焚&#xff01;‌求大神指点迷津&#xff0c;‌帮我找回那些重要的文…

Vue 选项式api和组合式api 路由嵌套

选项式api和组合式api是两种不同的语法习惯&#xff0c;<template>标签内还是该怎么写就怎么写&#xff0c;不一样的只是<script>里面的语法改变了。 目录 选项式api&#xff1a; 组合式api&#xff1a; 1)省略各种关键字&#xff1a; 省略前&#xff1a; 省略后…

【Qt】菜单栏

目录 菜单栏 例子&#xff1a;创建菜单栏、菜单、菜单项 例子&#xff1a;给菜单设置快捷键 例子&#xff1a;给菜单项设置快捷键 例子&#xff1a;添加子菜单 例子&#xff1a;添加分隔线 例子&#xff1a;添加图标 菜单栏 Qt中的菜单栏是通过QMenuBar这个类实现的&…

LeetCode --- 412周赛

题目列表 3264. K 次乘运算后的最终数组 I 3266. K 次乘运算后的最终数组 II 3265. 统计近似相等数对 I 3267. 统计近似相等数对 II 一、K次乘预算后的最终数组 I & II I 数据范围比较小&#xff0c;可以暴力模拟&#xff0c;代码如下 class Solution { public:vecto…

Day52 | dijkstra(堆优化版)Bellman_ford 算法

dijkstra&#xff08;堆优化版&#xff09; 题目 47. 参加科学大会 47. 参加科学大会&#xff08;第六期模拟笔试&#xff09; 题目描述 小明是一位科学家&#xff0c;他需要参加一场重要的国际科学大会&#xff0c;以展示自己的最新研究成果。 小明的起点是第一个车站&a…

vscode 未定义标识符 “uint16_t“C/C++(20) 但是可以顺利编译

这是没有指定编译器的原因 解决方法&#xff1a; 打开 或c_cpp_properties.json&#xff0c;添加编译器

★ 算法OJ题 ★ 力扣611 - 有效三角形的个数

Ciallo&#xff5e;(∠・ω< )⌒☆ ~ 今天&#xff0c;椎名日和将和大家一起做一道双指针算法题--有效三角形的个数~ 目录 一 题目 二 算法解析 三 编写算法 一 题目 二 算法解析 给三个数&#xff0c;判断是否能构成三角形的条件&#xff1a;两个较小的数相加大于…

机器学习数学公式推导之高斯分布

文章目录 1、介绍引入1.1 频率派的观点1.2 贝叶斯派的观点1.3 小结 2、数学基础2.1 二阶中心矩2.2 样本方差2.3 高斯分布2.3.1 一维情况 MLE2.3.2 多维情况 本文参考 B站UP: shuhuai008 跳转 &#x1f339;&#x1f339; 1、介绍引入 在统计学和概率论中&#xff0c; P ( x ∣ …

史上最全的MybatisPlus学习教程从入门到精通

一、MybatisPlus是什么 1.1 MyBatis-Plus简介 MyBatis-Plus&#xff08;简称MP&#xff09;是一个MyBatis的增强工具&#xff0c;它在MyBatis的基础上进行了增强&#xff0c;但并没有改变原有的MyBatis框架。MyBatis-Plus的主要目标是简化开发和提高开发效率。它提供了诸如分…

源码阅读-SpirngBoot Mybatis 自动配置

MybatisPlusAutoConfiguration ObjectProvider#getIfAvailable ObjectProvider为我们提供了拓展&#xff0c;我们可以自定义一些插件或者类型转换器&#xff0c;同时也可以定义一些Customizer用来配置SqlSessionFactoryBean,MybatisPlusProperties等。 通过源码我们可以看到最…

Redis从入门到入门(上)

1.Redis概述 文章目录 1.Redis概述1.1 什么是Redis1.2 Redis的应用场景 2.Linux下Redis的安装与使用2.1 Redis下载2.2 Redis的启动2.3 Redis配置2.4 连接Redis 1.1 什么是Redis Redis是用C语言开发的一个开源的高性能键值对&#xff08;key-value&#xff09;数据库&#xff0…

数学建模--K-Means聚类分析

目录 1.聚类分析步骤 1.1简单介绍 1.2两个概念 1.3几种距离 1.4更新质心 1.5终止条件 2.归一化处理 3.肘部法则 4.搭建K-Means分析模型 5.选择最佳K值 6.绘制3D图形 1.聚类分析步骤 1.1简单介绍 K-Means聚类分析是属于聚类分析的一种&#xff0c;这个数据机器学习的…

YOLOv8改进 | Neck篇 | YOLOv8引入Slim-Neck(超轻量)

1. Slim-Neck介绍 摘要:目标检测是计算机视觉中重要的下游任务。 对于车载边缘计算平台来说,巨大的模型很难达到实时检测的要求。 而且,由大量深度可分离卷积层构建的轻量级模型无法达到足够的精度。 我们引入了一种新的轻量级卷积技术 GSConv,以减轻模型重量但保持准确性。…

《软件工程导论》(第6版)第4章 形式化说明技术 复习笔记

第4章 形式化说明技术 一、概述 按照形式化的程度&#xff0c;可以把软件工程使用的方法划分成非形式化、半形式化和形式化3类。用自然语言描述需求规格说明&#xff0c;是典型的非形式化方法。用数据流图或实体联系图建立模型&#xff0c;是典型的半形式化方法。所谓形式化…

idea的springboot里面的resources是什么

在IDEA&#xff08;IntelliJ IDEA&#xff09;中的Spring Boot项目中&#xff0c;resources目录扮演着非常重要的角色。这个目录主要用于存放项目的非代码资源&#xff0c;包括但不限于配置文件、静态资源文件&#xff08;如图片、CSS、JavaScript等&#xff09;、模板文件&…

YOLO缺陷检测学习笔记(2)

YOLO缺陷检测学习笔记&#xff08;2&#xff09; 残差连接1. **YOLO 的残差连接结构**2. **YOLO 使用残差连接的目的**3. **YOLO 中的残差块**4. **YOLOv3 和 YOLOv4 的残差连接架构** YOLO网络架构概述1. 特征提取网络2. 预测头&#xff08;Detection Head&#xff09;3. 后处…

Android CCodec Codec2 (五)C2Param - Ⅲ

这一节我们来看看简单参数的定义方式 1、C2SimpleValueStruct Codec2框架提供了模板类C2SimpleValueStruct来帮助我们定义非灵活数组的简单参数。C2SimpleValueStruct的定义如下&#xff1a; template<typename T> struct C2SimpleValueStruct {T value; ///< simpl…

阿里 “通义灵码” 真的 “灵吗”,全保姆级实操

最近很多朋友&#xff0c;都在关注阿里公测的“通义灵码”&#xff0c;我索性也安装了&#xff0c;准备看看它真的有说的那么“灵吗”&#xff1f; 一、安装 官网&#xff1a;https://tongyi.aliyun.com/lingma/ 安装方式&#xff1a;https://tongyi.aliyun.com/lingma/downl…