目录
引言
这篇文章让我们简单来了解一下js，那么什么是js?
JavaScript（简称JS）是一种高级编程语言，主要用于为网页添加交互功能。它可以嵌入到HTML页面中，通过对DOM（文档对象模型）的操作来实现动态效果和用户交互。
JavaScript由Netscape公司的Brendan Eich于1995年创造，最初是为了增强HTML页面的功能性。随着时间的推移，JavaScript逐渐演变成一种通用的编程语言，可以在浏览器以外的环境中运行，例如服务器端的Node.js。
JavaScript具有一些特点，例如动态类型、解释执行、弱类型、面向对象和事件驱动。它支持各种编程范式，包括面向对象编程、函数式编程和命令式编程。
JS拥有强大的功能和广泛的应用领域。它可以用于创建交互式的网页、开发前端框架、构建移动应用程序、编写服务器端代码等。由于其易学易用的特点，JavaScript成为了最受欢迎的编程语言之一，被广泛应用于Web开发领域。
接下来让我们进入js的学习，感受编程的乐趣~
一、java和JavaScript的联系
JavaScript是一种动态编程语言，用于在网页上添加交互功能。它是一种具有面向对象、函数式和基于原型的特性的脚本语言。JavaScript通常用于前端开发，可以通过对DOM（文档对象模型）的操作来实现网页的动态效果。
而Java是一种面向对象的编程语言，具有强类型和静态类型的特点。Java可以用于多种应用开发，包括网页开发，但通常需要使用Java Applet或Java Servlet来实现与HTML的交互。
JavaScript和Java之间存在以下联系与区别：
- 名称相似：JavaScript的名称中包含"java"，这是因为当它在1995年首次发布时，Java语言的流行度很高。然而，JavaScript和Java是两种不同的编程语言，它们的语法和用途也不同。
- 应用领域：JavaScript主要用于前端开发，可以实现网页的交互功能和动态效果。而Java可以用于服务器端开发、桌面应用程序和移动应用程序等多个领域。
- 语法：尽管JavaScript的语法在某些方面受到Java的影响，但它们拥有不同的语法结构和规则。JavaScript是一种动态类型语言，不需要声明变量的类型；而Java是一种静态类型语言，需要在声明变量时指定其类型。
- 运行环境：JavaScript是一种脚本语言，可以在浏览器中运行。浏览器提供了JavaScript解释器，并通过对DOM的操作来实现网页的交互效果。而Java需要在JVM（Java虚拟机）上运行，或者通过其他方式编译成可执行文件。
总而言之，JavaScript和Java虽然名称相似，但它们是两种不同的编程语言，用途和语法也有所不同。JavaScript主要用于前端开发，而Java可以用于多种应用领域。
二、js中的弹出框
1.alert弹出框
alert弹出框：alert弹出框是一种常见的浏览器弹窗，用于向用户显示一条简单的消息。它包含一个消息文本和一个确定按钮，当用户点击确定按钮时，弹窗会关闭。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 弹出框
alert("昨夜雨疏风骤，浓睡不消残酒。试问卷帘人，却道海棠依旧，知否知否，应是绿肥红瘦。");
</script>
</body>
</html>运行结果（点击确定以后弹出框消失）
2.confirm带确认取消的按钮弹框
confirm：confirm弹框通常会包含一个确认按钮和一个取消按钮，用于用户确认或取消某个操作。用户可以点击确认按钮来执行操作，或者点击取消按钮来取消操作。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//带确认取消的按钮弹框
var a = confirm("你确定要删除吗?");
//输出到控制台
console.log("a:", a);
</script>
</body>
</html>运行结果
3.prompt带有提示信息且带有输入框的弹框
prompt：prompt是一个内置函数，用于显示一个对话框，提示用户输入信息
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 带有提示信息且带有输入框的弹框
var b = prompt("请输入你的名字：", "小明");
console.log("b:", b);
</script>
</body>
</html>运行结果
4.输出到网页中
document.write（）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 输出到网页中
document.write("<h1>好烦！！！！</h1>");
</script>
</body>
</html>运行结果
三、js引入方式
在HTML中，可以通过两种方式引入JavaScript文件。
1. 放在script标签中
内部引入：将JavaScript代码写在<script>标签中，放置在HTML文件的<head>或<body>中。
2.放在外部js文件中
外部引入：通过<script>标签中的src属性引入外部的JavaScript文件。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.放在script标签中 -->
<!-- <script type="text/javascript">
console.log("太热了！！！！！啊啊啊啊啊啊！！！！")
</script> -->
<!-- 2.放在外部js文件中 -->
<script src="./js/index.js">
// 注意 此处不能再写js代码，不会被执行
// console.log("太热了！！")
</script>
</head>
<body>
</body>
</html>四、执行顺序
在JavaScript中，阻塞加载是指在浏览器加载脚本文件时，会阻塞页面的渲染和其他脚本的执行，直到当前脚本文件加载完成并执行完毕后，才会继续加载和执行其他的脚本文件或者进行页面渲染。
原因是，当浏览器遇到 script 标签时，会立即停止解析 HTML 并开始下载和执行脚本文件。如果脚本文件体积较大或者网络延迟较高，那么页面的加载和渲染将会被延迟。
阻塞加载可能会影响页面的性能和用户体验。为了解决这个问题，可以考虑使用异步加载、延迟加载或按需加载等技术来优化脚本加载。
五、书写规范
1. 语句结尾加 分号
2. 空格不影响(会忽略多余的空格)
如下代码可以正常执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1. 语句结尾加 分号
// 2. 空格不影响(会忽略多余的空格)
var person = "张奇";
var p = "张奇2";
console.log("person:", person);
console.log("p:", p);
</script>
</body>
</html>六、变量声明
1.注释
单行注释 Ctrl + /
多行注释 ctrl + shift + /
2.变量声明
var ===> 声明 关键字
a ===> 标识符 变量
= ===> 赋值
10 ===> 储存的值
如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var a = 10; // 将 10 赋值给 变量a
console.log("a:", a);
var b = 20;
var c = a + b;
console.log("c:", c);
var a = 10, b = 20, c;
console.log("a:", a); // 10
console.log("b:", b); // 20
console.log("c:", c); // undefined 变量声明了 但是未赋值
</script>
</body>
</html>3.变量的命名规则
- 不能以数字开头
- 不能是JavaScript中的保留关键字 例如: name class document等
- 遵循驼峰命名法 newNameClass
- js命名是区分大小写的 所以在命名变量、函数时要多加注意。
七、数据类型
1.基本数据类型
- 1.string 字符型
- 2.number 数字型
- 3.Boolean 布尔型
- 4.undefined 未定义
- 5.null 空
2. 引用数据类型
- 1.array 数组
- 2.object 对象
- 3.function 函数
八、数据类型检测
1.typeof()进行检测
具体如下代码块解释
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//数据类型检测 typeof
//基本数据类型
// 1.string 字符串
// var str = "123456789"
// console.log("str:", str, typeof str);
//2.number 数字
// var num = 1233456789;
// console.log("num:", num, typeof num);
// 3.boolean 布尔值
// var f = true;
// console.log("f:", f, typeof f);
//4.undefined 未定义
// var a = undefined;
// console.log("a:", a, typeof a);
// 5.null 空值
// var b = null;
// console.log("b:", b, typeof b);//object
//引用数据类型
//1.Array 数组
var arr = [];
console.log("arr:", arr, "======", typeof arr);//object
//2.function 函数
var fn = function () { };
console.log("fn:", fn, "======", typeof fn);//function
//3.object 对象
var obj = {}
console.log("obj:", obj, "======", typeof obj);//object
</script>
</body>
</html>九、结束语
那么第一节的js就到此结束了，小伙伴们可以继续关注下一节内容，我们继续来学习。
see you ~