定义 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. js中this对象的理解

    一.定义 函数的 this 关键字在 JavaScript 中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别 在绝大多数情况下,函数的调用方式决定了 this 的值(运行时绑定) th ...

  2. easyx的使用，图像插入（2.0）

    本文从B站学习,借鉴,一些贴图素材借鉴游戏网图: 视频链接:图像输出_哔哩哔哩_bilibili 想使用图片,先用easyx提供的数据类型定义一个变量: 在对图片进行加载,差不多像是赋值,这个变量名相 ...

  3. 使用 Gradio 的“热重载”模式快速开发 AI 应用

    在这篇文章中,我将展示如何利用 Gradio 的热重载模式快速构建一个功能齐全的 AI 应用.但在进入正题之前,让我们先了解一下什么是重载模式以及 Gradio 为什么要采用自定义的自动重载逻辑.如果 ...

  4. HarmonyOS NEXT应用开发—在Native侧实现进度通知功能

    介绍 本示例通过模拟下载场景介绍如何将Native的进度信息实时同步到ArkTS侧. 效果图预览 使用说明 点击"Start Download"按钮后,Native侧启动子线程模拟 ...

  5. KubeVela 正式开源：一个高可扩展的云原生应用平台与核心引擎

    美国西部时间 2020 年 11 月 18 日,在云原生技术"最高盛宴"的 KubeCon 北美峰会 2020 上,CNCF 应用交付领域小组(CNCF SIG App Deliv ...

  6. 使用 Arthas 排查 SpringBoot 诡异耗时的 Bug

    简介: 公司有个渠道系统,专门对接三方渠道使用,没有什么业务逻辑,主要是转换报文和参数校验之类的工作,起着一个承上启下的作用.最近,在优化接口的响应时间,优化了代码之后,但是时间还是达不到要求:有一个 ...

  7. RK 平台安装 ubuntu 系统

    一.简介 之前有介绍到 ARM 平台移植 ubuntu 的操作流程,在 RK 系列的平台同样适用,所以这里就不介绍怎么一步步的去对 ubuntu 进行移植,而是怎么将移植的过程编写成脚本,这样便可以在 ...

  8. 关于Java Chassis 3的契约优先（API First）开发

    本文分享自华为云社区<Java Chassis 3技术解密:契约优先(API First)开发>,作者: liubao68. 契约优先(API First)开发是指应用程序开发过程中,将A ...

  9. SpringBoot-Http请求工具类

    一.编写请求配置类 import com.alibaba.fastjson.JSONObject; import org.springframework.context.annotation.Conf ...

  10. 80x86汇编—80x86架构

    文章目录 计算机如何工作 存储器 逻辑地址到物理地址 寄存器 数据寄存器使用细节 其他知识点细节 堆栈Stack 标志寄存器 中断 汇编入门简单,深入难 使用8086架构进行学习,本章节如果没有学过计 ...