超详细的JavaScript

已于 2023-08-12 09:43:04 修改
阅读量188 收藏
点赞数 1
分类专栏： Web基础 Java Web 文章标签： javascript 开发语言 ecmascript
于 2023-07-05 21:48:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Eliauk_Doubling/article/details/131541290
版权
本文介绍了JavaScript的基本概念，包括它的交互性、安全性和跨平台性。详细讲解了变量的声明和类型、关系比较和逻辑运算。接着深入探讨了数组的定义和方法，函数的定义方式、作用域以及this关键字的用法。此外，还讨论了自定义对象、原型对象和事件处理，如onclick和onload事件的绑定。
摘要由CSDN通过智能技术生成

目录

一、javaScript介绍

二、JavaScript使用

三、变量

四、关系比较运算

五、逻辑运算

 五、数组

 六、函数

1.函数的定义方式

 2.函数的作用域

 3.变量声明提前

 4.this关键字

七、自定义对象

1.Object 对象

2.自定义对象

 3.匿名函数

 比较数据

八、js中的事件

1.事件定义

2.常见的事件

3.事件的注册 

一、javaScript介绍

Javascript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript 代码。
JS是Netscape网景公司的产品，最早取名为LiveScript;为了吸引更多java程序员。更名为JavaScript。
JS是弱类型，Java 是强类型。

特点

1.交互性(它可以做的就是信息的动态交互)
2.安全性 (不允许直接访问本地硬盘)
3. 跨平台性(只要是可以解释JS的浏览器都可以执行，和平台无关)

二、JavaScript使用

1.html文件中直接引用

<head>
		<meta charset="utf-8">
		<title>JS联系</title>
		<script type="text/javascript">
			alert("欢迎来到我的世界")
		</script>
	</head>

2.引入外部文件

	<head>
		<meta charset="utf-8">
		<title>JS联系</title>
		<script type="text/javascript" src="../js/06.test.js"></script>
	</head>

运行结果：

三、变量

 

 具体实例：

		<script type="text/javascript">
			// alert("欢迎来到我的世界")
			var i;	// alert(i) 		//undefined
			
			i=12;		//alert(typeof(i))		//number
			// typeof()是JavaScript中提供的函数，返回数值的类型
			
			i="abc";		//它可以取变量的数据类型返回
			// typeof(i);		//String
			var a=13;
			var b="abc";
			alert(a*b);			//NaN
			
		</script>

四、关系比较运算

 具体实例：

五、逻辑运算

 

 五、数组

 1.数组的定义

 2.数组常用方法

            /**
             * push()
             *     -该方法可以向数组的末尾添加一个或者多个元素，并返回数组的新长度
             *     -可以将要添加的元素作为方法的参数传递，
             *         这样这些元素将会自动添加到数组的末尾
             * pop() 删除最后一个元素
             * concat() 连接两个或者更多的数组，并返回结果
             * join() 把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分割
             * reverse() 颠倒数组中元素的顺序
             * shift() 删除并返回数组的第一个元素
             * slice() 从某个已有的数组返回选定的数组
             * sort() 对数组进行排序
             * splice() 删除元素，并向数组添加新元素
             * toSource() 返回该对象的源代码
             * toString() 把数组转换为字符串，并返回结果
             * unshift() 向数组的开头添加一个或者更多元素，
             *         并放回新的长度
             * valueOf() 返回数组对象的原始值
             */

 六、函数

1.函数的定义方式

函数的第一种定义方式

		<script type="text/javascript">
			// 无参函数
			function fun1(){
				alert("定义了一个无参函数")
			}
			// 有参函数
			function fun2(a,b){
				alert("a-->"+a+",b-->"+b);
			}
			// fun2(1,"abc");
			
			// 有返回值函数
			function fun3(num1,num2){
				var result=num1+num2;
				return result;
			}
			
			alert(fun3(13,12));
			
			
			
		</script>

函数的第二种定义方式

