HTML中怎么使用JS

🌙
手机阅读
本文目录结构

三种使用JS的方法

  • 1、行内使用Javascript
  • 2、嵌入式
  • 3、外联式

1、行内使用Javascript介绍;

常用的就是在a标签的href上使用 javascript:;

<a href="javascript:;">阿西河前端教程</a>

这段代码,就是当点击连接[阿西河前端教程]的时候,没有任何反应;这是常用的行内Javascript用法;

如果需要使用点击链接弹窗文字;可以如下的写法;

<!doctype html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>
    <div id="div1">
        <a href="javascript:;">阿西河前端教程</a>
        <a href="javascript:;" onclick="alert('缓存已清除!')">清除缓存</a>
    </div>
    <script>
    function zab(){
        alert("这是一段测试代码")
    }
    </script>
    </body>
</html>

这时候点击连接有弹窗的链接的时候,就会弹窗"这是一段测试代码"的消息提醒;行内使用Javascript的方法,不推荐大家使用,不易维护 ;

2、嵌入式是直接写在HTML页面中的

下面的,绑定事件的,就是嵌入式的写法;

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<div id="div1">
    <a href="javascript:;" onclick="zab()">222</a>
</div>
<div id="div2">
    <a href="javascript:;">阿西河前端教程</a>
    <a href="javascript:;">有弹窗的链接</a>
</div>

<script>
    var oDiv=document.getElementById("div2");
    oDiv.onclick=function(){
        zab();
    };
    function zab(){
        alert("这是一段测试代码")
    }
</script>
</body>
</html>

嵌入式写法,标签内任何地方都不要出现 </script > 的字符串;下面的的代码会出错

<script>
    console.log("现在可以开始写javascript代码了</script>");
</script>

<script>
    var oDiv=document.getElementById("div1");
    oDiv.innerText="现在已经被我占领了 </script> ";
</script>

3、外联式

注意编码格式统一,否则中文会乱码

通过script的src属性引用一个文件;关于script的标签位置,按照传统的做法,是写在head元素中;

这种做法的目地是把所有外部文件(CSS,JS)的引用都放在相同的地方;

可是如果放在顶部,HTML加载的时候,是从上到下依次解析的;

页面加载很多HTML的时候,就会堵塞后面的DOM节点加载;

导致页面呈现的内容出现延迟,而延迟期间浏览器窗口将是空白的;

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //为了方便演示,直接使用嵌入式写法了
        for (var i=0;i<100000000;i++){

        }
    </script>
</head>

为了避免这个问题,现在的WEB一般是全部javascript都放在</body>之前,放在页面偏后的地方,当然如果你有强迫症,就要放前面,那需要特殊处理一下,

如下;

如果放在head中,直接获取元素的时候,是获取不到的(因为此时还没有加载完成);比如获取ID,就是获取不到的;需要做延迟加载才好

window.onload=function () {
    var oDiv=document.getElementById("div1");
    oDiv.innerText="22";
}

这样在DOM加载完成后才会触发onload里面的代码

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="div1">
    <a href="javascript:;">阿西河前端教程</a>
    <a href="javascript:;">有弹窗的链接</a>
</div>
</body>
<!--嵌入式-->
<script>
    var oDiv=document.getElementById("div1");
    oDiv.onclick=function(){
        zab();
    };
    function zab(){
        alert("这是一段测试代码")
    }
</script>
<!--外链式-->
< script src="./jquery.js"></script>
< /html>

所有的javascript会按照它在页面中的顺序来依次解析;一般写在页面内容的后面,推荐放在</body>前;

放在</html>后面也是没问题的,正常执行也不会报错的;只是W3C规范推荐放在</body>前;

演示代码

<!doctype html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //嵌入式的写法,直接放在上面,获取不到ID;
        /*var oDiv3=document.getElementById("btn2");
        console.log(oDiv3);//null*/

        window.onload=function () {
            var oDiv3=document.getElementById("btn2");
            console.log(oDiv3,"window.onload");//null
        }
    </script>
</head>
<body>
<!--JS行内写法:JS直接写在标签上-->
<div>这是一段信息;<a href="javascript:;">这是百度的连接</a></div>
<input type="button" value="click me 1" onclick="alert('这是行内的写法')">
<br>
<!--JS嵌入式的写法 :JS写在script标签内-->
<input type="button" value="click me 2" id="btn1">
<br>
<br>
<br>
<input type="button" value="click me 3" id="btn2">

