前端学习从入门到高级全程记录之21（JavaScript基础）

最新推荐文章于 2022-10-17 08:47:38 发布
最新推荐文章于 2022-10-17 08:47:38 发布
阅读量472 收藏 1
点赞数 1
分类专栏： JavaScript基础 HTML 文章标签： javascript html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangbobo1997/article/details/103841900
版权

学习目标

从本期开始我们就要开始学习JavaScript了。那么学习javascript可以使用你自己熟悉的软件，这里我推荐WebStorm。当然，之前的HBuilder也是可以的。网上有很多免费资源，安装简单，这里我就不提供资源了，请大家自行百度。

1.JavaScript介绍

JavaScript是什么

HTML CSS

JavaScript 编程语言 流程控制

Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。Java和JavaScript的关系就像张雨和张雨生的关系，只是名字很像。

Java  服务器端的编程语言

JavaScript  运行在客户端(浏览器)的编程语言

JavaScript是一种运行在客户端 的脚本语言

JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
在这里插入图片描述

JavaScript最初的目的

最初的目的是为了处理表单的验证操作。

JavaScript现在的意义(应用场景)

JavaScript 发展到现在几乎无所不能。

  1. 网页特效
  2. 服务端开发(Node.js)
  3. 命令行工具(Node.js)
  4. 桌面程序(Electron)
  5. App(Cordova)
  6. 控制硬件-物联网(Ruff)
  7. 游戏开发(cocos2d-js)

JavaScript和HTML、CSS的区别

  1. HTML：提供网页的结构，提供网页中的内容
  2. CSS: 用来美化网页
  3. JavaScript: 可以用来控制网页内容，给网页增加动态的效果

JavaScript的组成

在这里插入图片描述

ECMAScript - JavaScript的核心

ECMA 欧洲计算机制造联合会

网景：JavaScript

微软：JScript

定义了JavaScript的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关。

BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

JavaScript初体验

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
	<script>
		alert("王者");//弹出消息框
		alert("荣耀");
	</script>
	<script>
	</script>
</head>
<body>

</body>
</html>

