当前位置: 首页 > news >正文

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>
http://www.lryc.cn/news/427238.html

相关文章:

  • 同一台电脑上安装不同版本的nodejs(搭配VSCode)
  • python小游戏之摇骰子猜大小
  • C++入门——12继承
  • Python做统计图之美
  • 激光雷达点云投影到图像平面
  • [python]将anaconda默认创建环境python版本设置为32位的
  • Jmeter+Influxdb+Grafana平台监控性能测试过程(三种方式)
  • [创业之路-135] :ERP、PDM、EDM、Git各种的用途和区别,硬件型初创公司需要哪些管理工具?
  • 通过剪枝与知识蒸馏优化大型语言模型:NVIDIA在Llama 3.1模型上的实践与创新
  • DOM型xss靶场实验
  • 华为---端口隔离简介和示例配置
  • Android 架构模式之 MVC
  • 节点使用简介:comfyui-photoshop
  • 使用Go语言将PDF文件转换为Base64编码
  • XSS Game
  • ???牛客周赛55:虫洞操纵者
  • Unity3D开发之OnCollisionXXX触发条件
  • spfa()算法(求最短路)
  • 聊聊国产数据库的生态系统建设
  • JDK源码解析:LinkedList
  • drawio的问题
  • 零基础学习Redis(3) -- Redis常用命令
  • 响应式Web设计:纯HTML和CSS的实现技巧-1
  • FrereRTOS事件组
  • 【经典算法】BFS_最短路问题
  • 【题目/训练】:双指针
  • LLVM - 编译器后端-指令选择
  • ES+FileBeat+Kibana日志采集搭建体验
  • Dockerfile常用指令详解
  • 【vue】浏览器兼容相关