JavaScript入门详解之三种引入方式

导读 本篇文章给大家带来了关于javascript的相关知识,其中详细介绍了javaScript三种引入方.....
这篇文章给你带来了关于javascript详细介绍了相关知识javaScript行内式、嵌入式、外部式及其使用方式三种引入方式;我们来看看,希望对大家有所帮助。

【相关推荐:javascript视频教程、web前端】

1.行内引入方式

写在行中,每个标签单独设置

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

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

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

例:

<input type="button" value="点我打开世界" onclick="alert('Hello World')" />

注:行内介绍,在JS提高权重的概念没有用,所以不常用[基本不用]

示例如下:

<html>   <title>js风格内联写法</title>   <meta http-equiv="content-type" content="text/html; charset=utf-8" />   <body>   <!--js内联写法01开始-->     <!--当鼠标点击图片时,弹出窗口显示1223-->     <div class="img">     单击事件:       <img src="images/001.jpg" onclick="alert(1223)"></img>     </div>   <!--js内联写法01结束-->   </body> </html>

输出结果:

 1.gif

2.嵌入式介绍(内部介绍)

写在script标签中

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

  • script标签可以写在页面的任何位置

  • script通常使用标签body中的最后, 或者body的后面

(1)可写在任何地方;

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

<script>     alert('Hello World!'); </script>

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

通常自己做项目的时候放在底部,不影响加载顺序,可以和解CSS区分文件,不影响浏览器渲染;如果放在其他地方,最好使用onload套起来用

示例如下:

<html>   <title>js风格内联写法</title>   <meta http-equiv="content-type" content="text/html; charset=utf-8" />   <body>   <!--js内联写法02开始-->   <div class="img">     单击事件:       <img src="images/002.jpg" id='yuansu'></img>   </div>   <!--js内联写法02结束-->   </body>   <script>     //js代码     //找到XX元素,一般加元素id      yuansuojb=document.getElementById('yuansu');         //给xx元素加事件     yuansuojb.onclick=function(){       //代码段       alert(1);     }     //触发事件   </script> </html>

输出结果:

 2.gif

3.外部介绍

在script标签中使用src介绍外部文件

步骤:

  • 编写独立的js文件

  • 通过页面script标签引用

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

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

<script src="main.js"></script>

注:像行内风格一样,需要考虑底部和头部[经常使用]

使用的是src不是href

示例如下:

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

.html文件内容如下:

<html>   <title>js风格外联写法</title>   <meta http-equiv="content-type" content="text/html; charset=utf-8" />   <body>   <div class="img">     外联写法-单击事件:       <img src="images/003.jpg" id='yuansu'></img>   </div>   </body>   <script src='js/index.js'></script> </html>

.js文件内容如下:

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

输出结果:

 3.gif

【相关推荐:javascript视频教程、web前端】

以上就是JavaScript详细介绍三种介绍方法的详细内容,请多关注php中文网其他相关文章!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。2022-08-06 03:00:29

猜你喜欢

最新文章