<br>
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="">

<script>
    //嵌入式的写法
    var oDiv=document.getElementById("btn1");
    oDiv.onclick=function () {
        alert("这是嵌入式的写法")
    }
</script>
<script src="src/btn.js"></script>

</body>
</html>

关于行内写JS

项目中,很少会遇到行内写JS的,工作中我只在2016年给公司的wifi组做支撑的时候见到过这么写的;

当时他们的wifi管理页面,用luci lua 一个开源项目修改的,页面的HTML CSS,JS是直接渲染出来的,里面的CSS,JS大都是行内写的,维护起来真的太坑了;

我在写JS的时候,把需要我写的JS代码和模块,全部外链式引导页面,把CSS,JS和他们lua代码分开;

不和他们的代码掺合在一起,否则以后维护起来就太蛋疼了;

如果你也有幸需要处理这类的项目,请一定要外联式来写自己的代码,不要被带歪了!

嵌入式与外链式的区别?

在HTML中嵌入javascript代码虽然没有问题,但是一般认为最好的做法还是尽可能使用外部文件来包含javascript代码,不过,并不存在必须使用外链式的规定;但外链式的优点如下

  • 维护性好
    • JS代码和HTML代码混在一起,维护的时候需要改动HTML页面,而现在为了专注和分工明确,基本都是前后端分离的做法;
    • 页面输入都是后端的页面;如果是外链式的,只需要维护自己的JS文件即可,不需要接触HTML文件;
  • 可缓存
    • 浏览器能够具体的设置缓存连接的所有javascript文件,也就是说如果两个页面都使用同一个文件,那么这个文件只需要下载一次,最终结果就是能够加快页面加载的速度(每次上新的时候,修改时间戳即可,);
    a.axihe.com/project/test.js?t=2016101301
    // 后面的 ?t=2016101301 就是时间戳
    
  • 适用未来:XHTML和HTML文件会出现javascript代码解析方面的差异;因为外链式不需要接触XHTML/HTML所以不存在这些问题;

注意,在使用嵌入式写法的时候,不要标签内任何地方都不要出现 <script> 的字符串;

即使是 alertconsole.log 这些输出,如果需要用,请使用转移字符"/“来解决

HTML外部资源引入

  • href: hypertext reference
  • src: source

href 用于标示资源和文档关系,src 用于替换标签内容

<img src="xxx.jpg"/>
<script type="text/javascript" src="xxx.js"></script>
<a href="http://www.baidu.com">百度</a>

为什么 style不用src

至于说为什么当初就决定外部样式表用link href来链接,而不是用style src来载入,可能是因为第一批互联网人认为样式表更符合外部链接资源的特征,它更接近附属的资源,而不是内嵌的内容。

比如考虑alternate stylesheets,在同一时间只需要链接一组样式表,而不是载入所有。

当然你可以简单的归结为历史遗留(也就是当初某个浏览器开发者的一个偶然决定导致)。这是一个扯淡的问题,制作标准的人不是中国人,是老外;

其它的一些意外

有些名词是中国第一批程序员,翻译的问题;最明显的一个名次上下文,就是代码所在的执行环境,英文

context,这个应该翻译成代码运行环境 才更符合语义,但是第一批互联网人翻译成中文书,都这么写,然后我们这些小辈们为了统一,也都这么叫了;

在HTTP协议的知识里,有一个叫 HTTP Referer 的;属于请求头(header)的一部分,当浏览器向web服务器发送请求的时候,一般会带上Referer,告诉服务器我是从哪个页面链接过来的,服务器籍此可以获得一些信息用于处理。

比如从我的博客链接到一个朋友那里,他的服务器就能够从 HTTP Referer 中统计出每天有多少用户点击我主页上。

链接访问他的网站,以前自己倒腾过网站的朋友,在百度统计,55LA统计之类的,会有这方面的统计信息供查看;

这里的Referer其实应该是英文单词referrer,也不知道是拼错的人太多了导致标准跟着拼错,还是编写标准的人拼错了,开发者讲错纠错,反正现在的情况就都写成 HTTP Referer 了,只能将错就错的写了。

历史遗留问题,无解

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了