JavaScript基础学习最全解析笔记

abstract-person

已于 2023-07-15 09:04:27 修改

阅读量142

点赞数 4

文章标签： javascript html5 css

于 2023-07-14 16:51:25 首次发布

本文链接：https://blog.csdn.net/m0_74895600/article/details/131724550

版权

本文介绍了JavaScript的基础内容，包括JavaScript的组成——ECMAScript、DOM和BOM，JavaScript的三种引入方式，核心语法如变量声明、数据类型以及流程控制语句。此外，还提到了变量的var和let关键字，以及系统对话框的基本使用。

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

JavaScript

前言

例如：随着网络的不断发展，全段这门技术也越来越重要，很多人都开启了前端学习，本文就介绍了javascript基础内容。

一、JavaScript的组成？

ECMAScript：ECMAScript是一种可以在宿主环境中执行计算并能操作可计算对象的基于对象的程序设计语言。ECMAScript最先被设计成一种Web脚本语言，用来支持Web页面的动态表现以及为基于Web的客户机—服务器架构提供服务器端的计算能力。但作为一种脚本语言， ECMAScript具备同其他脚本语言一样的性质，即“用来操纵、定制一个已存在系统所提供的功能，以及对其进行自动化”。
DOM指的是“Document Object Model”，也就是文档对象模型的意思，是HTML和XML文档的编程接口；它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。

DOM对象：在js对网页进行操作时，认为网页中的每个标签就是一个对象，使用面向对象的思想来操作，js中提供了一个document对象，表示整个html文档对象，网页加载后会自动生成表示此文档的document对象，通过document提供的方法精确获得网页中要操作的标签。

3.BOM Browser Object Model，浏览器对象模型，提供一系列与浏览器相关的信息。

BOM对象：分为window对象和window子对象（screen对象，location对象，navigator对象，history对象）

在这里插入图片描述

二、javascript的引入方式

1.内部引入

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">	
				//javascript代码块
		</script>
	</body>
</html>

2.外部引入===>推荐使用

前提：要在你的文件夹下面有你的js文件夹推荐使用

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script src="js/new_file.js">
		//javascript代码块
		</script>
	</body>
</html>

3.行内引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		<input name="changephone" type="button" onclick="javascript:alert('你好世界')" /><br>
	</body>
</html>

三、javascript的核心语法

1.变量声明与赋值

使用var关键字声明
边声明边赋值；var 变量名=值；

var 变量名列表
例如：var name，age，sex
同时赋多个值

2.var关键字的特点

1.作用域:全局变量
2.变量可以重复声明
注意：后者会将前者覆盖

3.拓展let关键字==>ES6关键字（该知识点后面学习ECMAScript6会有）

1.使用let关键字定义变量用法类似var
2.块级作用域：只在当前代码块有效
注意：let关键字声明的变量不可以重复定义

4.Javascript的基本数据类型

基本数据类型

1.数值类型（number）{整数，小数，NaN}
2.字符串类型（string）
3.布尔类型（boolean）{true，false}
4.null（object类型，被认为是对象占位符）
5.undefined（变量名尚未初始化）

判断数据类型

typeof（）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>	
	<body>
		<script>
			//语法 var 变量名=值
			//alert()是警告框
			//alert（typeof(判断的变量名)）		
			var num=12;
			alert(typeof(num));
		</script>	
	</body>
</html>

5.Javascript的流程控制语句

if语句

	<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>	
	<body>
		<script>
		if(条件){
			//执行语句
		}
		</script>
		
	</body>
</html>

if-else语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>	
	<body>
		<script>
		if(条件){
			//执行语句
		}else{
		//执行语句
		}
		</script>
		
	</body>
</html>

多分支语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>	
	<body>
		<script>
		if(条件){
			//执行语句
		}else if（条件）{
		//执行语句
		}else{
		//执行语句
		}
		</script>
		
	</body>
</html>

switch语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>	
	<body>
		<script>
	switch（条件）{
	case：1
	//执行语句
	break；
	case：2
	//执行语句
	break；
	default：
		//执行语句
	break；
	
	}
		</script>
		
	</body>
</html>

while循环语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>	
	<body>
		<script>
		while(条件){
			//循环代码块
		}
		</script>
		
	</body>
</html>

do-while循环语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>	
	<body>
		<script>
		do{
			//循环代码块
		}while(条件)
		</script>
		
	</body>
</html>

for-in循环语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>	
	<body>
		<script>
		var i=["菠萝","香蕉","西瓜","芒果"]
	for（var q in i）{
	      alert（q）
	}
	
		</script>
		
	</body>
</html>

6.代码注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>	
	<body>
		<script>
	     单行注释
		 
		 //alert(12)
		 
		 多行注释
			 
		/* <div class="e">
		 	<span class="r">
		 		<img src="img/t.png" / width="300px" height="400px">
		 	</span>
		 	<span class="y">
		 		<img src="img/p.png" width="400px" height="400px" />
		 	</span>
		 </div> 
		 </div> */
		 
		</script>
		
	</body>
</html>