阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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 了,只能将错就错的写了。

      历史遗留问题,无解

      目录
      目录