// 函数的第二种定义方式
			
			var fun4=function(num1,num2){
				var result=num1+num2;
				return result;
			}
			alert(fun4(11,12));

 2.函数的作用域

        作用域指一个变量的作用范围
     * -在JS中一共有两种作用域：
     * (1)全局作用域
     *   -直接编写在script标签中的JS代码，都在全局作用域
     *      -全局作用域在页面打开时创建，在页面关闭时销毁
     *   -在全局作用域中有一个全局对象window
     *         他代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用
     *   -在全局作用域中，创建的变量和函数会作为window对象的属性保存着
     * (2)函数作用域
     *      -调用函数时创建了函数作用域，函数执行完毕以后，函数作用域销毁
     *   -每调用一次函数就会创建一个新的函数作用域，他们之间是会互相独立的
     *   -在函数作用域中可以访问到全局作用域的变量
     *         在全局作用域中无法访问到函数作用域的变量
     *   -当在函数作用域操作一个变量时，他会先在自身作用域中寻找，如果有就直接使用
     *        如果没有则向上一级作用域中寻找,直到找到全局作用域,
            如果全局作用域中依然没有找到,则会报错ReferenceError
         -在函数中访问全局变量可以使用window对象

 3.变量声明提前

             /**
             * 变量声明提前
             *     -使用var关键字声明变量，会在所有的代码执行前被声明
             *         它会在所有的代码执行之前被创建，所以我们可以在函数声明前来调用
             *     -使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用
             * 
             */

 4.this关键字

            /**
             * 解析器在调用函数每次对向函数内部传递进一个隐含的参数，
             * 这个隐含的参数就是this,this指向的是一个对象，
             * 这个对象我们称为函数执行的上下文对象，根据函数的调用方式不同，
             * this会指向不同的对象
             *         1.以函数的形式调用this,永远都是window
             *         2.以方法的形式调用时，this就是调用方法的那个对象
             */

 以函数形式调用this

			function fun(){
				console.log(this);
				document.write(this);
			}
			// fun();
			// console.log("de");
			
			// 创建一个对象
			var arr={
				name:"孙悟空",
				sayName:fun
			};
			console.log(obj.sayName==fun);
			//arr.sayName();
			 fun();

运行结果

以方法形式调用this

			function fun(){
				console.log(this);
				document.write(this);
			}
			// fun();
			// console.log("de");
			
			// 创建一个对象
			var arr={
				name:"孙悟空",
				sayName:fun
			};
			console.log(arr.sayName==fun);
			arr.sayName();
			// fun();

运行结果

 

七、自定义对象

1.Object 对象

    对象的分类：
    1.内建对象由ES标准定义的对象，在任何的ES的实现中都可以使用
    比如：Math String Number Boolean Function Object....
    2.宿主对象：由JS的运行环境提供的对象，目前来讲主要是指由浏览器提供的对象
    比如：BOM DOM\

2.自定义对象

Object形式自定义对象

 举例：

		<script type="text/javascript">
			var obj=new Object();
			obj.name="六";
			obj.age=18;
            obj.hooby="baseball"
            //删除属性
            delete obj.hobby;
			obj.fun=function(){
				alert("name:"+this.name+", age:"+this.age);
			}
            /**
			 * 函数也可以称为对象的属性：
			 * 如果一个函数作为一个对象的属性保存
			 * 那么我们称这个函数时这个对象的方法
			 * 调用函数就说调用该对象的方法
			 */
			obj.fun();
			
		</script>

{}大括号形式自定义对象

 举例：

obj.fun();
			var obj2={
				name:"eliauk",
				hobby:"baseball",
				test:function(){
					console.log(obj2);
				}
			}
			
			obj2.test();

 3.匿名函数

			// 2.匿名函数
			(function(){
				// alert("我是一个匿名函数~~~~");
				console.log("我可是一个匿名函数嘞！不用调用我就会运行的嘞")
			})();

 比较数据

        当比较两个基本数据类型的值时，就是比较值
         而比较两个引用基本数据类型时·，它是比较的对象的·内存地址

        储存空间分为 栈内存 和 堆内存
         基本变量是存储在栈内存当中的，堆内存中存储着对象

