html的三种方式引入js及注意事项

最新推荐文章于 2024-05-09 10:39:03 发布

崔凯洋

最新推荐文章于 2024-05-09 10:39:03 发布

阅读量2.4k

点赞数 2

分类专栏： js基础

本文链接：https://blog.csdn.net/Attsky/article/details/109321461

版权

js基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、行内式

2、页内式

3、外链式

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>js引入方式有三</title>
</head>
<body>
	<!-- 行内js -->
	<button onclick="alert('别点我！')">按钮1</button>
	<button onclick="alert('听到没，别点我！')">按钮2</button>


	<!-- 页内js -->
	<script type="text/javascript">
		alert('我是页内JS的写法===');
	</script>
	<!-- 引入外部的js -->
	<script type="text/javascript" src="js/index.js"></script>

</body>
</html>

引入javascrpt三种书写形式

行内JS
   的第一种方式
   <button οnclick="alert('点我了！！')">点我</button>
       or
   <button οnclick="alert('点我了！！');">点我</button>

   常见的报错写法：
   <button οnclick="alert('点我了！！'；)">点我</button>
       错误提示：Uncaught SyntaxError: missing ) after argument list
           翻译：未捕获的语法错误:缺少）在参数列表之后
   错误分析：“;”   加在了括号的里面导致调用alert方法的不完整导致的

行内JS
   的第二种方式
   常见错误写法：
   <a href="javascript:alert("臭弟弟你敢点我');">点我啊，臭弟弟</a>
       错误提示： Uncaught SyntaxError: Unexpected end of input
           翻译：未捕获的语法错误:意外的输入结束
       错误分析：这是常见的语法错误，单引号和多引号的使用有误
       JavaScript的单引号和多引号使用方法：
               这里引用菜鸟教程的解决方案

原文链接：https://www.runoob.com/note/29397

双引号" " 中用单引号 ' ' 可以不用加反斜杠，例如：

var x="my name 'is' xxx" // 此处不需要加反斜杠
双引号" " 中用双引号 " " 需要加反斜杠，例如：

var x="my name \"is\" xxx" // 此处需要在两个上引号前各加一个加反斜杠
单引号 ' ' 中用双引号" " 不需要加反斜杠，当然加了也可以，例如：

var x1 ='my name "is" xxx' // 此处不需要加反斜杠（推荐）

var x2 ='my name \"is\" xxx' // 添加反斜杠效果也一样（不推荐）

   行内JS不建议去使用的，但在某些特殊情况下是能使用的
   不建议使用的原因是：我的老师经常和我说，我们前端的代码一定要行为(js) 样式(css) 结构(html)相分离
                       该做什么事情就该做什么事情不能够“跨界”

页内JS
使用注意：
           1)<script></script>标签中的js代码通常写在文档的尾部
           2）网页是从上至下加载，而JS代码通常是给标签添加交互（操作元素）。
               所以需要先加载HTML，否则如果执行js代码的HTML还未加载，namejs代码将无法
               添加交互（操作元素）   （alert就是一个极好的例子，相当于做了停滞操作）
           3）如果脚本较大，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续，会造成卡顿               拿我们学校的网站举个例子：


<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
    <title>无锡科技职业学院</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" type="text/css" href="css_new/layout.css">
<!--    <link rel="stylesheet" type="text/css" href="css_new/layout_1.css">-->
    <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
    <link rel="stylesheet" type="text/css" href="css_new/king.ui.css"/>
    <link rel="stylesheet" type="text/css" href="css_new/style.css"/>
    <script type="text/javascript" src="js_new/common.js" ></script>
</head>    
<body>
....

<script src="js_new/jquery.min.js"></script>
<script src="js_new/jquery.cxslide.min.js"></script>
<script type="text/javascript" src="js/move_port.js" ></script>
<script>

  /*  var ad1=new AdMove("ad1");
    ad1.Run();
    //多组漂浮
    //var ad1=new AdMove("ad2");
    ad2.Run();
    //-->*/

    $('#cxslide_x').cxSlide({
        plus: true,
        minus: true
    });
    //浮窗
    move_obj("#move_port");

</script>
</body>    
</html>

如果一定要放在前面，也可以，有一个预加载行数
<script>
window.onload = function(){

}

</script>

内部js和外部js统一都在尾部好了，有一种情况特殊，就是这个js本身就是处理css样式的，那就引用在head标签里好了

一旦引入了外部js，<script type="text/javascript" src="js/index.js"></script>
里如果要添加js代码是无效的
如果想再写代码，就新起一个scriptb标签就可以了

}

</script>

目前阶段，window.onload在全局范围内只能有一个，如果在外部js和页内js都有的话，只能运行页内js，这时页内js无效，这和html的覆盖是一样的

醒来的时候，希望自己不负大好时光，To know the unknown

崔凯洋

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html的三种方式引入js及注意事项

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>js引入方式有三</title></head><body>  <button onclick="alert('别点我！')">按钮1</button> <button onclick="alert('听到没，别点.
复制链接

扫一扫