【web前端初级课程】第四章什么是JavaScript

置顶祺祺祺有此理

已于 2023-07-26 17:59:52 修改

阅读量780

点赞数 2

分类专栏： wed前端初级课程文章标签：前端 html javascript

于 2023-03-26 19:36:46 首次发布

本文链接：https://blog.csdn.net/m0_70464577/article/details/129700202

版权

wed前端初级课程专栏收录该内容

8 篇文章 1 订阅

订阅专栏

本文是一篇关于Web前端初级课程的文章，主要介绍了JavaScript的基础知识，包括三种写法（行内、页面、外联），常见的弹框（alert、confirm、prompt），变量和常量的声明，数据类型，运算符，循环结构和函数的使用。此外，还提供了几个相关的编程练习，如菱形代码、水仙花数等，帮助读者巩固所学知识。

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

系列文章传送门：

【wed前端初级课程】第一章什么是HTML

【web前端初级课程】第二章 CSS层叠样式表

【web前端初级课程】第三章 CSS的特殊样式

【web前端初级课程】第四章什么是JavaScript

【web前端初级课程】第五章常用的内置模块

【web前端初级课程】第六章 BOM编程的五大对象

【web前端初级课程】第七章你所不知道的DOM编程

【web前端初级课程】第八章什么是事件？

文章目录：

一、JavaScript在前端的三种写法

二、常见的弹框

三、变量

四、常量

五、数据类型

六、运算符

七、循环及函数

八、相关练习

前言

JavaScript是一个面向对象的，弱数据类型的，解释型的，动态脚本语言。

面向对象更符合我们对事物认识的视角，通过将代码中的角色进行归类，使得代码得到了梳理，具有更强的可读性以及可扩展性。
从代码可执行角度上去分类，编程语言分为编译型和解释型，从数据类型的角度去分类，分为静态类型和动态类型：
- 编译型：将整个代码编译成可执行程序，通过运行这个可执行程序达到执行代码的目的。
- 解释型：阅读到一行代码就执行改代码，不生成可执行文件。
- 静态类型：数据类型必须在创建变量的时候就进行指定。
- 动态类型：无需指定变量的数据类型，变量只有赋值的那一刻才有具体数据类型。

一、JavaScript在前端的三种写法

（一）行内样式：在标签中加属性

 <button onclick="alert('你点我干嘛?')"> </button>>

（二）页面样式

<script type="text/javascript">
        alert('hello world!')
</script>

（三）外联样式

PS:注意进行引用的script标签不能自结束，也不能在内容部分中写代码，要写代码另起一个script标签。

二、常见的弹框

（一）alert警告框

格式：alert("自定义内容")

（二）confirm确认框

他有两个按钮，一个是取消一个是确定，点击取消confirm将会返回false，点击确定返回True。

 <script>
    flag = confirm("自定义内容")
    if (flag){
	    alert("自定义内容")
    }else{
		alert("自定义内容")
    }
</script>

（三）prompt输入框

str = prompt("自定义问题","自定义默认答案")

三、变量

（一）创建变量（主用let）

使用let关键字进行对变量的声明
使用var关键字进行对变量的声明
不进行声明直接通过变量名复制的方式进行创建

PS:如果无声明创建变量，变量作用域是全局

如果使用var创建变量，那么变量是函数级作用域
如果使用let创建变量，那么变量是块级作用

（二）变量的命名规范

首先只能使用有效字符进行命名，有效字符范围：大小写字母、数字、_、$
首字母不能使数字
不能使用关键字或者保留字来创建变量
变量名最好有意义 name = “lyh” age = 18
使用小驼峰法或者下划线法进行命名，具体选择跟官方推荐

四、常量

常量：值不会发生变化的量。

方法：使用const 关键字创建常量。

<script>
	const version = "3.7.3"
    //此行代码会错，因为常量在初始化之后就不能在修改。
	version = "3.7.0"
</script>

五、数据类型

（一）基本数据类型

数值类型Number：整型int和浮点型float
字符串类型String：被单引号，双引号或反引号引起来的内容就是字符串
布尔型Boolean：他只有两个值一个是True一个是False
表示空类型null
表示这不是一个数字：NaN（not a number）
表示未定义：undefined

（二）引用数据类型

数组Array：关于多个数据的容器
对象Object

（三）数据类型转换

自动类型转换
强制类型转换：使用parseInt、parseFloat进行类型强制转换

