一、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标签中。

本课程知识点:

  1. html基础知识
  2. html外部引入js
  3. html内部引入js
  4. document.write(显示的内容数据) 把显示内容数据在页面中

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注