JS新手入门课-在网页添加JavaScript脚本第1课时-王先生笔记

脚本添加位置

我们知道在浏览器中代码是从上到下依次加载的，考虑到这个问题，就可以考虑在两个位置添加js.

在head标签内</head>标签之上中添加，这里可以放影响视图网页需优先加载的js
在body标签内</body>标签之上中添加，这里可以放不影响视图网页无需先加载的js

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>王先生笔记(wxsnote.cn)</title>
//这里可以放影响视图网页需优先加载的js
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>王先生笔记(wxsnote.cn)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
//这里可以放不影响视图网页无需先加载的js
</body>
</html>

脚本添加方式

js在视图文件添加需要使用html语言标签<script>有两种添加方式

从外部引用js文件方法，可以引用网站本地资源文件，适用于结构过长，内容过多的js
直接填在视图文件中，适用于长度较短和必须存在与视图页面的js

方法1

方法 2

<script src="./js文件路径/文件名.js" type="text/javascript"></script>

所有JavaScript脚本单独的文件格式都是以.js结尾

<script type="text/javascript">
//JavaScript代码
</script>

例如：使用方法1，在网页添加我爱王先生笔记弹窗，js代码：alert('我爱王先生笔记');

html文件

js文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>王先生笔记(wxsnote.cn)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
<script src="./assets/js/wxsnote.js" type="text/javascript"></script>
</body>
</html>

在目录/assets/js/目录下创建wxsnote.js

wxsnote.js文件内填写

alert('我爱王先生笔记');

在js文件中的js代码无需使用标签

效果：

JS新手入门课-使用浏览器的控制台进行辅助开发第2课时

4年前

0290715

原文链接(非王先生笔记发布均为盗版)：https://wxsnote.cn/1748.html

温馨提示： 本文最后更新于2023-04-02 17:28:45，某些文章具有时效性，若有错误或已失效，请在下方留言或加入QQ群： 399019539 联系群主反馈。注意一些链接无法访问可能是你网络的原因，如Github，并非资源地址失效。

本站名称： 王先生笔记
本站网址： https://wxsnote.cn
1本站的代码分享(60%)，文字段落(95%)等，均为站长原创，全是站长亲手敲的，不可转载！付费资源及付费文章，更不可转载！
2若有转载部分，文章中会注明来源。若本站有部分内容与其他平台的内容有相同，未注明来源是因为发布时网络中找的来源太多无法查其根源，故不作注明。其内容仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
3访问者可将本网站提供的内容或服务用于个人学习、研究或欣赏，以及其他非商业性或非盈利性用途，但同时应遵守著作权法及其他相关法律的规定，不得侵犯本网站及相关权利人的合法权利。
4除此以外，将本网站任何内容或服务用于其他用途时，须征得本网站及相关权利人的书面许可，并支付报酬。

如发现资源链接或文章教程失效，请联系我们，我们会在第一时间修复。
QQ群：①群399019539

THE END