javascript引入方式_引入js-程序员宅基地

技术标签: Java  前端HTML  javaSE  javascript  

2,JavaScript引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种:

  • 内部脚本:将 JS代码定义在HTML页面中

  • 外部脚本:将 JS代码定义在外部 JS文件中,然后引入到 HTML页面中

2.1 内部脚本

在 HTML 中,JavaScript 代码必须位于 <script></script> 标签之间

代码如下:

alert(数据) 是 JavaScript 的一个方法,作用是将参数数据以浏览器弹框的形式输出出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
​
<script>
    alert("hello js1");
</script>
</body>
</html>

从结果可以看到 js 代码已经执行了。

==提示:==

  • 在 HTML 文档中可以在任意地方,放置任意数量的<script>标签。如下图

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            alert("hello js1");
        </script>
    </head>
    <body>
    ​
    <script>
        alert("hello js1");
    </script>
    ​
    </body>
    </html>
    <script>
        alert("hello js1");
    </script>
  • 一般把脚本置于 <body> 元素的底部,可改善显示速度

    因为浏览器在加载页面的时候会从上往下进行加载并解析。 我们应该让用户看到页面内容,然后再展示动态的效果。

2.2 外部脚本

第一步:定义外部 js 文件。如定义名为 demo.js的文件

demo.js 文件内容如下:

alert("hello js");

第二步:在页面中引入外部的js文件

在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
​
<script src="../js/demo.js"></script>
</body>
</html>

==注意:==

  • 外部脚本不能包含 <script> 标签

    在js文件中直接写 js 代码即可,不要在 js文件 中写 script 标签

  • <script> 标签不能自闭合

    在页面中引入外部js文件时,不能写成 <script src="../js/demo.js" />

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_62180080/article/details/123945537

智能推荐

MFC对话框程序: 回车,ESC对话框消失解决办法总结_mfc按回车窗口消失问题-程序员宅基地

文章浏览阅读1.3k次。1、在资源编辑器中,将OK按钮的属性"Default Button"去掉,不用改源码2、重载OnOk(),将CDialog::OnOk()去掉就可以了3、截取消息 PreTranslateMessage()'//.hvirtual BOOL PreTranslateMessage(MSG* pMsg);//.cpp//处理PreTrans_mfc按回车窗口消失问题

Parasoft C/C++test 2020.2全新发布!将静态分析集成到现代开发流程中_parasoft c++test 静态分析-程序员宅基地

文章浏览阅读733次。对现代静态分析工具的期望我们在客户中经常看到的流行图片是基于Git的开发环境,它具有动态的分支和合并方法。团队希望静态分析能够无缝集成到此类工作流程中。凭借庞大而复杂的代码库,团队希望现代静态分析工具能够:与CI/CD实践紧密结合。 帮助他们专注于日常工作,并提供快速的反馈,而无需长时间拖延。 启用对先前存在问题的过滤,并在功能分支中仅显示新的和相关的违规。 启用有效的抑制/放弃共享和管理。在2020.2版本中,我们引入了ParasoftC/C++test的增强功能集合,使其更适合现代._parasoft c++test 静态分析

从头开始写STM32F103C8T6驱动库(四)——编写延时函数,详解Systick_stm32 f103延时函数-程序员宅基地

文章浏览阅读1w次,点赞12次,收藏35次。系列文章目录Github开源地址从头开始写STM32F103C8T6驱动库(一)——STM32CubeMX创建并调整工程结构从头开始写STM32F103C8T6驱动库(二)——编写系统初始化程序,配置时钟树从头开始写STM32F103C8T6驱动库(三)——编写GPIO驱动文章目录系列文章目录前言1.Systick定时器介绍2.Systick定时器使用方法3.编写微秒延时程序(delay_us)4.编写毫秒延时程序(delay_ms)前言上一章我们编写了GPIO驱动函数,但是如果我们想_stm32 f103延时函数

块级元素与内联元素(行内元素)及浮动知识总结_两个行内元素一个变浮动-程序员宅基地

文章浏览阅读4.7k次,点赞8次,收藏13次。块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的。比如我们常用的div、p、ul默认状态下都是属于块级元素。块级元素比较霸道,默认状态下每次都占据一整个行,后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的,float也具有此功能,设置float后,就不用再display:block;了,浮动后自动就是块元素_两个行内元素一个变浮动

按钮在页面上相对定位排列_el-button位置-程序员宅基地

