您的位置:首页 > 游戏 > 手游 > JavaScript简介之引入方式

JavaScript简介之引入方式

2024/12/23 7:13:46 来源:https://blog.csdn.net/m0_74249600/article/details/141307788  浏览:    关键词:JavaScript简介之引入方式

JavaScript 引入方式

  • 提问:CSS的引入方式?
  • 在学习 JavaScript 语法之前,我们首先要知道在哪里写 JavaScript 才行。
  • 想要在 HTML 中引入 JavaScript,一般有 3 种方式。
    • 外部 JavaScript
    • 内部 JavaScript
    • 元素事件 JavaScript(行内JS
  • 实际上,JavaScript 的 3 种引入方式,跟 CSS 的 3 种引入方式(外部样式表、内部样式表、行内样式表)是非常相似的。

1.2.1. 外部 JavaScript

  • 外部 JavaScript:指的是把 HTML 代码和 JavaScript 代码单独放在不同文件中,然后在 HTML 文档中使用 script 标签来引入 JavaScript 代码。
  • 语法:
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!--1、在head中引入--><script src="dom1.js"></script></head><body><!--2、在body中引入--><script src="dom1.js"></script></body>
</html>

1.2.2. 内部 JavaScript

  • 内部 JavaScript,指的是把 HTML 代码和 JavaScript 代码放在同一个文件中,其中 JavaScript 代码写在<script></script>标签对内。标签可以放在网页的任何位置
  • 语法:
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!--1、在head中引入--><script>alert("123");</script></head><body><!--2、在body中引入--><script>alert("456");</script></body>
</html>
  • 同样的,内部 JavaScript 文件不仅可以在 head 中引入,也可以在 body 中引入。
  • 一般情况下,我们都是在 head 中引入。
  • 实际上<script></script>是一种简写形式,它其实等价于:
<script type="text/javascript">……
</script>
  • 一般情况下,使用简写形式比较多。

1.2.3. 元素属性 JavaScript

  • 元素属性 JavaScript,指的是在元素的事件属性中直接编写 JavaScript 或调用函数。
  • 举例:在元素事件中编写 JavaScript
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title></title>
</head>
<body>
<input type="button" style="color:red" value="按钮" onclick="alert('Gok,给你初恋般的感觉')"/>
</body>
</html>
  • 举例:在元素事件中调用函数
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script>function yyds() {alert("Gok,给你初恋般的感觉");}</script></head><body><input type="button" value="按钮" onclick="yyds()" /></body>
</html>

1.3. 一个简单的 JavaScript 程序

  • 实现代码如下:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><script>window.onload = function () {alert("Welcome to Big Hacker!")}</script>
</head>
<body>
<button onclick="location.href='https://www.4399.com/'">提交</button>
</body>
</html>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com