频教学作用仅限于0基础需要入门的同学,后期博主会规划其它课程
视频有不懂的地方或者有哪些问题可直接联系我
也可以加入自学学习群,有同伴一起学,交流也更方便
vx搜公众号【前端新气象】有我的微信,请务必填写备注,否不予通过
课件代码地址GitHub - haojiey/js-Introductory-courseware: JavaScript零基础入门课件
可以学习到的内容
- js的引入方式
- js的引入位置
- js的写法
JavaScript 引入方式
HTML中嵌入 JavaScript 代码
在 HTML 页面中嵌入 JavaScript 脚本需要使用 <script> 标签,在 <script> 标签中直接编写 JavaScript 代码
- 新建 一个HTML 文档
- 在 <body> 标签内写入一个 <script> 标签
- 给 <script> 标签添加一个属性type="text/javascript"
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
document.write('hello 小木')
</script>
</body>
</html>
document.write() 一种输出方式,后续会讲到,此处仅作为查看js嵌入效果
HTML中引入 JavaScript 脚本
JavaScript 可以直接放在 HTML 文档中,也可以放在 JavaScript 脚本文件中。JavaScript 脚本文件是文本文件,扩展名为.js,使用任何文本编辑器都可以编辑。
通过 <script> 标签的 src 属性引入脚本
- 新建 一个 js 脚本
- 在html中 <body> 标签内写入一个 <script> 标签
- 给 <script> 标签添加一个属性type="text/javascript"
- 在<script> 标签的 src 属性引入脚本
html文件
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
js文件
document.write('hello 小木')
JavaScript 代码位置
浏览器在解析 HTML 文档时,文档流是自上而下的方式解析的。 JavaScript 脚本的执行顺序也是根据 <script> 标签的位置来确定的。
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<script>
document.write('1')
</script>
</head>
<body>
<script>
document.write('2')
</script>
<script type="text/javascript" src="./index.js"></script>
<script>
document.write('3')
</script>
</body>
</html>
<script>
document.write('4')
</script>
我给大家的建议呢是,将js 代码 写在html代码的最后,因为js呢是需要操作标签元素的,自上而下而下的执行会导致在js中获取标签时出现 获取不到的一些问题