JavaScript

最新推荐文章于 2024-03-04 01:36:32 发布

ldd072022

最新推荐文章于 2024-03-04 01:36:32 发布

阅读量323

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/ldd072022/article/details/126610118

版权

JavaScript

JavaScript通常简称为JS，由网景(netScape)公司推出脚本语言。

是一门轻量级、弱类型、面向对象的解释型脚本语言。

弱类型：没有数据类型的限制、变量可以不用定义就使用

解释型：无需编译，通过解释器解释运行。浏览器就是一个JS的解释器。

脚本script：一系列指令。

JS的作用

HTML用于定义页面中的内容。

CSS用于控制HTML元素的外观和样式。

JS用于控制HTML元素的行为。

HTML+CSS+JS就是前端的三要素。

可以在页面中动态嵌入HTML元素
可以操作浏览器
与用户进行数据交互

…

JS写在哪里

1.写在某个标签的事件中

事件，如鼠标单击事件onclick，鼠标移入事件onmouseenter等

<button onclick="alert('hello js!')">点击按钮</button>

通常用于调用函数。

2.写在`<script></script>`标签中

该标签可以放在页面的任意位置，通常放在head中或body结束之前。

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--放在head中-->
		<script></script>
	</head>
	<body>
		<!-- 放在body结束前 -->
		<script>
			// js代码，默认页面加载时就会执行
			console.log("在控制台中输出");
		</script>
	</body>
</html>

3.将js写到一个独立的.js文件中，再通过`<script>`标签导入

新建一个.js文件，在其中编写js代码

在页面中

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <script src=".js文件的路径" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
	</body>
</html>

JS中的输出语句

1.弹出警告框

alert("hello");

2.控制台输出

console.log("hello")

3.页面中输出

document.write("hello");

JS中的注释

//单行注释
/*多行注释*/

JS的组成

1.ECMAScript

简称ES，是JS的前身，也是JS的标准。

其中要学习JS的核心语法，如数据类型、定义变量、控制语句等。

2.BOM(Browser Object Model)

浏览器对象模型，可以通过js的BOM控制浏览器的行为。

3.DOM(Document Object Model)

文档对象模型，这里的文档指HTML页面。

可以通过js的DOM控制页面中的元素。

ECMAScript

数据类型

基本类型和引用类型。

由于JS是弱类型语言，定义变量时不需要指定数据类型，所以这些类型作为了解既可。

基本类型

基本类型	说明
数值型number	整数、小数都称为数值型
字符串string	用引号引起来的都是字符串
布尔型boolean	true/false
空null	某个引用类型变量通过null设置为空
未定义undefined	当某个变量没有声明或没有值时

引用类型

数组、对象、函数等都是引用类型，也称为本地对象

JS中定义变量

var 变量名;  
//或
let 变量名;  

var stu_name,age;
let sex;

JS中标识符的命名规则

标识符：变量名、方法名、类名统称为标识符

由字母、数字、下划线和$符号组成
不能以数字开头
不能使用JS中的关键字
命名时尽量使用单词或拼音，达到"见名知意"

变量的初始化

与java不同的是，JS中给某个变量赋什么值，它就是什么类型。

//先定义后赋值
var name;
name="小米";
//定义的同时赋值
var age=20,sex="男";

运算符

JS中的true可以用1表示，false可以用0表示。

算术运算符

//+ - * / %

var a = 5,
    b = 3.2;
//+两端都是数值当做相加，有一端为字符串当做拼接 
console.log(a + b);//8.2(number)
console.log("" + a + b);//53.2
console.log(a + b + "");//8.2(string)
console.log("xxx" + (a + b) + "xxx");xxx8.2xxx
// - * / % 必须是两个数值之间进行运算，如果有非数字参与运算，结果为NaN
//"2"可以参与运算，"b"不可以  
//除+外，字符串类型的数字可以运算
console.log(a / "a"); //NaN  not a number
console.log("5"/ "2");//2.5
// 除法正常显示结果
console.log(5 / 2);//2.5
// a%b  a<b  结果为a
console.log(4 % 7);//4

