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

JavaScript简介之引入方式

news 2026/5/20 4:33:02

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>

相关文章：

JavaScript简介之引入方式

JavaScript 引入方式 提问&#xff1a;CSS的引入方式&#xff1f;在学习 JavaScript 语法之前&#xff0c;我们首先要知道在哪里写 JavaScript 才行。想要在 HTML 中引入 JavaScript&#xff0c;一般有 3 种方式。 外部 JavaScript 内部 JavaScript 元素事件 JavaScript&#…...

编程日记 2024/8/19 6:59:38

同一台电脑上安装不同版本的nodejs（搭配VSCode）

今天拉取了一个前后端分离的项目&#xff0c;运行前端的时候&#xff0c;出现node版本不匹配的情况。 本文章将从安装node.js开始到VSCode使用进行讲解 1、去官网下载node版本 以16版本为例&#xff0c;需要哪个版本&#xff0c;就在网址上把版本号替换即可 https://nodejs.o…...

编程日记 2024/8/19 6:58:36

python小游戏之摇骰子猜大小

最近学习Python的随机数&#xff0c;逻辑判断&#xff0c;循环的用法&#xff0c;就想找一些练习题&#xff0c;比如小游戏猜大小&#xff0c;程序思路如下&#xff1a; 附上源代码如下&#xff1a; 摇骰子的函数&#xff0c;这个函数其实并不需要传任何参数&#xff0c;调用后…...

编程日记 2024/8/19 6:54:31

C++入门——12继承

1.继承 继承(inheritance)机制是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允许程序员在保持原有类特性的基础上进行扩展&#xff0c;增加功能&#xff0c;这样产生新的类&#xff0c;称派生类。继承呈现了面向对象程序设计的层次结构&#xff0c;体现了由简…...

编程日记 2024/8/19 6:53:29

Python做统计图之美

Python数据分析可视化 案例效果图 import pandas as pd import matplotlib.pyplot as plt import matplotlib# 数据 data {"房型": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],"住宅类型": ["普通宅", "普通宅", "普通宅", &q…...

编程日记 2024/8/19 6:51:25

激光雷达点云投影到图像平面

将激光雷达点云投影到图像平面涉及几何变换和相机模型的应用。以下是该过程的基本原理&#xff1a; 1. 坐标系转换 激光雷达生成的点云通常位于激光雷达的坐标系中&#xff0c;而图像则在相机坐标系中。为了将点云投影到图像上&#xff0c;首先需要将点云从激光雷达坐标系转换…...

编程日记 2024/8/19 6:47:19

[python]将anaconda默认创建环境python版本设置为32位的

首先看看gpt怎么回答的 装了Anaconda。如果尚未安装&#xff0c;可以从Anaconda官网下载适合你的操作系统的安装程序&#xff0c;并按照安装向导进行安装。 二、创建32位Python环境 在Anaconda中&#xff0c;你可以通过修改环境变量来尝试切换到32位模式&#xff08;尽管这并…...

编程日记 2024/8/19 6:46:17

Jmeter+Influxdb+Grafana平台监控性能测试过程（三种方式）

一、Jmeter自带插件监控 下载地址&#xff1a;Install :: JMeter-Plugins.org 安装&#xff1a;下载后文件为jmeter-plugins-manager-1.3.jar&#xff0c;将其放入jmeter安装目录下的lib/ext目录&#xff0c;然后重启jmeter&#xff0c;即可。 启动Jmeter&#xff0c;测试计…...

编程日记 2024/8/19 6:45:15

[创业之路-135] ：ERP、PDM、EDM、Git各种的用途和区别，硬件型初创公司需要哪些管理工具？

目录 前言&#xff1a; 一、ERP&#xff08;企业资源计划&#xff09; 二、PDM&#xff08;产品数据管理系统&#xff09; 三、EDM&#xff08;文档管理系统&#xff0c;有时也指电子邮件营销&#xff09; 四、Git 总结 五、硬件研发、生产型企业需要哪些管理工具&#…...

编程日记 2024/8/19 6:43:12

通过剪枝与知识蒸馏优化大型语言模型：NVIDIA在Llama 3.1模型上的实践与创新

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

编程日记 2024/8/19 6:42:09

DOM型xss靶场实验

xss是什么&#xff1f; XSS是一种经常出现在web应用中的计算机安全漏洞&#xff0c;它允许恶意web用户将代码植入到提供给其它用户使用的页面中。比如这些代码包括HTML代码和客户端脚本。攻击者利用XSS漏洞旁路掉访问控制--例如同源策略(same origin policy)。这种类型的漏洞由…...

