Bootstrap

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>

九、结束语

那么第一节的js就到此结束了,小伙伴们可以继续关注下一节内容,我们继续来学习。

see you ~

;