前端学习-JavaScript学习-JavaScript高级程序设计-第2章笔记

在HTML中使用JavaScript元素

<script>元素

元素属性

MDN <script>：脚本元素

属性 使用状态 描述
charset 可选、少用 字符集
defer 可选、少用 表示脚本可以延迟至文档完全被解析后实行，部分浏览器不支持
language 废弃 编写代码使用的语言
src 可选 包含要执行代码的外部文件
type 可选 [type属性是必须写的属性吗?]( https://blog.csdn.net/IDApprentice/article/details/125916036#:~:text=<script>标签中的type属性不是必须写的属性%2C ,%E5%9B%A0%E4%B8%BA%E6%8C%89%E7%85%A7%E6%83%AF%E4%BE%8B%2C%E8%BF%99%E4%B8%AA%E5%80%BC%E5%A7%8B%E7%BB%88%E9%83%BD%E6%98%AF%22text%2Fjavascript%22%2C%20%E4%BD%86%E6%98%AF%E6%88%91%E4%BB%AC%E8%A6%81%E7%9F%A5%E9%81%93%22text%2Fjavascript%22%E5%92%8C%22text%2Fecmascript%22%E9%83%BD%E5%B7%B2%E7%BB%8F%E5%BA%9F%E5%BC%83%E4%BA%86.)

使用方式

页面嵌入JavaScript代码
    <script>
        alert('alllert!');
    </script>
外部JavaScript文件

使用外部JavaScript文件时，标签内不应写代码，写了会被忽略

    <script src="example.js"></script>

元素位置

放在<head>元素内

问题：放在<head>元素内，会使得JavaScript代码加载完后，才开始加载页面，造成用户等待
解决方式：

  • 放在<body>元素底部
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 文本 -->
    <script src="example.js"></script>
</body>
</html>
  • 延迟脚本
    脚本延迟到整个页面都被加载完后再执行
<script defer="defer"></script>

<noscript>元素

使用情况：

  • 浏览器不支持脚本
  • 浏览器支持脚本，但是脚本被禁用
    此时<script>元素中代码不被执行，而执行<noscript>元素中代码
posted @ 2023-11-14 18:32  ayubene  阅读(28)  评论(0)    收藏  举报