编程日记 2024/8/19 6:38:03

华为---端口隔离简介和示例配置

目录 1. 端口隔离概念 2. 端口隔离作用 3. 端口隔离优点 4. 端口隔离缺点 5. 端口隔离的方法和应用场景 6. 端口隔离配置 6.1 端口隔离相关配置命令 6.2 端口隔离配置思路 7. 示例配置 7.1 示例场景 7.2 网络拓扑图 7.3 基本配置 7.4端口隔离配置与验证 7.4.1 双…...

编程日记 2024/8/19 6:34:59

Android 架构模式之 MVC

目录 架构设计的目的对 MVC 的理解Android 中 MVC 的问题试吃个小李子ViewModelController 大家好&#xff01; 作为 Android 程序猿&#xff0c;MVC 应该是我们第一个接触的架构吧&#xff0c;从开始接触 Android 那一刻起&#xff0c;我们就开始接触它&#xff0c;可还记得我…...

编程日记 2024/8/19 6:32:56

节点使用简介：comfyui-photoshop

1、安装comfyui-photoshop 略过 一点要注意的是&#xff1a;在Photoshop上的安装增效工具&#xff0c;要通过Creative Cloud 桌面应用程序进行安装&#xff0c;才能成功在增效工具中显示&#xff0c;直接通过将文件解压到Plug-ins路径行不通&#xff08;至少对我来说行不通&am…...

编程日记 2024/8/19 6:31:54

使用Go语言将PDF文件转换为Base64编码

使用 Go 语言将 Base64 编码转换为 PDF 文件-CSDN博客本文介绍了如何使用 Go 语言将 Base64 编码转换为 PDF 文件&#xff0c;并保存到指定路径。https://blog.csdn.net/qq_45519030/article/details/141225772 在现代编程中&#xff0c;数据转换和编码是常见的需求。本文将介绍…...

编程日记 2024/8/19 6:30:53

XSS Game

关卡网址&#xff1a;XSS Game - Learning XSS Made Simple! | Created by PwnFunction 1.Ma Spaghet! 见源代码分析得&#xff0c;somebody接收参数&#xff0c;输入somebody111查看所在位置 使用input标签 <input onmouseoveralert(1337)> 2.Jefff jeff接收参数,在ev…...

编程日记 2024/8/19 6:29:50

？？？牛客周赛55：虫洞操纵者

题目描述 \,\,\,\,\,\,\,\,\,\,你需要在一个可以上下左右移动的 nnn\times nnn 棋盘上解开一个迷宫&#xff1a;棋盘四周都是墙&#xff1b;每个方格要么是可以通过的空方格 ′0′\sf 0′0′ &#xff0c;要么是不可通过的墙方格 ′1′\sf 1′1′ &#xff1b;你可以沿着空方格…...

编程日记 2024/8/19 6:28:48

Unity3D开发之OnCollisionXXX触发条件

A和B碰撞触发OnCollision函数条件如下&#xff1a; 1.A和B都要有collider。&#xff08;子物体有也可以&#xff09; 2.A和B至少有一个刚体&#xff08;Rigidbody&#xff09;组件&#xff0c;且刚体的isKinematic为false。如果为true不会触发。 3.挂载脚本的物体必须有刚体…...

编程日记 2024/8/19 6:26:44

spfa()算法（求最短路）

spfa算法是对bellman_ford算法的优化&#xff0c;大部分求最短路问题都可以用spaf算法来求。 注意&#xff1a; &#xff08;1&#xff09;如若图中有负权回路&#xff0c;不能用spfa算法&#xff0c;要用bellman_ford算法&#xff1b;若只有负权边&#xff0c;则可以用 spf…...

编程日记 2024/8/19 6:23:38

聊聊国产数据库的生态系统建设

生态系统是指在自然界中&#xff0c;生物与环境构成统一的整体&#xff0c;之间相互影响相互制约&#xff0c;并在一定时期内处于相对稳定的动态平衡状态。所谓数据库的生态系统&#xff0c;从用户的角度看&#xff0c;就是充分打通产品使用过程中上下游的关联&#xff0c;使其…...

编程日记 2024/8/19 6:22:37

基于 HarmonyOS 6.0 的家政服务预约页面实战开发：ArkUI 页面构建与跨端设计深度解析

基于 HarmonyOS 6.0 的家政服务预约页面实战开发&#xff1a;ArkUI 页面构建与跨端设计深度解析 前言 随着 HarmonyOS 生态逐渐成熟&#xff0c;HarmonyOS NEXT 与 HarmonyOS 6.0 的持续推进&#xff0c;越来越多开发者开始从传统 Android、Flutter、Web 技术栈逐步迁移到鸿蒙原…...

