Day48 Javascript详解

风起携月归2024-05-25 18:52

Day48 Javascript详解

文章目录

一、什么是javascript

JavaScript是一种高级的、解释型的编程语言，主要用于在网页上实现交互功能。它是一种脚本语言，可以嵌入到HTML页面中，通过浏览器解释执行，实现动态效果和用户交互。

Javascript是基于对象和事件驱动的脚本语言，主要是嵌入到HTML中，应用在客户端，动态操作网页元素，也可以作用于服务端。

二、javascript特点

  • 动态性：JavaScript是一种动态语言，可以在运行时修改和调整程序的行为。
  • 事件驱动：通过事件处理程序来响应用户的交互操作，实现网页的动态效果。
  • 跨平台性：JavaScript可以在各种操作系统和浏览器中运行，实现跨平台的网页开发。
  • 交互性：表单校验，信息提示，动态数据图表，ajax异步提交，解析服务端响应数据等等。
  • 安全性：不可以直接访问本地硬盘。
  • 轻量级：JavaScript代码通常是以文本形式嵌入到HTML中，不需要额外的编译步骤，使得开发和调试更加便捷。

三、 Javascript的历史

  1. 1995年：JavaScript最初由Netscape公司的Brendan Eich设计开发，最初被称为LiveScript。在Netscape Navigator 2.0中首次发布，用于增强网页的交互性和动态效果。
  2. 1996年：Netscape将LiveScript更名为JavaScript，与Sun Microsystems的Java合作，推动JavaScript的发展。微软也推出了类似的脚本语言JScript。
  3. 1997年：ECMAScript标准化组织发布了第一版ECMAScript标准（ECMA-262），以规范JavaScript语言的实现。这一标准定义了JavaScript的核心语法和功能。
  4. 2000年：DOM（Document Object Model）标准化，使JavaScript可以操作网页上的元素和内容，实现动态页面效果。
  5. 2005年：Ajax（Asynchronous JavaScript and XML）的概念被提出，使得通过JavaScript异步加载数据成为可能，极大地提升了网页的交互性和用户体验。
  6. 2009年：Node.js项目启动，使JavaScript不仅可以在浏览器中运行，还可以在服务器端运行，开启了JavaScript全栈开发的时代。
  7. 2015年：ECMAScript 6（ES6）发布，引入了许多新的语法和特性，如箭头函数、模块化、类等，大大提升了JavaScript的开发效率和可维护性。
  8. 至今：JavaScript持续发展，成为最流行的前端开发语言之一，涵盖了前端开发、后端开发、移动应用开发等多个领域，拥有庞大的开发者社区和丰富的生态系统。

四、Javascript vs Java

JavaScript只需浏览器解析就可以执行，而java需要先编译成字节码文件，然后通过JVM来执行。

JavaScript是一种弱类型语言，java是强类型语言。

一个完整 JavaScript实现由以下3个部分组成

DOM -- Document Object Model

BOM -- Browser Object Model

五、JS的基本数据类型

1、分类：

  • boolean - 布尔类型
  • undefined - 未定义类型
  • null - 空类型
  • number - 数值型
  • string - 字符串类型

2、代码示例：

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			//number - 数值型
			//注意：number类型不分整数和小数
			var num = 100;
			console.log(num);//100
			num = 123.123;
			console.log(num);//123.123
			
			//string - 字符串类型
			//注意：string类型的值可以用单引号也可以用双引号括起来
			var str = 'abc';
			console.log(str);
			str = "abc";
			console.log(str);
			
			//boolean - 布尔类型
			var bool = true;
			console.log(bool);//true
			bool = false;
			console.log(bool);//false
			
			//undefined - 未定义类型
			var v;
			console.log(v);
			v = undefined;
			console.log(v);
			
			//null - 空类型
			var xx = null;
			console.log(xx);
			
			
		</script>
	</body>
</html>

六、JS基本数据类型的特殊点

