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

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

news 2026/2/7 20:17:20

简介

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

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

编程新知 2026/2/7 13:37:25

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2026/1/9 19:36:58

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2026/1/30 17:10:19

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2026/2/1 8:59:45

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01

招商蛇口 | 执笔CID，启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

编程新知 2026/1/26 8:13:33

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2026/1/31 8:45:21

计算机基础知识解析：从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

编程新知 2026/1/31 9:44:27

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

编程新知 2025/11/27 20:15:13