文章浏览阅读365次。//在父级div上加style="position: relative",代表绝对定位<div class="us-details" style="position: relative"> //在子级div上加style="position: absolute;right:20px;bottom:56px", //其中position: absolute代表相对定位,right:20px;bottom:56px"代表在父级div框架中靠右下排列 <..._el-button位置

批量解压/压缩文件的bat小程序_批量压缩视频.bat源代码-程序员宅基地

文章浏览阅读4.7k次,点赞3次,收藏16次。批量解压压缩包bat小程序我们做数据分析时,在资源网站下载的数据是压缩包的形式,面对大量的压缩包,一个一个解压显然是没有效率的,这是我们就需要一个批量解压压缩包的工具,在这里提供给大家一个Windows下bat的一个小工具用于批量解压压缩包。::将这个批处理放在目录下运行,将解压缩该目录及其子目录下的所有压缩文件@echo off::假定winrar软件安装于c盘默认目录下,如自定义目录安装,请修改该行set "rar=C:\Windows\System32\WinRAR.exe"::默认对_批量压缩视频.bat源代码

随便推点

QImage与QPixmap完全解析-程序员宅基地

文章浏览阅读123次。转载自http://www.civilnet.cn/bbs/browse.php?topicno=4691用Qt程序在手机上显示一幅图片对编程人员来说是再基础不过的一件事情了。那么先让大家看两段代码://dangerous should not be used, cannot display earth.png,//but if we change e..._qpixmap 编译

基于LCM算法实现红外小目标检测Matlab实现_lcm红外小目标算法代码-程序员宅基地

文章浏览阅读414次。针对红外图像中小目标的检测问题,本文提出了一种基于LCM算法的红外小目标检测方法。本文提出了一种基于LCM算法的红外小目标检测方法,通过对红外图像进行局部对比度计算和二值化处理,实现了对小目标的有效检测。实验结果表明,该算法具有较高的检测精度和良好的鲁棒性,可以在红外成像领域得到广泛的应用。LCM(Local Contrast Maximization)算法是一种局部对比度最大化算法,它通过对像素点进行局部对比度的计算,从而达到增强图像细节的效果。最终输出的是分割出的小目标区域。Step 1:图像预处理。_lcm红外小目标算法代码

Linux下CVS的安装、配置与使用(一):安装与本地使用_cvs安装包-程序员宅基地

文章浏览阅读1.1w次。1. 到官网http://cvs.nongnu.org/ 下载安装包,官网上发布了rpm和源码格式的安装包。笔者使用的Linux版本为CentOS6.3-64bit,在官网下载的cvs-1.11.18-cvshome.org.9x.1.i386.rpm安装失败,所以只能下载源码格式的安装包了。本处下载的版本为cvs-1.11.23.tar.gz。2. 安装步骤a. 检查是否安装了cvs_cvs安装包

The program 'java' can be found in the following packages: * default-jre * gcj-5-jre-headless * o-程序员宅基地

文章浏览阅读4.9k次,点赞7次,收藏11次。Ubuntu系统安装jdk的问题,配置环境变量,明明是按照教程来的,然后运行Java -version时一直报以下错误The program 'java' can be found in the following packages: * default-jre * gcj-5-jre-headless * openjdk-8-jre-headless * gcj-4.8-jre-h..._the program 'java' can be found in the following packages: * default-jre * g

ThinkPHP 微信支付及退款_thinkphp 微信退款v2-程序员宅基地

文章浏览阅读454次,点赞3次,收藏3次。目录微信支付微信退款1.以下代码修改完自己的2.appid3.商户号4.商户密钥微信支付 //微信支付 public function index(){ //接收用户下单信息 $data = []; $data['sorts'] = input('sorts');//套餐分类 $data['sciencename']=input('sciencename');//景区名称 $data['price']=input('price');//订单价格 $data['cre_thinkphp 微信退款v2

数据仓库概念的简单理解_sybase power dimension-程序员宅基地

文章浏览阅读5k次。数据仓库概念的简单理解 一个典型的企业数据仓库系统通常包含数据源、数据存储与管理、OLAP服务器以及前端工具与应用四个部分。如下图所示: 数据源:是数据仓库系统的基础,是整个系统的数据源泉。通常包括企业内部信息和外部信息。内部信息包括存放于企业操作型数据库中(通常存放在RDBMS中)的各种业务数据和办公自动化(OA)系统包含的各类文档数据。外部信息包括各类法律_sybase power dimension