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 赋值给 变量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>