三种引入JavaScript方法

最新推荐文章于 2022-12-21 19:31:19 发布

先给自己打个气

最新推荐文章于 2022-12-21 19:31:19 发布

阅读量1.8k

点赞数

分类专栏： JavaScript 文章标签： javascript html html5

本文链接：https://blog.csdn.net/qq_40641206/article/details/104173393

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

三个简单JavaScript语句
1、弹窗：alert();
2、网页控制台打印：console.log();
3、页面body显示：document.write();

引入JavaScript方法

1,用JavaScript：作为一个前缀，所有可以设置url的地方都可以使用JavaScript代码

<a href="javaScript:alert('运行JavaScript')"></a>
  <!-- 也可以用onclick:点击事件 -->
<a href="javaScript:;" οnclick="alert('运行JavaScript')">onclick</a>

2,用标签包住javascript代码。与css不同，script标签既可以放在head里也可以放在body里。

 <script>
        alert("直接运行javascript");
</script>

3.和css一样，推荐使用外部js文件，建立*.js文件。

注意用了src引用之后，不能在script标签里面写脚本。
好处：1，方便维护 2，利用浏览器缓存机制

<script src="text.js" type="text/javascript"></script>

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <!-- 引入外部的不能在里面接着写代码，浏览器忽略，在写一个script标签 -->
    <script src="./li.js"></script>
   <script>
       //代码
   </script>
</head>
<body>
    <div id="targe"></div>
</body>
</html>

li.js代码

var tg = document.getElementById("targe");
tg.innerHTML = "HELLO";
tg.style.backgroundColor = "red";

运行结果：
在这里插入图片描述
打开浏览器会发现没有任何效果，F12检查会发现报错提示，因为代码自上而下执行，先执行的script代码，在执行脚本代码时，这两句代码
var tg = document.getElementById(“targe”);
tg.innerHTML = “HELLO”;
取body中id名字为targe的元素，但是因为代码还没有执行body代码，计算机找不到id为targe的元素，tg不存在，给tg.innerHTML设置文本出错，所以报错。

解决方法1：在body最后加上script，自上而下执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
   
</head>
<body>
    <div id="targe"></div>
    <script src="./li.js"></script>
</body>
</html>

不会报错，程序顺利执行。
在这里插入图片描述

html5增强的属性（用于提升浏览器性能）：

► defer:用于指定脚本是否延迟执行。先加载整个页面资源，在加载script脚本内容。（只适用于外部脚本）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./li.js" defer></script>
</head>
<body>
    <div id="targe"></div>
</body>
</html>

li.js代码

var tg = document.getElementById("targe");
tg.innerHTML = "HELLO";
tg.style.backgroundColor = "red";

运行结果：
在这里插入图片描述
► async:用于指定脚本是否异步执行。开启一个新的线程，分两条路加载页面资源和script脚本。用于当JavaScript代码非常耗时，页面一直等待JavaScript渲染。（async 属性只能作用于外部脚本文件）

<script src=".js"  type=" text/javascript " async></script>

先给自己打个气

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录