关系运算符

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

//> < >= <=用法同java
//js中的==表示判断两个数据字面量是否相同，不会比较数据类型
console.log("123" == 123);//true
//js中的===和!==表示判断两个数据的数据类型和字面量是否相同
console.log("123" === 123);//false
console.log("123" === "123");//true
console.log("123" !== 123);//true

逻辑运算符

//&& || !
//用法同java
//&&如果有一个为false,结果就为false,只有都为true,结果才为true。
//||如果有一个为true,结果就为true,只有都为false,结果才为false。
//!将原结果取反

赋值/复合赋值运算符

//= += -= *= /= %=
//a+=b表示a=a+b;
var a=3,b=4;
//a+=b;
//console.log(a);//7

//将符号两端的数据进行运算后，赋值给符号左侧的变量中
//a*=b+c相当于a=a*(b+c)
a*=b+5;//a=3*(4+5)
console.log(a);//27

自增自减运算符

//++ --
//a++表示a=a+1或a+=1
//--a表示a=a-1或a-=1

//如果符号在后，先使用后加减
//如果符号在前，先加减后使用
var n = 10;
// n++;
// ++n;
// console.log(++n);//11
// console.log(n);//11
// console.log(n++ + n); //10 + 11
// console.log(++n + n); //11 + 11
console.log(n++ + ++n); //10 + 12
console.log(n-- - --n); //12-10

条件运算符

//表达式一?表达式二:表达式三
//执行表达式一，如果为true,执行表达式二，如果为false，执行表达式三
//相当于双分支if语句if(表达式一){表达式二}else{表达式三}

运算符的优先级

小括号>>>单目运算符(++ – !)>>>算术运算符>>>关系运算符>>>逻辑运算符>>>条件运算符>>>复合赋值/赋值运算符

流程控制语句

条件语句

单分支if
```
if(布尔值){
   
}
```
双分支
```
if(布尔值){

}else{
    
}
```
多分支

程序从上往下执行，如果有某个if满足条件，则不再判断后续的if
```
if(布尔值){
   
}else if(布尔值){

}else{
    
}
```

if嵌套

if(布尔值){
    if(布尔值){}
}else{
    if(布尔值){}
}

switch

js中的switch语句的小括号可以判断任意类型的变量，case后数据的类型也可以不同。其它特性同java

switch(变量){
    case 可能的情况:
        break;
    case 可能的情况:
        break;
    case 可能的情况:
        break;
    default:
        没有任何case匹配时
        break;
}

如果条件能一一例举出来，使用switch语句，语法更为简洁。

如果条件是范围，只能使用if语句。

循环语句

while

while(循环条件){
    循环体;
}
如果条件不成立则会停止循环。所以while循环有可能一次都不执行。

do-while

do{
    循环体;
}while(循环条件);
先执行一次后再判断是否循环。所以do-while循环至少执行一次。

for

for(初始化循环变量;循环条件;更新循环变量){
    循环体;
}

break和continue

continue表示停止本次循环，直接执行下一次循环

循环中遇到continue，不再执行后续代码，直接进入下次循环
```
var i=0;
while(i++<=100){
    if(i%2==0){
        continue;
    }
    console.log(i);
}
```

//打印0~100以内的奇数


- break表示停止整个循环

