美文网首页网页前端后台技巧(CSS+HTML)让前端飞Web前端之路
web前端入门到实战:如何插入js,引用外部js,js在页面中的

web前端入门到实战:如何插入js,引用外部js,js在页面中的

作者: 大前端世界 | 来源:发表于2020-04-15 13:01 被阅读0次

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

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title>javascript插入页面</title>
     6         <script type="text/javascript">
     7             document.write("hello javascript")
     8         </script>
     9     </head>
    10     <body>
    11     </body>
    12 </html>
    
    

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

    
    专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
    (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
    
     1 <!DOCTYPE html>
     2 <html lang="zh">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>javascript外部文件引入</title>
     8     <script src="demo2.js" type="text/javascript" charset="utf-8"></script>
     9 </head>
    10 <body>
    11 </body>
    12 </html>
    
    

    插入得js文件书写

    1 //书写js代码 2 document.write("我是demo2文件")
    
    

    我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分。
    放在<head>部分:最常用的方式是在页面中head部分放置<script>元素,浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分。
    放在<body>部分:JavaScript代码在网页读取到该语句的时候就会执行。
    ☆:javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面,因为初始化都要求提前进行(如给页面body设置css等);而如果是通过事件调用执行的function那么对位置没什么要求的。

    相关文章

      网友评论

        本文标题:web前端入门到实战:如何插入js,引用外部js,js在页面中的

        本文链接:https://www.haomeiwen.com/subject/dctxvhtx.html