华清远见-重庆中心-JAVA前端JavaScript阶段技术总结

最新推荐文章于 2024-06-14 11:01:38 发布

离别丶

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量93

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_56394661/article/details/128395581

版权

JavaScript

JavaScript通常简称为JS，由网景(NetScape)公司推出。

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

弱类型：没有数据类型的限制，变量甚至可以不同定义就能使用。

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

script脚本：按指令顺序执行。

JS的作用

HTML用于定义页面中的内容

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

JS用来操作HTML元素

HTML+CSS+JS组成前端基本三要素。

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

JS写在哪里

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body >

        <!-- 通过提示框输出alert("输出内容") -->
        <button onclick="alert('Hello JS!')">点击1</button>
        <!-- 通过控制台输出console.log("输出内容") -->
        <button onclick="console.log('Hello JS!')">点击2</button>
        <!-- 通过新页面输出document.write("输出内容") -->
        <button onclick="document.write('Hello JS!')">点击3</button>
    </body>
</html>

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

该标签是一个双标签，可以放在页面的任何位置，通常放在head标签中或body标签结束之前

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 可以将js代码写在这里 -->
		<script>
        	//js代码
        </script>
	</head>
	<body >
	
		
		<!-- 建议将js代码写在这里 -->
		<script >
        	//js代码
        </script>
	</body>
	
</html>

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

JS中的输出语句

1.弹警告框

alert(字符串或变量);

2.控制台输出

console.log(字符串或变量);

3.打印在新页面中

document.write(字符串或变量);

JS中的注释

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

JS的组成

1.ECMAScript

简称为ES，是JS的标准，也是JS的核心语法。

包含了数据类型、定义变量、流程控制语句等语法内容。

2.BOM

浏览器对象模型

3.DOM

文档对象模型

ECMAScript核心语法

数据类型

原始类型

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

引用类型

如对象、数组、函数等都是引用类型

定义变量

var/let 变量名;
var name;
var age;
let sex;

标识符的命名规则

由字母、数字、下划线和$符号组成
不能以数字开头
不能使用js中的关键字

变量的初始化

var name;
name = "Tom";
var age = 22;
//可以不用var定义，但不建议
sex = "男";
//都可以正常输出
console.log("name:" + name + ",age:" + age + ",sex:" + sex);

运算符

js中的boolean类型，0可以表示false，非0可以表示true。

默认true为1，所以可以用true或false当做数字来运算。

算术

+ - * / %

+ 两端如果有一端是字符串，作为拼接使用。
+ 两端如果都是数值，作为相加使用。

除+外，其余符号都可以计算字符串。

关系

> < >= <= 
用法同java，结果为boolean
==
比较值是否相同，不比较数据类型，如"123"==123结果为true
===
比较值和数据类型是否相同，如"123"===123结果为false
!=
比较值是否不同，如"123"!=123结果为false
!==
比较值和数据类型是否不同，如"123"!==123结果为true

逻辑
```
&& || !
用法同java
```

赋值和复合赋值

= += -= *= /= %=

a*=b+c相当于a=a*(b+c)
符号两端当做整体运算后赋值给符号左侧变量

自增自减

++ --
符号在前，先+1或-1后使用
符号在后，先使用后+1或-1

如果独立成行，都为+1或-1
var i=10;
var res=i-- - --i;
//res为10-8=2,i最终为8

条件

表达式1?表达式2:表达式3
判断表达式1，结果为true执行表达式2，结果为false执行表达式3

条件语句

if语句

js中的if语句条件可以是boolean值也可以是一个数字(0false,非0true)

//单分支
if(){
   
}
//双分支
if(){
   
}else{
    
}
//多分支
if(){

}else if(){

}
//嵌套
if(){
   if(){}
}

多分支if语句，如果有一个条件满足则不再判断后续的条件，所以将范围最小的情况写在最前

switch语句

//可以是任意类型
var op;
switch(op){
    case "a":
        break;
    case 123:
        break;
    case true:
        break;
    default:    
}

