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

js简介以及在html中的2种使用方式（hello world）

news 2026/5/12 21:57:02

简介

javascript ：是一个跨平台的脚本语言；是一种轻量级的编程语言。

JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript。

HTML： 结构

css： 表现

JS： 行为

HTML+CSS 只能称之为静态网页，加入js网页则有了灵魂称之为动态网页

脚本语言的特点：

不能独立运行，要依赖网页；

可插入 HTML 页面的编程代码。

插入 HTML 页面后，可由所有的现代浏览器执行。

javascript 在网页中使用的两种方式：

方式1：直接在script标签中编写；

方式2：引用外部js代码

注意：

1.可以有多个script标签，多个script标签都是自上而下顺序执行

2.alert()的作用：控制浏览器弹出一个警告对话框

方式1实例：直接在script标签中编写

1.新建一个html文件（如：demo.html），并将下述内容写入文件中

<!DOCTYPE HTML><html><title>hello world</title><body></body>
</html>

2.在html文件中插入一个script标签

<script>alert("hello world"); </script>
<script>alert("hello world-2"); </script>

 

3.将html文件用浏览器打开，即可看见hello world

点击确定后，可以看见hello world-2

demo.html完整文件内容如下：

<!DOCTYPE HTML>
<html><title>hello world</title><body><script>alert("hello world"); </script><script>alert("hello world-2"); </script></body>
</html>

方式2实例：引用外部js代码

1.新建一个html文件（如：demo.html），并将下述内容写入文件中

<!DOCTYPE HTML><html><title>hello world</title><body></body>
</html>

2.在html文件（如：demo.html）同目录下新建一个js文件（如：demojs.js），并将下述内容写入文件中

alert("hello world");

3.在html文件中引用外部js代码（如：demojs.js）

<script src="./demojs.js">alert("hello world-2");</script>
<script>alert("hello world-3");</script>

 

4.将html文件用浏览器打开，即可看见hello world

点击确定后，可以看见hello world-3

demo.html完整文件内容如下：

<!DOCTYPE HTML>
<html><title>hello world</title><body><script src="./demojs.js">alert("hello world-2");</script><script>alert("hello world-3");</script></body>
</html>

注意：script标签一旦引入外部文件，就不能编写代码了，即使写了浏览器也会自动忽略。

如果需要再创建一个script代码即可。

相关文章：

js简介以及在html中的2种使用方式（hello world）

简介 javascript &#xff1a;是一个跨平台的脚本语言&#xff1b;是一种轻量级的编程语言。 JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript。 HTML&#xff1a; 结构 css&#xff1a; 表现 JS&#xff1a; 行为 HTMLCSS 只能称之为静态网页&#xff0…...

编程日记 2023/8/20 23:39:11

vsCode使用cuda

一、vsCode使用cuda 前情提要&#xff1a;配置好mingw&#xff1a; 1.安装cuda 参考&#xff1a; **CUDA Toolkit安装教程&#xff08;Windows&#xff09;&#xff1a;**https://blog.csdn.net/qq_42951560/article/details/116131410 2.在vscode中添加includePath c_cp…...

编程日记 2023/8/20 23:38:10

ubuntu无法使用apt命令时怎么安装库

如题 因为某些原因&#xff0c;不能直接联网使用apt命令安装库。只能手动去ubuntu镜像源里 找对应的包的deb安装文件 镜像源地址&#xff08;适用于AMD64架构,就是常见的PC的X86-64啦&#xff09; 镜像源地址&#xff08;适用于ARM64,armhf,ppc64el,riscv64,s390x架构&#xff…...

编程日记 2023/8/20 23:37:08

防火墙firewall

一、什么是防火墙 二、iptables 1、iptables介绍 2、实验 138的已经被拒绝&#xff0c;1可以 三、firewalld 1、firewalld简介 关闭iptables&#xff0c;开启firewalld&#xff0c;curl不能使用&#xff0c;远程连接ssh可以使用 添加80端口 这样写也可以&#xff1a;添加http…...

