【JS-1】—— JavaScript基础与基本语法

最新推荐文章于 2023-04-09 10:14:43 发布

阿牛大牛中

最新推荐文章于 2023-04-09 10:14:43 发布

阅读量614

点赞数

本文链接：https://blog.csdn.net/weixin_46351593/article/details/105831639

版权

现在开始学习JavaScript了，这是第一次JavaScript的笔记。

简介

JavaScript构成

ECMAScript是JavaScript的标准，但它不等同于JavaScript，也不是唯一被标准化的规范。实际上，一个完整的JavaScript实现，由以下三个不同部分组成：

核心（ECMAScript）：语言核心部分。
文档对象模型（Document Object Model，DOM）：网页文档操作标准。
浏览器对象模型（BOM）：客户端和浏览器窗口操作基础。

JavaScript特点

解释型语言
类似于C和Java的语法结构
动态语言
基于原型的面向对象

JS的Hello World

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--JS代码需要写到script标签中-->
		<script type="text/javascript">
			/*
			 * 控制浏览器弹出一个警告框
			 */
			alert("哥，你真帅呀！");
			/*
			 * 让计算机在页面中输出一个内容
			 * document.write()可以向body中输入一个内容
			 */
			document.write("你看我出不出来~~~");
			/*
			 * 向控制台输出一个内容
			 * console.log()的作用是向控制台输出一个内容
			 */
			console.log("你猜我在哪出来呢？");
		</script>
	</head>
	<body>
		
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5cy8YncY-1588121768676)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-1】/1.gif)]

上面的图片显示出了alert();和document.write();的作用，console.log();是向控制台输出一个内容我们可以查看控制台：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ELlrUz9O-1588121768679)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-1】/2.jpg)]

上面三个语句可以称为三条输出语句：

控制浏览器弹出一个警告框:alert();。
让计算机在页面中输出一个内容:document.write();。
向控制台输出一个内容:console.log();。

我们需要记住了。

JS代码编写位置

写在标签的属性中

写在onclick属性中

可以将JS代码编写到标签的onclick属性中，当我们点击按钮时JS代码才会执行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--可以将JS代码编写到标签的onclick属性中-->
		<button onclick="alert('讨厌，你点我干嘛？')">点我一下</button>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LyaLapy3-1588121768680)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-1】/3.gif)]

写在超链接的href属性中

可以将JS代码写在超链接的href属性中，这当我们点击超链接的时候，会执行JS代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--可以将JS代码编写到标签的onclick属性中-->
		<button onclick="alert('讨厌，你点我干嘛？')">点我一下</button>
		
		<!--可以将JS代码写在超链接的href属性中，这当我们点击超链接的时候，会执行JS代码-->
		<a href="javascript:alert('让你点你就点？！')">你也点我一下</a>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tung9gis-1588121768682)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-1】/4.gif)]

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

script标签

可以将JS代码写到script标签中就类似，CSS代码写到style标签中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			alert("我是script标签中的代码！！");
		</script>
	</head>
	<body>
		<!--可以将JS代码编写到标签的onclick属性中-->
		<button onclick="alert('讨厌，你点我干嘛？')">点我一下</button>
		
		<!--可以将JS代码写在超链接的href属性中，这当我们点击超链接的时候，会执行JS代码-->
		<a href="javascript:alert('让你点你就点？！')">你也点我一下</a>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OKG77X9X-1588121768686)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-1】/5.gif)]

编写到外部JS文件中

可以将JS代码编写到外部JS文件中，然后通过script标签引入。
写到外部文件中可以在不同页面中同时使用，也可以利用浏览器的缓存机制。

推荐使用的方式！！！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BNAJfZHe-1588121768686)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-1】/6.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FsowGcWw-1588121768687)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-1】/7.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R54bpw1P-1588121768688)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-1】/8.gif)]

