一、js代码引入方法
1.1.js代码引入方法有两种: 外部引入和内部引入
1.2.js代码内部引入
1.2.1.在body标签中或head标签中, 写入 < script > < /script>标签;
1.2.2.在写入的script标签中 写js代码;
1.2.3.html文档在浏览器中打开时,js代码会被执行。
1.2.4.案例演示:请练习
1.2.4.1.html文档代码:在head标签中引入js代码
<!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">
<title>js代码引入与书写</title>
<script>
document.write("今天我学了js代码:");
document.write("怎么打印内容到html文档,");
document.write("现在用的是内部引入js的方法");
</script>
</head>
<body>
</body>
</html>
#打印结果:
"今天我学了js代码:怎么打印内容到html文档,现在用的是内部引入js的方法"
1.2.4.2.html文档代码:在body标签中引入js代码
<!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">
<title>js代码引入与书写</title>
</head>
<body>
<script>
document.write("今天我学了js代码:");
document.write("怎么打印内容到html文档,");
document.write("现在用的是内部引入js的方法");
</script>
</body>
</html>
#打印结果:
"今天我学了js代码:怎么打印内容到html文档,现在用的是内部引入js的方法"
1.3.js代码外部引入
1.3.1.在body标签中或head标签中, 写入 < script src = “index.js” > < /script>标签,通过src引入外部js文件index.js;
1.3.2.js代码写在外部文件中;
1.3.3.html在浏览器打开时,外部的文件index.js中的代码也会被执行;
1.3.4.案例演示::请练习
1.3.4.1.案例一:在head标签中引入js代码
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">
<title>js代码引入与书写</title>
<script src="index.js"> </script>
</head>
<body>
</body>
</html>
#打印结果:
"今天我学了js代码:怎么打印内容到html文档,现在用的是内部引入js的方法"
js代码:
document.write("今天我学了js代码:"); document.write("怎么打印内容到html文档,"); document.write("现在用的是内部引入js的方法");
d
1.3.4.2.案例二:在body标签中引入js代码
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">
<title>js代码引入与书写</title>
</head>
<body>
<script src="index.js"> </script>
</body>
</html>
#打印结果:
"今天我学了js代码:怎么打印内容到html文档,现在用的是内部引入js的方法"
js文档代码:
document.write("今天我学了js代码:"); document.write("怎么打印内容到html文档,"); document.write("现在用的是内部引入js的方法");
备注:js文件中不可以用script标签包裹,html的js代码必须放在script标签中。
本课程知识点:
- html基础知识
- html外部引入js
- html内部引入js
- document.write(显示的内容数据) 把显示内容数据在页面中