开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >如何在页面中引入JS教程

如何在页面中引入JS教程

作者头像

小小鱼儿小小林

发布于 2020-06-23 08:36:53

发布于 2020-06-23 08:36:53

5.7K0

举报

文章被收录于专栏：灵儿的笔记灵儿的笔记

1.直接写到页面中

须位于 <script> 与 </script> 标签之间,放置在 HTML 页面的 <body> 或者 <head> 标签中:

<script type="text/javascript">

//在这里写JS代码

</script>

<script>元素，常用属性有：

type : 可看做是language的替代属性，表示编写代码使用的脚本语言的内容类型，MIME这个属性非必须，默认是text/javascript

src : 表示包含要执行代码的外部文件

注意:js代码所写的位置会影响到代码的执行效果

2.写到标签元素的事件属性里面

<div οnclick="javascript:alert('hello world')">

3.写到一个外部的文件里面(.js结尾的文件)

写到一个js文件中,然后哪个页面使用就引入过来,类似于css样式表的引用

例如:

<script type="text/javascript" src="js/test1.js"></script>

【注意事项】

1.不要在<script>标签中再填写其他js代码，否则将会忽略

2.标签位置<head>标签中：等到全部的js代码都被下载，解释和执行完成后才能开始呈现页面的内容。可将代码引用放到<body>元素放到内容后面。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017/09/26 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

前端学习笔记

1.css简介用来修饰html样式的一种语言，层叠样式表增强复用性方便后期维护 2.css样式引入方式： (1)内嵌方式

曼路

2018/10/18

9830

初识javaScript(一)

javascript 编程语言二进制计算机数据

编程：就是让计算机为解决某个需要解决的问题而使用某种程序设计语言编写的代码，并最终得到我们想要的结果。

用户10517932

2023/10/07

1940

初识javaScript(一)

meta标签到底是做什么的|我竟一无所知

html http https 网络安全 php

最近部门在推微前端，需要按功能拆分多个子应用，主应用在加载的过程中经常出现加载失败的问题。因为https地址中，如果加载了http资源，浏览器将认为这是不安全的资源，将会默认阻止。后来在文档中添加了<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">完美解决。

coder_koala

2021/08/26

7550

爬虫系列-网页是怎样构成的

爬虫编程程序数据网络

网络爬虫又称网络蜘蛛、网络机器人，它是一种按照一定的规则自动浏览、检索网页信息的程序或者脚本。网络爬虫能够自动请求网页，并将所需要的数据抓取下来。通过对抓取的数据进行处理，从而提取出有价值的信息。

用户10002156

2023/08/07

2480

JS-DOM2级事件对象跨浏览器处理（已封装）

