往期回顾

在上一期的《JavaScript的组成 | DOM/BOM》☜里，我们有对文档对象模型-DOM、浏览器对象模型-BOM

这两大部分进行了解学习，如果有还不是很明白的小伙伴们，可以在上篇文章的下方留言给我哦，我会为大家解答的哦

很快我们就进入了红宝书的第二章了！这章我们来讨论下在HTML中使用JavaScript的几种方法～（别着急走，我知道这是入门知识，但是你真的掌握了嘛？）来看看吧～

在开发JavaScript的时候，Netscape公司要解决的第一个问题就是：“如何让JavaScript既能与HTML页面共存，又不影响页面在其他浏览器的呈现效果？”最终的解决方案是为Web增加统一的脚本支持，也就是我们现在看到的script标签

<script></script>

当然我们今天要讨论的不是这个标签的诞生史，也不是长得好不好看这些问题～而是

如果你熟悉怎么在HTML内添加CSS，那么悄悄告诉你一个诀窍～基本和CSS类似，不过也有不一样的地方，我们来对比看一下

第一种：页面内部直接嵌入

添加页面内部直接嵌入的CSS代码，通过以下方式（好巧都是s开头，千万不要弄错哦）

<head>
   <style>
       body{
           margin:0;/*常用的清除默认样式*/
       }
   </style>
</head>

添加JS的代码也是类似，我们来看一下

<head>
   <script>
       function fn(){
           alert(1);//通过浏览器打开会弹出一个1
       }
       fn();
   <script>
</head>

这样一对比是不是就很像吖～，瞬间是不是就记住了呢

第二种：外部引入

老样子，先来看看CSS怎么引入

  1. 创建一个.css后缀的文件

  2. 通过以下代码引入文件～

<head>
   <link rel="stylesheet" href="style.css" />
   //这里的stylesheet表明我们在当前文档引入的是样式表
</head>

那么，JS怎么外部引入呢？

  1. 创建一个.js后缀的文件（这里附送一个消息：这个扩展名不是必须的哦，浏览器并不会检查包含JavaScript文件的扩展名，当然，我们在日常使用中还是加上好哦！）

  2. 通过以下代码引入文件～

<head>
   <script src="main.js"></script>
</head>

这里我们可以很明显看到，开始产生了差异，那我们来总结下有哪些～

●差异

1. style引入外部文件的时候是通过 “href”属性 ，js文件引入通过 “src”（像是img标签引入图片也是src）

2. link是一个单标签，但是script是一个双标签（有没有不知道单标签和双标签的吖～在评论下方留言～小姐姐给你解答哟）

除了以上两点很明显的差别以外，其实JS标签可以添加的位置与CSS也有不同，我们可以看到以上的案例中，我都是在<head></head>标签中添加的，这并没有什么问题，但是在实际工作中，我们更推荐另一种做法，接下来我们就来看一下～

●script标签的位置

除了最常规的在head中我们可以使用，其实在body内部的任何地方我们都可以使用，那么这么多地方，我们到底怎么选择呢？就让我们来看一下日常工作中我们推荐的做法：

<body>
   <p>随便给个文字，表明script的立场要在body的“结束”标签前</p>
   <script></script>
</body>

我们会选择把script标签放在</body>之前，

那为什么这么做的？有什么好处？

添加在head标签中缺点分析

获取元素时，因为页面未加在完成，会获取失败

<head>
   <script>
       var oDiv = document.querySelector('div');
       console.log(oDiv)//null
   </script>
</head>
<body>
   <div></div>
</body>

在上面的这段代码中，我希望可以打印oDiv这个元素，但是我们通过控制台可以看到返回的是“null”，这是因为什么呢？

 

浏览器在遇到<body>标签时，才开始呈现内容，计算机虽然运行很快，但是也需要一行一行去读取的，在我们执行console.log打印元素的时候，这个元素还没有生成，自然就获取不到，想解决这个问题，我们就需要借助onload事件，将代码修改为如下：

<head>
   <script>
       window.onload = function(){
           var oDiv = document.querySelector('div');
           console.log(oDiv)//<div></div>
       }   
   </script>
</head>
<body>
   <div></div>
</body>

onload这个事件可以帮助我们等待页面中元素加载完成之后再执行后续操作，这样的话，页面中已经有了这个元素的存在，我们的获取操作就有效果啦。

如果只是这个问题的话，好像也没什么嘛，不就是加个onload嘛～部分同学是不是表示，完全可以接受吖。当然不仅仅只是这样，我们来看下第二个问题。

●浏览器窗口长时间空白

正如我们上面看到的，代码的执行是有顺序的，我们在引入一个外部JS文件的时候，需要等待全部的JS代码都被下载、解析和执行完成以后，才开始呈现页面的内容，对于需要很多JS文件的页面来说，下载文件和解析的过程将会导致页面无法呈现。这种空白的时间对于用户来说，是非常不好的用户体验，虽然很多用户的第一反应可能是：“今天网速这么差的么？？”，却没想到是页面本身就存在问题。

为了避免这样的问题，所以在实际的工作中，我们推荐写在</body>标签前面，这样可以有更好的用户体验哦～不要再甩锅给网络啦！

●注意事项

如果同时需要使用内部嵌入式的引用和外部文件的引用，正确做法如下：

！！！！千万不要合并到一起！！！！如下错误示范：

