<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 使用的更多相关文章

  1. 松软科技带你学前端：JavaScript 输出

    JavaScript 不提供任何内建的打印或显示函数. JavaScript 显示方案 JavaScript 能够以不同方式“显示”数据: 使用 window.alert() 写入警告框 使用 doc ...

  2. 松软科技带你学开发:SQL--FIRST() 函数

    FIRST() 函数(原文链接 松软科技:www.sysoft.net.cn/Article.aspx?ID=3731) FIRST() 函数返回指定的字段中第一个记录的值. 提示:可使用 ORDER ...

  3. 松软科技带你学开发:SQL--COUNT() 函数

    SQL COUNT() 语法 SQL COUNT(column_name) 语法 COUNT(column_name) 函数返回指定列的值的数目(NULL 不计入): SELECT COUNT(col ...

  4. JavaScript 语法:松软科技前端教程

    JavaScript 语法是一套规则,它定义了 JavaScript 的语言结构. var x, y; // 如何声明变量 x = 7; y = 8; // 如何赋值 z = x + y; // 如何 ...

  5. 15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)

    15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言 设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经 ...

  6. css与javascript重难点，学前端，基础不好一切白费！

    JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...

  7. 原生JS实现轮播+学前端的感受（防止走火入魔）

    插件!插件!天天听到有人求这个插件,那个插件的,当然,用第三方插件可以大幅提高开发效率,但作为新手,我还是喜欢自己来实现,主要是我有时间! 今天我来给大家分享下用原生JS实现图片轮播的写法 前辈们可以 ...

  8. 重学前端 --- Promise里的代码为什么比setTimeout先执行？

    首先通过一段代码进入讨论的主题 var r = new Promise(function(resolve, reject){ console.log("a"); resolve() ...

  9. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

随机推荐

  1. 浅析 Java 与 C++ 的垃圾回收机制

        Java老师在期末复习大纲上出了一道关于JVM垃圾回收机制的题目,想要我们简述一下JVM垃圾回收机制,与老师交流后,大概老师是希望通过与其他语言在垃圾回收对比,介绍一下Java在这方面的特点和 ...

  2. C# （转载）webbrowser专题（参考资料：https://www.cnblogs.com/blogpro/p/11458390.html）

    C# .Net 2.0实例学习:WebBrowser页面与WinForm交互技巧 2 Study Case :高亮显示 上一个例子中我们学会了查找文本——究跟到底,对Web页面还是只读不写.那么,如果 ...

  3. JS---案例：图标跟着鼠标飞(有bug)

    案例:图标跟着鼠标飞(有bug) <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  4. 二、计算机数据表示&&校验码（简单了解）

    一.数据表示 机器数:各种数值在计算机中的表示形式.其特点是采用二进制计数器,数的符号用0和1标识,小数点则隐含,表示不占位置.机器数分为带符号数和无符号数.无符号数称为正数. 比如,十进制中的数 + ...

  5. docker 使用mysqldump命令备份导出项目中的mysql数据

    下图为镜像重命名后的镜像名为uoj,现在要把这个镜像中的mysql导出 运行如下命令: docker exec -it uoj mysqldump -uroot -proot app_uoj233 & ...

  6. django补充CBV和FBV模式

    django补充CBV和FBV模式FBV模式---函数:经常用的方式CBV模式---类CBV中url连接时函数名后面要接.as_view()class index(views.View): @... ...

  7. C#使用Linq to csv读取.csv文件数据2_处理含有非列名数据的方法（说明信息等）

    第一篇博客为:https://www.cnblogs.com/lxhbky/p/11884474.html 本文主要是为了解决上面博客遗留的一个含有不规范数据的一种方法,目前暂时没有从包里发现可以从第 ...

  8. AoE 搭档 TensorFlow Lite ，让终端侧 AI 开发变得更加简单。

    AoE( AI on Edge , https://github.com/didi/AoE ) 是滴滴近期开源的终端侧 AI 集成运行时环境 ( IRE ). 随着人工智能技术快速发展,近几年涌现出了 ...

  9. css知识笔记：水平垂直居中（别只看，请实操！！！）

    css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...

  10. Git介绍与简易搭建

    Git介绍 Git(读音为/gɪt/.)是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发 ...