JavaWeb(4)——HTML、CSS、JS 快速入门

一、JavaScript 数组

JavaWeb(4)——HTML、CSS、JS 快速入门_第1张图片

 数组筛选(查找,将原来数组中的某些数据去除)




  
  
  
  Document



  


JavaWeb(4)——HTML、CSS、JS 快速入门_第2张图片

数组筛选(查找,数组中的最大和最小值)




  
  
  
  Document



  

JavaWeb(4)——HTML、CSS、JS 快速入门_第3张图片

数组修改(数组中每个元素末尾都加新元素)




  
  
  
  Document



  


JavaWeb(4)——HTML、CSS、JS 快速入门_第4张图片

 数组修改(数组中每个元素开头都加新元素)

JavaWeb(4)——HTML、CSS、JS 快速入门_第5张图片





  
  
  
  Document



  


 数组删除指定元素

JavaWeb(4)——HTML、CSS、JS 快速入门_第6张图片

JavaWeb(4)——HTML、CSS、JS 快速入门_第7张图片





  
  
  
  Document



  


冒泡排序




  
  
  
  Document



  


JavaWeb(4)——HTML、CSS、JS 快速入门_第8张图片

这段代码实现了一种冒泡排序算法:

  1. 首先,定义了一个数组 arr = [2, 4, 3, 5, 1],其中包含了待排序的元素。

  2. 然后,调用了数组的 sort() 方法来排序数组中的元素。sort() 方法接受一个回调函数作为参数,该回调函数用于指定排序的规则。

  3. 回调函数通过比较两个元素 a 和 b 的大小来确定它们在排序结果中的顺序。在这里,回调函数使用了一个简单的比较规则,即 b - a。如果 b 大于 a,则返回一个正数,表示 b 应该排在 a 前面;如果 b 小于 a,则返回一个负数,表示 b 应该排在 a 后面;如果 b 等于 a,则返回 0,表示它们的相对顺序不变。

  4. 冒泡排序的核心思想是,重复地遍历数组,每次比较相邻的两个元素,如果它们的相对顺序不符合要求(按照回调函数的规则),则交换它们的位置,直到整个数组按照要求排好序。

  5. 最后,将排序后的数组输出到控制台使用 console.log() 方法打印出来。在这个例子中,输出结果是 [5, 4, 3, 2, 1],表示数组按照降序排列。

 根据数据生成柱形图 




    
    
    
    Document
    







    


        首先,在 HTML 的 标签中定义了一些 CSS 样式,用于布局和美化页面。这些样式设置了一个名为 "box" 的容器,并定义了容器内部每个柱状图的样式。

* 选择器:

设置所有元素的 margin 和 padding 属性为 0,取消默认的边距和内边距。

.box 类选择器:定义一个名为 "box" 的容器的样式。具体含义如下:

display: flex;:将容器设置为弹性布局,使其内部元素可以灵活排列。
width: 700px;:设置容器的宽度为 700 像素。
height: 300px;:设置容器的高度为 300 像素。
border-left: 1px solid pink;:设置容器的左边框为粉色实线。
border-bottom: 1px solid pink;:设置容器的底边框为粉色实线。
margin: 50px auto;:将容器水平居中,并在上下方向上有 50px 的外边距。
justify-content: space-around;:在容器内部沿主轴方向(水平方向)均匀分布元素,两端留有空白间距。
align-items: flex-end;:在容器内部沿交叉轴方向(垂直方向)将元素对齐到底部。
text-align: center;:将容器内元素的文本内容居中对齐。

.box>div 是一个 CSS 选择器,表示选择 .box 容器内的直接子元素为

的元素。具体含义是选择容器 .box 内的直接子级
元素,并对其应用相应的样式规则。

在给定的样式代码中,.box>div 选择器被用来定义了 .box 容器内的子级

元素的样式。通过这个选择器可以对柱状图中的每个柱子进行样式设置,包括宽度、背景颜色等。

.box>div 类选择器:定义容器内

元素的样式。具体含义如下:

display: flex;:将 

 元素设置为弹性布局,使其内部元素可以灵活排列。
width: 50px;:设置 
 元素的宽度为 50 像素。
