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

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

简介

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…...

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…...

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

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

防火墙firewall

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

拿来即用,自己封装的 axios

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

Hadoop小结(下)

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

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

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

shell脚本语句

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

【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&…...

springboot sl4j2 写入日志到mysql

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

用 PyTorch 编写分布式应用程序

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

空间分析专属 Python 学习资料

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

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…...

vue入门

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

区块链中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伪随机…...

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

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

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

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

Ribbon:负载均衡及Ribbon

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

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

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

使用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…...

CVE_2020_26259 任意文件删除

为什么要用c语言搓个shellcode出来&#xff0c;为什么不用msfvenom&#xff1f;因为这玩意生成的shellcode是基于winsocket的&#xff0c;注进去还要启动个监听&#xff0c;我仅仅想要验证一下可行性而已&#xff0c;不如自己搓个弹出messagebox版本的shellcode 环境 windows 1…...

墨语灵犀Python入门辅助:从零开始学编程的智能导师

墨语灵犀Python入门辅助&#xff1a;从零开始学编程的智能导师 想学Python&#xff0c;但一打开教程就被满屏的术语和代码吓退了&#xff1f;自己写代码&#xff0c;遇到报错看不懂&#xff0c;搜了半天也找不到答案&#xff0c;是不是很挫败&#xff1f;别担心&#xff0c;这…...

基于事件触发机制,具有延时矩阵的固定时间共识

基于事件触发机制&#xff0c;具有延时矩阵的固定时间共识在分布式系统中&#xff0c;共识问题一直是个老大难。今天咱们聊聊一个挺有意思的解决方案——基于事件触发机制&#xff0c;带有延时矩阵的固定时间共识。听起来有点高大上&#xff1f;别急&#xff0c;咱们慢慢拆解。…...

无需复杂配置!TensorFlow-v2.9镜像带你快速体验GPU加速训练

无需复杂配置&#xff01;TensorFlow-v2.9镜像带你快速体验GPU加速训练 1. TensorFlow-v2.9镜像简介 TensorFlow是由Google Brain团队开发的开源机器学习框架&#xff0c;广泛应用于深度学习研究和生产环境。TensorFlow-v2.9镜像基于TensorFlow 2.9版本构建&#xff0c;提供了…...

Python金融计算效率翻倍的7个隐藏技巧:pandas加速300%、numba编译优化、向量化避坑指南

第一章&#xff1a;Python金融计算效率翻倍的底层逻辑与性能瓶颈诊断Python在金融量化分析中广泛应用&#xff0c;但其默认解释执行机制常导致大规模时间序列回测、蒙特卡洛模拟或协方差矩阵运算时出现显著延迟。效率瓶颈并非源于算法本身&#xff0c;而集中于CPython解释器的G…...

WebGIS驱动的智慧校园导航系统:架构设计与功能实现全解析

1. WebGIS如何让校园导航更智能&#xff1f; 第一次接触校园导航系统是在三年前&#xff0c;当时某高校的IT部门负责人向我吐槽&#xff1a;学生们总在开学季迷路&#xff0c;传统纸质地图根本不够用。这让我意识到&#xff0c;基于WebGIS的智慧导航系统不是锦上添花&#xff0…...

OpenFeign性能优化最全实战

Feign 就是动态代理 模板化 HTTP 请求&#xff0c;帮你把接口方法自动转成 HTTP 调用。 完整执行流程&#xff08;8 步&#xff09; 启动时&#xff1a;FeignClient 接口被 Feign 扫描&#xff0c;生成动态代理类 调用时&#xff1a;执行接口方法 → 进入代理类 解析注解&…...

SAP事务代码中文描述变成了英文如何解决

背景是接到用户反馈&#xff0c;事务代码的中文描述突然变成了英文&#xff0c;我检查了用户的参数文件&#xff0c;登录语言是选择的ZH&#xff0c;经过检查发现是新主题权限角色批量维护的时候出现了问题。只需要将权限角色更改成修正即可。用户的菜单页面1、PFCG检查发现权限…...

【RL-CISPO】MiniMax-M1: Scaling Test-Time Compute Efficiently with Lightning Attention

note CISPO是2025年6月minimax提出&#xff0c;放到今天还是有价值的。CISPO强化学习&#xff1a; 传统 PPO / GRPO 这类方法&#xff0c;在做 token 级 clipping 时&#xff0c; 会把一些“低概率但很关键”的 token&#xff08;这类token一般是反思、转折、纠错、重新检查等…...

LabVIEW以声卡为数据采集设备开发数据采集处理系统。 具备声卡参数设置,实现文件自动存储、...

LabVIEW以声卡为数据采集设备开发数据采集处理系统。 具备声卡参数设置&#xff0c;实现文件自动存储、以及文件手动存储两种功能&#xff0c;进行采集数据的分析&#xff0c;包括频域分析&#xff0c;滤波处理等功能&#xff1b; 程序实验报告在工业测量和实验室场景中&#x…...