1 var eventUill = { 2 //添加事件 3 addHander: function(element, type, handler) { 4 if(element.addEventListener) { 5 element.addEventListener(type, handler, false); 6 } else if(element.attachEvent) { 7 elem

xing.org1^

2018/05/17

1.2K0

2.HTML根部头部主体标签元素介绍

html media min screen script

描述: HTML html 元素表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素，所有其他元素必须是此元素的后代。

全栈工程师修炼指南

2023/03/19

1.3K0

2.HTML根部头部主体标签元素介绍

【尚硅谷】JavaScript基础&实战丨JS入门到精通_01-06

javascript 编程算法 https 网络安全

（3）可以将js代码编写到外部js文件中，然后通过script标签引入（☆☆☆）优点：写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制。注意：script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略如果需要则可以在创建一个新的script标签用于编写内部代码。

全栈程序员站长

2022/11/01

7160

JavaScript的引入方式和基本属性

html5 javascript node.js

2、引入外部js文件：通过 src 引入，此时 script 标签内添加任何js代码都不起效果。

德顺

2019/11/13

2.2K0

JavaScript系列之初识JS，强大的实干家

html 网站 javascript 存储

Hi，大家好，我是CoCo。JavaScript作为最流行的脚本语言之一，这门语言广泛应用于Web。假如要把JS作一个比喻，我觉得她是一位强大的实干家。在Web自动化测试框架中通过JS来实现对Web元素的操作，在测试开发中是必备的前端语言。

可可的测试小栈

2022/06/06

1K0

JavaScript系列之初识JS，强大的实干家

Web前端-JavaScript基础教程下

javascript node.js 网站

javascript的使用要用<script>元素，外部的文件使用src指向相应的文件，<script>会按照他们在页面的先后依次被解析，defer属性可以让当前脚本不必等待其他脚本，使用<noscript>元素可以指定在不支持脚本的浏览器中显示替代的内容。

达达前端

2019/07/03

3880

Web前端-JavaScript基础教程下

重学js之在HTML中使用JavaScript

javascript html node.js

2、值得注意的是在js代码解析的过程中页面中其他内容将不会被加载和解析，直到该段js执行完成。

执行上下文

2022/07/26

8640

【春节日更】JS延迟加载的几种方式

javascript node.js html5 jquery

用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。

用户9914333

2022/07/22

2K0

JavaScript之<script>标签简介

向html页面中插入JavaScrpt的主要方法,就是使用<script>元素，下面是Html 4.01为<script>定义的6个属性。 1、async：可选表示应该立即下载脚本,但是不妨碍页面中的其他操作,比如下载比如下载其他资源或等待加载其他脚本。这个属性只对外部脚本有效 2、charset：可选。表示脚本通过src属性指定的代码的字符集。大多数浏览器会忽略它的值,所以这个属性也很少用。 3、defer：可选。表示脚本可以延迟到文档完全被解析和显示之后在执行。只对外部脚本有效。代码如下: aaa.js

郑小超.

2018/01/24

8290

写给零基础小白的网站开发入门

javascript html css

本教程针对零基础同学，讲解网站开发三个基础技术：HTML、CSS、JS，带你快速入门！

程序员鱼皮

2021/04/15

2.7K0

HTML解析之DOMContentLoaded和onload

html javascript node.js css

在很久很久以前，我在封装自己的JQuery库时就使用过DOMContentLoaded，觉得这个知识点看看别的文章就行了，不过现在我想把它记下来。

全栈程序员站长

2022/11/16

1.7K0

HTML解析之DOMContentLoaded和onload

js中document.getElementById()用法「建议收藏」

jquery javascript html java

dom标准里面的获取当前文档中指定id的元素 if (document.getElementById(“regjm”).value != document.getElementById(“regjm1”).value ) { alert(“提示：请输入有效的认证码”); document.getElementById(“regjm1”).focus(); return false; } 例如: <script> function get() { if(document.getElementById(“Addr”).value==””) { alert(“null”); } else { alert(document.getElementById(“Addr”).value); } } </script> <head> <input type=”text” id=”Addr” value=””> <input type=”button” value=”click” οnclick=”get();”>

全栈程序员站长

2022/09/14

3.6K0

前端学习(23)~js学习(一)

html ecmascript css 打包 ide

浏览器是网页运行的平台，常用的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。

Vincent-yuan

2020/03/18

1.4K0

JavaScript高级程序设计（第4版）- HTML中的JavaScript

javascript html 程序设计脚本浏览器

XHTML(Extensible HyperText Markup Language) 是将 HTML 作为 XML 的应用重新包装的结果

Cellinlab

2023/05/17

5980

js基础_2（页面加载和延迟脚本）

js标签的位置：通常都是把关于标签<script>放在<header>元素中目的：把所有外部文件css文件和javascript文件件的引用都放在相同的地方,但是 <header>中包含js文件,只有js代码全部下载完成后才会载入页面,但这无疑是延迟呈现页面,在延迟期间页面空白解决：把js代码放在<body>元素中（页面内容的后面）,这样就把加载空白页面的时间缩短了. defer属性：立即下载,但会延迟进行. 只对外部脚本文件有效 asyns属性：与de

河湾欢儿

2018/09/06

4.2K0

JavaWeb02-CSS，JS（Java真正的全栈开发）

java css javascript

css&javascript 一.CSS 1.CSS介绍 CSS 指层叠样式表 (Cascading Style Sheets),用来定义网页的显示效果。 把样式添加到HTML中，可以将网页内容与显

Java帮帮

2018/03/19

2.6K0

JavaWeb02-CSS，JS（Java真正的全栈开发）

相关推荐

前端学习笔记

更多 >

小小鱼儿小小林0

LV.1

这个人很懒，什么都没有留下～

作者相关精选

换一批

加入讨论

的问答专区 >

1程序员擅长1个领域

相关课程

一站式学习中心 >

AI绘画-StableDiffusion图像生成

大模型图像创作引擎

高性能应用服务