往期回顾

在上一期的《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. C#-MVC-Razor视图引擎及解决路径问题的三个方法

    Razor 视图引擎 与Aspx开发区别在于代码: 1.Razor 更智能,摒弃了<%%>格式,直接用@符号开启cs代码,遇到html时自动识别 2.遇到如汉字等即非cs代码,又非html ...

  2. 牛客网 查找第K小数

    题目链接:https://www.nowcoder.com/practice/204dfa6fcbc8478f993d23f693189ffd?tpId=40&tqId=21522&t ...

  3. redis重要知识点

    redis是一种高级的key:value存储系统,其中value支持五种数据类型: 1.字符串(strings) 2.字符串列表(lists) 3.字符串集合(sets) 4.有序字符串集合(sort ...

  4. K8S学习笔记之k8s日志收集实战

    0x00 简介 本文主要介绍在k8s中收集应用的日志方案,应用运行中日志,一般情况下都需要收集存储到一个集中的日志管理系统中,可以方便对日志进行分析统计,监控,甚至用于机器学习,智能分析应用系统问题, ...

  5. Docker Kubernetes 介绍 or 工作原理

    Kubernetes 介绍 Kubernetes是Google在2014年6月开源的一个容器集群管理系统,使用Go语言开发,Kubernetes也叫K8S. K8S是Google内部一个叫Borg的容 ...

  6. Python RabbitMQ消息队列

    python内的队列queue 线程 queue:不同线程交互,不能夸进程 进程 queue:只能用于父进程与子进程,或者同一父进程下的多个子进程,进行交互 注:不同的两个独立进程是不能交互的.   ...

  7. golang中 "下划线" 的用法

    1.忽略返回值 这个应该是最简单的用途,比如某个函数返回三个参数,但是我们只需要其中的两个,另外一个参数可以忽略,这样的话代码可以这样写: v1, v2, _ := function(...) 2.用 ...

  8. Python新手入门英文词汇笔记（1-2）

    英文词汇总结一.循环1.for…in…循环的使用2.while…循环的使用本节英文单词与中文释义:1.for:因为2.while:当…时…3.range:范围4.sep(separate):分隔5.f ...

  9. VisualSFM使用记录1 unable to load libsiftgpu.so

    官网:http://ccwu.me/vsfm/(解决过程蓝色字,问题原因解决方法红色字)SFM computer missing match阶段运行出现错误 More than 189MB of gr ...

  10. HDU 6186 CS Course（前缀+后缀）

    http://acm.hdu.edu.cn/showproblem.php?pid=6186 题意:给出n个数,共有n次询问,每次询问给出一个数p,求除去第p个数后的n-1个数的&.|.^值. ...