3-25 JS基础学习-CSDN博客

本文链接：https://blog.csdn.net/weixin_43871650/article/details/105089039

一、 JS简介

JavaScript诞生于1995年由于当时网速的原因,它的出现主要是用于处理网页中的前端验证。

所谓的前端验证,就是指检查用户输入的内容是否符合一定的规则。比如:用户名的长度,密码的长度,邮箱的格式等。

JS的特点

解释型语言
类似于C和Java的语法结构
动态语言：变量可以存储任意类型
基于原型的面向对象

二、js使用方式

JS代码需要编写到script标签中。

JS代码是从上到下，一行一行执行的。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
	<!-- JS代码需要编写到script标签中-->
	<script type="text/javascript">
	</script>
</head>

<body>
</body>
</html>

alert(“你真帅啊！”);
弹出警告框。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
	<!-- JS代码需要编写到script标签中-->
	<script type="text/javascript">
		/*
		 * 控制浏览器弹出一个警告框
		 */
		 *alert("你真帅啊！");
	</script>
</head>
<body>
</body>
</html>

document.write(“xxx”);
document.write 可以向body输出一个内容。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
	<!-- JS代码需要编写到script标签中-->
	<script type="text/javascript">
		/*
		 * 让计算机在页面中输出一个内容
		 */
		document.write("看我出来不出来~~~");
	</script>
</head>
<body>
</body>
</html>

在这里插入图片描述

console.log()
console.log()向控制台输出一个内容

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
	<!-- JS代码需要编写到script标签中-->
	<script type="text/javascript">
		/*
		 *向控制台输出一个内容
		 */
		console.log("你猜我在哪里出来？");
	</script>
</head>
<body>
</body>
</html>

在这里插入图片描述

可以将js代码编写到标签的onclick属性中

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>

<body>
	<button onClick="alert('讨厌，你点我干嘛~~');">点我一下</button>
</body>
</html>

在这里插入图片描述

可以将js代码写在超链接的href属性中，这样当点击超链接时，会执行js代码

虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>

<body>
	<!-- 
		可以将js代码写在超链接的href属性中，这样当点击超链接时，会执行js代码
		虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用
	-->
	<a href="javascript:alert('让你点你就点！！');" >你点我一下嘛</a>
</body>
</html>

在这里插入图片描述

可以将js代码编写到外部js文件中，然后通过script标签引入

写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制推荐使用的方式。
在这里插入图片描述

注意：
script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略。
如果需要则可以在创建一个新的script标签用于编写内部代码。

三、js语法

注释

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
	<script type="text/javascript">
		/*
			多行注释
			JS注释
			多行注释，注释中的内容不会被执行，但是可以在源代码中查看
			要养成良好的编写注释的习惯，也可以通过注释来对代码进行一些简单的调试
		 */
		
		//单行注释
	</script>
</head>

<body>
</body>
</html>

js中严格区分大小写。

在这里插入图片描述

js每一条语句以分号(;)结尾

如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，而且有些时候，浏览器会加错分号。

四、字面量（常量）和变量

字面量（常量）：都是一些不可改变的值，比如：1，123，“hello”.字面量都可以直接使用，但是我们一般都不会直接使用字面量。

变量：变量可以用来保存字面量，而且变量的值是可以任意改变的，变量更加方便我们使用。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
	<script type="text/javascript">
		/*
		 * 字面量（常量）：都是一些不可改变的值
		 * 比如：1 2 3 4 5
		 * 字面量都可以直接使用，但是我们一般都不会直接使用字面量
		 * 	
		 * 变量：变量可以用来保存字面量，而且变量的值是可以任意改变的
		 *		变量更加方便我们使用，
		 * 
		 */
		
		//变量的声明：js中使用var关键字来声明一个变量
		var a = 123;
		
		console.log(a);
		//alert(12132123132);
	</script>
</head>

<body>
</body>
</html>

标识符

在JS中所有的可以由我们自主命名的都可以称为是标识符
例如:变量名、函数名、属性名都属于标识符
命名一个标识符时需要遵守如下的规则:
1.标识符中可以含有字母、数字、_、$
2.标识符不能以数字开头
3.标识符不能是ES中的关键字或保留字
4.标识符一般都采用驼峰命名法：首字母开头小写，其他字母开头都大写，其余字母都是小写。如：helloWorld

五、数据类型

