js第一章总结

云间嬉游

已于 2022-02-17 20:08:13 修改

阅读量944

点赞数 1

分类专栏：笔记文章标签： javascript 前端开发语言

于 2022-02-12 19:46:54 首次发布

本文链接：https://blog.csdn.net/weixin_45827579/article/details/122896397

版权

笔记专栏收录该内容

7 篇文章 1 订阅

订阅专栏

介绍JavaScript

什么是 JavaScript

JavaScript是一种描述性语言，也是一种基于对象（Object）和事件驱动（EventDriven）的语言，并且具有安全性脚本语言。同时js也是一种弱类型脚本语言，所以非常简单好上手。

JavaScript特点

JavaScript主要用来在html页面中添加交互行为
JavaScript是一种脚本语言，语法和java相似
JavaScript一般用来编写客户端的脚本
JavaScript是一种解释性语言，边执行边解释

JavaScript历史发展

1992年，Nombas公司-----Cmm嵌入式脚本语言
Nombas公司-----------LiveScript脚本语言，1995年更名JavaScript
1997年，JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会(ECMA)，其来源是由来自Netscape，Sun，微软，Borland等公司的程序员组成。最终 ECMA-262 标准应运而生，该标准定义了称为 ECMAScript 的脚本语言。次年，国际标准化组织及国际电工委员会(ISO/IEC)也采纳了 ECMAScript 作为标准。

JavaScript 的组成

一个完整的JavaScript是由以下三个不同部分组成的
在这里插入图片描述

ECMAScript 标准：是一种开放、被国际上广为接受的、标准的脚本语言规范，它不与任何具体的浏览器进行绑定，主要描述一下几个部分
浏览器对象模型BOM：浏览器对象模型(Browser Object Model, BOM)，提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与 HTML 的交互。
文档对象模型DOM：文档对象模型(Document Object Model, DOM)，是 HTML 文档对象模型(HTML DOM)定义的一套标准方法，用来访问和操纵 HTML 文档。

JavaScript的基本结构和输出语法

基本结构

<!-- 其中type是script的属性，用于指定文本使用的语言类别，H5不写type属性是可以的，默认情况下是text/javascript -->
	<script type="text/javascript">
	
	</script>

输出语法

页面输出

//页面输出
document.write("你好世界");//可以包含html标签

结果：

例如：包含一个html标签

document.write("<h1>我是标题1</h1>");
document.write("<em>我是倾斜</em>");
document.write("<h1 style='color: #008000;'>我是标题1</h1>");

结果：
在这里插入图片描述
可以发现：包含html标签会按照一条js命令来执行并输出结果，反之，如果不使用script会按照纯文本来执行

控制台输出

//控制台输出
console.log("Hello World");

结果：
在这里插入图片描述

引用 JavaScript 的方式

第一种：内部 JavaScript 文件

简单来说就是直接在html文件中写js

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	</body>
	<script type="text/javascript">
		
	</script>
</html>

第二种：使用外部 JavaScript 文件

显而易见的意思，就是在外部新建一个js文件，然后在html文件中直接引用，推荐在body后面写

<script src="js文件路径" type="text/javascript" charset="utf-8"></script>

第三种：直接在 HTM 标签中

<input type="button" name="btn" value="弹出消息框" onclick='javascript:alert("欢迎你")' />

JavaScript 核心语法

变量的声明和赋值

由于JavaScript 是一种弱类型语言，没有明确的数据类型，所以在声明变量时,不需要
指定变量的类型,变量的类型由赋给变量的值决定。

命名规则：

JavaScript 变量命名与 Java 变量的命名规则相同,即可以由数字、字母,下划线和“$”符号组成，但首字母不能是数字,并且不能使用关键字命名。

声明：

注意：js区分大小写

let i;//第一种
var I;//第二种

赋值：

let i;//第一种
var I;//第二种
i=1;
I='你好';

变量的声明和赋值可以一起操作

let i=1;//第一种
var I='你好';//第二种

可以同时声明多个变量

let i,a,b=1;//第一种
var I,f,j='你好';//第二种

数据类型

