基础知识 | js基础

已于 2023-10-15 15:57:32 修改
阅读量982 收藏 5
点赞数
分类专栏： 详细知识 文章标签： javascript
于 2022-06-21 21:37:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a123pplequeen/article/details/125397846
版权
这篇博客详细介绍了JavaScript的基础知识，包括编程语言概念、计算机组成、JavaScript的执行、数据类型、变量、运算符、流程控制和数组等内容。讲解了JavaScript的三种书写位置、变量的声明和初始化、数据类型的转换、字符串和数字的处理、逻辑运算符以及循环结构的使用。此外，还讨论了数组的创建和访问，以及断点调试等开发实践。
摘要由CSDN通过智能技术生成

 js需知知识

编程语言

编程：让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程

计算机程序：计算机（任何能执行代码的设备）所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令

计算机语言：人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介

计算机语言大概可以分为机器语言、汇编语言、高级语言三大类。

计算机最终执行的都是机器语言，它由0和1组成的二进制数，二进制是计算机语言的基础

编程语言

通过类似于人类语言的语言来控制计算机，让计算机为我们做事，这种语言就是编程语言

编程语言是用来控制计算机的一系列指令，它由固定的格式和词汇，必须遵守

如今通用的编程语言有两种形式:汇编语言和高级语言

汇编语言和机器语言实质相同，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆。

高级语言主要是相对于低级语言而言，它并不是特质某一种具体的语言，而是包括了很多编程语言，常用的有C语言，C+语言、java、C#、Python、PHP、Javascript、Objective-C、Swift等。

翻译器

高级语言所编制的程序不能直接被计算机识别，必须经过转换才能被执行，因此，需要翻译器

翻译器可以将我们所编写的源代码转换为机器语言，这也被称为二进制话，记住1和0.

编程语言和标记语言的区别

编程语言有很强的逻辑和行为能力，在编程语言里，你会看到很多有很多if else for while 等具有逻辑性和行为能力的指令，这是主动的。

标记语言：不用于向计算机发出指令，常用于格式化和链接，标记语言的存在是用来读取的，他是被动的

计算机的组成

计算机是由硬件和软件组成的

