JavaScript入门之三种引入方式怎么使用

这篇文章主要介绍“JavaScript入门之三种引入方式怎么使用”,在日常操作中,相信很多人在JavaScript入门之三种引入方式怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript入门之三种引入方式怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

网站建设哪家好,找成都创新互联公司!专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了惠济免费建站欢迎大家使用!

JavaScript入门之三种引入方式怎么使用

1.行内引入方式

写在行内,每个标签里面单独设置

通过在开标签中的事件属性引用js的函数

(1)写在标签的事件属性当中(以on开头的属性),如onclick【on+事件类型】

推荐:html使用双引号,js使用单引号

例:

注:行内引入,在JS中没用提升权重的概念,所以其不常用[基本不用]

示例如下:


  js样式内联写法
  
  
  
    
    
    单击事件:
      
    
     

输出结果:

JavaScript入门之三种引入方式怎么使用

2.内嵌引入方式(内部引入)

写在script标签中

内部引用: 通过在script标签中编写js代码使用

(1)可以写在任意地方;

当需要我们在头部引用脚本就放在头部,否则则放在底部,因为放在头部可能会影响浏览器渲染。

注:一般在自己写练习的时候,想偷懒不想设置js文件时使用 [练习使用]

通常自己做项目的时候放在底部,不影响加载顺序又可以和CSS文件进行区分,并且不会影响浏览器渲染;若放在其他处最好用onload套起来用

示例如下:


  js样式内联写法
  
  
  
  
    单击事件:
      
  
        

输出结果:

JavaScript入门之三种引入方式怎么使用

3.外部引入方式

在script标签中使用src引入外部文件

步骤:

(1)引入外部JS文件的script中不可以写代码

(2)利用HTML页面代码结构化,把多段JS代码独立至HTML页面外面,美观,且方便文件复用

注:和行内样式一样放在底部和头部需要分情况考虑[经常使用]

使用的是src不是href

示例如下:

将js的代码写到.js的文件中,并在HTML中引用

.html文件内容如下:


  js样式外联写法
  
  
  
    外联写法--单击事件:
      
  
     

.js文件内容如下:

//js代码

//找到XX元素,一般给元素加id 
yuansuojb=document.getElementById('yuansu');    
//给xx元素加事件
yuansuojb.onclick=function(){
  //代码段
  var str="hello world !!!";
  alert(str);
}

输出结果:

JavaScript入门之三种引入方式怎么使用

到此,关于“JavaScript入门之三种引入方式怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


名称栏目:JavaScript入门之三种引入方式怎么使用
文章路径:http://bzwzjz.com/article/jehjes.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 高端网站设计 定制网站建设 阿坝网站设计 LED网站设计方案 成都网站制作 营销型网站建设 成都网站建设 外贸网站设计方案 高端网站设计 成都网站制作 宜宾网站设计 成都网站设计 成都网站建设 企业手机网站建设 成都网站建设 成都定制网站建设 手机网站制作 重庆网站制作 手机网站建设 网站设计公司 成都网站建设 成都网站建设