在这里插入图片描述
在这里插入图片描述
如果你把代码写错了：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
	<script>
		alert("王者";//弹出消息框   少了括号？？？？
		alert("荣耀");
	</script>
	<script>
	</script>
</head>
<body>

</body>
</html>

那么，这个script标签后面的代码就不会再执行了，但是下一个script标签里的内容依然可以执行。

JavaScript的书写位置

写在行内

<input type="button" value="按钮" onclick="alert('Hello World')" />

写在script标签中

<head>
  <script>
    alert('Hello World!');
  </script>
</head>

写在外部js文件中，在页面引入

<script src="main.js"></script>

总结
1.在一对script的标签中有错误的js代码，那么该错误的代码后面的js代码不会执行。
2.如果第一对的script标签中有错误，不会影响后面的script标签中的js代码执行。
3.script的标签中可以写什么内容?->tyle="text/javascript"是标准写法或者写 language="javascript"都可以。但是，目前在我们的html页面中，type和language都可以省略，原因：html是遵循h5的标准。
4.有可能会出现这种情况：script标签可能出现type和language的写法，主要是照顾不同浏览器的兼容性问题。
5.script标签在页面中可以出现多对。
6.script标签一般是放在body的标签最后的，有时候会在head标签中，目前来说都在body标签后面（body中的最后）。
7.如果script标签是引入外部js文件的作用，那么这对标签中不要写任何的js代码，如果要写，
重新写一对script标签，里面写代码。

2.变量的引入及声明和初始化

什么是变量

  • 什么是变量
    变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
  • 为什么要使用变量
    使用变量可以方便的获取或者修改内存中的数据

如何使用变量

  • var声明变量
var age;
  • 变量的赋值
var age;
age = 18;
  • 同时声明多个变量
var age, name, sex;
age = 10;
name = 'zs';
  • 同时声明多个变量并赋值
var age, name, sex;
age = 10;
name = 'zs';

注意 js中区分大小写，N和n是不一样的。

变量的命名规则和规范

  • 规则 - 必须遵守的，不遵守会报错
    • 由字母、数字、下划线、$符号组成，不能以数字开头
    • 不能是关键字和保留字，例如：for、while。
    • 区分大小写
  • 规范 - 建议遵守的，不遵守不会报错
    • 变量名必须有意义
    • 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword
  • 下面哪些变量名不合法？
    a
    1
    age18
    18age
    name
    $name
    _sex
    &sex
    theworld theWorld

案例

  1. 交换两个变量的值
  2. 不使用临时变量，交换两个数值变量的值

3.数据类型

简单数据类型

Number、String、Boolean、Undefined、Null

Number类型

  • 数值字面量：数值的固定值的表示法
    110 1024 60.5
  • 进制
十进制
        var num = 9;
    	进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。
十六进制
    	var num = 0xA;
    	数字序列范围：0~9以及A~F
八进制
        var num1 = 07;   // 对应十进制的7
        var num2 = 019;  // 对应十进制的19
        var num3 = 08;   // 对应十进制的8
        数字序列范围：0~7
        如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析

浮点数

  • 浮点数的精度问题
    浮点数
    	var n = 5e-324;   // 科学计数法  5乘以10的-324次方  
    浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数
       var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
       console.log(0.07 * 100);
       不要判断两个浮点数是否相等

数值范围

最小值：Number.MIN_VALUE，这个值为： 5e-324
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
无穷大：Infinity
无穷小：-Infinity
  • 数值判断
    • NaN：not a number
      • NaN 与任何值都不相等，包括他本身
    • isNaN: is not a number

String类型

‘abc’ “abc”

  • 字符串字面量
    ‘王者’， “王者荣耀”

思考：如何打印以下字符串。

我是一个"正直"的人

  • 转义符
    在这里插入图片描述
  • 字符串长度
    length属性用来获取字符串的长度
var str = '黑马程序猿 Hello World';
console.log(str.length);
  • 字符串拼接
    字符串拼接使用 + 连接
console.log(11 + 11);
console.log('hello' + ' world');
console.log('100' + '100');
console.log('11' + 11);
console.log('male:' + true);
  1. 两边只要有一个是字符串，那么+就是字符串拼接功能
  2. 两边如果都是数字，那么就是算术功能。

Boolean类型

  • Boolean字面量： true和false，区分大小写
  • 计算机内部存储：true为1，false为0

Undefined和Null

  1. undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
  2. null表示一个空，变量的值如果想为null，必须手动设置

复杂数据类型

Object，就是对象的意思。

获取变量的类型

typeof

var age = 18;
console.log(typeof age);  //结果是 'number'，其他同理。

字面量

在源代码中一个固定值的表示法。

数值字面量：8, 9, 10

字符串字面量：‘玩王者’, “大前端”

布尔字面量：true，false

4.数据类型转换

如何使用谷歌浏览器，快速的查看数据类型？

字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的

转换成字符串类型

  • toString()
    var num = 5;
    console.log(num.toString());
  • String()
    String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null
  • 拼接字符串方式
    num + “”，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串

转换成数值类型

  • Number()
    Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN
  • parseInt()转为整数
    var num1 = parseInt(“12.3abc”); // 返回12，如果第一个字符是数字会解析知道遇到非数字结束
    var num2 = parseInt(“abc123”); // 返回NaN，如果第一个字符不是数字或者符号就返回NaN
  • parseFloat()
    parseFloat()把字符串转换成浮点数
    parseFloat()和parseInt非常相似，不同之处在与
    parseFloat会解析第一个. 遇到第二个.或者非数字结束
    如果解析的内容里只有整数，解析成整数
  • +，-0等运算
    var str = ‘500’;
    console.log(+str); // 取正
    console.log(-str); // 取负
    console.log(str - 0);
    如果变量有意义调用.tostring()转换，如果变量没有意义使用String（）转换

转换成布尔类型

  • Boolean()

0 ‘’(空字符串) null undefined NaN 会转换成false 其它都会转换成true

5.操作符

运算符 operator

5 + 6

表达式 组成 操作数和操作符，会有一个结果

算术运算符

算术运算符

+ - * / %

一元运算符

一元运算符：只有一个操作数的运算符

5 + 6 两个操作数的运算符 二元运算符

++ 自身加1

--自身减1

  • 前置++
    var num1 = 5;
    ++ num1;

    var num2 = 6;
console.log(num1 + ++ num2);

  • 后置++
    var num1 = 5;
    num1 ++;
    var num2 = 6
    console.log(num1 + num2 ++);

  • 猜猜看
    var a = 1; var b = ++a + ++a; console.log(b);
    var a = 1; var b = a++ + ++a; console.log(b);
    var a = 1; var b = a++ + a++; console.log(b);
    var a = 1; var b = ++a + a++; console.log(b);
    总结
    前置++：先加1，后参与运算
    后置++：先参与运算，后加1
    上面两个理解后，下面两个自通
    前置-- ：先减1，后参与运算
    后置-- ：先参与运算，后减1

    NaN判断内容是不是数字，如果不是一个数字和一个数字计算--------结果就是NaN
    isNaN判断这个变量或者这个值是不是数字，不是数字结果为true，是结果为false。

逻辑运算符(布尔运算符)

<  >  >=  <= == != === !==

==与===的区别：==只进行值得比较，===类型和值同时相等，则相等

var result = '55' == 55;  	// true
var result = '55' === 55; 	// false 值相等，类型不相等
var result = 55 === 55; 	// true

赋值运算符

= += -= *= /= %=

例如：
var num = 0;
num += 5;	//相当于  num = num + 5;

运算符的优先级

优先级从高到底
	1. ()  优先级最高
	2. 一元运算符  ++   --   !
	3. 算数运算符  先*  /  %   后 +   -
	4. 关系运算符  >   >=   <   <=
	5. 相等运算符   ==   !=    ===    !==
	6. 逻辑运算符 先&&   后||
	7. 赋值运算符

// 练习1：
4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true
// 练习2：
var num = 10;
5 == num / 2 && (2 + 2 * num).toString() === '22'

6.表达式和语句

表达式

一个表达式可以产生一个值，有可能是运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地方。

语句

语句可以理解为一个行为，循环语句和判断语句就是典型的语句。一个程序有很多个语句组成，一般情况下;分割一个一个的语句

流程控制

程序的三种基本结构

顺序结构

从上到下执行的代码就是顺序结构

程序默认就是由上到下顺序执行的

分支结构

根据不同的情况，执行对应代码

循环结构

循环结构：重复做一件事情

7.分支结构

if语句

语法结构

if (/* 条件表达式 */) {
  // 执行语句
}

if (/* 条件表达式 */){
  // 成立执行语句
} else {
  // 否则执行语句
}

if (/* 条件1 */){
  // 成立执行语句
} else if (/* 条件2 */){
  // 成立执行语句
} else if (/* 条件3 */){
  // 成立执行语句
} else {
  // 最后默认执行语句
}

案例：

求两个数的最大数

判断一个数是偶数还是奇数

分数转换，把百分制转换成ABCDE   <60  E  60-70 D  70-80 C  80-90 B  90 - 100 A

练习：

判断一个年份是闰年还是平年

  闰年：能被4整除，但不能被100整除的年份 或者 能被400整除的年份

判断一个人的年龄是否满18岁(是否成年)

8.三元运算符

表达式1 ? 表达式2 : 表达式3
是对if……else语句的一种简化写法

案例：

是否年满18岁

从两个数中找最大值

9. switch语句

语法格式:

switch (expression) {
  case 常量1:
    语句;
    break;
  case 常量2:
    语句;
    break;
  case 常量3:
    语句;
    break;
  …
  case 常量n:
    语句;
    break;
  default:
    语句;
    break;
}

break可以省略，如果省略，代码会继续执行下一个case
switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换（例如，字符串’10’ 不等于数值 10）
案例：

显示星期几

素质教育（把分数变成ABCDE）千万不要写100个case哟

10.布尔类型的隐式转换

流程控制语句会把后面的值隐式转换成布尔类型

转换为true   非空字符串  非0数字  true 任何对象
转换成false  空字符串  0  false  null  undefined

// 结果是什么？
var a = !!'123';

案例

var message;
// 会自动把message转换成false
if (message) {     
  // todo...
}

11.循环结构

在javascript中，循环语句有三种，while、do…while、for循环。

while语句

// 当循环条件为true时，执行循环体，
// 当循环条件为false时，结束循环。
while (循环条件) {
  //循环体
}

代码示例：

// 计算1-100之间所有数的和
// 初始化变量
var i = 1;
var sum = 0;
// 判断条件
while (i <= 100) {
  // 循环体
  sum += i;
  // 自增
  i++;
}
console.log(sum);

案例：

打印100以内 7的倍数

打印100以内所有偶数

打印100以内所有偶数的和

练习：

打印100以内的奇数

打印100以内的奇数的和

do…while语句

do…while循环和while循环非常像，二者经常可以相互替代，但是do…while的特点是不管条件成不成立，都会执行一次。

基础语法：

do {
  // 循环体;
} while (循环条件);

代码示例：

// 初始化变量
var i = 1;
var sum = 0;
do {
  sum += i;//循环体
  i++;//自增
} while (i <= 100);//循环条件

案例：

求100以内所有3的倍数的和
使用do-while循环：输出询问“我爱你，嫁给我吧？”，选择“你喜欢我吗？(y/n):"，如果输入为y则打印”我们形影不离“，若输入为n,则继续询问

for语句

while和do…while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便。这个是很重要的知识，一定要掌握。

for循环语法：

// for循环的表达式之间用的是;号分隔的，千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
  // 循环体4
}