编程日记 2023/8/20 23:36:06

拿来即用，自己封装的 axios

文章目录 一、需求二、分析1. 安装axios2. 新建一个 ts 文件&#xff0c;封装 axios3. store 存放 token 信息4. 使用5. 文件 type.js 一、需求 在日常开发中&#xff0c;我们会经常用到 axios &#xff0c;那么如何在自己的项目中自己封装 axios 二、分析 1. 安装axios np…...

编程日记 2023/8/20 23:35:05

Hadoop小结（下）

HDFS 集群 HDFS 集群是建立在 Hadoop 集群之上的&#xff0c;由于 HDFS 是 Hadoop 最主要的守护进程&#xff0c;所以 HDFS 集群的配置过程是 Hadoop 集群配置过程的代表。 使用 Docker 可以更加方便地、高效地构建出一个集群环境。 每台计算机中的配置 Hadoop 如何配置集群…...

编程日记 2023/8/20 23:34:04

使用老北鼻AI免费GPT对话解决gun make安装和解析iso9660的问题

在学习解析ISO9660镜像文件时&#xff0c;使用了GPT来了解相关的库和gun make编译器的相关知识。这个过程可真是一言难尽&#xff0c;每个问题的回答都模棱两可都需要去证实&#xff0c;不能直接复制粘贴&#xff0c;也不能说GPT的回答一点用也没有&#xff0c;至少GPT给出了一…...

编程日记 2023/8/20 23:33:03

shell脚本语句

一、语句 一、条件语句 一、以用户为例演示 一、显示当前登录系统的用户信息 w命令 二、显示有多少个用户 w | wc -l 显示有7个用户 前两个是固定标题&#xff0c;从第三个开始才是登录用户&#xff0c;所以要统计数量需要 命令&#xff1a;echo $[$(w | wc -l) -2] 显示…...

编程日记 2023/8/20 23:32:02

【LeetCode】2235.两整数相加

题目 给你两个整数 num1 和 num2&#xff0c;返回这两个整数的和。 示例 1&#xff1a; 输入&#xff1a;num1 12, num2 5 输出&#xff1a;17 解释&#xff1a;num1 是 12&#xff0c;num2 是 5 &#xff0c;它们的和是 12 5 17 &#xff0c;因此返回 17 。示例 2&…...

编程日记 2023/8/20 23:31:01

springboot sl4j2 写入日志到mysql

问题描述 springboot初始化的时候&#xff0c;会先初始化日志然后再加载数据源如果用配置文件进行初始化&#xff0c;那么会出现数据源没有加载成功&#xff0c;导致空指针异常 报错排查如下&#xff1a; 搜索报错信息&#xff0c;OBjects.invoke is Null打断点发现。dataso…...

编程日记 2023/8/20 23:29:59

用 PyTorch 编写分布式应用程序

用 PyTorch 编写分布式应用程序 在这个简短的教程中&#xff0c;我们将介绍 PyTorch 的分布式软件包。 我们将了解如何设置分布式设置&#xff0c;使用不同的交流策略以及如何仔细查看软件包的内部结构。 设定 PyTorch 中包含的分布式软件包(即torch.distributed&#xff09…...

编程日记 2023/8/20 23:28:57

空间分析专属 Python 学习资料

空间数据分析能够帮助我们更好地理解地理空间中的模式和关系&#xff0c;从而为决策提供支持。例如&#xff0c;城市规划者可以使用空间数据分析来确定城市发展的最佳方向&#xff0c;环境科学家可以使用空间数据分析来评估污染的影响&#xff0c;而商业分析师可以使用空间数据…...

编程日记 2023/8/20 23:27:55

2. Linux Server 20.04 Qt5.14.2配置Jetson Orin Nano Developer Kit 交叉编译环境

最近公司给了我一块Jetson Orin Nano的板子&#xff0c;先刷了系统&#xff08;1.Jetson Orin Nano Developer Kit系统刷机&#xff09;又让我搭建交叉编译环境&#xff0c;所以有了下面的文章 一 :Qt5.14.2交叉编译环境安装 1.准备 1.1设备环境 1.1.1 Server: Ubuntu20.0…...

