Javascript详细讲解

m0_71012114

已于 2022-11-09 20:19:08 修改

阅读量1k

点赞数 1

分类专栏：前端文章标签： javascript 前端 html

于 2022-08-27 16:13:51 首次发布

本文链接：https://blog.csdn.net/m0_71012114/article/details/126550808

版权

本文详细介绍了JavaScript，包括其基本语法、数据类型、函数、数组、日期、弹窗、事件、DOM操作和BOM。从JavaScript的介绍到实际应用案例，如图片轮播、登录验证和全选功能，帮助读者全面掌握JavaScript编程。

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

一、Javascrip介绍

HTML 定义网页的内容

CSS 规定网页的布局

JavaScript 对网页行为进行编程为了给个页面加动态效果的

特点：脚本语言、基于对象、简单、动态性、跨平台性。

二、JavaScript入门

1、JavaScript标签

<script></script>

2、两种引入方式

（1）、内部引入：

语法：

<script>
        JavaScript代码
        ... ...
</script>

（1）、外部引入：

语法：

<!-- src:Js文件相对地址 -->
<script src="path"></script>

3.基本语法

（1）变量声明

var 变量名；

注意：js变量可以不赋值，直接使用，默认值是undefined。

（2）变量取值

var 变量名 = 值;

注意：js变量是弱类型，同一变量可以存放不同数据类型。

4.数据类型

4.1基本数据类型

（1）Underfined

Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。

（2）Null

可以通过将变量的值设置为 null 来清空变量。

（3）Number

JavaScript不区分整数与浮点数

（4）String

没有固定大小的原始类型，符串中每个字符都有特定的位置，首字符从位置 0 开始，第二个字符在位置 1，依此类推。

正常字符串使用单引号，或者双引号包裹。

（5）Boolean

它有两个值 true 和 fals。

注意：

对变量使用typeof(变量)可以判断数据类型：

Undefined 类型返回：undefined

Boolean 类型返回：boolean

Number 类型返回：number

String 类型返回：string

引用类型或 Null 类型返回：object

4.2引用数据类型

（1）数组（Array）

Java的数组必须是相同类型的对象，JS中不需要这样，即Array可以包含任意的数据类型

var arr = [1,2,3,4,5,'hello',null,true];

注意：取数字下标时如果越界了，就会报undefined（未定义）。

（2）函数（Function）

语法：（方法参数可写可不写，根据自己需要）

function 方法名()
{
    // 执行代码
}

5.函数

一个简易的计算机

            <script type="text/javascript">
            // 加法运算
			function add(a, b) {
				var sum = parseInt(a) + parseInt(b);
				alert(a + "+" +
					b + "的结果为：" + "\n" + sum);
			}
			//减法运算
			function sub(a, b) {
				var sub = parseInt(a) - parseInt(b);
				alert(a + "-" +
					b + "的结果为：" + "\n" + sub);
			}
			//乘法运算
			function cheng(a, b) {
				var cheng = parseInt(a) * parseInt(b);
				alert(a + "*" +
					b + "的结果为：" + "\n" + cheng);
			}
			//除法运算
			function chu(a, b) {
				var chu = parseInt(a) / parseInt(b);
				alert(a + "÷" +
					b + "的结果为：" + "\n" + chu);
			}
			do {
				var choice = prompt("欢迎使用简易计算机：" + "\n" + "1.加法运算：" + "\n" + "2.减法运算：" + "\n" + "3.乘法运算：" + "\n" + "4.除法运算：" +
					"\n" + "5.退出：" + "\n" + "请输入你的选项：")
				switch (choice) {
					case "1":
						var a = prompt("请输入第一个操作数：");
						var b = prompt("请输入第二个操作数：");
						add(a, b);
						break;
					case "2":
						var a = prompt("请输入第一个操作数：");
						var b = prompt("请输入第二个操作数：");
						sub(a, b);
						break;
					case "3":
						var a = prompt("请输入第一个操作数：");
						var b = prompt("请输入第二个操作数：");
						cheng(a, b);
						break;
					case "4":
						var a = prompt("请输入第一个操作数：");
						var b = prompt("请输入第二个操作数：");
						chu(a, b);
						break;
					case "5":
						alert("退出！")
						break;
					default:
						alert("你输入了错误的请重新输入！");
						break;
				}
			} while (choice != 5)
		</script>

6.数组类型

          length:数组长度
join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
          pop():返回并删除最后元素
          push()：向数组的末尾添加一个或更多元素，并返回新的长度
          reverse();反转数组
           sort();排序

<script type="text/javascript">
			/*
				长度不固定,类型不固定
			*/
			var arr1 = []; // 空数组
			arr1[0] = 1; // 给值
			var arr2 = [1,"二",false,new Date];
			var arr3 = new Array(3); // 指定长度创建数组,但是长度没有限制
			arr3[0] = 0;
			arr3[1] = 1;
			arr3[2] = 2;
			arr3[3] = 3;
			console.log(arr3);
			// 取值
			console.log(arr3[0])
			// 赋值
			arr3[0] = 10;
			console.log(arr3[0])
			console.log("--------"); 
			
			var arr4 = [1,2,3,4,5];
			console.log(arr4.length);
			console.log(arr4.join("-")); // 与字符串方法split相反
			console.log(arr4.pop());
			console.log(arr4);
			console.log(arr4.push(6));
			console.log(arr4);
			console.log(arr4.reverse());//反转数组
			console.log(arr4.sort()); // 只会升序排序
		</script>

7.日期类型

	<script type="text/javascript">
			var date = new Date();// 当前时间
			console.log(date);
			console.log(date.getFullYear());	// 获得年
			console.log(date.getMonth() + 1); // 获得月份,0-11
			console.log(date.getDate());// 日
			console.log(date.getDay());// 周
			console.log(date.getTime());// 毫秒值
			var date2 = new Date(1); // 毫秒,从1970-1-1
			console.log(date2)
			// 按照本地格式打印时间
			console.log(date.toLocaleString())
		</script>

8.打印99乘法表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		for(var i = 1; i < 10; i++) {
					for (var j = 1; j <= i; j++) {
						document.write(j + "*" + i