执行顺序：1243 ---- 243 -----243(直到循环条件变成false)

  1. 初始化表达式
  2. 判断表达式
  3. 自增表达式
  4. 循环体

例子：
达成效果：
在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
//		alert();//弹框
//		console.log();//在控制台显示结果
		//画星星
       //控制行数
		for(var i=0;i<=5;i++)
{   //控制每一行有几个星星
	for(var j=0;j<=i;j++)
	{
		document.write("⭐");//输出星星
	}
	document.write("<br/>");//换行
}

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

案例：

打印1-100之间所有数
求1-100之间所有数的和
求1-100之间所有数的平均值
求1-100之间所有偶数的和
同时求1-100之间所有偶数和奇数的和
打印正方形
// 使用拼字符串的方法的原因
// console.log 输出重复内容的问题
// console.log 默认输出内容介绍后有换行
var start = '';
for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    start += '* ';
  }
  start += '\n';
}
console.log(start);
打印直角三角形
var start = '';
for (var i = 0; i < 10; i++) {
  for (var j = i; j < 10; j++) {
    start += '* ';
  }
  start += '\n';
}
console.log(start);

打印9*9乘法表
var str = '';
for (var i = 1; i <= 9; i++) {
  for (var j = i; j <=9; j++) {
    str += i + ' * ' + j + ' = ' + i * j + '\t';
  }
  str += '\n';
}
console.log(str);

