JavaScript引入方式和常用输出方式-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第1章-课后作业)

xiaozhima-dun

于 2023-03-19 17:53:16 发布

阅读量537

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/yw1990128/article/details/129653794

版权

JavaScript 专栏收录该内容

33 篇文章

订阅专栏

【案例1-2】 JavaScript引入方式

一、案例描述

考核知识点

JavaScript的几种引入方式

练习目标

掌握JavaScript的引入方式。

需求分析

在网页中编写JavaScript时，分别演示通过嵌入式、外链式、行内式3中方式来引入JavaScript代码。

案例分析

嵌入式

直接使用<script>标签包裹JavaScript代码，直接编写到HTML文件中。

外链式

将JavaScript代码保存在一个单独的.js文件中，然后使用<script>标签的src属性来引入文件。

行内式

将JavaScript代码作为HTML标签的属性值使用。

二、案例实现

根据上面的分析，通过嵌入式来引入JavaScript代码，具体代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>嵌入式</title>
</head>
<body>
<script type="text/javascript">
alert('嵌入式')
</script>
</body>
</html>

根据上面的分析，通过外链式来引入JavaScript代码，具体代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外链式</title>
</head>
<body>
<script type="text/javascript" src="test.js"></script> // test.js为外部.js文件
</body>
</html>

根据上面的分析，通过行内式来引入JavaScript代码，具体代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内式</title>
</head>
<body>
<div onClick="javascript:window.open('#','_blank')">打开空白页</div>
</body>
</html>

【案例1-3】常用输出语句

一、案例描述

考核知识点

alert()、console.log()、document.write()

练习目标

掌握alert()函数的应用。
掌握console.log()函数的应用。
掌握document.write()函数的应用。

需求分析

在浏览网页时，经常会看到一些弹出的警示框，用于提醒用户当前的操作是否完成，例如，在电商网站中，当完成付款时，会弹出支付情况的警示框。

console.log()用于在控制台输出结果，可以帮助开发人员在项目开发时调试内容。

document.write()用于在HTML文档输出内容。

案例分析

alert()效果如图1-3所示。

“登录成功！”效果展示

console.log()效果如图1-4所示

“控制台输出”效果展示

document.write()效果如图1-5所示

“HTML文档中输出”效果展示

二、案例实现

根据上面的分析，实现这3种方式，具体代码如下：：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用输出语句</title>
</head>
<body>
<script type="text/javascript">
// alert() 弹出警告框
alert('登录成功！');
// console.log() 控制台输出
console.log('控制台输出')
// 在HTML文档中输出
document.write('在HTML文档中输出')
</script>
</body>
</html>