当前位置：首页 > article >正文

Web前端-JavaScript书写位置

article 2024/10/21 6:09:55

一、JavaScript介绍

1.JavaScript 是什么?

是一种运行在客户端(浏览器)的编程语言，实现人机交互效果。

2.作用

（1）网页特效(监听用户的一些行为让网页作出对应的反馈)

（2）表单验证(针对表单数据的合法性进行判断)

（3）数据交互(获取后台的数据，渲染到前端)

（4）服务端编程(node.js)

3.JavaScript的组成

ECMAScript : 规定了js基础语法核心知识。比如:变量、分支语句、循环语句、对象等等

Web APls : DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作

BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

二、体验js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .yyy {
            background-color: green;
        }
    </style>
</head>
<body>
    <button class="yyy">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

    <script>
        let bts = document.querySelector('button')
        for (let i = 0; i < bts.length; i++) {
            bts[i].addEventListener('click',function{
                document.querySelector('.yyy').className=''
                this.className = 'yyy'
            })
        }
    </script>
</body>
</html>

三、JavaScript书写位置

1.内部JavaScript

直接写在html文件里，用script标签包住

规范:script标签写在</body>上面

拓展: alert('你好，js')页面弹出警告对话框

例如：

<!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>
    <!-- 内部js -->
    <script>
        //页面弹出警示框
        alert('sgqt')
    </script>
</body>
</html>

注意：

我们将 <script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。

2.外部JavaScript

代码写在以.js结尾的文件里

语法:通过script标签，引入到html页面中

js文件：

alert('外部js文件')

html文件：

<!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 src="/JS/basis.js"></script>
</body>
</html>

注意：

（1）script标签中间无需写代码，否则会被忽略!

（2）外部]avaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。

3.内联JavaScript

代码写在标签内部

例如：

<!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>
    <button onclick="alert('内联js')">点击</button>
</body>
</html>