JavaScript学习笔记

Hatsune Miku

已于 2022-10-18 20:14:48 修改

阅读量812

点赞数

分类专栏：笔记 JavaScript 文章标签：编辑器 javascript 前端

于 2022-10-18 20:00:02 首次发布

本文链接：https://blog.csdn.net/qq_34493555/article/details/127395468

版权

笔记同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了JavaScript的基础知识，包括HelloWorld、代码位置、基本语法、字面量和变量的使用。讲解了如何在控制台、页面及HTML属性中执行JS，以及变量的声明、赋值和更新。还探讨了数据类型，如数字、字符串、布尔值、undefined和null，并涉及数据类型转换的方法。此外，还提供了变量命名规范和输入值给变量的prompt方法。

摘要由CSDN通过智能技术生成

JavaScript笔记

最后更新日：2021年11月28日

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第二集</title>
		<!--JS代码编写到script标签中-->
		<script type="text/javascript">
			/*控制浏览器弹出一个警告框*/
			alert("这是我的第一行JS代码");
			
			/*让计算机在页面中输出内容(在body中写入)*/
			document.write("七哥最帅");
			
			/*向控制台输出内容*/
			console.log("你猜我在哪儿显示");
		</script>
	</head>
	<body>
	</body>
</html>

第三集（Js编写位置）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第三集</title>
		<script src="dz.js" type="text/javascript">
			//src引入外部js
			//script标签引一旦引入了外部文件了，就不能编写代码了，即使编写了浏览器也会忽略。
			//如果需要则可以再创建一个script标签用于内部代码
			alert("我是内部的js代码");
		</script>
        <script type="text/javascript">
			alert("写在这");
		</script>
		<!--
		可以把js代码写在<head>中
        -->
		
	</head>
	<body>
		<!--
			可以将js代码写到标签的oncluck属性中 
			当我们点击代码时,js代码才会执行
		-->
		<button onclick="alert('讨厌');">点我啊</button>
		
		<!--
        	可以将js代码写在超链接的href的属性中，这样当点击超链接时,会执行js代码。
        -->
		<a href="javascript:alert('讨厌');">你也点我一下</a>
		<a href="javascript:;">你也点我一下</a>
		<!--
        	虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用。
        -->
	</body>
</html>

外置js文件( dz.js )

alert("我是外部js的代码");

第四集（基本语法）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第四集</title>
		<script type="text/javascript">
			/*
			 	JS注释
			 	多行注释/* ... */
			 	
			 */
			
			//单行注释
			
			/*
			 * 	1、JS中严格区分大小写
			 * 	2、JS中每一条语句以(;) 分号结尾
			 * 	如果不写分号，浏览器会自动添加，但会消耗资源，有些时候浏览器还会加错分号。
			 * 	3、JS中会忽略多个换行和空格
			 *
			 */
		</script>
	</head>
	<body>
	</body>
</html>

第五集（字面量和变量）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第五集</title>
		<script type="text/javascript">
			/*
			 *	字面量都是一些不能改变的量 
			 * 		比如：1 2 3 4 5 6...
			 * 		字面量都是可以直接使用的，但是我们一般不会直接使用字面量
			 */
			
			/*
			 * 	变量 	变量可以用来保存字面量，而且变量的值是可以任意改变的
			 * 			变量更加方便我们使用，所以在开发中都是通过变量来保存一个字面量
			 * 			而很少直接使用字面量
			 * 			可以通过变量对字面量描述
			 */
			//声明变量
			//在js中使用var来声明一个变量
			var x;
			//为变量赋值
			x=20;
			x=3.14;
			x=0;
			
			//声明变量和赋值同时进行
			var a=100;
			
			//通过变量对字面量描述
			var age=19;
			document.write(age);
		</script>
	</head>
	<body>
	</body>
</html>

因更换教程所以跳了！！！！！！

第十五集（输入值给变量）

输入框：prompt(‘…’);

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第十五集</title>
	</head>
	<body>
		<script type="text/javascript">
			var user=prompt('请输入用户名');
			alert(user);
		</script>
	</body>
</html>

第十六集 (变量语法扩展)

1、更新变量

	一个变量被重新赋值后，他原有的值就会被覆盖，变量值将以最后一次赋值的值为准。

试验代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第十六集</title>
	</head>
	<body>
		<script type="text/javascript">
			var a=100;
			var a=200;
			document.write(a);
		</script>
	</body>
</html>

第十七集（变量命名的规范）

1、由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号($)组成，如：userAge, num01, __name

2、严格区分大小写。var app;和var App;是两个变量

3、不能以数字开头。18age是错误的

4、不能是关键字. 例如for、var、while

5、变量名必须有意义

6、遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirsName

第二十~四十集（数据类型）

js把数据类型分为两类

简单数据类型（Number数字型、String字符串、Boolean布尔型、Undefined、Null空类型）

复杂数据类型（object）

简单数据类型	说明	默认值
Number	数字型，包含整形值和浮点型值，如21、0.21	0
Boolean	布尔型，如 true、false，等价于1和0	false
String	字符串类型，如“张三” 注意咋们js里，字符串都带引号	“”
Undefined	var a；声明了变量a但是没有给值，此时a=undefined	undefined
Null	var a=null; 声明了变量a为空值	null

22 数字型

数值型声明案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>22</title>
		<script type="text/javascript">
			//整形
			var num=10;
			console.log(num);
			//浮点
			var PI=3.14;
			console.log(PI);
			//八进制  0~7  程序里面数字前面加0表示八进制
			var num1=010;
			console.log(num1);
			//十六进制  0~9 a~f       #ffffff 数字的前面加0x表示十六进制
			var num2 = 0x9;
			console.log(num2);
			var num3 = 0xa;
			console.log(num3);
		</script>
	</head>
	<body>
	</body>
