文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

web前端:如何插入js,引用外部js,js在页面中的位置

懒人大天才

懒人大天才

2024-04-23 22:49

关注

  JS即Javascript,Javascript是一种由Netscape的LiveScript发展而来的脚本语言,主要目的是为了解决服务器终端语言,比如perl,遗留的速度问题。

  我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在html网页中插入JavaScript代码。注意,<script>标签要成对出现,并把JavaScript代码写在<script></script>之间。尤其注意的是<scripttype="text/javascript">表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。

  <!DOCTYPEhtml>

  <html>

  <head>

  <metacharset="utf-8">

  <title>javascript插入页面</title>

  <scripttype="text/javascript">

  document.write("hellojavascript")

  </script>

  </head>

  <body>

  </body>

  </html>

  JavaScript代码只能写在HTML文件中吗?当然不是,我们可以把HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js,然后将JS代码直接写在JS文件中;在JS文件中,不需要<script>标签,直接编写JavaScript代码就可以了。当然这样一个JS文件不能直接运行,就像css外部文件引入一样,我们还需要需把js文件嵌入到HTML文件中执行,我们需在HTML中添加<scriptsrc="js文件路径"type="text/javascript"charset="utf-8"></script>,就可将JS文件嵌入HTML文件中。

  <!DOCTYPEhtml>

  <htmllang="zh">

  <head>

  <metacharset="UTF-8">

  <metaname="viewport"content="width=device-width,initial-scale=1.0">

  <metahttp-equiv="X-UA-Compatible"content="ie=edge">

  <title>javascript外部文件引入</title>

  <scriptsrc="demo2.js"type="text/javascript"charset="utf-8"></script>

  </head>

  <body>

  </body>

  </html>

  插入得js文件书写

  1//书写js代码

  2document.write("我是demo2文件")

  我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分。

  放在<head>部分:最常用的方式是在页面中head部分放置<script>元素,浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分。

  放在<body>部分:JavaScript代码在网页读取到该语句的时候就会执行。

  ☆:javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面,因为初始化都要求提前进行(如给页面body设置css等);而如果是通过事件调用执行的function那么对位置没什么要求的。=>这里就可以解释“为什么学习javascript”中的<scripttype="text/javascript">{document.write("试一试了,说不定可以的");document.getElementById("box2").style.background="red";}</script>的js为什么放置在head标签内,文件会报错。

  当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbPS,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