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(){
<!-- 当整个窗口加载完毕的时候再调用这个js -->
}
</script>
内部js和外部js统一都在尾部好了,有一种情况特殊,就是这个js本身就是处理css样式的,那就引用在head标签里好了
一旦引入了外部js,<script type="text/javascript" src="js/index.js"></script>
里如果要添加js代码是无效的
如果想再写代码,就新起一个scriptb标签就可以了
<script>
window.onload = function(){
<!-- 当整个窗口加载完毕的时候再调用这个js -->
}
</script>
目前阶段,window.onload在全局范围内只能有一个,如果在外部js和页内js都有的话,只能运行页内js,这时页内js无效,这和html的覆盖是一样的
醒来的时候,希望自己不负大好时光,To know the unknown