JavaScript

最新推荐文章于 2024-09-11 15:33:18 发布

weixin_43853142

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量177

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_43853142/article/details/126419056

版权

JavaScript简介

JavaScript通常简称js，由网景（netScape）公司退出的脚本语言，是一门轻量型、弱类型、面向对象的解释型语言。

弱类型：没有数据类型的限制、变量可以不用定义就使用。
解释型：无需编译，通过编译器解释运行。浏览器就是一个js的解释器。
脚本script：一系列指令。

JS的作用

HTML用于定义页面的内容。
CSS用于控制HTML元素的外观和样式。
JS用于控制HTML元素的行为。
HTML+CSS+JS就是前端的三要素。

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

JS写在哪里

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

<button onclick="alert('hello')">点击后执行</button>

2. 写在script标签中

script标签通常写在head中或写在body最后

<body>
		<script type="text/javascript">
			alert("默认页面加载时执行")
		</script>
	</body>

3. 写在单独的JS文件中

创建 myjs.js 文件，编写js代码

document.write("输出到页面中");

在html导入，一般写在head标签中

<head>
  <script src="js/myjs.js"></script>
</head>

JS输出语句

1. 弹出警告框

alert("hello");

2. 控制台输出

console.log("页面加载时执行");

3. 页面中输出

document.write("页面中输出");

JS的组成

1. ECMAScript

简称ES，是JS的前身，也是JS标椎。
其中要学习JS的核心语法。

2. BOM(Browser Object Model)

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

3. DOM(Document Object Model)

文档对象模型，这里的文档指HTML页面。
可以通过js的DOM控制页面中的元素。

ECMAScript

1. 数据类型

基本类型和引用类型
基本数据类型

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

引用类型
数组、对象、函数等

2. 定义变量

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

** 标识符命名规则**

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

3. 变量的初始化

给变量赋什么值，就是什么类型

//先定义后赋值
var name;
name = "xiaonmng";
//定义时赋值
var age = 20;

运算符

1. 算数运算符

//   + - * / %
var a = 1, b = 2.0, c = "3";
console.log(a + b);  //结果：3.0
console.log(a + c);  //结果 13
//非数字参与运算  非数值指“1a”
console.log(a - c); //结果 -2
console.log(a - "1c");  //结果NaN  not a number
// * /
console.log(a * c); //结果 2
console.log(b / a);  //结果 2
console.log(5 / 2); //结果 2.5
// Math.ceil()向上取整 Math.floor()向下取整
console.log(Math.ceil(5 / 2)); // 3
console.log(Math.floor(5 / 2)); // 2

2. 关系运算符

JS中，0可以表示false，1表示true

// >, >= , <, <= 用法同java
// ==, != 比较字面值
console.log("123"==123);  //ture
// ===, !== 比较数据类型和字面值
console.log("123"===123); //false
//特殊： 0 表示false， 1 表示true
console.log(1 == true);  // true
console.log(true + 1);  // 2

3. 逻辑运算符

&& || ! //同java

4. 复合赋值运算符

+= -= /= *= %= //同java

5. 自增自减运算符

n++ n-- ++n --n等  //同java

6. 条件运算符

表达式1 ? 表达式2 : 表达式3   //同java

7. 运算符优先级

小括号 > 单目运算符(++，-- ，!)> 算数运算符> 关系运算符> 逻辑运算符 > 条件运算符> 复合赋值运算符

数组

一组数据的有序集合。
默认值为undefined，若超出索引，会自动扩容。

1. 数组定义

var a = new Array(10); 
var b = [];
var c = new Array(1,2,3,4,5);
a[0] = 1;
a[1] = "2";
a[3] = true;

console.log(a.length);  //数组长度

2. 数组遍历

//普通for循环,遍历所有
for(var i=0; i<a.length; i++){
  document.write(a[i]);
}
//增强for循环,遍历所有非undefined元素的索引
for(index in a){
  document.write(a[list]);
}

3. 常用方法

方法	作用
pop()	移除并返回最后一个元素
push(“a”)	添加元素到末尾
shift()	移除第一个元素
unshift(“a”)	添加元素到头部
sort()	排序（升序）
slice(start,end)	截取元素，[start,end)
splice(start,length)	删除，从start开始删除length个元素
join(“/”)	每个元素后加字符，拼接为字符串
reverse()	将数组中的元素倒序
every(function)	验证数组中的元素是否都满足指定函数要求
some(function)	检测数组中的是否存在满足指定函数要求的元素

字符串

方法	作用
toLowerCase()	转换为小写
toUpperCase()	转换为大写
trim()	去掉首尾空格
sub()	字符串上标
sup()	字符串下标
substr(start,length)	从start截取长度为length的字符串
substring(start,end)	截取start到end的字符串(左闭右开)
replace(“a”,“b”)	将第一个a换为b
replaceAll(“a”,“b”)	替换所有a

正则表达式

规则	说明	举例
/abc/	匹配指定字符	匹配"abc"整体
/[abc]/	匹配范围字符	匹配"a"或"b"或"c"
/[a-z]/	匹配范围字符	匹配"a"到"z"
/[^a]/	匹配指定字符以外的字符	匹配除"a"以外字符

函数

// 函数的定义方式
// 第一种(常用)
function test01(){
	console.log('第一种方式')
}
// 第一种方式的调用
test01()

//第二种
// function 看作是一种类型
let test02 = function(){
	console.log('第二种方式')
}
// 第二种方式的调用
test02()