background-color: pink;:设置 
 元素的背景颜色为粉色。
.box div span 选择器:定义
元素内的 标签的样式。具体含义如下:

margin-top: -20px;:将  元素向上移动 20 像素,用于调整显示位置。
.box div h4 选择器:定义

元素内的

标签的样式。具体含义如下:

margin-bottom: -35px;:将 

 元素向上移动 35 像素,用于调整显示位置。
width: 70px;:设置 

 元素的宽度为 70 像素。
margin-left: -10px;:将 

 元素向左移动 10 像素,用于调整显示位置。

接下来,在 HTML 的 标签中,通过 JavaScript 代码实现了以下功能:
  1. 定义了一个空数组 arr,用于存储用户输入的四个季度的数据。

  2. 使用 for 循环遍历四次,每次弹出一个对话框(prompt),要求用户输入一个季度的数据,并将用户输入的数据添加到数组 arr 中。

  3. 使用 document.write() 方法输出 HTML 代码,开始构建包含柱状图的

    容器。该容器的类名为 "box"。

  4. 使用 for 循环遍历数组 arr,在容器内部创建

    元素来表示每个柱状图。根据用户输入的数据设置每个柱状图的高度(style="height: ${arr[i]}px;")。

  5. 在每个柱状图中,使用 标签显示对应季度的数据(${arr[i]}),使用

    标签显示季度的序号(第${i + 1}季度)。

  6. 最后,使用 document.write() 方法输出结束标记

,完成整个柱状图的构建。

这段代码通过用户输入的数据动态生成了一个柱状图,并在页面上展示出来。每个柱状图的高度对应季度的数据值,通过这种方式可以直观地比较不同季度的数据大小。

JavaWeb(4)——HTML、CSS、JS 快速入门_第9张图片

二、JavaScript 函数

函数命名

JavaWeb(4)——HTML、CSS、JS 快速入门_第10张图片

 函数传参

JavaWeb(4)——HTML、CSS、JS 快速入门_第11张图片

 函数返回值

break结束的是循环,return结束的是函数 ,返回多个数据可以使用数组。

JavaWeb(4)——HTML、CSS、JS 快速入门_第12张图片

 JavaWeb(4)——HTML、CSS、JS 快速入门_第13张图片

JavaWeb(4)——HTML、CSS、JS 快速入门_第14张图片

JavaWeb(4)——HTML、CSS、JS 快速入门_第15张图片

 函数作用域

作用域链:采取就近原则的方式来查找变量最终的值

匿名函数

JavaWeb(4)——HTML、CSS、JS 快速入门_第16张图片

 没有名字的函数, 无法直接使用。 使用方式:①  函数表达式   ;② 立即执行函数

JavaWeb(4)——HTML、CSS、JS 快速入门_第17张图片

JavaWeb(4)——HTML、CSS、JS 快速入门_第18张图片

 JavaWeb(4)——HTML、CSS、JS 快速入门_第19张图片

JavaWeb(4)——HTML、CSS、JS 快速入门_第20张图片





  
  
  
  Document



  


JavaWeb(4)——HTML、CSS、JS 快速入门_第21张图片

JavaWeb(4)——HTML、CSS、JS 快速入门_第22张图片 

这个跟之前讲的逻辑中断很像 ,如果当时函数调用的时候不传值进去。此时得到的就是0。

JavaWeb(4)——HTML、CSS、JS 快速入门_第23张图片

JavaWeb(4)——HTML、CSS、JS 快速入门_第24张图片

 JavaWeb(4)——HTML、CSS、JS 快速入门_第25张图片

JavaWeb(4)——HTML、CSS、JS 快速入门_第26张图片

 三、关系运算符比较总结

 由于之后的代码中常常有写if判断的地方,所以需要对运算符的运算结果做一些总结。

JavaWeb(4)——HTML、CSS、JS 快速入门_第27张图片 JavaWeb(4)——HTML、CSS、JS 快速入门_第28张图片

JavaWeb(4)——HTML、CSS、JS 快速入门_第29张图片

JavaWeb(4)——HTML、CSS、JS 快速入门_第30张图片

你可能感兴趣的:(前端,前端,html5,css,javascript,开发语言)