1、特殊点：

  1. 字符串（String） ：
    • 字符串是以单引号（' '）或双引号（" "）包裹的文本数据。
    • 字符串是不可变的，一旦创建就不能被修改，任何对字符串的操作都会返回一个新的字符串。
  2. 数字（Number） ：
    • JavaScript中的数字是浮点数，没有整型和浮点型之分。
    • 存在特殊的数字值，如NaN（Not a Number）、Infinity（无穷大）和 -Infinity（负无穷大）。
  3. 布尔值（Boolean） ：
    • 布尔值只有两个取值：true和false。
    • 布尔值常用于条件判断和逻辑运算。
  4. 空（Null） ：
    • 表示一个空值或不存在的值。
    • typeof null 的结果是 "object"，这是 JavaScript 的一个历史 Bug。
  5. 未定义（Undefined） ：
    • 表示未赋值的变量或属性。
    • 未定义的变量会有一个默认值 undefined。
  6. 符号（Symbol） ：
    • ES6新增的数据类型，表示独一无二的值。
    • 可以用来创建对象的私有属性名。

2、代码示例：

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			//number类型的特殊点
			//注意：Infinity表示无穷大
			console.log(Infinity + (-Infinity));//NaN - Not a Number
			
			//string类型的特殊点
			//注意：string加号是字符串拼接符，其余是算数运算符
			var str1 = "10";
			var str2 = "3";
			console.log(str1 + str2);//103
			console.log(str1 - str2);//7
			console.log(str1 * str2);//30
			console.log(str1 / str2);//3.3333333335
			console.log(str1 % str2);//1
			
			//boolean类型的特殊点
			//注意：""、0、undefined、null表示false
			if(""){
				console.log("true");
			}else{
				console.log("false");
			}
			
			if(0){
				console.log("true");
			}else{
				console.log("false");
			}
			
			if(undefined){
				console.log("true");
			}else{
				console.log("false");
			}
			
			if(null){
				console.log("true");
			}else{
				console.log("false");
			}
			
			//undefined vs null
			var v1 = undefined;
			var v2 = null;
			console.log(typeof v1);//undefined
			console.log(typeof v2);//object
			
			//== vs ===
			//==判断两个值是否相等
			//===判断两个值+类型是否相等
			var v3 = 10;
			var v4 = "10";
			console.log(v3 == v4);//true
			console.log(v3 === v4);//false
		</script>
		
	</body>
</html>

七、数组

1、基本步骤：

  1. 创建一个数组
  2. var arr = [1,2,3];
  3. 更新数组的元素
  4. 添加数组的元素
  5. 删除数组的元素（delete arr[1],注意，此处只是将该元素留空，数组的长度并不会发生变化）

注意：数组的数组：var a = [[1,2,3],[4,5,6]];

2、代码示例：

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			var arr = ["小俊","小杨","小雷"];
			
			//设置指定下标上的元素
			arr[0] = "小刘";
			
			//获取指定下标上的元素
			console.log("获取指定下标上的元素：" + arr[0]);//小刘
			
			//获取元素个数
			console.log("获取元素个数：" + arr.length);
			
			//添加元素
			arr[3] = "小陈";
			arr[4] = "小李";
			arr[10] = "小王";
			
			//删除元素
			delete arr[4];
			
			console.log("--------------------");
			
			//遍历数组 - for循环
			for(var i = 0;i<arr.length;i++){
				console.log(arr[i]);
			}
			
			console.log("--------------------");
			
			//遍历数组 -- for-in
			//注意：遍历有效元素的下标（undefined的元素认为是无效元素）
			for(var index in arr){
				console.log(arr[index]);
			}
			
		</script>
		
	</body>
</html>
相关推荐
Ajiang28247353042 小时前
对于C++中stack和queue的认识以及priority_queue的模拟实现
开发语言·c++
ggdpzhk2 小时前
VUE：基于MVVN的前端js框架
前端·javascript·vue.js
幽兰的天空2 小时前
Python 中的模式匹配：深入了解 match 语句
开发语言·python
小曲曲3 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•4 小时前
css数据不固定情况下，循环加不同背景颜色
前端·javascript·html
EasyNTS5 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
Theodore_10225 小时前
4 设计模式原则之接口隔离原则
java·开发语言·设计模式·java-ee·接口隔离原则·javaee
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js：提升开发效率，更轻量、更高效的状态管理方案！
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中，vue document.onkeydown 无效
前端·javascript·vue.js
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作