编程日记 2023/8/20 23:26:54

vue入门

Attribute 绑定 v-bind:取值方式 开发前准备 安装node.js需要高于15.0 创建vue项目 npm init vuelatest安装 npm install 启动 npm run dev模板语法 文本插值 {{ 变量 }} <p> {{ mesg }} </p>这种方式公支持单一表达式&#xff0c;也可以是js代码&#xf…...

编程日记 2023/8/20 23:25:53

区块链中slot、epoch、以及在slot和epoch中的出块机制，分叉原理（自己备用）

以太坊2.0中有两个时间概念&#xff1a;时隙槽slot 和 时段&#xff08;周期&#xff09;epoch。其中一个slot为12秒&#xff0c;而每个 epoch 由 32 个 slots 组成&#xff0c;所以每个epoch共384秒&#xff0c;也就是 6.4 分钟。 对于每个epoch&#xff0c;使用RANDAO伪随机…...

编程日记 2023/8/20 23:24:51

免费开源的vue+express搭建的后台管理系统

此项目已开源 前端git地址&#xff1a;exp后台管理系统前端: exp后台管理系统前端 后端git地址&#xff1a;express后台管理系统: express后台管理系统 安装运行 npm i yarn i 前端: npm run dev | yarn dev 后端: npm run start | yarn start 主要技术栈 前端后端名称版本名…...

编程日记 2023/8/20 23:23:49

【开发】视频云存储EasyCVR视频汇聚平台AI智能算法定制

安防视频集中存储EasyCVR视频汇聚平台&#xff0c;可支持海量视频的轻量化接入与汇聚管理。平台能提供视频存储磁盘阵列、视频监控直播、视频轮播、视频录像、云存储、回放与检索、智能告警、服务器集群、语音对讲、云台控制、电子地图、平台级联、H.265自动转码等功能。为了便…...

编程日记 2023/8/20 23:22:48

Ribbon：负载均衡及Ribbon

什么是负载均衡&#xff1f; 第一种轮询算法&#xff0c;依次遍历去执行&#xff0c;达到负载均衡 集成Ribbon 导入pom&#xff0c;在消费者服务里的pom文件导入 <!-- Ribbon 集成 --><!-- https://mvnrepository.com/artifact/org.springframework.cloud/spr…...

编程日记 2023/8/20 23:21:46

【声波】声波在硼酸、硫酸镁 （MgSO4） 和纯水中的吸收研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/8/20 23:20:45

使用swoole实现实时消息推送给客户端

一. 测试服务端 //测试服务端public function testServer(){$server new Server(192.168.0.144, 9501, SWOOLE_BASE, SWOOLE_SOCK_TCP);$server->on(request, function ($request, $response) {$response->header(Content-Type, text/plain);$response->end("He…...

编程日记 2023/8/20 23:19:43

PCI总线‘对话’的艺术：主从设备如何通过FRAME#、STOP#信号优雅地‘开始’与‘结束’传输

PCI总线‘对话’的艺术&#xff1a;主从设备如何通过FRAME#、STOP#信号优雅地‘开始’与‘结束’传输 在计算机系统的内部世界里&#xff0c;总线的数据传输就像一场精心编排的舞会。PCI总线作为这场舞会的舞台&#xff0c;主从设备之间的每一次交互都遵循着严格的礼仪规则。这…...

编程新知 2026/5/12 21:22:26

如何快速配置ComfyUI ControlNet预处理器：完整安装与使用指南

如何快速配置ComfyUI ControlNet预处理器&#xff1a;完整安装与使用指南 【免费下载链接】comfyui_controlnet_aux ComfyUIs ControlNet Auxiliary Preprocessors 项目地址: https://gitcode.com/gh_mirrors/co/comfyui_controlnet_aux ComfyUI ControlNet Aux预处理器…...

编程新知 2026/5/12 19:32:47

