定义 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. warmup预热学习率

    学习率是神经网络训练中最重要的超参数之一,针对学习率的优化方式很多,Warmup是其中的一种 (一).什么是Warmup?Warmup是在ResNet论文中提到的一种学习率预热的方法,它在训练开始的时 ...

  2. Python 潮流周刊#47：当你的老师希望你去做开源

    本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...

  3. axios请求时获取不到错误提示问题。

    前端方面使用axios请求,由于新增时,有的条件格式填写错误.后端返回412状态码. ,axios可能封装不完善,他获取数据使状态码为4开头的统统不暴露出去,导致请求时,412这样的状态码,获取不到里 ...

  4. 登录chatgpt的时候出现429的解决方法，亲测有效

    登录chatgpt的时候出现429的解决方法 PS:在2023年3月14日晚还是可以用的,亲测有效 登录chatgpt的时候出现429的解决方法 很多时候在国内用代理进入chatgpt的时候会出现42 ...

  5. maven报错：501 HTTPS Required

    maven报错:501 HTTPS Required 简单来说,如果报错中出现http://repo1.maven.org/maven2/的字样的话,那么大概率就是Maven仓库的设置里的地址有问题, ...

  6. [Mobi] frida Hook 略知一二: frida-CLI, frida-server

    Frida 是一款基于 python + javascript 的 hook 框架,主流平台都支持,由于是基于脚本的交互,因此相比 xposed 和 substrace cydia 更加便捷. 使用时 ...

  7. [FAQ] Phpstorm 代码提示功能失效问题

    如果是之前有代码提示,中间突然不出现提示了,那么考虑重建一下项目索引. 示例: Refer:Phpstorm代码提示 Link:https://www.cnblogs.com/farwish/p/13 ...

  8. 2024 年最值得推荐的 7 个 Vue3 组件库

    你好,我是 Kagol. Vue 是一款易学易用,性能出色,适用场景丰富的渐进式 JavaScript 框架,深受广大开发者的喜爱,Vue3 更是推出了 Composition API,让逻辑复用更友 ...

  9. QT之Mysql驱动

    错误现象 找不到Mysql驱动 QSqlDatabase: QMYSQL driver not loaded 一.驱动查看 在程序中直接打印QT Creator中现有的驱动,打印方式如下: qDebu ...

  10. Shopify Theme 开发 —— 性能优化

    一.概述 关于 Shopify Theme 的性能优化,通常有以下几点: 1.卸载未使用的应用程序 有些 app 会在 theme 里面插入一些代码,即使 app 未被使用,也可能会加载一些脚本文件, ...