编程新知 2026/5/20 4:03:09

CVAT管理员必看：用户权限、任务分割与Datumaro数据导入导出全流程详解

CVAT管理员实战指南&#xff1a;权限配置、任务优化与数据流转全解析 1. 权限管理的艺术&#xff1a;从基础配置到高级控制 在CVAT平台中&#xff0c;权限管理是确保数据安全与协作效率的核心机制。不同于普通标注员视角&#xff0c;管理员需要掌握三个关键权限层级&#xff1a…...

编程新知 2026/5/20 2:34:32

使用coze为连锁服装品牌打造门店智能导购助手

### 业务背景&#xff1a;一线导购的“三座大山”客户是拥有 400 多家门店的快时尚品牌。一线导购每天面临的挑战很典型&#xff1a;- **信息记不住**&#xff1a;每周上百款新品上市&#xff0c;每款的成分、库存、搭配建议都要背&#xff0c;新员工培训周期长。 - **找货效率…...

编程新知 2026/5/20 2:05:07

加速3DGS生成与数字孪生开发：不可错过的8款效率工具盘点

一、行业核心技术科普&#xff1a;3DGS数字孪生开发的工具链概览一个高效的3DGS数字孪生开发流程&#xff0c;离不开一套完整的工具链。从数据采集、模型生成、格式优化到应用开发与部署&#xff0c;每个环节都有其专用的工具。其域创新围绕“感知—重建—理解—创造”的技术路…...

编程新知 2026/5/20 1:53:21

深入理解STM32的PWM：从CubeMX配置到用HAL库精准控制舵机角度（以F103为例）

深入理解STM32的PWM&#xff1a;从CubeMX配置到用HAL库精准控制舵机角度&#xff08;以F103为例&#xff09; 在机器人控制、自动化设备等需要精确位置反馈的应用场景中&#xff0c;舵机的精准控制往往是项目成败的关键。许多开发者虽然能够通过PWM实现基本的0、90、180三档控制…...

编程新知 2026/5/20 1:41:09

Windows 11 LTSC系统一键恢复Microsoft Store的终极解决方案

Windows 11 LTSC系统一键恢复Microsoft Store的终极解决方案 【免费下载链接】LTSC-Add-MicrosoftStore Add Windows Store to Windows 11 24H2 LTSC 项目地址: https://gitcode.com/gh_mirrors/ltscad/LTSC-Add-MicrosoftStore 你是否在使用Windows 11 24H2 LTSC版本时…...

编程新知 2026/5/20 0:40:29

告别卡顿与花屏：i.MX6ULL驱动OV2640摄像头的分辨率设置与V4L2应用层避坑指南

i.MX6ULL驱动OV2640摄像头的分辨率优化与V4L2实战指南 当你在i.MX6ULL平台上成功驱动了OV2640摄像头后&#xff0c;真正的挑战才刚刚开始。许多开发者会遇到这样的困扰&#xff1a;明明硬件连接正确&#xff0c;驱动也加载了&#xff0c;但图像输出却出现各种异常——画面只有一…...

编程新知 2026/5/20 0:38:24

嵌入式软件定时器原理与实现：从硬件限制到多任务调度

1. 软件定时器&#xff1a;从硬件限制到软件自由的桥梁在嵌入式开发里&#xff0c;定时器是个绕不开的话题。无论是让LED灯定时闪烁&#xff0c;还是需要周期性地采集传感器数据&#xff0c;甚至是实现一个简单的按键消抖&#xff0c;都离不开定时功能。硬件定时器&#xff08;…...

编程新知 2026/5/19 23:48:05

【每日一题】排序

&#x1f4cc; 写在前面&#xff1a;排序是算法竞赛中最基础也最核心的技能之一。它不仅是快速查找、去重、贪心等算法的前置步骤&#xff0c;更是自定义比较策略、多关键字排序、排序后贪心等高级技巧的基石。本文基于蓝桥杯官方课程与真题&#xff0c;从基础排序到竞赛实战&a…...

编程新知 2026/5/19 23:41:58

如何在Inkscape中实现专业级光学设计与光线追踪：矢量绘图软件的光学模拟完整指南

如何在Inkscape中实现专业级光学设计与光线追踪&#xff1a;矢量绘图软件的光学模拟完整指南 【免费下载链接】inkscape-raytracing An extension for Inkscape that makes it easier to draw optical diagrams. 项目地址: https://gitcode.com/gh_mirrors/in/inkscape-rayt…...

编程新知 2026/5/19 23:29:12