数据类型	介绍
Undefined	未定义，变量声明后没有赋值
null	和undefined一样
Number	数值类型，所有的数值不区分整数和小数
string	字符类型，不区分字符和字符串，’'和""是同等效果建议使用单引号
Boolean	布尔类型和之前的一样false和true
Object	对象类型，所有的引用都是对象类型，引用：数组，对象，函数，null（对象类型的值）
NaN	非数字，一般使用与一些方法的返回值，被规定到number类型

获取变量的变量类型
typeof（变量或值）：返回变量中值的数据类型
例如：

let j=1;
let i='你好';
let k;
let o=true;
console.log(typeof(j),typeof(i),typeof(k),typeof(o));

结果：
在这里插入图片描述 JavaScript 语言中的 String 对象也有许多方法用来处理和操作字符串

方法	描述
indexOf(str,index)	查找某个指定的字符串在字符串中首次出现的位置
charAt(index)	返回在指定位置的字符
toLowerCase()	把字符串转化为小写
toUpperCase()	把字符串转化为大写
substring(index1,index2)	返回位于指定索引 index1 和 index2 之间的字符串，并且包括索引 index1 对应的字符，不包括索引 index2 对应的字符
split(str)	将字符串分割为字符串数组

如果还是不懂点击下面的超链接查看具体使用方法
查看string方法案例

数组

语法：
var 数组名称 = new Array(个数);
赋值

var hu=new Array(3);//声明一个数组
hu[0]=1;//赋值
hu[1]=2;
hu[2]=3;
console.log(hu[0],hu[1],hu[2]);//输出

结果：
在这里插入图片描述
注意：
数组下标是从0开始的，并且js的数组长度是可变的

数组的常用属性和方法

属性	描述
length	设置或返回数组中元素的数目
join()	把数组的所有元素放入一个字符串，通过一个分隔符进行分割JavaScript 基础

方法	描述
push()	向数组末尾添加一个或多个元素，并返回新的长度
unshift（）	向数组的开头添加值
pop（）	删除数组中最后一个元素
shift（）	删除开头元素
splice（下标位置，删除个数）	删除指定元素
filter（m => 条件）	获取数组中符合条件的元素
every（m => 条件）	判断是否都符合条件的，是true，否则false
some（m => 条件）	只要有一个满足条件则true 否则false
find（m => 条件）	返回数组中第一个符合条件的值
reverse（）	倒序输出，会改变原数组
sort（）	不建议使用，建议使用冒泡排序

运算符号

类别	运算符号
算术运算符	+ - * / % ++ –
比较运算符	> < >= <= == != === !==
逻辑运算符	与或非
赋值运算符	= += -=

解释：与（&&）或（||）非（！）

==表示等于，===表示恒等，!==表示不恒等，
都是用于比较，但是==用于一般比较，
===用于严格比较，==在比较时可以转换数据类型，===严格比较，
只要数据类型不匹配就返回 false。
例如，“1”== true 返回 true,而“1”===true 返回 false。

逻辑控制语句

条件结构

if结构

if () {
		
} else{
		
}

switch结构

switch (){
	case value:
		break;
	default:
		break;
}

循环结构

for循环

for(初始化;条件;增量或减量){
			
}

while循环

while(条件){
			
}

do-while循环

do{
			
}while(条件)

for-in循环

for(变量 in 对象){

}

5.for-of循环

for(var result of fruit){

}

for-in和for-of区别
for-in:

for(var result in fruit){
	console.log(result + "---" + fruit[result]);//输出result是下标不是内容，想要内容需要数组【result】
}

for-of:

for(var result of fruit){
	console.log(result);//获得的是内容
}

中断循环
break:退出整个循环。
continue:只是退出当前的循环，根据判断条件决定是否进行下一次循环。

注释

单行注释 //
多行注释 /* 内容 */

关键字和保留字

关键字标识了 ECMAScript 语句的开头和结尾，关键字是保留的，不能用作变量名或者函数名

关键字
break	case	catch	continue	default
for	delete	do	else	finally
function	if	in	instanceof	new
with	return	switch	this	throw
try	typeof	var	void	while

保留字在某种意义上是为将来的关键字而保留的单词，因此保留字不能被用作变量名
或函数名

保留字
abstract	boolean	byte	char	class
const	debugger	double	enum	export
extends	final	float	goto	implements
import	int	interface	long	native
package	private	protected	public	short
static	super	synchronized	throws	transient
volatile