基础篇--JavaScript的基础知识（数据类型、弹窗、运算符、流程控制语句）

最新推荐文章于 2023-09-18 09:52:39 发布

小乔与你同在

最新推荐文章于 2023-09-18 09:52:39 发布

阅读量417

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_43109549/article/details/103328332

版权

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了JavaScript的基础知识，包括其与java的区别、在浏览器中的作用、与ECMAScript的关系，以及变量、数据类型、运算符、流程控制语句等核心概念。JavaScript是一种弱类型语言，广泛应用于网页交互和功能实现，如CSS样式控制、DOM操作、表单处理等。此外，文章还讲解了JavaScript代码的书写位置和注意事项，以及如何通过script标签引入外部文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 什么是JavaScript，它和java有关系吗？

JavaScript与java没有关系，javaScript是前端，是用来实现网页的功能部分。
（1）脚本语言：不具备开发操作系统的能力，其只是具备操作浏览器功能，是只用来编写控制其他大型应用程序的“脚本”。（类似于小插件）。
（2）弱类型语言：语法中变量对于类型的要求并不特别严格（Java是强类型语言）。

2 JavaScript的优点

（1）几乎是所有浏览器都内置支持的脚本语言
（2）越来越强大的功能，随着HTML5的出现逐渐可以支持调用系统功能、参与服务器端开发（nodeJS）
（3）轻量级，易学，易用，对运行环境平台几乎没有要求，可以跨多平台
（4）语言灵活多变，针对同一需求，能设计出多重解决思路
（5）安全性，它不允许访问本地磁盘

3 JavaScript与ECMAScript的关系

ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。由于历史原因，JavaScript被提交给国际标准化组织ECMA（European Computer Manufacturers Association）指定为国际标准，由于版权问题无法再使用 JavaScript的名字以及其他的相关原因，所以最终成为了ECMAScript
简单的来说ECMAScript就是JavaScript的规范

4 浏览器中的JavaScript能做什么

（1）css-查询修改标签元素的css样式
（2）html-增，删，查，改，浏览器中的标签元素（DOM）
（3）浏览器-获取，响应，操作浏览器功能
（4）表单操作
（5）后台数据交互等

5 JavaScript写在哪里？

CSS样式写在<style type="text/css"></style>标签中
javascript写在<script type="text/javascript"><.script>标签中

在sublime中快速生成html格式：
（1）创建文件，并保存为.html后缀名
（2）在文档中输入<html>，按Enter即可

5.1 script标签中

而script标签可以写在网页的任何位置，但是为了规范，考虑加载流程，我们一般写在body结束标签之前和head标签中。因为script标签加载是有顺序的，要保证script标签内部操作的标签要确保已经加载，然后在通过script为其添加对应的功能。在后面学了加载事件之后，虽然script标签在前在后，都可以实现其功能。具体怎么使用就看公司要求。
在这里插入图片描述

5.2 js 文件，通过script标签引入

也可以把js代码写在js文件当中，通过script标签引入进来。
（1）创建一个后缀名为.js文件，直接在文件中写js语句。
在这里插入图片描述
（2）通过script标签引入

如果在script标签中引入了外部js文件，则在内部写入js代码是无效的。

6 注意

（1）当有多个script标签的时候，优先级按照加载顺序依次执行。
（2）代码的执行流程是从上往下的，在进行dom操作的时候千万注意，加载顺序
（3）在引入script标签里面写js代码是无效的
（4）严格区分大小写（强弱类型语言是针对数据类型来说的）
（5）英文半角下的标点字符
（6）不能把，关键字，保留字（new var for…）作为标识符（变量名，函数名）
（7）语句用分号结束（规范，因为不使用分号结束，当进行解压、压缩文件，容易出错。）

7 变量

7.1 变量的定义

变量是JavaScript里的一种容器，每个变量都已一个对应的变量名我们可以通过var关键字空格变量名的方式申明变量.

<script type="text/javascript">
		//1 定义一个变量
		var student;
		student = "七(1)";
		//2 定义多个变量
		var name,age;
		name="小红";
		age = 18;
		//3 定义一个变量同时并进行赋值
		var brand = "安踏";
		//打印输出
		console.log(age);
</script>

7.2 命名规范

（1）见名知意
（2）区分大小写
（3）可以使用 _ $ 或者以其开头，但是不能使用 - * / + = %等有特殊意义的符号
（4）可以使用数字但是不能用数字进行开头
（5）不能使用关键字，保留字（有可能会变成关键字）

7.3 基本数据类型

JavaScript中同样涉及到对于许多数据的操作，其大致可以有6种常见的数据类型，但是这些数据类型都是用var关键字声明的变量存储.

typeof 是用于检测数据的数据类型的操作符
console.log(typeof );
console.log()控制台输出，常用于代码调试