Python+OpenCV+PyQt5+SVM实现车牌识别系统（源码）

目录 一、项目背景 二、技术介绍 三、功能介绍 四、 代码设计 五、系统实现 一、项目背景 随着我国城市化进程的不断加快&#xff0c;机动车保有量呈现持续快速增长态势。据公安部统计&#xff0c;2024年全国机动车保有量已突破4.5亿辆&#xff0c;其中汽车占比超过80%。…...

编程新知 2026/5/12 19:28:44

如何轻松解锁QQ音乐加密文件：qmcdump实战指南

如何轻松解锁QQ音乐加密文件&#xff1a;qmcdump实战指南 【免费下载链接】qmcdump 一个简单的QQ音乐解码&#xff08;qmcflac/qmc0/qmc3 转 flac/mp3&#xff09;&#xff0c;仅为个人学习参考用。 项目地址: https://gitcode.com/gh_mirrors/qm/qmcdump 你是否曾经下载…...

编程新知 2026/5/12 18:26:15

知识竞赛软件高可用架构解析：主备切换与故障自愈如何保障业务连续

&#x1f3d7;️ 知识竞赛软件的高可用架构主备切换与故障自愈之道&#x1f4cc; 引言在数字化竞赛时代&#xff0c;一场线上知识竞赛的参与者可能遍布全国&#xff0c;任何系统中断都可能导致活动失败、体验受损。因此&#xff0c;构建一个具备高可用性的知识竞赛平台&#xf…...

编程新知 2026/5/12 18:11:37

uHabits习惯追踪应用完整指南：从入门到精通的5个实用技巧

uHabits习惯追踪应用完整指南&#xff1a;从入门到精通的5个实用技巧 【免费下载链接】uhabits Loop Habit Tracker, a mobile app for creating and maintaining long-term positive habits 项目地址: https://gitcode.com/gh_mirrors/uh/uhabits uHabits习惯追踪应用是…...

编程新知 2026/5/12 15:16:28

别再只调分辨率了！手把手教你用VESA时序搞定1080P显示器驱动（附Verilog代码）

从VESA标准到FPGA实战&#xff1a;构建1080P显示驱动的完整逻辑链 在数字显示技术领域&#xff0c;驱动一块19201080分辨率的屏幕远不止是配置几个参数那么简单。当我第一次尝试用FPGA驱动高清显示器时&#xff0c;发现大多数教程都停留在"设置分辨率"的层面&#xf…...

编程新知 2026/5/12 15:16:28

S905M芯片盒子救砖实战：8189ETV无线与NAND存储的线刷固件修复指南

1. 救砖前的准备工作 当你发现手里的辽宁移动数码视讯Q5盒子突然变砖&#xff0c;先别急着扔。这种采用S905M芯片的盒子其实有很高的可玩性&#xff0c;尤其是搭配8189ETV无线模块和NAND存储的方案&#xff0c;只要掌握正确方法&#xff0c;救砖成功率很高。我前前后后折腾过二…...

编程新知 2026/5/12 14:27:43

零成本AI评审知识库：基于GitHub Actions与Gemini的自动化学术发布平台

1. 项目概述&#xff1a;一个零成本、AI驱动的开放知识库如果你是一名研究者、开发者&#xff0c;或者正在构建一个需要实时验证信息的AI智能体&#xff0c;那么你一定对传统学术出版的漫长周期和封闭性感到头疼。一篇论文从投稿到发表&#xff0c;动辄数月&#xff0c;评审过程…...

编程新知 2026/5/12 12:48:27

从零到图像显示：用海康MVS SDK写一个最简单的C++相机采集程序

从零到图像显示&#xff1a;用海康MVS SDK写一个最简单的C相机采集程序 第一次接触工业相机开发时&#xff0c;最让人头疼的往往不是复杂的算法&#xff0c;而是如何让相机简单地显示一张图像。本文将带你用最直接的方式&#xff0c;在30分钟内完成从设备连接到实时显示的完整流…...

编程新知 2026/5/12 9:06:36