定义 script 标签,在 script 标签中,通过src属性导入外部js文件,并且加载执行外部js文件中国的程序代码内容
因为代码执行顺序问题,一般定义 script 标签 在 body标签内容的最下方
如果 script 标签带有 src 属性,那么就只会执行 外部式 写在 script 标签内容中的 内部式 不会被执行,是无效代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./demo.js"></script>
<style>
.div1{ color : red ; }
</style>
</head>
<body>
<div class="div1">北京</div>
</body>
</html>
 
下面是demo.js里面的代码

window.alert('我是外部程序');
const oDiv = document.querySelector('div');
oDiv.onclick = function(){
this.innerHTML = '实在是热啊,能不能有人帮我拿个冰镇饮料';
this.style.color = 'pink';
}
 
 
这里是演示无效代码

<div>北京</div>
<!-- 带有 scr 属性的script 标签,只会执行外部式
内容中的 JavaScript 代码是无效的
-->
<script src="">
// 无效代码
const oDiv = document.querySelector('div');
oDiv.onclick = function(){
this.style.color = 'red';
this.style.fontSize = '100px';
this.style.background = 'orange';
}
</script>

JavaScript语法形式3 外链式的更多相关文章

  1. JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  2. Swift2.1 语法指南——可空链式调用

    原档:https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/Swift_Programmi ...

  3. JavaScript系列：模块化与链式编程

    模块化:闭包和和函数作用域(JS没有块级作用域ES6之前)构造模块 var man=function(){ var age=12; return { getYear:function(){ retur ...

  4. javascript学习(10)——[知识储备]链式调用

    上次我们简单的说了下单例的用法,这个也是在我们java中比较常见的设计模式. 今天简单说下链式调用,可能有很多人并没有听过链式调用,但是其实只要我简单的说下的话,你肯定基本上都在用,大家熟知的jQue ...

  5. JavaScript--返回顶部方法:锚链接、行内式js写法、外链式、内嵌式

    返回网页顶部方法 一.锚链接 simpleDemo: <!DOCTYPE html> <html lang="en"> <head> <m ...

  6. html5 外链式实现加减乘除

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 那些年因为粗心导致的外链css无效

    css文件三种引用的三种方式: 1.外链: <link rel= "stylesheet" href=""> 注:如果使用外链式绝对不可以忘记 re ...

  8. javascript链式语法

    因为 jQuery 库的缘故,链式语法在前端界变得非常流行.实际上这是一种非常容易实现的模式.基本上,你只需要让每个函数返回 'this',这样其他函数就可以立即被调用.看看下面的例子. var bi ...

  9. ThinkPHP 数据库操作(三) : 查询方法、查询语法、链式操作

    查询方法 条件查询方法 where 方法 可以使用 where 方法进行 AND 条件查询: Db::table('think_user') ->where('name','like','%th ...

  10. Javascript 链式作用域 function fn(){}和var fn=function(){}区别

    其实对于Javascript链式作用域的描述,包括,JS权威指南,都有些太冗长了--但是很准确:JavaScript中的函数运行在他们被定义的作用域里,而不是他们被执行的作用域里. 这句话有点难懂,但 ...

随机推荐

  1. Alibaba/IOC-golang 正式开源 ——打造服务于go开发者的IOC框架

    简介: IOC(inversion of control)即控制反转,是面向对象编程中的一种设计原则,可以用来减低计算机代码之间的耦合度.IOC-golang 是一款服务于Go语言开发者的依赖注入框架 ...

  2. Bilibili资深运维工程师：DCDN在游戏应用加速中的实践

    简介: bilibili资深运维工程师李宁分享<DCDN在游戏应用加速中的实践>从bilibili游戏应用的效果和成本入手,深入浅出地分享DCDN全站加速在游戏加速场景中的应用. 日前,云 ...

  3. 数字农业WMS库存操作重构及思考

    ​简介: 数字农业库存管理系统在2020年时,部门对产地仓生鲜水果生产加工数字化的背景下应运而生.项目一期的数农WMS中的各类库存操作均为单独编写.而伴随着后续的不断迭代,这些库存操作间慢慢积累了大量 ...

  4. ARMS企业级场景被集成场景介绍

    简介: ARMS企业级场景被集成场景介绍 通过本次最佳实践内容,您可以看到ARMS OpenAPI可以灵活的被集成到客户链路监控场景,并对其进行可视化图形展示监控信息. 1. 背景信息 应用实时监控服 ...

  5. MaxCompute非事务表如何更新数据

    简介: 本文主要讲解如何通过insert overwrite更新数据 背景 对于大数据中的大多数存储格式,支持随机更新非常复杂.它需要扫描大型文件,MaxCompute推出了最新的功能Transact ...

  6. 慢SQL治理分享

    简介: 这里的慢SQL指的是MySQL慢查询,是运行时间超过long_query_time值的SQL.真实的慢SQL通常会伴随着大量的行扫描.临时文件排序或者频繁的磁盘flush,直接影响就是磁盘IO ...

  7. dotnet 推荐 LightWorkFlowManager 轻量的工作过程管理库

    本文将和大家推荐我团队开源的 LightWorkFlowManager 轻量的工作过程管理库,适合任何需要执行工作过程的应用逻辑,可以方便将多个工作过程拼凑起来,且自动集成重试和失败处理,以及日志和上 ...

  8. win10 uwp 选择文本转语音的机器人

    在 UWP 里,可以非常方便将某个文本转换为音频语音,转换时,将会根据输入的内容以及本机所安装的语言库选择一位机器人帮忙将输入的文本转换为语音.本文来告诉大家如何切换文本转语音的机器人,例如从默认的女 ...

  9. dotnet 性能优化 利用哈希思想优化大对象集合相等判断性能

    利用哈希的其中一个思想,相同的对象的哈希值相同,可以用来提升一些大对象集合的进行对象相等判断的性能.大对象的相等判断指的是有某些类型的相等判断需要用到对象的很多属性或字段进行参与判断逻辑才能判断两个对 ...

  10. 浅析mvvm模式和mvc模式的区别和联系

    三层架构与MVC模式 三层架构 三层架构是一种以实现"高内聚,底耦合"为目标,的代码架构方法,它将整个业务分为,表示层,业务层,数据访问层(Dao层). MVC模式 MVC模式是一 ...