1-了解JavaScript（两种API+三种页面添加方式+脚本调用策略）

JC03

已于 2024-07-04 00:10:58 修改

阅读量679

点赞数 17

分类专栏： JS笔记文章标签： javascript 笔记开发语言前端

于 2024-06-30 17:18:02 首次发布

本文链接：https://blog.csdn.net/weixin_70987470/article/details/140082708

版权

JS笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

期末紧急补习，仅片面学习

一、JS是什么？

JavaScript：一种面向对象的解释型脚本语言，一般用于前端与其他技术配合来实现一些操作（网页动态操作、网页内容改动、数据处理、异步、页面交互），或者在node.js上独立运行，用于开发脚本或服务器。

二、应用程序接口（API）

JavaScript的API非常强大，几乎可以实现任何在网页上想要实现的功能，而JS的API又分为两类：浏览器API和第三方API。

1.浏览器API

内建于web浏览器中，可以在用户浏览器中存储数据。
①文档对象模型（DOM）API
功能：操作 HTML 和 CSS。
很多常见的动态效果都是通过DOM实现的，比如：弹窗、表单验证、添加或删除元素等。

②地理位置 API
功能：获取用户地理位置。
比如定位在地图上。

③画布（CanVas）和 WebGL API：
功能：创建2D和3D图像，用于动画和图形展示。

④影音类 API：
功能：处理和播放多媒体内容，比如视频、音频以及视频聊天。

2.第三方API

第三方 API 并不是浏览器默认提供的功能，而是由外部器创建和维护的。

三、向页面添加JavaScript代码的三种方法

1.内部JS

在html文件中直接使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>狗埃斯测试</title>
    <!-- 一个弹窗操作示例 -->
    <script>
        alert("Hellow,World!")
    </script>

<body>
    <!-- 页面内容 -->
</body>

</html>

网页效果：

在这里插入图片描述

2.外部JS

即以文件的形式引入
index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>狗埃斯测试</title>
    <!-- 一个弹窗操作示例 -->
    <script src="test.js">
    </script>
<body>
    <!-- 页面内容 -->
</body>

</html>

test.js文件：

alert("作为文件引入网页成功")

网页效果：

在这里插入图片描述

3.内联JS

这种方式会让html变得杂乱而且效率低下，不推荐使用。
比如在一个按钮标签中之间关联一个点击操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>狗埃斯测试</title>
     <button onclick="getH()">点击按钮显示文字</button>
    <script>
        // 获得文字信息的方法
        function getH(){
            var H = document.createElement("p");
            H.textContent = "Hellow" ;
            document.body.appendChild(H);
        } 
    </script>

<body>
    <!-- 页面内容 -->
</body>

</html>

网页效果：
在这里插入图片描述

四、JS的运行次序

浏览器会按照由上至下的顺序执行JavaScript代码。
如果写错了顺序，对象未被声明代码就已经调用，则不会正确运行
将上面的test.js修改为：

alert(H);
H = "Hellow World";

浏览器运行到alter但是在此之前没有读取到变量H，所以不会弹出信息
在这里插入图片描述

五、脚本调用策略

由于HTML也是由上至下读取代码的，所以脚本的调用顺序同样重要，若读取到js时网页的元素还未加载完毕，就无法实现相应的效果。

1.内部-JS监视器

2.外部JS-defer属性或置底

①通过在script标签中添加defer来解决页面加载和脚本加载的问题。

<script src="test.js" defer>

②将脚本元素放在html文件的最底部，这种方式可以实现HTML加载完毕之后再加载脚本。

<body>
    <script src="test.js">
    </script> 
</body>
</html>

但如果项目中含有大量的JavaScript代码，则会带来性能损耗。这一问题可以使用异步（async）解决。