一起自学前端开发!

js的引入方式 ---JavaScript入门笔记

来源:原创    更新时间:2017-07-21 11:12:56    编辑:编辑    浏览:1265

js的引入方式

 

学习了HTML之后,我们都知道HTML页面是静态的,要实现某些动态效果,就要引入 。

在HTML的引用共有4种:

1). 页头引入(head标签内);

2). 页中引入(body标签内);

3). 元素事件中引入(标签属性中引入);

4). 引入外部JS文件。

HTML中引入 需要将代码放在< >与</ >之间。

页头引入就是将< >标签放在<head>标签中

举例:在页头引入 代码弹出警告窗口,显示内容“自学前端就在微信公众号: 前端大学  

代码如下

<!DOCTYPE html>
<html>
<head>
 <  charset="UTF-8">
 < >前端大学</ >
 < >
  alert("自学前端就在微信公众号:  前端大学  ");
 </ >
</head>
<body >
</body>
</html>

效果

图片6.png

说明

<head>标签中引入 代码,代码alert的效果是弹出一个窗口。

2. 页中引入 

页头引入就是将< >标签放在<body>标签中

举例:在页中引入 代码弹出警告窗口,显示内容“自学前端就在微信公众号: 前端大学 

代码如下:

<!DOCTYPE html>
<html>
<head>
 <  charset="UTF-8">
 < >前端大学</ >
</head>
<body >
 < >
  alert("自学前端就在微信公众号: “ 前端大学 ” ");
 </ >
</body>
</html>


效果 

图片7.png


说明

和在页头引入是一个效果。

 3. 元素事件中引入 

在元素事件中引入 就是在标签内设置事件属性,调用 。

举例:在html标签中通过事件响应引入 代码弹出警告窗口,显示内容“自学前端就在微信公众号:  前端大学 

代码如下:

<!DOCTYPE html>
<html>
<head>
 <  charset="UTF-8">
 < >前端大学</ >
</head>
<body >
 <p  ="alert('自学前端就在微信公众号: “ 前端大学 ”')">点我</p>
</body>
</html>

图片8.png


说明:

在这段代码中,我们设置了鼠标点击事件,当鼠标点击了这个p标签内的内容“点我”时,弹出一个窗口。

4. 引入外部JS文件 

引入外部文件是常用的引用方法。

语法:

<  type="text/ " src="URL"></ >   

这段代码可以放在head标签中,也可以放在body标签中。

举例:在后缀为js的文件中写 代码弹出警告窗口,显示内容“分针学习网是个不错的网站”。通过引用这个js文件来执行 代码。

html部分代码:

<body >

<  type="text/ "src="../js/qianduandaxue.js"></ >

</body>

代码:

  alert(‘自学前端就在微信公众号: “ 前端大学 ”’);

效果: 

图片9.png


说明:

HTML中从外部引入 ,通过调用.js为后缀的文件来引入。

建议:

从外部引入JS文件放在body的结尾处,因为网页加载是从上到下加载,如果在开头引入JS文件,有些代码不能正确执行。

总结:

HTML中引入 有四种方式,页头引入,页中引入,元素事件引入,外部引入 外部引入JS文件要把代码放在body标签的末尾,在结束之前。





 

 

评论区

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

相关内容

点击排行

随机新闻

评论排行榜