作业：

求1-100之间所有数的乘积
求1-100之间所有奇数的和
计算1-100之间能3整除的数的和
计算1-100之间不能被7整除的数的和
// 讲解思路。如果不会写程序，可以先把数学公式准备好
本金10000元存入银行，年利率是千分之三，每过1年，将本金和利息相加作为新的本金。计算5年后，获得的本金是多少？
有个人想知道，一年之内一对兔子能繁殖多少对？于是就筑了一道围墙把一对兔子关在里面。已知一对兔子每个月可以生一对小兔子，而一对兔子从出生后第3个月起每月生一对小兔子。假如一年内没有发生死亡现象，那么，一对兔子一年内（12个月）能繁殖成多少对？（兔子的规律为数列，1，1，2，3，5，8，13，21）

continue和break

break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）

continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）

例子：

for(var i=0;i<10;i++)
{
    while(true){
    		console.log("yes")
    		break;
    }
}

案例：

求整数1～100的累加值，但要求碰到个位为3的数则停止累加
求整数1～100的累加值，但要求跳过所有个位为3的数

练习：

求1-100之间不能被7整除的整数的和（用continue）

求200-300之间所有的奇数的和（用continue）

求200-300之间第一个能被7整数的数（break）

12.调试

  • 过去调试JavaScript的方式
    • alert()
    • console.log()
  • 断点调试

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。

  • 调试步骤

    浏览器中按F12–>sources–>找到需要调试的文件–>在程序的某一行设置断点

  • 调试中的相关操作

    Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
    F10: 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
    F8跳到下一个断点处，如果后面没有断点了，则程序执行结束。