硬件包括输入设备（鼠标、键盘、手写板、摄像头等）输出设备（显示器、打印机、投影仪等）cpu(负责处理数据和运算）、硬盘、内存（它们两负责存出数据。硬盘永久存储数据，内存暂时存储数据）

软件分为系统软件（windows、Linux、macOS）应用软件（qq、vscode、微博）

数据存储 

计算机内部使用二进制0和1来表示数据

所以数据，包括文件、图片等最终都是以二进制数据的形式存放在硬盘中的

所以程序，包括操作系统，本质都是各种数据，也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件，其实就是把程序软件复制到硬盘中

数据存储单位

bit<byte<kb<GB<TB<...

位 bit 1bit可以保存一个0或者1 （最小的存储单位）

字节 Byte : 1B = 8b

千字节 KB : 1KB = 1024 B

兆字节 MB : 1MB = 1024 KB

吉字节 GB : 1GB = 1024MB

太字节 TB : 1TB = 1024GB

...

程序运行（硬盘——内存条——cpu）

 打开某个程序时，先从硬盘中把程序的代码加载到内存中

cpu执行内存中的代码

注意：要内存的一个重要原因，是因为cpu运行太快了，如果只从硬盘中读数据，会浪费cpu性能，所有，才使用速度更快的内存来保存运行时的数据（内存是电，硬盘是机械）

js

js历史

BrendanEich 在1995年利用10天完成Javascript设计.

网景公司最初命名为LiveScript,后来在与Sun合作之后将其改名为Javascritp

js是什么 

js是世界上最流行的语言之一，是一种运行在客户端的脚本语言

脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行

现在也可以基于node.js技术进行服务端编程

js作用

表单动态验证（密码强度检测）--js产生最初的目的

网页特效

服务端开发(Node.js)

桌面程序(Electron)

App(Cordova)

控制硬件-物联网（Ruff）

游戏开发（cocos2d-js）

html、css 标记语言 ——描述类语言 

js 脚本语言——编程类语言

浏览器执行js

浏览器分为两部分，渲染引擎和js引擎

渲染引擎：用来解析html/css，俗称内核，比如chrome浏览器的blink

js引擎：也叫js解释器，用来读取网页中的js代码，对其处理后运行，比如chrome浏览器的v8

浏览器本身并不会执行代码，而是通过内置js引擎来执行js代码。js引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所有js语言归为脚本语言，会逐行解释执行

js的组成

jsvascript由ECMAScript（js基本语法）、DOM（页面文档对象模型）、BOM(浏览器对象模型)组成

ECMAScript是由ECMA国际进行到的标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为js或jscript，但实际上后两者是ECMAScript语言的实现和扩展

javaScript网景公司

jscript 微软公司

ECMAScript:ECMAScript规定了js的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套js语法工业标准。

文档对象模型dom,是w3c组织推荐的处理可扩展标记语言的标准编程接口，通过Dom提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

浏览器对象模型bom,提供独立于内容、可以与浏览器窗口进行互动的对象结构，通过bom可以操作浏览器窗口，比如弹出框、控制浏览器调整、获取分辨率等

js三种书写位置

js有三种书写位置，分别为行内、内嵌和外部

行内式

可以将单行js代码写在html标签的事件书写中（以on开头的属性），比如onclick

注意单双引号的使用：在html中我们推荐使用双引号，js中我们推荐使用单引号

不推荐使用——可读性差，在html中编写js大量代码时，不方便阅读，引号易错，引号多层嵌套匹配时，非常容易弄混

特殊情况下使用

内嵌

可以将多行js代码写到script标签中

内嵌js是学习时常用的方式

外部

利用html页面代码结构化，把大段js代码独立到html页面之外，既美观，也方便文件级别的复用

引用外部js文件的script标签中间不可以写代码

适合于js代码量比较大的情况

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 行内式的js 直接写到元素的内部 -->
	    <input type="button" value="唐伯虎" onclick="alert('秋香')">
		<script>	
		// 内嵌式的js
		alert("沙漠骆驼");
		</script>	
		<!-- 外部js -->
		<script src="my.js"></script>
		</body>
</html>

js注释

单行注释//      ctrl+/    ctrl+?

多行注释/*   */      shift+alt +a

vs中修改多行注释的快捷键 ctrl+shift+/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		// 单行注释
        // console.log("你好");
		
		// 多行注释
		/*
		  console.log("吃饭");
		  console.log("洗澡");
		  console.log("沐浴");
	     */
		</script>		
		</body>
</html>

js输出输入语句

alert 浏览器弹出警示框

console.log 浏览器控制台打印输出信息

prompt 浏览器弹出输入框，用户可以输入

变量

变量就是用于存放数据的容器

变量本质是程序在内存中申请的一块用来存放数据的空间

 变量的使用

1.用var 声明变量    var（variable）js关键字，声明变量后,计算机会自动分配内存空间，可以通过变量名来访问内存中分配的空间

2.赋值  把值存入到变量中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 用var声明了一个变量age
			var age;
			// 赋值
			age=18;
			console.log(age);
		</script>
	</body>
</html>

变量的初始化

声明一个变量并赋值，称为变量的初始化

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 变量的初始化
			var age=18;
			console.log(age);
		</script>
	</body>
</html>

变量案列

弹出一个输入框，提示用户输入姓名。

弹出一个对话框，输出用户刚才输入的姓名。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 弹出一个输入框，提示用户输入姓名。
			// 弹出一个对话框，输出用户刚才输入的姓名。
			var myname = prompt("请输出你的名字");
			alert(myname);
		</script>
	</body>
</html>

 变量语法扩展

变量值重新赋值后，变量值以最后一次赋的值为准

可以同时声明多个变量

声明变量的特殊情况

只声明不赋值，为undefined

不声明直接赋值，可以使用

不声明不赋值  ，结果报错

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 重新赋值，变量值以最后一次赋的值为准
			var cute="可爱";
			console.log(cute);
			cute="有钱";
			console.log(cute);
			
			// 同时声明多个变量
			var age=18, address="策划"
			console.log(age,address);
			
			// 声明变量的特殊情况
			// 只声明不赋值，为undefined
			var sex;
			console.log(sex);
			// 不声明直接赋值使用使用
			qq=127877;
			console.log(qq);
			// 不声明不赋值  结果报错
			console.log(phone);
		</script>
	</body>
</html>

变量的命名规范

变量名由字母（A-Za-z）、数字（0-9）、美元符号（$）组成

严格区分大小写。var app与var App是两个变量

不能以数字开头

不能使用关键字、保留字命名。eg:var for name

遵守驼峰命名法。首字母小写，后面单词的首字母大写。eg:myFirstName

变量名必须有意义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 变量名不能以数字开头
			var $a=13;
			var _d=14;
			var asd=15;
			console.log($a,_d,asd);
			// 严格区分大小写
			var app=10;
			var App=100;
			console.log(app,App);	
		</script>
	</body>
</html>

变量案列 交换两个变量的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 交换两个变量的值,借用第三方变量temp
			var apple1="青苹果";
			var apple2="红苹果";
			console.log(apple1,apple2);
			var temp;
			temp=apple1;
			apple1=apple2;
			apple2=temp;
			console.log(apple1,apple2);
		</script>
	</body>
</html>

数据类型

为什么需要数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

 变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。

变量的数据类型决定了如何代表这些值的位存储到计算机的内存中

javascript是一种弱类型或者说动态语言。

 变量数据类型的确定

js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>	
		var num;	// 这里的num我们不确定属于哪种数据类型
		var num=10; //这里的num属于数字型
		// js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
		var str= 'pink'; //str值为字符串型
		</script>
	</body>
</html>

js是动态类型，也就意味着相同的变量可以做不同的类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>	
		var x=6; //这里x为数字类型
	    x="money"; //这里x为字符串类型
		</script>
	</body>
</html>

简单数据类型

简单数据类型 说明 默认值
Number 数字型，包含整型值和浮点型值，如21、0.21 0
Boolean 布尔值类型，如true,false,等价于1和0 false
String 字符串类型，字符串都要带引号 " "
Undefined var a;声明了变量a，但没有给值，那a的值就是undefined undefined
Null

var a=null;

变量a为空值

 null

数字型 Number

js数字类型可以用来保存整数值，也可以保存小数（浮点数）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>	
		var num=10; //num数字型
		</script>
	</body>
</html>

 数字型进制

最常见的进制有二进制、八进制、十进制、十六进制。

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>	
		// 1.八进制 0~7 程序里数字前面加0 表示八进制
		var num1=010;
		console.log(num1);//八进制转换为十进制结果为8
		
		var num2=012;
		console.log(num2);//10
		
		// 2.十六进制 0~9 a~f 程序里数字前面加0x,表示十六进
		var num3=0x9;
		console.log(num3);//9
		
		var num4=0xa;
		console.log(num4);//10
		</script>
	</body>
</html>

数字型

js中的最大值和最小值

Number.MAX_VALUE  //1.7976931348623157e+308

Number.MIN_VALUE   //5e-324

数字型三个特殊值

Infinity   //代表无穷大，大于任何数值

-infinity   //代表无穷小，小于任何数值

NaN    //not a number,代表一个非数值

最大值和最小值 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>	
		console.log(Number.MAX_VALUE);
		console.log(Number.MIN_VALUE);
		</script>
	</body>
</html>

三个特殊值 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>	
		// 无穷大
		console.log(Number.MAX_VALUE * 2);//infinity
		// 无穷小
		console.log(-Number.MAX_VALUE*2)//-infinity
		
		// 非数字
		console.log('pink老师'-100);//NaN
		</script>
	</body>
</html>

 isNaN 

用来判断一个变量是否为非数字的类型，返回true或者false

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>	
		// isNaN() 用来判断非数字，会返回一个值
		// 是数字返回false,不是数字返回true
		console.log(isNaN(12));//false
		console.log(isNaN("我会发大财"));//true
		</script>
	</body>
</html>

字符串型 string

字符串可以是引号中的任意文本，其语法为“双引号”或'单引号'

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>	
		// 字符串型
		var cute="小兰花说可恶心啦";
		var money="我发大财啦";
		</script>
	</body>
</html>

字符串引号嵌套 

字符串引号嵌套，只能用单引号嵌套双引号，或者双引号嵌套单引号

引号嵌套不能符号相同，它是就近原则，单引号嵌套单引号，双引号嵌套双引号，会报错

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>	
		// 字符串型
		var handsome="'东方青苍'三界第一";
		var marry='"东方青苍"和"小兰花"要举行婚礼啦';
		console.log(handsome);
		console.log(marry);
		</script>
	</body>
</html>

 字符串转义符

字符串中有一些特殊字符，称为转义符

转义符都是以\开头的

转义符 解释说明
\n 换行符，n是newline的意思
\\ 斜杠\
\' '单引号
\" "双引号
\t tab缩进
\b
最低0.47元/天 解锁文章
JS学习资料
12-17
网上有人分享经验，说到学习前端开发技术JavaScript很实用的一些书籍，从入门到高级，一一列举，很不错。整理了一下发上来。 名称： JavaScript+DOM编程艺术.pdf 概述： “本书理应奉为经典。文笔清晰,采用了优秀的编程原则，严格遵守相应的标准。真是完美的结合。” ——Slashdot “我要隆重推荐本书。它前所未有地演示了DOM脚本编程的真正潜力。无论你是JavaScript新手还是专家，本书都绝对必读。”——Garrent Dimon,Digital-Web.com 随着Ajax的兴起，JavaScript再一次成为炙手可热的技术。然而，在历史上，它并不是一直这么幸运，由于主流浏览器之间的不兼容，以JavaScript为核心的DHTML曾经昙花一现，很快被人遗忘。 俱往矣，如今的网页设计已经翻开了新的一页。在CSS彻底改变了Web页面布局的方式之后，万维网联盟跨浏览器的DOM标准的制定，使JavaScript终于突破瓶颈，成了大大改善网页用户体验的利器。 本书在简洁明快地讲述JavaScript和DOM的基本知识之后，过几个实例演示了大师级的网页开发技术，并透彻阐述了一些至关重要的JavaScript编程原则和最佳实践，包括预留退路、循序渐进和以用户为中心等。读者可以非常直观地加以领悟，迅速使自己的编程技术更上一层楼。 第1章 JavaScript简史 　1.1　JavaScript的起源 　1.2　浏览器之争 　1.3　制定标准 　1.4　小结 第2章 JavaScript语法 　2.1　准备工作 　2.2　语法 　2.3　语句 　2.4　变量 　2.5　操作 　2.6　条件语句 　2.7　循环语句 　2.8　函数 　2.9　对象 　2.10　小结 第3章 DOM 　3.1　文档:DOM中的“D” 　3.2　对象:DOM中的“O” 　3.3　模型:DOM中的“M” 　3.4　趁热打铁 　3.5　小结 第4章 案例研究:JavaScript美术馆 　4.1　编写标记语言文档 　4.2　编写JavaScript函数 　4.3　JavaScript函数的调用 　4.4　对JavaScript函数进行功能扩展 　4.5　小结 第5章 JavaScript编程原则和良好习惯 　5.1　不要误解JavaScript 　5.2　预留退路 　5.3　向CSS学习 　5.4　分离JavaScript 　5.5　向后兼容性 　5.6　小结 第6章 案例研究:JavaScript美术馆改进版 　6.1　快速回顾 　6.2　解决“预留退路”问题 　6.3　解决“分离JavaScript”问题 　6.4　JavaScript函数的优化:不要做太多的假设 　6.5　DOM Core和HTML-DOM 　6.6　小结 第7章 动态创建HTML内容 　7.1　[removed]()方法 　7.2　innerHTML属性 　7.3　DOM提供的方法 　7.4　重回“JavaScript美术馆” 　7.5　小结 　7.6　下章简介 第8章 充实文档的内容 　8.1 不应该做的事情 　8.2 把“不可见”变成“可见” 　8.3 原始内容 　8.4 XHTML文档 　8.5 CSS 　8.6 JavaScript代码 　8.7 小结 　8.8 下章简介 第9章 CSS-DOM 　9.1 三位一体的网页 　9.2 style属性 　9.3 何时该用DOM脚本去设置样式信息 　9.4 className属性 　9.5 小结 第10章 用JavaScript实现动画效果 　10.1 何为动画 　10.2 实用的动画 　10.3 改进动画效果 　10.4 最后的优化 　10.5 小结 第11章 学以致用:JavaScript网站设计实战 　11.1 案例背景介绍 　11.2 页面视觉效果设计 　11.3 CSS 　11.4 颜色 　11.5 XHTML文档 　11.6 JavaScript脚本 　11.7 小结 　11.8 下章简介 第12章 展望DOM脚本编程技术 　12.1 Web的现状 　12.2 Ajax技术 　12.3 Web应用 　12.4 小结 附录 DOM方法和属性
JavaScript基础知识整理
02-26
JavaScript是一种广泛应用于前端开发的直译式脚本语言，它基于对象、事件驱动，并具有安全性。JavaScript主要在浏览器环境中运行，被解释执行，用于增强网页的...了解并掌握这些基础知识，对于进行前端开发至关重要。
js基础
weixin_30929195的博客
07-24 116
--引入 JS特点 　　轻量级脚本语言 　　区分大小写 　　语句使用分号';'分隔,但使用分号并不是必须的，也可以不用。 　　数字，字符串类似于Python，布尔值为true、false，数组==Python中的list 　　===为绝对相等，即类型、数值相等。而==则表示数值相等。‘3’==3 是对的 　　使用函数，以花括号{}分隔，函数可以有多个参数，可以有返回值 　　变量可以...
JS 入门
最新发布
scj1022的博客
10-07 2139
JavaScript 入门
Js 基础
单飞吧的博客
09-07 340
Js的全局作用域就是window Function 内存中保存一段代码的函数 代码重用 调用函数 函数名(实参值) 第一种 以声明的方式创建函数 function 函数名(形参列表){ 函数体 return 返回值 } 有一个问题：会被声明提前 第二种 以赋值的方式创建函数  var arr= function (形参列表){ 函数体 return 返回值 } 第三种 用new创建函数 几乎不用 var fun=new Function函
Js基础
Whystarta_z的博客
11-05 355
JS基础 注释与语句 1、注释 • 单行注释：// • 多行注释：/**/ 2、 语句 一段脚本就是一系列计算机能够一步一步执行的指令。每一条单独的指令或步骤就被称为一条语句。语句以分号（;）结尾，多个语句可以写在一行内。 var a = 10; // 这是一条赋值语句 var b = 10; var c = a + b; // 多条语句可以写在一行内； 提示：分号在...
基于Javascript编程基础知识基于Javascript编程基础知识基于Java基于Javascript编程基础知识.zip
05-08
基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程基础知识基于Javascript编程...
Javascript基础知识整理.doc
11-27
Javascript基础知识整理 JavaScript是一种高级的、动态的、弱类型的编程语言，主要用于客户端脚本编程。它可以在浏览器中执行，实现网页的交互性和动态效果。本文将对JavaScript的基础知识进行整理和总结，包括脚本...
JavaScript基础知识总结.xmind
02-23
通过思维导图的方式，快速了解掌握JavaScript的基本内容
react-pokedex:通过制作自己的Pokedex应用程序来学习React基础知识| 对于SVCE ACM网络研讨会
05-13
通过制作自己的Pokedex应用程序来学习React基础知识 立即查看完整的教程-https: 特别感谢 特别感谢这两个npm软件包 使用这两个包创建了神奇宝贝数据（位于./src/data/pokemonData.js ） 有兴趣自己制作吗？ 检阅...
向一个数组中插入元素
weixin_33713707的博客
03-15 329
向一个数组中插入元素 向一个数组中插入元素是平时很常见的一件事情。你可以使用push在数组尾部插入元素,可以用unshift在数组头部插入元素,也可以用splice在数组中间插入元素。 但是这些已知的方法，并不意味着没有更加高效的方法。让我们接着往下看…… 向数组结尾添加元素 向数组结尾添加元素用push()很简单，但下面有一个更高效的方法 var arr = [1,2,3,4,5]...
JavaScript入门基础知识详解
本文将从基础知识点开始，详细介绍JavaScript的基本概念和应用。 **1._alert弹窗和标签** 在JavaScript中，`alert`函数可以用于弹出警告框，显示指定的信息。使用`<script>`标签可以包含JavaScript脚本，一个网页...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值