六、运算符

（一）算术运算符：+ - * / **

（二）逻辑运算符：&& || ！ & |

（三）比较运算符：>、<、>=、<=、 ==、===、!=

在JS中双等只判断值是否相等不判断类型

三等会考虑变量的数据类型，如果数据类型不同，即使值一样也是返回false

（四）赋值运算符：=、+=、-=、*=、\=、**=、 %=

（五）自增自减运算符：a++、++a、a--、--a

七、循环及函数

（一）循环结构

包括 for、while、do while、break 、continue

（二）函数

函数就是具有特定功能的代码片段。

提高代码的复用性、可读性、以及可扩展性。降低代码的耦合性（提示代码的内聚性）

语法结构
function 函数名([参数列表]){
		//函数相关的代码
		[return 返回值]
}

（三）函数的分类

有参函数/无参函数
有返回值/无返回值
定义者：自定函数/系统函数

（四）值传递和引用传递

值传递：是将自身的值赋给参数，而不是将本身传递给参数。所以值传递参与运算不影响参与传值的变量。所有的基本数据类型都是值传递。
引用传递：是将自身传参到函数中，参与函数的运算。

（五）arguments对象

因为js对参数列表的管理非常的宽容，所以实参可以跟形参不一致，这样不会报错，所有参数都会存在函数内部的arguments中，我们可以通过遍历的方式访问每一个参数。

这样做的好处是，当我需要给扩展该函数，无需修改参数列表，只需判断当前参数的个数，根据个数的不同执行，不同的代码。增强代码的可扩展性。

（六）匿名函数

匿名函数就是没有名字的函数，一般这种函数使用的场景是，只需要调用这么一次，为了这一次的使用没必要起名字，于是匿名函数得到了可用武之地。

function show(fn){
	fn()
}
how(function(){
	alert("1111")
})

（七）lambda表达式（箭头表示）

lambda表示可以进一步简化匿名函数的结构,

当lambda表达式只有一个参数的时候，参数的小括号可以省略。

当lambda表达式只有一行代码的时候，大括号可以省略。

//单参单行
let fun = x => x + 5
//多参单行
fun = (x, y) => x + y
//多参多行
fun = (x, y) => {
  let result = x * y
  return result
}

（八）递归

递归：常用于分治思想编程，有两个必备的特点：1.自己调用自己 2.又递归结束的条件。

八、相关练习

练习一：菱形代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菱形</title>
	</head>
	<body>
		<script>
			cengshu=parseInt(prompt("请输入层数"))
			up_cengshu=Math.ceil(cengshu/2)
			for(let i=1;i<=up_cengshu;i++){
				str1=""
				for(let j=1;j<=up_cengshu-i;j++){
					str1+=" "
				}
				for(let j=1;j<=i*2-1;j++){
					str1+="*"
				}
				console.log(str1)
			}
			under_cengshu=cengshu-up_cengshu
			z=under_cengshu
			if(cengshu%2==0){
				for(let i=1;i<=under_cengshu;i++){
					str2=""
					for(let j=2;j<=i;j++){
						str2+=" "
					}
					for(let j=1;j<=z*2-1;j++){
						str2+="*"
					}
					console.log(str2)
					z-=1
				}
			}else{
				for(let i=1;i<=under_cengshu;i++){
					str2=""
					for(let j=1;j<=i;j++){
						str2+=" "
					}
					for(let j=1;j<=z*2-1;j++){
						str2+="*"
					}
					console.log(str2)
					z-=1
				}
			}
		</script>
	</body>
</html>

练习二：求三位水仙花数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			for(i=100;i<=999;i++){
				let baiwei=Math.floor(i/100)
				let shiwei=Math.floor(i%100/10)
				let gewei=i%10
				if(Math.pow(baiwei,3)+Math.pow(shiwei,3)+Math.pow(gewei,3)==i){
					console.log(i)
				}
			}
		</script>
	</body>
</html>

练习三：求10！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			let sum=1
			for(i=2;i<=10;i++){
				sum=sum*i
			}
			console.log(sum)
		</script>
	</body>
</html>

练习四：求10！+9！+8！……1！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			let zonghe=0
			for(i=1;i<=10;i++){
				let sum=1
				for(j=2;j<=i;j++){
					sum=sum*j
				}
				zonghe=zonghe+sum
			}
			console.log(zonghe)
		</script>
	</body>
</html>