注意：script标签一旦用于引入外部文件了，就不能再编写代码了，即使编写了浏览器一会忽略。
如果要编写，需要创建新的script标签。
script标签有一个布尔型属性defer属性，设置该属性能将JavaScript文件延迟到页面解析完毕后再运行。
<script type="text/javascript" defer src="js/script.js"></script>
异步加载JavaScript文件，可以通过script标签中的async属性，让浏览器异步加载JavaScript文件，即在加载JavaScript文件时，浏览器不会暂停，而是继续解析，这样能节省时间，提升响应速度。
<script type="text/javascript" async src="js/script.js"></script>
async是HTML5新增的布尔型属性，通过设置async属性，就不同考虑script标签的位置！！

基本语法

注释：

/*
	多行注释
*/

//单行注释

JS中严格区分大小写。
JS中每一条语句以分号结尾。如果不写分号，浏览器会自动添加，但是会消耗一些系统资源。而且有些时候，浏览器会加错分号，所以在开发中分号必须写。
JS中会自动忽略多个空格和换行，所以我们可以留用空格和换行对代码进行格式化。

字面量与常量

字面量：都是一些不可改变的值。
- 比如：1、2、3、4、5…
- 字面量都是可以直接使用的，但是一般都不会直接使用字面量。
变量：变量可以用来保存字面量，而且变量的值是可以任意改变的。
- 变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量，而很少直接用字面量。
- 可以通过变量对字面量进行描述。如：var age = 18;。

数据类型

数据类型：数据类型指的就是字面量的类型，比如123是数字，hello是字符串，在JS中一共有6中数据类型：

String：字符串。
Number：数值。
Boolean：布尔值。
Null：空值。
Undifined：未定义。
Object：对象。

其中前五种属于基本数据类型，而Object属于引用数据类型。

String

String字符串，在JS中字符串需要使用引号引起来。如：var str = "hello";
特点：
- 使用单引号或者双引号都可以。但是不要混着用var str = ' hello ";
- 在ECMAScript3中，字符串必须在一行内显示，换行表示是不允许的，如果要换行，可以在字符串中添加换行符\n。反斜杠作为JavaScript中的转义字符。
- 在ECMAScript5中，字符串允许多行表示。在换行结尾处添加反斜杠。反斜杠和换行符不能最为字符串直接量内容。

Number

Number数值类型，在JS中所有的数值都是Number类型，包括整数浮点数（小数）。
当我们写下这样一段代码的时候：

//数字123
var a = 123;
//字符串123
var b = "123"
console.log(a);
console.log(b);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-swsPp6cA-1588121768689)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-1】/9.jpg)]

我们无法在控制台中区分那个是a那个是b，所以我们说：

可以使用typeof来检查变量的类型。语法：typeof 变量名

console.log(typeof a);
console.log(typeof b);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NPpQhJ1F-1588121768691)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-1】/10.jpg)]

特殊：

最大值：Number.MAX_VALUE=1.7976931348623157e+308，如果数值超过了这个最大数值，则会返回一个Infinity表示正无穷。Infinity也是一个字面量，使用typeof检查会显示为number。
非数值：NAN，表示Not A Number。但是用typeof检查会显示为number。它不等于任何数值，包括自己，如果0除以0时会返回这个特殊值。
最小值：Number.MIN_VALUE表示它能表示的最小的正值。

运算：

在JS中整数的运算基本可以保证精确，如果使用JS进行浮点数运算，可能得到不精确的结果。所以千万不要使用JS进行对精确度要求比较高的运算！！

Boolean

布尔型（Boolean）仅包含两个固定的数值：ture和false。其中true代表真，false代表假。布尔值主要用来做逻辑判断。

Null

Null类型的值只有一个就是null。它表示空值，定义一个空对象指针。

使用typeof检查null时会返回Object，表明它属于对象类型。

Undefined

Undefined类型只有一个值undefined，当声明一个变量，但是并不进行赋值，它的值就是undefined。

使用typeof检查undefined也会返回undefined。

强制类型转换

指将一个数据类型强制转换为其他的数据类型。