数据类型指的就是字面量的类型，在JS中一共有六种数据类型。
其中String、 Number、Boolean、Null、Undefined属于基本数据类型；而Object属于引用数据类型。
可以使用 typeof 来检查数据的类型，如：var a="123"; alert(typeof a);

String 字符串
在JS中字符串需要引号 ( ’ ’ 或者 " " )引起来，
如：var str = "hellow"；var str1 = 'world';
Number 数值
在JS中所有的数值都是Number类型，包括整数和浮点数(小数)
如：var a = 123.23444; var b = 145;
注意：如果使用JS进行浮点运算，可能得到一个不精确的结果,所以千万不要使用JS进行对精确度要求比较高的运算.
Boolean 布尔值
Null 空值
Undefined 未定义
object 对象

基本数据类型与引用数据内存的区别

基本数据类型

基本数据类型的值直接在核内存中在储
值与值之间是独立存在，修改一个变量不会影响其他的变量
在这里插入图片描述

引用数据类型（对象类型）

对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，
而变量保存的是对象的内存地址(对象的引用)
当一个通过一个变量修改属性时，另一个也会。受到影响

new Object()回返回一个指针，把obj理解成一个指针即可

在这里插入图片描述

	<script type="text/javascript">
		var obj1 = new Object();
		var obj2 = new Object();
		obj1.name = "obj";
		obj2.name = "obj";
		alert(obj1.name);
		alert(obj2.name);
		
		alert(obj1 == obj2);

		alert(obj1.name == obj2.name);
	</script>

六、js对象

varname=“孙悟空”;
var gender =“男” ;
var age = 18;
如果使用基本数据类型的数据，我们所创建的变量都是独立，不能成为一个整体。
对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性

对象分类

内建对象
由ES标准中定义的对象，在任何的ES的实现中都可以使用，
比如: Math、String、Number、Boolean、Function、Object。。。
宿主对象
由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
比如：BOM DOM
自定义对象
由开发人员自己创建的对象|

创建对象

使用 new 关键字调用函数 Object() 创建对象
构造函数是专门用来创建对象的函数
使用typeof检查一个对象时，会返回object

var obj = new object();
console.1og(typeof obj);

使用对象字面量，可以在创建对象时，直接指定对象中的属性
属性名和属性值是一组一组的名值对结构，名和值之间使用 : 连接，多个名值对之间使用 , 隔开.
如果一个属性之后没有其他的属性了，就不要写.
语法: {属性名:属性值 , 属性名:属性值, …}

	<script type="text/javascript">
		var obj = {name:"孙悟空",age:123};
		alert(obj.name +" "+ obj.age);
	</script>

向对象添加属性

在对象中保存的值称为属性
向对象添加属性
语法：对象 . 属性名 = 属性值;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
	<script type="text/javascript">
		var obj = new Object();
		obj.name = "孙悟空";
		obj.age = 123;
		console.log(obj);
	</script>
</head>

<body>
</body>
</html>

在这里插入图片描述

读取对象属性

语法：对象 . 属性名;
如果读取对象中没有的属性，不会报错而是会返回undefined

console.log(obj.name);

在这里插入图片描述

删除对象属性

语法：delete 对象 . 属性名;

delete obj.age;

七、函数

函数function简介

函数也是一个对象
函数中可以封装一些功能 (代码)，在需要时可以执行这些功能(代码)
函数中可以保存一些代码在需要的时候调用
理解如下：(一般不会用以下方法创建函数)
在这里插入图片描述

函数的常用创建方法

在这里插入图片描述

	<script type="text/javascript">
		function fun2()
		{
			console.log("这是我的第二个js函数");
		}
		
		fun2();
	</script>

在这里插入图片描述

3-25 JS基础学习

文章目录

一、 JS简介

二、js使用方式

JS代码需要编写到script标签中。

可以将js代码编写到标签的onclick属性中

可以将js代码写在超链接的href属性中，这样当点击超链接时，会执行js代码

可以将js代码编写到外部js文件中，然后通过script标签引入

三、js语法

注释

js中严格区分大小写。

js每一条语句以分号(;)结尾

四、字面量（常量）和变量

标识符

五、数据类型

基本数据类型与引用数据内存的区别

基本数据类型

引用数据类型（对象类型）

六、js对象

对象分类

创建对象

向对象添加属性

读取对象属性

删除对象属性

七、函数

函数function简介

函数的常用创建方法