我以谷歌浏览器为例，展示调试操作。

所需代码：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		//调试：写代码---打开浏览器--F12（开发人员工具）--->Source---双击文件，
		//在某一行代码面前点击一下（出现的东西就是断点）

		var sum=0;
		for(var i=0;i<5;i++){
			sum+=i;//观察一下这个变量的值是多少，或者这行代码执行后
		}
		console.log(sum);
	</script>
</head>
<body>
</body>
</html>

在这里插入图片描述
把鼠标移到“sum”上观察每一次的变化。
tips: 监视变量，不要监视表达式，因为监视了表达式，那么这个表达式也会执行。

  1. 代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试，知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。
  2. 今天学的代码调试非常的简单，只要求同学们记住代码调试的这几个按钮的作用即可，后面还会学到很多的代码调试技巧。

13.数组（重点）

为什么要学习数组

之前学习的数据类型，只能存储一个值(比如：Number/String。我们想存储班级中所有学生的姓名，此时该如何存储？

数组的概念

所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。

数组的定义

数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。

通过构造函数创建数组
语法：

var 数组名=new Array();//new就是定义、创建的意思.Array()是函数。（）里填数组的长度。

var array=new Array();//没有数据，空数组
var arr=new Array(5);//构造函数的方式定义了一个数组，数组中有5个元素，数组长度是5，每个数据是undefined

如果数组中没有数组，但有长度，那么运行后数组的每个值就是undefined

例子：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		var arr=new Array(1,2,3);
		alert(arr);
	</script>
</head>
<body>

</body>
</html>

在这里插入图片描述
函数括号里如果是一个数字，代表长度，如果是多个数字，这个数组的数据就是这些数字，长度也是这些数字。

通过数组字面量创建数组

// 创建一个空数组
var arr1 = []; 
// 创建一个包含3个数值的数组，多个数组项以逗号隔开
var arr2 = [1, 3, 4]; 
// 创建一个包含2个字符串的数组
var arr3 = ['a', 'c']; 

// 可以通过数组的length属性获取数组的长度
console.log(arr3.length);
// 可以设置length属性改变数组中元素的个数
arr3.length = 0;

例子：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
	  var array=[1,2,3];
	  alert(array);

	</script>
</head>
<body>

</body>
</html>

结果和上面一样。

获取数组元素

数组的取值

// 格式：数组名[下标]	下标又称索引
// 功能：获取数组对应下标的那个值，如果下标不存在，则返回undefined。
var arr = ['red',, 'green', 'blue'];
arr[0];	// red
arr[2]; // blue
arr[3]; // 这个数组的最大下标为2,因此返回undefined

例子：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
//		var array=[1,2,3];
//		alert(array);
		var arr=new Array(1,2,3);
		alert('创建的数组为：'+arr);
//数组的编号是从0开始的，第一个数组的编号是0，第二个数组的编号是1，以此类推。
		//访问第二个数组
		alert('第二个数组是：'+arr[1]);
	</script>
</head>
<body>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

显然，字面量的方式更为简单。

注意：数组中存储的数据类型不一定是一样的，可以数字字母汉字混合。但一般设置的时候是相同的。

遍历数组

遍历：遍及所有，对数组的每一个元素都访问一次就叫遍历。

数组遍历的基本语法：

for(var i = 0; i < arr.length; i++) {
	// 数组遍历的固定结构
}

例子：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		var arr=[1,2,3,4,5,6,7,8,9,10]
		//遍历数组
		for(var i=0;i<=arr.length;i++){
			console.log(arr[i]);
		}
	</script>
</head>
<body>

</body>
</html>

在这里插入图片描述

数组反转

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
	//反转数组---把数组中的数据的位置调换
	var array=[1,2,3,4,5];
	//循环的目的是控制交换的次数
	for(var i=0;i<array.length/2;i++){
	//先把第一个元素的值放在第三方变量中
		var temp=array[i]
		array[i]=array[array.length-1-i];
		array[array.length-1-i]=temp;
	}
		alert(array);
	</script>
</head>
<body>

</body>
</html>

在这里插入图片描述

冒泡排序（重点）

冒泡排序：把所有的数据按照一定的顺序进行排列（从小到大、从大到小）
在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		//冒泡排序：把所有的数据按照一定的顺序进行排列（从小到大、从大到小）
		var arr=[1,10,0,23,65,15];
		//循环控制比较的轮数
		for(var i=o;i<arr.length-1;i++){
			//控制每一轮的比较次数
			for(var j=0;j<arr.length-1-i;j++){
				if (arr[j]<arr[j+1]){
					var trmp=arr[j];
					arr[j]=arr[j+1];
					arr[j+1]=temp;
				}
			}
		}
		alert(arr);
	</script>
</head>
<body>

</body>
</html>

在这里插入图片描述

14.总结

本期到此结束，大家要多练习，一起努力进步吧！

灬银瓶丶
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端JavaScript入门学习资源
02-24
前端JavaScript入门学习资源
web前端工程师JavaScript基础入门路径学习专题课程
06-28
第一阶段: JavaScript基础语法 第1课 JavaScript语法 本课程讲解JavaScript的语法、数据类型、基本算数和逻辑运算操作 第2课 JavaScript流程控制语句 掌握JavaScript中条件分支语句和循环语句的使用，用简洁的代码...
求1-100之间所有数字的偶数和
weixin_46686822的博客
03-29 5454
/** * 求1-100之间所有偶数的和 * @author fish * */ public class EvennumberDemo { public static void main(String[] args) { int sum = 0; // for (int i = 0; i <= 100; i++) { // if(i % 2 != 1) // c...
1.求1~100之间所有整数的和与平均值2.求100之间所有偶数的和3.求100以内7的倍数的总和
Yuzai__的博客
04-18 1011
1.求出1~100之间所有整数的和与平均值 public class Lin{ public static void main(String[] args){ fload sum = 0;//求1~100之间所有整数的总和与平均值 for(float i = 1; i <= 100; i++){ sum += i;//结果相加 } System.out.println(sum);//总和
JavaScript的组成
weixin_46087833的博客
09-02 304
JavaScript从基础到高级 一、JavaScript组成 JavaScript是一种基于对象和事件的驱动编程语言。一个完整的javascript应该由核心（ECMAScript)浏览器对象模型(BOM)文档对象模型(DOM)三个不同的部分组成。 - 1.核心(ECMAScript） ECMAScript是一种语法的标准，提供核心的语言功能 ECMAScript与Web浏览器没有依赖关系。ECMA定义的只是这门语言的基础，在此基础上可以构建更完善的脚本语言。我们常见的Web浏览器只是ECMAScript
JavaScript高级知识汇总（高级篇）
热门推荐
ZS74520的博客
09-10 1万+
JavaScript知识总结（高级篇） 1.深入基础 1.1数据类型 1.分类： -基本类型 -String:任意字符串 -Number:任意的数字 -boolean: true/false -undefined:未定义 -null:空 -引用（对象）类型 -Object:任意对象 -Function：一种特别的对象（可以执行） -Array：一种特别的对象（数值下标，内部数据是有序的） 2.判断： -typeof： 可以判断：undefined、数值、字符串、布尔值 不能判断: null与object
javascript 基础到高级笔记
weixin_39304726的博客
12-04 187
1 基本 类型 String Number Boolean undefined null ； 2 对象类型 Object Function Array 3 判断数据类型 typeof判断基本类型 instranceof判断对象类型 4 内存分类 栈：全局变量/局部变量 堆： 对象 **5 this是什么** this的值是调用函数的当前对象 ...
前端学习，从入门到精通，进阶好教程
08-31
前端学习从入门到精通，需要掌握以下内容12： 入门阶段： HTML+CSS基础：掌握HTML的标签使用、排版技巧、CSS的布局定位、样式美化、浏览器兼容性。 JavaScript基础：掌握JS的基本语法、条件、语句、循环等，学会...
前端，javascript，js高级语法学习
06-04
前端，javascript，js高级语法学习
前端javascript入门学习思维导入
06-21
适合前端小白学习的思维导图，可以根据思维导图种的内容，自定义适合自己的学习路线
2019最新web前端学习路线：前端从初级入门到入坟到高级进阶
javajavajava
09-10 1018
2019最新web前端学习路线：从初级入门到入坟到高级进阶 我的前端学习路线-从初级入门到高级架构 初中级阶段 一、前端基础阶段 HTML CSS JavaScript DOM BOM 二、前端中级阶段 HTML5 CSS3 bootstarp Canvas JQuery 三、后台技术阶段 Node.js MongoDB Koa EJS 四、前后端交互 ...
JavaScript基础与高级
Wsl_Cn的博客
06-15 653
JavaScript_基础 网页中个技术的作用 技术 作用 HTML 创建网页的结构 CSS 页面的美化 JavaScript 用于网页的交互，让网页变得更加生动，提高用户的体验 JavaScript的两种引入方式 语言组成 组成部分 作用 ECMA Script 所有脚本语言规范，构成了JavaScript语法基础 BOM Browser Object Model 浏览器对象模型，用来操作浏览器中各种对象 DOM Document Object Mode
javascript基础
weixin_44593697的博客
04-30 207
javascript和DOM 1.如果script标签引入的是外部js文件，那么这对标签中不要引入任何js代码。如果要写，重新写一对script标签，在里面写代码。 2.第一对script标签中有错误，那么不会影响后面script标签中代码的执行。script标签一般放在body标签的后面（body中的最后） 3.### 变量的命名规则和规范 规则 - 必须遵守的，不遵守会报错 由字母、数...
前端学习从入门到高级全程记录之47 （结束才是真正的开始）
zhangbobo1997的博客
08-18 233
这只是一个新的开始 从去年2019年7月到现在的2020年8月，整整一年的前端学习在今天就正式结束了，因为实习、上课、毕业设计等等的事情，期间学习也断过，但好在坚持了下来。如果你学过之前所有的博客内容，那么恭喜你，你掌握了最基本的前端内容！ 没错，是“最基本”的内容！如果你想靠之前这些找到一份满意的工作的话是非常困难的。你还需要学习各种前端框架：react、vue等等，以及这些框架衍生出的各种技术。这些技术抽象难懂，所以我们到现在为止只是翻越了一个小山头，前面还有一个直插云霄的巨峰在等着我们。 ...
javascript从入门到高级，每天不停更新知识点
qq_44890362的博客
04-16 136
javascript从入门到高级，每天不停更新知识点 1.首先让我们来了解js的组成： JS= ECMAScript + DOM + BOM ECMAScript：javascript语法 DOM：页面文档对象模型 BOM：浏览器对象模型 2.javascript 一般有三种书写形式 2.1 行内式 <input type="button" value="中原才子" onclick="alert('您真棒！')" > 2.2 内嵌式 可以写在head标签里面或者body标签里面 <h
JavaScript从初级往高级走系列————Virtual Dom
FinGet的博客
11-28 306
原文博客地址：https://finget.github.io/2018/05/22/virtualDom/ 什么是虚拟DOM 用JS模拟DOM结构 DOM变化的对比，放在JS层来做（图灵完备语言） 提高重绘性能 重绘和回流 页面渲染过程： 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。 当render t...
javascript从入门到高级，每天不停更新知识点（9天
m0_71102752的博客
05-24 185
1.0 math数学对象 不是一个构造函数，所以不需要new调用，直接使用里面的属性和方法就行。 2.封装自己的数学对象： var myMath = { PI:3.14, max:function(){ var  max = arguments[0]; for (let i = 0; i < arguments.length; i++) { if (max<arguments[i]) { max = arguments[i]; } } return max; }, min:functi
阿里前端开发学习路线：CSS 快速掌握：共49课时（转载链接）
Kenny C
01-07 232
视频学习链接 视频文档链接 个人觉得要系统性的学习一门技术还是应该全面了解相关技术，但是要分清主次，不然太费时间，前端知识目前只作了解，进行快速学习理解。
【JavaScript】JavaScript基础与高级
可愛多的博客
10-17 165
js基础
javascript从入门到精通pdf
最新发布
09-10
它从基础概念开始，逐步深入介绍了JavaScript的各种特性和用法，帮助读者从入门到精通。 这本书首先会介绍JavaScript的发展历史和它在互联网中的作用。然后，它会讲解JavaScript的语法和基本概念，包括变量、数据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值