变量没有关键字之分，但是其本质是有数据类型区分的。
（1）Nunber 数字
1,2,3,4,5 … NaN
注意：数字在js中会有一定的精度丢失（整数没有问题，当小数位数比较多就会造成精度损失）。
（2）String 字符串
（3）Boolean 布尔值
true false
（4）function 函数
变量也可以是函数.
function 方法名(参数列表){代码块}
（5）object对象
{} , array , element , （null）…
（6）undefined 未定义
null是空，undefined是未定义？
答案：
（1） null表示"没有对象"，即该处不应该有值。从逻辑角度看，表示准备用来保存对象，还没有真正保存对象的值。null值表示一个空对象指针。
（2）undefined表示变量已经声明，但"缺少值"，就是此处应该有一个值，但是还没有定义。

8 打印扩展

代码执行时间输出，可以用来测试代码执行的效率。
起始标记 - console.time(“标识字符串”);
结束标记 - console.timeEnd(“标记字符串”);
在这里插入图片描述
在console控制台可以看出代码执行时间。

8 弹窗

（1）提示弹窗：
alert( 任意数据类型 );
（2）选择弹窗：
confirm( 任意数据类型 );
带”确认“和”否定“两个按钮，点击后会返回一个布尔值。点击”确定“返回true，点击”取消“或者右上角”❌“号返回false。
（3）输入弹窗：
prompt( 任意数据类型 );
带一个单行输入框，点击”确定“返回在输入框中输入的内容的字符串，点击”取消“或者右上角”❌“号则返回null。
选择弹窗和输入弹窗都是有返回值的，可以通过变量var进行接收。
在这里插入图片描述

9 算数运算符

加，减，乘，除，模：+，-，*，/，%，自增，自减，字符串拼接
在这里插入图片描述

10 NaN（Not a Number不是一个数字）

（1）isNaN()：判断一个数据是不是NaN的方法，返回一个布尔值（数字返回是false，不是数字返回true）
（2）NaN 与任何数据都不相等，包括 NaN 本身。NaN 为number类型。
在这里插入图片描述
NaN就是一个数字和一个undefined相加，返回结果就是number类型的NaN，即不是一个数字。NaN其实就是提示你与一个不是数字的类型进行运算，不能返回数字，说白了就是不能进行运算。
typeof 变量名与isNaN(变量名)区别：
（1）前者判断是什么数据类型，返回的是数据类型。
（2）后者用来判断是否是数字，返回的是布尔类型。

11 比较运算符

用于比较（左边较右边），返回一个布尔值

11.1 普通比较：只比较值，不比较数据类型

在这里插入图片描述

11.2 全等比较：先比较数据类型，再比较值

在这里插入图片描述

12 逻辑运算符

比较两边的数据然后返回比较的结果（布尔值）
&&（与,并且），||（或，或者），!（非，取反）

13 流程控制语句

代码的一般执行顺序为从上到下，从左到右，但是很多时候会对执行选择性和重复等等的控制，就像从左往右的马路会有分叉路口和重复行驶。根据不同的逻辑选择对应的流程控制语句。

（1）条件控制语句（判断）：if...else...
（2）三目运算：boolean ? trueValue : falseValue;
（3）全等判断：switch( 被比较的数据 ){ case 进行比较的数据: break; default break;}
（4）for循环
（5）while循环
（6）do... while 循环：与 while 几乎一致，只是会优先执行一遍循环体中的代码
（7）break终止循环体继续循环
（8）continue跳过本次循环

14 案例–闰年

<head>
	<title></title>
	<script type="text/javascript">
		/* 闰年：
		 （1）能够被4整除但不能够100整除的是闰年
		 （2）世纪年能够被400整除的是闰年
		 prompt("提示信息",默认值);
		 */
	//1.输出弹窗让用户输入
	var years = prompt("请输入你要判断的年份",2019);
	/*分三种情况：
		（1）输入空字符串 
		（2）点击取消返回null 
		（3）点击确定返回输入的值
	*/
	//（1）当用户输入信息为空字符串时，重新输入直到不为空为止
	while(years == ""){
		alert("您输入的年份不能为空，请重新输入：");
		years = prompt("请输入你要判断的年份",2019);
	}
	//（2）当用户输入内容且点击确定
	if(years != null){
		var result = (years/4 == 0&&years/100 != 0)||(years/400 == 0)?years+"是闰年":years+"不是闰年";
		alert(result);
		//提示用户是否继续判断
		var flag = confirm("您是否要继续判断？");
		while(flag){
			console.log(years);
			//对years重新赋值，且使用户输入数据。
			years = "";
			while( years == "" ){
				years = prompt("请输入你要判断的年份",2020);
			}
			var result = (years/4 == 0&&years/100 != 0)||(years/400 == 0)?years+"是闰年":years+"不是闰年";
			alert(result);
			flag = confirm("您是否要继续判断？");
		}
		if(flag == false){
			alert("谢谢光临");
		}
	}
	//3.判断用户是否点击取消
	if(years == null){
		alert("欢迎下次光临");
	}
	</script>
</head>