</html>

输出结果（控制台）

数字型的范围

最大值 Number.MAX_VALUE (1.7976931348623157e+308)

最小值 -Number.MIN_VALUE (5e-324)

数字型三个特殊值

无穷大，大于任何数 Infinity (Infinity) 如Number.MAX_VALUE

无穷小,小于任何数 -Infinity (-Infinity) 如-Number.MIN_VALUE

Not a number代表一个非数值 NaN (NaN) 如 ‘七哥’ - 100

23 isNAN

**isNaN( )**这个方法用来判断非数字,并且返回一个值。如果是数字返回的是false ，如果不是数字返回的是true。

试验代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>isNaN</title>
	</head>
	<body>
		<script type="text/javascript">
			console.log(isNaN(12));
            console.log(isNaN('哈哈'));
		</script>
	</body>
</html>

结果(控制台)

false
true

24 字符型

字符串型可以是引号中的任意文本，其语法为 双引号""和单引号’’

var user="张三";		//使用双引号表示字符串
var user1='李四';	//使用单引号表示字符串
//常见错误
var user2=王二;		//报错，没使用引号会被认为是js代码，但js没有这些语法。

因为HTML标签里面的属性使用的是双引号，js这里我们更推荐使用单引号。

字符串引号嵌套

引号就近匹配

js可以用单引号嵌套双引号，或者用双引号嵌套单引号(外双内单，外单内双)

var strMsg = '我是"高富帅"程序员';		//可以用''包含""
var strMsg1 = "我是'高富帅'程序员";		//也可以用""包含''
//常见错误
var strMsg2 = 'oh shit!";		//报错不能单双引号搭配

字符串转义符

转义符	解释说明
\n	换行符，n 是 newline 的意思
\	斜杠
\’	’ 单引号
\*	" 双引号
\t	tab 缩进
\b	空格， b 是 blank 的意思

26 字符串长度以及拼接

字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。

试验代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>26字符串长度以及拼接</title>
	</head>
	<body>
		<script type="text/javascript">
			//  1.检测获取字符串的长度   length
			var str='我的长度是多少，你猜猜';
			document.write(str.length);
		</script>
	</body>
</html>

结果

字符串拼接

多个字符之间可以使用+进行拼接，其拼接方式为 字符串+任何类型=拼接之后的新字符串。

拼接前会把与字符串相加的任何类型转化成字符串，再拼接成一个新的字符串

拼接代码

document.write('沙漠' + '骆驼');		//字符串的拼接	输出 沙漠骆驼
document.write('张三' + 18);			//数值相加，字符相连   输出 张三18

27 字符串拼接加强

这集太简单不写笔记了

28 显示年龄案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>28显示年龄案例</title>
	</head>
	<body>
		<script type="text/javascript">
			var age = prompt("请输入你今年的年龄：");
			var str = '你今年的年龄是'+age+'岁了';
			alert(str);
		</script>
	</body>
</html>

29 boolean以及undefined和null

布尔型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var flag = true;
			var flag1 = false;
			console.log(flag+1);
			console.log(flag1+1);
		</script>
	</head>
	<body>
	</body>
</html>

结果

2
1

结论

true当1看,false当0看。

undefined

	一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连加时,注意结果)

var a;
console.log(a);			//输出undefined
console.log('你好' + a);			//输出 你好undefined
console.log(11 + a);		//输出  NaN
console.log(true + a);		//输出  NaN

Null

	一个变量给null值，里面存的值为空(学习对象时，我们继续研究null)

var b = null;
console.log('你好' + b);		//你好null
console.log(11 + b);		//114
console.log(true + b);		//1

30 typeof检测变量数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>30 typeof检测变量数据类型</title>
	</head>
	<body>
		<script type="text/javascript">
			var num = 10;
			console.log(typeof num);	//输出	number
			var str = '马牛逼';
			console.log(typeof str);	//输出	string
			var flag = true;
			console.log(typeof flag);	//输出	boolean
			var a = undefined;
			console.log(typeof a);	//输出	undefined
			var k = null;
			console.log(typeof null);	//输出	object
			
			var age = prompt('输入年龄');
			console.log(age);	//输出	18
			console.log(typeof age);	//输出	string
		</script>
	</body>
</html>

32 转换为字符串类型

什么是数据类型转换

使用表单、prompt获取过来的数据默认是字符串类型，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另一种数据类型。

转换为字符串类型

方式	说明	案例
toString()	转成字符串	var num=1; alert(num.toString());
String()强制转换	转成字符串	var num=1; alert(String(num));
加号拼接字符串	和字符拼接的结果都是字符串	var num=1; alert(num+‘我是字符串’)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>转换为String类型</title>
	</head>
	<body>
		<script type="text/javascript">
			//使用.toString()方法转换
			var num = 18;
			var str = num.toString();
			console.log(typeof str);
			//使用String()函数转换
			var num1 = 18;
			var str1 = String(num1);
			console.log(typeof str);
			//使用字符串拼接转换
			var num2 = 18;
			var str2 = num+'';
			console.log(typeof str2);
		</script>
	</body>
</html>

33 转换为数字型

转换为数值型

方式	说明	案例
parseInt(string)函数	将string类型转成整数数值型	parseInt(‘78’)
parseFloat(string)函数	将string转成浮点数数值型	parseFloat(‘78.21’)
Number()强制转换函数	将string类型转换为数值型	Number(‘12’)
js隐式转换( - * / )	利用算术运算隐式转换为数值型	‘12’ - 0