松软科技带你学前端:JavaScript 使用
<script> 标签
在 HTML 中,JavaScript 代码必须位于 <script> 与 </script> 标签之间。
实例
<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>
注释:旧的 JavaScript 例子也许会使用 type 属性:<script type="text/javascript">。
注释:type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。
JavaScript 函数和事件
JavaScript 函数是一种 JavaScript 代码块,它可以在调用时被执行。
例如,当发生事件时调用函数,比如当用户点击按钮时。
提示:您将在稍后的章节学到更多有关函数和事件的知识。
<head> 或 <body> 中的 JavaScript
您能够在 HTML 文档中放置任意数量的脚本。
脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中,或兼而有之。
<head> 中的 JavaScript
在本例中,JavaScript 函数被放置于 HTML 页面的 <head> 部分。
该函数会在按钮被点击时调用:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head> <body> <h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button> </body>
</html>
<body> 中的 JavaScript
在本例中,JavaScript 函数被放置于 HTML 页面的 <body> 部分。
该函数会在按钮被点击时调用:
<!DOCTYPE html>
<html>
<body> <h1>A Web Page</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button> <script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
</script> </body>
</html>
外部脚本
脚本可放置与外部文件中:
外部文件:myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
外部脚本很实用,如果相同的脚本被用于许多不同的网页。
JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本,请在 <script> 标签的 src (source) 属性中设置脚本的名称:
<script src="myScript.js"></script>
外部 JavaScript 的优势
在外部文件中放置脚本有如下优势:
- 分离了 HTML 和代码
- 使 HTML 和 JavaScript 更易于阅读和维护
- 已缓存的 JavaScript 文件可加速页面加载
如需向一张页面添加多个脚本文件 - 请使用多个 script 标签:
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
外部引用
可通过完整的 URL 或相对于当前网页的路径引用外部脚本:
本例使用完整的 URL 来链接至脚本:
实例
<script src="https://www.w3school.com.cn/js/myScript1.js"></script>
松软科技带你学前端:JavaScript 使用的更多相关文章
- 松软科技带你学前端:JavaScript 输出
JavaScript 不提供任何内建的打印或显示函数. JavaScript 显示方案 JavaScript 能够以不同方式“显示”数据: 使用 window.alert() 写入警告框 使用 doc ...
- 松软科技带你学开发:SQL--FIRST() 函数
FIRST() 函数(原文链接 松软科技:www.sysoft.net.cn/Article.aspx?ID=3731) FIRST() 函数返回指定的字段中第一个记录的值. 提示:可使用 ORDER ...
- 松软科技带你学开发:SQL--COUNT() 函数
SQL COUNT() 语法 SQL COUNT(column_name) 语法 COUNT(column_name) 函数返回指定列的值的数目(NULL 不计入): SELECT COUNT(col ...
- JavaScript 语法:松软科技前端教程
JavaScript 语法是一套规则,它定义了 JavaScript 的语言结构. var x, y; // 如何声明变量 x = 7; y = 8; // 如何赋值 z = x + y; // 如何 ...
- 15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)
15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言 设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经 ...
- css与javascript重难点,学前端,基础不好一切白费!
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...
- 原生JS实现轮播+学前端的感受(防止走火入魔)
插件!插件!天天听到有人求这个插件,那个插件的,当然,用第三方插件可以大幅提高开发效率,但作为新手,我还是喜欢自己来实现,主要是我有时间! 今天我来给大家分享下用原生JS实现图片轮播的写法 前辈们可以 ...
- 重学前端 --- Promise里的代码为什么比setTimeout先执行?
首先通过一段代码进入讨论的主题 var r = new Promise(function(resolve, reject){ console.log("a"); resolve() ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
随机推荐
- 批量SSH key-gen无密码登陆认证脚本
SSH key-gen无密码登录认证脚本 使用为了让linux之间使用ssh不需要密码,可以采用了数字签名RSA或者DSA来完成.主要使用ssh-key-gen实现. 通过 ssh-key-gen 来 ...
- .Net Core2.2升级到3.1小记
.NET Core 3.1 作为LTS长期支持版本,会提供3年的支持(明年就出.net5),值得升级(吗). 目前主流的第三方包大多都已经提供了支持,2.x => 3.1还是变化不是特别多,EF ...
- tp5.1 无限极分类前台展示
商城前台的多级分类展示,如图所示,一般是三级.所以代码只组装到第三级. 数据库设计,共5个字段.level字段是方便用来显示级别的.pid是父级分类id,pid等于0说明它是一级分类.path字段,举 ...
- Java 商户管理系统 客户管理 库存管理 销售报表 SSM项目源码
系统介绍: 1.系统采用主流的 SSM 框架 jsp JSTL bootstrap html5 (PC浏览器使用) 2.springmvc +spring4.3.7+ mybaits3.3 SSM ...
- Reproduction CVE_2019_0708
Xx_introduction Please protection,respect,love,"China's Internet Security Act"! For learni ...
- Xamarin.Forms 界面布局
<!--margin表示控件相对StackLayout的位置是设置组件之间的距离,或者距离父组件边缘的距离, 他的四个值是左边距,上边距,右边距,下边距 --> <!- ...
- How we implemented consistent hashing efficiently
原文链接https://medium.com/ably-realtime/how-to-implement-consistent-hashing-efficiently-fe038d59fff2 我们 ...
- Beta版本演示
小组信息 组名:斗地组 组长博客:地址 组内成员: 组员 学号 林涛(组长) 031702616 童圣滔 031702117 林红莲 031702213 潘雨佳 031702214 覃鸿浩 03170 ...
- 研究STM32F4的IEEE1558 PTP网络时间同步协议实现,软件是RL-TCPnet V7.X的底层
这个东西发现挺有意思,刚开始研究没整明白怎么用,实测设置一次时间戳就可以使用了,后面在深入研究下 extern ARM_DRIVER_ETH_MAC Driver_ETH_MAC0; ARM_ETH_ ...
- springboot整合web开发(整合servlet、filter、listener、访问静态、文件上传)
整合servlet 1.继承HttpServlet 2.添加@WebServlet注解 @WebServlet(name="FirstServlet",urlPatterns=&q ...