如果你是初学者的话，一定一定不要这样操作，这样的载入方式会导致你内部嵌入的代码被忽略，也就是无效。

第三种：行间添加

其实这种的用途并不多，甚至可能没有行间的样式的使用来的频繁，不过我们可以了解一下～

CSS添加行间样式

<div style="width:200px;height:200px;"></div>

添加行间的JS

<div onclick="alert(1)"></div>  //点击这个div会弹出一个1

当然，关于script标签的使用方式不仅仅只有这些~

请大家期待下篇吧，我将带着大家了解一下type属性的用途等等等等的知识……

JavaScript的使用你知道几种？(上)的更多相关文章

  1. 风炫安全web安全学习第三十六节课-15种上传漏洞讲解(一)

    风炫安全web安全学习第三十六节课 15种上传漏洞讲解(一) 文件上传漏洞 0x01 漏洞描述和原理 文件上传漏洞可以说是日常渗透测试用得最多的一个漏洞,因为用它获得服务器权限最快最直接.但是想真正把 ...

  2. [转]javascript指定事件处理程序包括三种方式：

    javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn" ...

  3. javascript生成新标签的三种方法

    javascript生成新标签的三种方法:http://www.cnblogs.com/online-link/p/6062423.html

  4. JavaScript对象属性访问的两种方式

    JavaScript对象属性访问的两种方式 object.attribute object["attribute"] 例如: var employees = [ { "f ...

  5. javascript中var let const三种变量声明方式

    javascript中var let const三种变量声明方式 1.var  ①var表示声明了一个变量,并且可以同时初始化该变量. ②使用var语句声明的变量的作用域是当前执行位置的上下文:一个函 ...

  6. git commit -a -m "DM 1、获取aliOssSTS值，计算签名，实现视频PUT/POST2种上传方式上传；"

    git commit -a -m "DM 1.获取aliOssSTS值,计算签名,实现视频PUT/POST2种上传方式上传:" 微信小程序的视频上传

  7. javascript复制内容到剪切板/网页上的复制按钮的实现

    javascript复制内容到剪切板/网页上的复制按钮的实现:DEMO如下 <!doctype html> <html> <head> <meta chars ...

  8. javascript中实现继承的几种方式

    javascript中实现继承的几种方式 1.借用构造函数实现继承 function Parent1(){ this.name = "parent1" } function Chi ...

  9. Selenium系列（十一） - 针对两种上传文件方式的实现方案

    如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...

  10. JavaScript中数组去重的几种方法

    JavaScript中数组去重的几种方法 正常情况下,数据去重的工作一般都是由后端同事来完成的,但是前端也要掌握好处理数据的能力,万一去重的工作交给我们大前端处理,我们也不能怂呀.现在我总结了一些去重 ...

随机推荐

  1. ftp权限设置大全！！！

    1．登录和对匿名用户的设置write_enable=YES                         //是否对登录用户开启写权限.属全局性设置.默认NOlocal_enable=YES    ...

  2. hello2 source anaylis

    首先,我们先来看一看这一段的整体代码, 代码如下: @WebServlet("/greeting") public class GreetingServlet extends Ht ...

  3. Python3 批量更改文件后缀名

    Python3 批量更改文件后缀名 示例: # coding:utf8 import os import sys def Rename(): #Path = "F:\\test\\" ...

  4. Docker 部署 elk + filebeat

    Docker 部署 elk + filebeat kibana 开源的分析与可视化平台logstash 日志收集工具 logstash-forwarder(原名lubmberjack)elastics ...

  5. D7 割点 割边 强连通分量

    今天几道是模板题: 第一道:(粘不了链接呜呜呜) 题目描述 n个城市之间有通讯网络,每个城市都有通讯交换机,直接或间接与其它城市连接.因电子设备容易损坏,需给通讯点配备备用交换机. 但备用 交换机数量 ...

  6. tp剩余未验证内容-8

    模型类的自动验证? 分为自动验证, 和 动态验证(手工验证), 前者的验证规则是定义在模型类中的, 所以要自己创建 扩展的/继承的模型类, 同时用 D方法实例化模型类 而动态验证是 先调用 valid ...

  7. 【Visual Studio 扩展工具】使用 ComponentOne迷你图控件，进行可视化数据趋势分析

    概述 迷你图 —— Sparklines是迷你的轻量级图表,有助于快速可视化数据. 它们是由数据可视化传奇人物Edward Tufte发明的,他将其描述为“数据密集,设计简单,字节大小的图形.”虽然迷 ...

  8. 使用Rancher的RKE快速部署Kubernetes集群

    简要说明: 本文共涉及3台Ubuntu机器,1台RKE部署机器(192.168.3.161),2台Kubernetes集群机器(3.162和3.163). 先在Windows机器上,将rke_linu ...

  9. 字符串转换整数 (atoi)

    题目: 请你来实现一个 atoi 函数,使其能将字符串转换成整数. 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. 当我们寻找到的第一个非空字符为正或者负号时,则将该 ...

  10. 从多个角度来理解协方差（covariance）

    起源:协方差自然是由方差衍生而来的,方差反应的是一个变量(一维)的离散程度,到二维了,我们可以对每个维度求其离散程度,但我们还想知道更多.我们想知道两个维度(变量)之间的关系,直观的举例就是身高和体重 ...