构造方法

            /**
             * 创建一个构造函数，专门用来创建Person对象的
             *     构造函数就是一个普通的函数，创建方法和普通函数没有区别
             *     不同的是构造函数首字母要大写
             * 
             * 构造函数和普通函数的区别就是调用方式的不同
             *     普通函数是直接调用，而构造函数需要使用new关键字来调用
             * 
             * 构造函数的执行流程：
             *     1.立即创建一个新的对象
             *     2.将我们新建的对象设置为函数this
             *     3.执行我们函数中的代码
             *     4.将新的对象作为返回值返回
             * 
             * 使用同一类构造函数产检的对象，是同一类对象
             */

实例：

			function Person(name,age){
				// alert(this)
				this.name=name;
				this.age=age;
				this.sayName=function(){
					alert(this.name);
				}
				
				
			}
			// 构造函数（去掉一个new就是普通函数）
			var per=new Person("孙悟空",16);
			var per2=new Person("猪八戒",14);
			
			console.log(per);
			// console.log(per2);
			/**
			 * 使用instanceof可以见查看一个对象是否是一个类的实例
			 * 语法： 对象instanceof 构造函数
			 */
			console.log(per instanceof Person);

 运行结果：

 原型对象

/**
 * 原型 prototype(类似于JAVA中父类对象)
 * 1.我们所创建的每一个函数，解析器
 *     都会向函数中添加一个函数prototype
 *     这个属性对应着一个对象，这个对象就是我们所谓的原型对象
 * 2.如果函数作为普通函数调用prototype没有任何作用
 * 3.当函数以构造函数的形式调用时，它所创建的对象中会有一个
 *     隐含的属性，指向该构造函数的原型对象，我们可以通过_proto_来
 *     访问该属性
 * 4.原型对象就相当于一个公共的区域，所有同一个类的实例都可
 *     以访问到这个原型对象，我们可以将对象共有的内容，
 *     统一设置到原型对象中
 * 5.以后我们创建构造函数时，可以将这些对象共有的属性和方法，
 *     统一添加到构造函数的原型对象中，这样不用分别为每一个对象
 * 添加，也不会印象到全局作用域，就可以使每一股份对象都具有
 * 这些属性和方法了
 * 
 * 6.原型对象也是对象，所以它也是有原型，
 *     当我们使用一个额对象的属性或者方法时，会出现在自身中寻找，
 *     自身中如果有，则直接使用，
 *     如果没有则去原型对象中寻找，如果原型对象中与，则使用，
 *     如果没有则去原型中寻找，直到找到Object对象的原型，Object对象的原型，
 *    如果在Object中依然没有找到，则返回undefined
 */

 实例：

			function Person(){
				
			}
			
			function MyClass(){
				
			}
			MyClass.prototype.say="我是MyClassl类原型对象的属性";
			var myClassOne=new MyClass();
			console.log(myClassOne);
			console.log(MyClass.prototype==Person.prototype)
			console.log(myClassOne.say);
			// 使用in 检查对象中是否含有某个属性时，如果对象中没有但是
			// 原型中有,也会返回true
			console.log("say" in myClassOne);
			// 可以使用对象的hasOwnOrioerty()来检查对象自身中是否含有属性
			console.log(myClassOne.hasOwnProperty("age"));
