!
优惠码:wxsnote
信息

JS新手入门课-在网页添加JavaScript脚本第1课时

脚本添加位置

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

  1. 在head标签内</head>标签之上中添加,这里可以放影响视图网页需优先加载的js
  2. 在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>有两种添加方式

  1. 从外部引用js文件方法,可以引用网站本地资源文件,适用于结构过长,内容过多的js
  2. 直接填在视图文件中,适用于 长度较短和必须存在与视图页面的js
<script src="./js文件路径/文件名.js" type="text/javascript"></script>
<script type="text/javascript">
//JavaScript代码
</script>

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

<!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('我爱王先生笔记');

效果:

图片[1]-JS新手入门课-在网页添加JavaScript脚本第1课时-王先生笔记
温馨提示:本文最后更新于2023-04-02 17:28:45,某些文章具有时效性,若有错误或已失效,请在下方留言或加入QQ群:399019539联系群主。
友情赞助

如果你喜欢我的内容,可以赞助我哦!你的一点点心意,是我不断前进的动力!
© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容