定义 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. ORA-29277:invalid SMTP operation

    ORA-29277:invalid SMTP operation 邮件发送的时候出现报错 ORA-29277:invalid SMTP operation 官方解释就很简单 但是实际上重试是不行的,几 ...

  2. 力扣434(java)-字符串中的单词个数（简单）

    题目: 统计字符串中的单词个数,这里的单词指的是连续的不是空格的字符. 请注意,你可以假定字符串里不包括任何不可打印的字符. 示例: 输入: "Hello, my name is John& ...

  3. K8s场景下Logtail组件可观测方案升级-Logtail事件监控发布

    简介: SLS针对Logtail本身以及Logtail的管控组件alibaba-log-controller,采用K8s事件的方式,将处理流程中的关键事件透出,从而让用户能够更清楚的感知其中发生的异常 ...

  4. 从MVC到云原生：CBU研发体系演进之路

    简介: 本文对过去十年 CBU 在研发方式和技术架构上的探索做一个简要的回顾总结,以及对未来的展望. 前言 CBU作为集团内最早成立的几个BU之一,有着多年丰富的业务沉淀,而CBU的技术也伴随着业务一 ...

  5. 一种命令行解析的新思路（Go 语言描述）

    ​简介: 本文通过打破大家对命令行的固有印象,对命令行的概念解构后重新梳理,开发出一种功能强大但使用极为简单的命令行解析方法.这种方法支持任意多的子命令,支持可选和必选参数,对可选参数可提供默认值,支 ...

  6. 基于 KubeVela 的 GitOps 交付

    ​简介: KubeVela 是一个简单.易用.且高可扩展的云原生应用管理和交付平台,KubeVela 背后的 OAM 模型天然解决了应用构建过程中对复杂资源的组合.编排等管理问题,同时也将后期的运维策 ...

  7. 治理企业“数据悬河”，阿里云DataWorks全链路数据治理新品发布

    ​简介: 10月19日,在2021年云栖大会上,阿里云重磅发布DataWorks全链路数据治理产品体系,基于数据仓库,数据湖.湖仓一体等多种大数据架构,DataWorks帮助企业治理内部不断上涨的&q ...

  8. 基于FPGA的音乐蜂鸣器设计

    蜂鸣器是一种一体化结构的电子讯响器,采用直流电压供电,广泛应用于计算机.打印机.复印机.报警器.电子玩具.汽车电子设备.电话机.定时器等电子产品中作发声器件. 图1 :蜂鸣器实物图 蜂鸣器主要分为压电 ...

  9. 表和数据连接，而不是和表连接（JOIN）

    1.连接数据,但是顺序会受影响 在使用JOIN连接临时表或子查询时,无法保证结果的顺序与特定值的顺序完全一致.这是因为在查询过程中,数据库优化器可能会选择不同的执行计划,导致结果的顺序发生变化. SE ...

  10. Radius 现在是云原生计算基金会（CNCF）的沙箱项目

    在数字化时代,云原生计算技术逐渐成为企业转型的关键.2024-04-25,备受瞩目的开源项目 Radius 已正式加入云原生计算基金会(CNCF)的沙箱项目![Sandbox] Radius · Is ...