```js
var i=0;
while(true){
    if(i++==50){
        break;
    }
    console.log(i);
}
//打印0~49

数组

一组有序的数据集合，可以保存不同类型的数据，数组大小可变。

类似于Java中的ArrayList。以对象的形式存在。

可以保存不同类型的数据
可以改变数组大小
数组中的元素默认为undefined

定义数组

//创建一个指定大小的数组：var 数组名 = new Array(数组大小);
//这里的数组大小可以省略
var list1 = new Array(10);
//创建一个空数组：var list2 = [];
var list2 = [];
//创建一个拥有初始元素的数组
var list3 = new Array(元素1,元素2...);
var list4 = [元素1,元素2...];

数组的赋值和取值

赋值：数组名[索引]=值;
取值：var obj=数组名[索引];

遍历数组

普通for循环

遍历数组中的所有元素，包含undefined

for(var i=0;i<数组.length;i++){
    var obj=数组[i];
}
var list=new Array(5,"hello",true);
list[10]="xxx";
//这时会打印11个元素，没有赋值的元素输出undefined
for(var i=0;i<list.length;i++){
	console.log(list[i]);    
}

“增强for循环”

遍历数组中的非undefined元素

for(索引 in 数组名){
    var obj= 数组[索引];
}
var list=new Array(5,"hello",true);
list[10]="xxx";
//这时会打印4个实际存在的元素
for(index in list){
	console.log(list[index]);    
}

冒泡排序

//外层循环比较的轮数
for (var i = 1; i <= list.length - 1; i++) {
    //内层循环每轮比较的次数
    for (var j = 1; j <= list.length - i; j++) {
        //如果不满足排序要求。升序用>，降序用<
        if (list[j - 1] > list[j]) {
            //交换位置
            var temp = list[j - 1];
            list[j - 1] = list[j];
            list[j] = temp;
        }
    }
}

常用函数

函数	作用
pop()	移除最后一个元素
push(object)	添加元素到末尾
shift()	移除第一个元素
unshift(object)	添加元素到头部
sort() /sort(function)	无参表示将元素视为string，按第一个字符的ascii码升序排序。有参时参数为指定的排序方式。
every(function)	验证数组中的元素是否都满足指定函数的要求
some(function)	检测数组中是否存在满足指定函数要求的元素
indexOf(object)/lastIndexOf(object)	得到指定元素第一次/最后一次出现的索引
splice(start,length)	从start开始截取length个元素
join(string)	使用指定的字符将所有元素拼接成一个整体字符串
reverse()	将数组中的元素倒序

Math

是一个包含了很多处理数学相关问题的对象。

如使用π、计算三角函数等方法。这些属性和方法直接通过Math调用。

Math对象的常用函数

常用属性和函数	作用
Math.PI	得到圆周率
Math.E	得到自然常数
Math.abs(num)	得到num的绝对值
Math.pow(a,b)	得到a的b次幂
Math.max(a,b)	得到a和b之间的最大值
Math.sqrt(num)	得到num的平方根
Math.cbrt(num)	得到num的立方根
Math.ceil(num)	向上取整
Math.floor(num)	向下取整
Math.round(num)	四舍五入
Math.random()	得到[0,1)之间的随机数

得到[min,max)区间内的随机整数：

var num = Math.floor(Math.random() * Math.abs(max - min) + Math.min(max,min));

Date

用于表示日期时间的一个对象。

通过new关键字创建Date对象

var now = new Date();//创建当前日期时间对应的对象

Date对象的常用函数

常用函数	作用
toLocaleString()	将日期时间转换为本地形式的字符串
toLocaleDateString()	将日期转换为本地形式的字符串
toLocaleTimeString()	将时间转换为本地形式的字符串
get/setFullYear()	获取/设置年份
get/setMonth()	获取/设置月份(0_11表示112月)
get/setDate()	获取/设置日期
get/setDay()	获取/设置星期(0~6表示周天到周六)
get/setHours()	获取/设置小时
get/setMinutes()	获取/设置分钟
get/setSeconds()	获取/设置秒
get/setTime()	获取/设置时间戳(1970年1月1日至指定时间经过了多少毫秒)

字符串

JS中的字符串实际是一个字符数组，可以通过下标获取指定索引上的字符。

var str="hello world";
//可以直接将字符串视为数组使用
console.log(str[0]);

字符串常用函数

常用函数	作用
toUpperCase()/toLowerCase()	转换为大写/小写
trim()	去掉首尾空格
sub()/sup()	文字下标/上标
charAt(index)	得到index索引对应的字符
indexOf(string)/lastIndexOf(string)	得到string第一次/最后一次出现的索引，如果不存在，返回-1
substr(index)/substring(index)	从下标index开始截取至字符串末尾
substr(start,length)	从下标start开始截取length个字符
substring(from,to)	截取[from,to)区间内的字符
split(string)	根据string切分字符串，得到字符串数组
replace(旧字符,新字符)	替换满足要求的第一个字符串
replaceAll(旧字符,新字符)	替换满足要求的所有字符串
replace(正则表达式,新字符)	按正则表达式替换

正则表达式

一套自定义规则。用于检索、修改满足规则的字符串。

//创建一个正则表达式
var reg=/规则/;
//reg.test(参数)//验证参数是否满足正则表达式的规则

规则	说明	举例
/a/	匹配指定字符	匹配字母"a"
/abc/	匹配指定字符	匹配字符"abc"整体
/[abc]/	匹配指定范围内的字符	匹配"a"或"b"或"c"
/[a-z]/	匹配指定范围内的字符	匹配所有的小写字母
`/[^a]/`	匹配除指定字符之外的字符	匹配除字母"a"以外的字符
`/[^0-9]/`	匹配除指定数字之外的字符	匹配非数字
/\d/	匹配数字	匹配0-9
/\D/	匹配非数字	匹配除0-9以外的字符
/\w/	匹配字母、数字和下划线	相当于[a-zA-Z0-9_]
/\W/	匹配非字母、数字和下划线	相当于`[^a-zA-Z0-9_]`
/\s/	匹配空格
/\S/	匹配非空格

规则	说明	举例
/q{2}/	匹配2个指定字符	匹配qq
/q{2,5}/	匹配2-5个指定字符	匹配2个、3个、4个或5个q
/q{2,}/	匹配至少2个指定字符
/q+/	匹配至少1个指定字符	相当于q{1,}
/q?/	匹配0个或1个指定字符	相当于q{0,1}
/q*/	匹配0个或多个指定字符	相当于q{0,}
^	从头开始匹配
$	匹配到结尾
g	全局匹配
i	忽略大小写匹配

QQ 邮箱的正则表达式

www.可有可无
qq号码不能0开头，5-10位
@qq.com必须存在
全局忽略大小写[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hk0Q2hr3-1661855505815)(C:\Users\Administrator\Desktop\JavaScript.assets\image-20220822180635157.png)]

作业

老和尚1人吃3个馒头，青年和尚1人吃5个馒头，小和尚3个人吃1个馒头。

有100个和尚吃100个馒头，例举出所有人数可能的情况

如：小和尚75人老和尚25人青年和尚0人
页面中打印菱形
打印10000以内的完数

完数：这个数的除自身外的因子和等于它本身

因子：能被它整除的数

6的非自身因子：1 + 2 +3
模拟双色球彩票开奖结果

从[1,33]中选6个不重复的号码，作为红色球号码

从[1,16]中选1个号码，作为蓝色球号码

最终打印：红色球：[2,9,16,20,26,30]，蓝色球：10
打印中文日期如"2022/8/22"打印为"二零二二年八月二十二日"

list:[“零”,“一”,“二”…]

2 0 2 2 list[2] list[0] list[2] list[2]
```
         |
```

| g | 全局匹配 | |
| i | 忽略大小写匹配 | |

QQ 邮箱的正则表达式

www.可有可无
qq号码不能0开头，5-10位
@qq.com必须存在
全局忽略大小写[外链图片转存中…(img-Hk0Q2hr3-1661855505815)]

作业

老和尚1人吃3个馒头，青年和尚1人吃5个馒头，小和尚3个人吃1个馒头。

有100个和尚吃100个馒头，例举出所有人数可能的情况

如：小和尚75人老和尚25人青年和尚0人
页面中打印菱形
打印10000以内的完数

完数：这个数的除自身外的因子和等于它本身

因子：能被它整除的数

6的非自身因子：1 + 2 +3
模拟双色球彩票开奖结果

从[1,33]中选6个不重复的号码，作为红色球号码

从[1,16]中选1个号码，作为蓝色球号码

最终打印：红色球：[2,9,16,20,26,30]，蓝色球：10
打印中文日期如"2022/8/22"打印为"二零二二年八月二十二日"

list:[“零”,“一”,“二”…]

2 0 2 2 list[2] list[0] list[2] list[2]