类型转换，主要指将其他的数据类型转换为String、Number、Boolean。

将其他的数据类型转换为String

方式一：调用被转换数据类型的toString()方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X2ANLVed-1588121768692)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-1】/11.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bd4mc5Ng-1588121768695)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-1】/12.jpg)]

该方法不会影响原变量，它会将转换的结果返回。

但是注意：null和undefined这两个值没有toString()方法，如果调用，他们的方法，则会报错。

在这里插入图片描述

方式二：调用String()函数。使用String()函数做强制类型转换时，对于Number、Boolean实际上就是调用toString()方法，但是对于null和undefined就不会调用toString()方法，他会将null转换为"null"，将undifined转化为"undefined"。

将其他数据类型转换为Number

方式一：使用Number()函数，用法和String()函数一样。

字符串转为数字：

如果是纯数字的字符串，则会转换为数字。
如果有非数字内容，转换为NAN。
如果字符串是空串，或是一个全是空格的串，则转换为0。

布尔型转为数字：

true–>1
False–>0

null转换为数字：0

undefined转换为数字：NAN

方式二：这种方式专门用来对付字符串，parseInt()；、parseFloat();函数。

parseInt();可以将一个字符串中的有效的数字内容取出来：先解析位置0出的字符，如果不是有效数字，则直接返回NAN，如果0处的字符是数字，或者可以转换为有效数字，则继续解析位置1处的字符，如果不是有效数字，则直接返回0处的有效数字。以此类推，按从左到右的顺序，逐个分析每个字符，直到发现非数字字符为止。

parseFloat();的作用和parseInt();类似，不同的是他可以获得有效的小数。即能识别第一个出现的小数点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var a = "123aes235y";
			a = parseInt(a);
			console.log(typeof a);
			console.log(a);
			var b = "123.456dsf";
			b = parseFloat(b);
			console.log(typeof b);
			console.log(b);
		</script>
	</head>
	<body>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CQiF3USu-1588121768700)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-1】/15.jpg)]

再说一下，在JavaScript中以0开头的数字是八进制数字，以0x开头的数字表示十六进制数字。但是要表示二进制要以0b开头，但有些浏览不支持。

像a = "070"这种字符转换为数字，有些浏览器会当成八进制，有些浏览器当做十进制，所以要这样表示：parseInt(a,10);。

将其他数据类型转换为Boolean，使用Boolean()；函数

console.log(Boolean(0));//返回false
console.log(Boolean(1));//返回true

console.log(Boolean("false"));//返回true
console.log(Boolean(""));//返回false

console.log(Boolean(null));//返回false

console.log(Boolean(undefined))l//返回false

注意：

数字–>布尔型：除了0和NAN之外，都是true。
字符串–>布尔型：除了空串，都是true。
null–>布尔型：false。
undefined–>布尔型：false。
对象也会转换为true。

标识符

在JS中所有的可以由自己命名的都可以称为是标识符。

例如：变量名、函数名、属性名都属于标识符。
命名一个标识符的时候要遵循以下规则：

标识符中可以含有字母、数字、下划线_、美元符号$。
标识符不能以数字开头。
标识符不能是JavaScript中的关键字或者保留字。
命名规范：标识符一般都采用驼峰命名法。

补充：JS底层保存标识符实际上是采用Unicode编码，所以理论上所有的utf-8中含有的内容都可以作为标识符。但是考虑到JavaScript版本的兼容性以及开发习惯，不建议使用双字节中的中文字符命名变量或函数名！！虽然能用但千万别用！！

阿牛大牛中

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【JS-1】—— JavaScript基础与基本语法

现在开始学习JavaScript了，这是第一次JavaScript的笔记。文章目录简介JavaScript构成JavaScript特点JS的Hello WorldJS代码编写位置写在标签的属性中写在onclick属性中写在超链接的href属性中script标签编写到外部JS文件中基本语法字面量与常量数据类型StringNumberBooleanNullUndefined强制类型转换标识符简介...
复制链接

扫一扫