javaScrip的学习（一）

引言

一、java和JavaScript的联系

二、js中的弹出框

1.alert弹出框

2.confirm带确认取消的按钮弹框

3.prompt带有提示信息且带有输入框的弹框

4.输出到网页中

三、js引入方式

1. 放在script标签中

2.放在外部js文件中

四、执行顺序

五、书写规范

1. 语句结尾加分号

2. 空格不影响(会忽略多余的空格)

六、变量声明

1.注释

2.变量声明

3.变量的命名规则

七、数据类型

1.基本数据类型

2. 引用数据类型

八、数据类型检测

1.typeof()进行检测

九、结束语

引言

这篇文章让我们简单来了解一下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 赋值给 变量aconsole.log("a:", a);var b = 20;var c = a + b;console.log("c:", c); var a = 10, b = 20, c;console.log("a:", a);  // 10console.log("b:", b);   // 20console.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>