/**
 * 原型对象也是对象，所以它也是有原型，
 * 当我们使用一个对象的属性或者方法时，会先在自身中寻找，
 * 自身中如果有，则直接使用，
 * 如果还没则去原型对象中寻找，如果原型原型对象中域，则使用使用，
 * 如果没有则去原型中寻找
 */
			console.log("测试原型对象中有没有该属性");
			console.log(myClassOne.__proto__.hasOwnProperty("age"));
			// 查看有多少层的原型
			console.log("myClassOne.__proto__");
			console.log(myClassOne.__proto__)
			console.log(myClassOne.__proto__.__proto__)
			console.log(myClassOne.__proto__.__proto__.__proto__)

 运行结果：

 toString方法

		function Person(name,age,gender){
			this.name=name;
			this.age=age;
			this.gender=gender;
		}
		// 创建一个Person实例
		var per=new Person("孙悟空",18,"man");
		console.log(per);
		
		// 验证toString方法是不是在该对象原型中
		console.log(per.__proto__.__proto__.hasOwnProperty("toString"))
		// 如我们希望在输出对象时不输出[object Object],
		// 可以为原型对象修改toString()方法
		Person.prototype.toString = function(){
			return "我是一个快乐的小Person";
		}
		document.write(per);

 运行结果

八、js中的事件

1.事件定义

什么是事件？事件是电脑输入设备与页面进行交互响应，我们称为事件。

2.常见的事件

 onclick点击事件

		<script type="text/javascript">
			function onloadFun(){
				alert("静态注册onload事件")
			}
			// onload事件动态注册，是固定写法
			// window.onload=function(){
			// 	alert("动态注册的onload事件");
			// }
			
			// 静态绑定事件
			function onclickFun(){
				console.log("静态注册onclick事件");
			}
			
			// 动态绑定按钮
			window.onload=function(){
				// document 指的是整个页面
				var btnobj=document.getElementById("btn2");
				btnobj.onclick=function(){
					alert("onclick动态绑定事件");
				}
			}
			
			
		</script>
	</head>
	<body>
		
		<button onclick="onclickFun();">按钮一</button>
		<button id="btn2">按钮二</button>
		
	</body>

onblur事件

<script type="text/javascript">

			function onblurFun(){
				// console 是JavaScript语言提供，专门用来向
				// 浏览器的控制台打印输出，用于测试使用
				console.log("静态绑定onclur事件");
			}
			
			
			// 动态绑定
			window.onload=function(){
				var inputObj=document.getElementById("ipt01");
				inputObj.onblur=function(){
					alert("动态绑定onblur");
				}
			}
</script>

<body>
		用户名：<input  type="text" onblur="onblurFun()"/><br />
		密码：<input type="text" id="ipt01"/><br>
</body>

onchange事件

			function onchangeFun(){
				console.log("静态绑定onchange事件");
			}
			
			// 动态绑定
			window.onload=function(){
				
				var onchangeObj=document.getElementById("sel02");
				
				onchangeObj.onchange=function(){
					alert("onchange动态绑定事件");
				}
			}

 实例

		下拉列表：
		<select id="sel01" onchange="onchangeFun()">
			<option></option>
			<option value="China">China</option>
			<option value="USA">USA</option>
			<option value="US">US</option>
		</select>
		<select id="sel02">
			<option></option>
			<option>China</option>
			<option>USA</option>
			<option>US</option>
		</select>

 onsubmit 事件

			// script部分代码
            // 发现提交的表单不合法，阻止表单提交
			function onsubmitFun(){
				console.log("onsubmit静态绑定事件")
				return false;
			}
			
			// 动态绑定
			window.onload=function(){
				var onsubmitObj=document.getElementById("form02");
				onsubmitObj.onsubmit=function(){
					console.log("onsubmit动态绑定事件")
					return false;
				}
			}

            //            body部分代码
		<hr />
		<form action="http://localhost:8080" method="post">
			<button type="submit">正常情况提交</button>
		</form>
		<form action="http://localhost:8080" method="post" onsubmit="return onsubmitFun()">
			<button type="submit">静态提交</button>
		</form>
		
		<form action="http://localhost:8080" method="post" id="form02">
			<button type="submit">动态提交</button>
		</form>

3.事件的注册 

定义

其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或者事件绑定。

事件的注册（绑定）分为静态注册事件和动态注册事件

 静态注册（绑定）

<script type="text/javascript">
			function onloadFun(){
				alert("静态注册onload事件")
			}
		</script>
	</head>
	<body onload="onloadFun();">
	</body>