与java中不同的是，小括号中没有数据类型的限制，不同的case后也可以写不同类型的数据。

没有break，会继续执行后续case后的内容，直到break或没有代码，如果没有任何case满足，执行default。

循环

while

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

先判断后执行，有可能一次都不执行。

do-while

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

先执行一次，再判断，至少执行一次。

for

for(定义循环变量;判断循环条件;更新循环变量){
    循环体
}

continue和break

continue停止本次循环，执行下一次循环。

break停止所有循环。

JS中的本地对象

数组Array

JS中的数组类似于Java中的ArrayList，

可以保存不同类型的数据，数组大小可变。

定义数组

var 数组名 = new Array();
var 数组名 = [];

数组使用

//定义数组
// 1.默认没有给某个位置赋值时，是undefined
// 2.最大下标决定了数组长度   
// 3.可以保存不同类型的数据
var list1 = new Array();
list1[0] = 123;
list1[3] = "hello";
list1[10] = true;

console.log(list1[3]);

数组遍历

// length属性可以获取数组长度
// 循环所有下标，没有赋值元素的输出undefined
for (var i = 0; i < list1.length; i++) {
    console.log(list1[i]);
}

// 增强for循环，获取保存了数据的下标
for(var index in list1){
    // 通过下标获取元素
    console.log(list1[index]);
}

数组初始化

var 数组名 = new Array(元素1,元素2...);
var 数组名 = [元素1,元素2...];

常用方法

方法名	作用	返回值
sort()	将数组中的元素进行升序排序	排序后的数组
reverse()	将数组中的元素倒序保存	倒序后的数组
pop()	移除数组中的最后一个元素	被移除的元素
push(元素)	添加元素到数组末尾	最新的数组长度
shift()	移除数组中的第一个元素	被移除的元素
unshift(元素)	添加元素到数组开头	最新的数组长度
fill(元素)	使用指定元素填充数组	填充后的数组
splice(index)	从指定索引开始分割数组，方法调用后，数组为剩余元素的数组	截取到的元素集合
splice(index,length)	从指定索引开始截取指定长度的数组，方法调用后，数组为剩余元素的数组	截取到的元素集合
以上方法在调用后，都会影响原数组

方法名	作用	返回值
indexOf(元素)	得到某个元素第一次出现的索引	索引
lastIndexOf(元素)	得到某个元素最后一次出现的索引	索引
concat(元素)	将指定元素添加到元素数组末尾	添加元素后的数组
join(字符)	使用指定符号将数组元素拼接为一个字符串	拼接后的字符串
slice(start,end)	截取指定[start,end)区间内的元素	截取后的数组
slice(index)	截取从index开始至末尾的元素	截取后的数组
map(方法名)	让数组中的元素都执行指定方法	执行方法后的新数组
以上方法在调用后，都不会影响原数组

日期Date

创建Date对象

var now = new Date();

常用方法

// 获取当前日期时间
var now = new Date();

// 年
document.write(now.getFullYear()+"<br>");
// 0-11表示1-12月
document.write(now.getMonth()+"<br>");
// 日期
document.write(now.getDate()+"<br>");
// 一周中的第几天 0-6表示周天到周六
document.write(now.getDay()+"<br>");
document.write(now.getHours()+"<br>");
document.write(now.getMinutes()+"<br>");
document.write(now.getSeconds()+"<br>");
// 获取从1970/1/1起经过的毫秒数
document.write(now.getTime()+"<br>");
//以上方法都有对应的set方法用于设置指定值

// 获取日期时间字符串
document.write(now.toString()+"<br>");
// 获取日期部分字符串
document.write(now.toDateString()+"<br>");
// 获取时间部分字符串
document.write(now.toTimeString()+"<br>");
// 以当前环境输出日期时间字符串
document.write(now.toLocaleString()+"<br>");
// 以当前环境输出日期字符串
document.write(now.toLocaleDateString()+"<br>");
// 以当前环境输出时间字符串
document.write(now.toLocaleTimeString()+"<br>");