动态注册（绑定）

		<script type="text/javascript">
			function onloadFun(){
				alert("静态注册onload事件")
			}
			// onload事件动态注册，是固定写法
			window.onload=function(){
				alert("动态注册的onload事件");
			}
		</script>
	</head>
	<body>
    </body>

DOM对象

1.DOM定义

DOM全称为 Document Object Model 文档对象模型。简单理解就是把文档中的标签、属性、文本等转换成为对象进行管理

 

 html对象化

 2.Document对象中的方法介绍

节点属性和方法

节点就是标签对象

方法：

 属性：

Eliauk_Doubling
关注
专栏目录
学习笔记 HTML CSS javaScript jQuery 超详细
07-15
前端笔记
详细介绍8款超实用JavaScript框架
10-26
本文将详细介绍八款超实用的JavaScript框架，它们各自有不同的特点和适用场景，可以帮助开发者提升工作效率，优化用户交互体验。 1. Hammer.js Hammer.js是一个轻量级的JavaScript库，专注于实现触摸事件的识别和...
JavaScript零基础学习（超详细）
02-19
根据pink老师的课程做的学习笔记 学习JavaScript看这篇就够了
javascript笔记 超级详细 入门
12-16
根据提供的文件信息，我们可以整理出一系列关于JavaScript的基础知识点，这些知识点特别适合初学者入门学习。 ### JavaScript基础概念 **JavaScript**是一种广泛使用的编程语言，它主要用于网页开发，为静态的HTML...
如何搭建Vue脚手架
w6437286的博客
09-26 456
本文主要讲解如何搭建vue脚手架。
基于JavaWeb开发的Java+SpringMvc+vue+element实现驾校管理系统详细设计
央顺科技官方博客
09-24 963
机遇与挑战始终并存。在开放的互联网平台面前，驾校预约管理系统的信息管理面临着巨大的挑战。传统的管理模式局限于简单数据的管理，无法适应不断变化的市场格局。在早期阶段，在将计算机技术和网络技术融入驾校预约管理系统数据管理方法之前，所有管理方式都通过人工操作完成了管理信息的。系统管理也都将通过计算机进行整体智能化操作，对于驾校预约管理系统所牵扯的管理及数据保存都是非常多的，举例像所有详细信息包括，管理员；首页、个人中心、学员管理、驾校教练管理、驾校车辆管理、预约管理、取消预约管理、驾校公告管理、系统管理。
vue上传预览CAD文件
只会写bug
09-24 613
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
深入理解 Nuxt.js 中的 app:data:refresh 钩子
09-29 821
钩子在数据被刷新时触发，可以选择性地传入要刷新的键名（keys）。这为开发者提供了一个灵活的机制来响应数据变化，并进行必要的更新。Nuxt.js 中的钩子的用途及其实现方法。这个钩子为开发者提供了一种灵活的方式来处理数据的更新，从而优化应用的响应性和用户体验。
跨境电商系统基本功能和特点​
商城 / Java 商城 -首选 商城 开源 电商 商城 源码 商城
09-29 265
综上所述，跨境电商系统通过其全面的功能和特点，为全球用户提供了便捷、高效、安全的跨境购物体验。随着技术的不断进步和市场的不断发展，跨境电商系统将继续优化和完善，以适应新的挑战和机遇。
初学Vue
最新发布
2302_80244686的博客
09-29 541
一套用于构建用户界面的渐进式JavaScript框架Vue可以自底向上逐层的应用。
从0学习React（3）
qq_54432917的博客
09-29 202
在第一篇文章中，我们对index.tsx文件的每一行代码都做了简单的分析。通过第一篇文章的总结，我也大致知道了index.tsx里的很多语法。而第二篇文章，我对index.tsx文件的框架做了一个大致的分析，通过第二篇文章，我对index.tsx有了进一步的认识。按理来讲，第三篇文章我还是解析index.tsx文件，但是我发现，对于前两篇文章，其实我对语法的细节有很多不明白的点。因此这篇文章，我就把React的一些最基础的知识给梳理一下，帮助我更好的理解index.tsx的代码。
基于Springboot+Vue的高校教室资源管理系统的设计与实现（含源码+数据库）
m0_59480939的博客
09-25 254
这个系统有三个角色：管理员、学生和教师。管理员可以在前台查看教室信息列表并进行预约，而在后台可以管理学生、教师、教室类型、教室信息、教室预约、系统公告和轮播图等模块，支持新增、查看、修改、删除和审核等操作。系统支持管理员后台登录，但不支持学生和教师后台登录，学生和教师则支持前台注册与登录，而管理员不支持前台登录和注册。数据库版本: mysql5.7或8.0。JDK版本: Java JDK1.8。开发系统:Windows10/11。数据库可视化工具: navicat。架构模式:MVC/前后端分离。
JavaScript --数字Number的常用方法
weixin_58694594的博客
09-25 581
【代码】JavaScript --数字Number的常用方法。
Ant design vue中的提示框（a-tooltip）
努力的nana
09-25 263
【代码】Ant design vue中的提示框（a-tooltip）
方法论大师 JavaScript 版本
PlayerYK的专栏
09-25 240
无论什么行业、什么问题，都会有一群人擅长通过简单的拼凑和归纳，炮制出一套“高深”的方法论。这些方法论通常看似逻辑严密、层层递进，实则全是空洞的概念堆砌，毫无实质作用。最搞笑的是，他们居然能为任何事物总结出一个“公式”，让人乍一看觉得有理，仔细思考后发现不过是披着华丽外衣的废话。是不是开始觉得这些“方法论大师”其实并没有提供真正有价值的建议？如果你也曾被这些空洞的概念忽悠过，那么来吧，我为你提供一个...
Vue脚手架搭建及vue项目创建
ning的博客
09-29 765
Vue CLI 是一个强大的工具，它简化了 Vue.js 项目的搭建和开发流程。通过几个简单的命令，我们可以快速创建一个功能完备的 Vue.js 项目，并开始开发。随着项目的深入，你还可以探索更多的 Vue CLI 功能和插件，以满足不同的开发需求。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章VUE快速入门手册——安装VUE脚手架（创建自己的第一个vue项目）Vue脚手架搭建及vue项目创建【详细教程】
【JavaEE初阶】深入解析单例模式中的饿汉模式，懒汉模式的实现以及线程安全问题
GGBond778的博客
09-29 950
本期讲解了关于设计模式之单例模式中的两个重要模式，即饿汉模式和懒汉模式，关于他们的实现代码，也进行了编写；以及最重要的两个模式的线程安全问题，小编进行了注重分析问题的产生，以及如何解决都有涉及~~~
Vue基础(1)
HBR666_的博客
09-29 768
2.数据代理的理解 通过一个对象代理对另一个对象的属性的操作（读/写） 如果直接更改obj2中的x obj中的x也会更改 即通过一个对象（obj2）对另一个对象obj的属性（x）的操作。当发现被修改时，页面中用到两者的地方会自动更新，而计算属性是依赖着data中的来改变的，则会再次调用fullName，调用get方法，达到页面中插值fullName修改的效果。2.所有不被Vue管理的函数（定时器的回调函数，ajax的回调函数等，promise的回调函数），最好写成箭头函数。3.get函数什么时候执行？
计算机毕业设计 养老院管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解
m0_74181697的博客
09-25 1250
本项目是一个养老院管理系统，旨在通过数字化平台提升养老院的管理效率和服务质量。系统为管理员提供全面的管理工具，为家属提供实时的信息访问，确保老人的安全和健康。通过优化家属沟通和个性化服务，系统有助于提高老年人的居住体验，推动养老服务行业的创新和发展。
超级充电JavaScript图形编程
在本书中，作者Raffaele Cecco详细讲解了如何利用JavaScript的最新技术和库来创建引人入胜的图形和动态体验。这包括了对HTML5 Canvas、SVG（Scalable Vector Graphics）以及WebGL等技术的深度解析。 HTML5 Canvas是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值