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

news2024/9/23 21:29:19

简介

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代码即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/900918.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ajax-axios-url-form-serialize 插件

AJAX AJAX 概念 1.什么是 AJAX ? mdn 使用浏览器的 XMLHttpRequest 对象 与服务器通信 浏览器网页中&#xff0c;使用 AJAX技术&#xff08;XHR对象&#xff09;发起获取省份列表数据的请求&#xff0c;服务器代码响应准备好的省份列表数据给前端&#xff0c;前端拿到数据数…

面试百问:Redis常见的故障以及发生场景

作为一个测试同学&#xff0c;被测系统架构中有使用到redis吗&#xff1f;对redis常见的故障有了解吗&#xff1f;又是如何进行测试的呢&#xff1f; 针对常见的redis面试问题&#xff0c;怎样才算一个高质量的回答呢&#xff0c;回答思路一般包括 问题的类型是什么&#xff…

Qt应用开发(基础篇)——高级纯文本窗口 QPlainTextEdit

一、前言 QPlainTextEdit类继承于QAbstractScrollArea&#xff0c;QAbstractScrollArea继承于QFrame&#xff0c;是Qt用来显示和编辑纯文本的窗口。 滚屏区域基类https://blog.csdn.net/u014491932/article/details/132245486?spm1001.2014.3001.5501框架类QFramehttps://blo…

使用IDM下载视频出现“由于法律原因,IDM无法下载...

一、问题描述 由于法律原因,IDM无法下载..,如图: 二、原因分析 下载该IDM抓取的M3U8文件,查看其中的内容发现 : #EXT-X-KEY 字段已经写明了加密方式是AES-128,包含一个URI和IV值 #EXTM3U #EXT-X-VERSION:3 #EXT-X-TARGETDURATION:8 #EXT-X-MEDIA-SEQUENCE:0 #EXT-X-KEY:…

【机器学习】处理不平衡的数据集

一、介绍 假设您在一家给定的公司工作&#xff0c;并要求您创建一个模型&#xff0c;该模型根据您可以使用的各种测量来预测产品是否有缺陷。您决定使用自己喜欢的分类器&#xff0c;根据数据对其进行训练&#xff0c;瞧&#xff1a;您将获得96.2%的准确率&#xff01; …

分析了下内网穿透技术,都在这了

内网穿透是一种将位于内网中的计算机或设备暴露给公网的技术&#xff0c;以便可以从外部网络访问这些设备。这在许多场景中非常有用&#xff0c;例如远程访问内网中的服务器、搭建本地 Web 服务器、共享文件等。 目前内网穿透一般都以下五种方案 目录 方案一&#xff1a;使用…

Cesium加载ArcGIS Server4490且orgin -400 400的切片服务

Cesium在使用加载Cesium.ArcGisMapServerImageryProvider加载切片服务时&#xff0c;默认只支持wgs84的4326坐标系&#xff0c;不支持CGCS2000的4490坐标系。 如果是ArcGIS发布的4490坐标系的切片服务&#xff0c;如果原点在orgin X: -180.0Y: 90.0的情况下&#xff0c;我们可…

若依的使用(token补充、HTTPS(网络安全)、分页前后端配置)

本文章转载于公众号&#xff1a;王清江唷,仅用于学习和讨论&#xff0c;如有侵权请联系 QQ交流群&#xff1a;298405437 本人QQ&#xff1a;4206359 具体视频地址:8 跑后端_哔哩哔哩_bilibili 1、HTTP&#xff1f; 曾经我们在讲JWT的时候&#xff0c;当时JWT需要配合https…

企业信息化过程----应用管理平台的构建过程

1.信息化的概念 信息化是一个过程&#xff0c;与工业化、现代化一样&#xff0c;是一个动态变化的过程。信息化已现代通信&#xff0c;网络、数据库技术为基础&#xff0c;将所有研究对象各个要素汇总至数据库&#xff0c;供特定人群生活、工作、学习、辅助决策等&#xff0c;…

前端基础(Vue的模块化开发)

目录 前言 响应式基础 ref reactive 学习成果展示 Vue项目搭建 总结 前言 前面学习了前端HMTL、CSS样式、JavaScript以及Vue框架的简单适用&#xff0c;接下来运用前面的基础继续学习Vue&#xff0c;运用前端模块化编程的思想。 响应式基础 ref reactive 关于ref和react…

linux:Temporary failure in name resolutionCouldn’t resolve host

所有域名无法正常解析。 ping www.baidu.com 等域名提示 Temporary failure in name resolution错误。 rootlocalhost:~# ping www.baidu.com ping: www.baidu.com: Temporary failure in name resolution rootlocalhost:~# 一、ubuntu/debian&#xff08;emporary failure i…

提升大数据技能,不再颓废!这6家学习网站是你的利器!

随着国家数字化转型&#xff0c;大数据领域对人才的需求越来越多。大数据主要研究计算机科学和大数据处理技术等相关的知识和技能&#xff0c;从大数据应用的三个主要层面&#xff08;即数据管理、系统开发、海量数据分析与挖掘&#xff09;出发&#xff0c;对实际问题进行分析…

学习笔记230810--get请求的两种传参方式

问题描述 今天写了一个对象方式传参的get请求接口方法&#xff0c;发现没有载荷&#xff0c;ip地址也没有带查询字符串&#xff0c;数据也没有响应。 代码展示 错误分析 实际上这里的query是对象方式带参跳转的参数名&#xff0c;而get方法对象方式传参的参数名是parmas 解…

华为OD机试 - 秘钥格式化 - 双指针(Java 2023 B卷 100分)

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷&#…

条件判断语句

二、判断语句 # 判断语句result10>15 print("10>5的结果是&#xff1a;%s"% result,type(result))eq"yl""yl" print("\"ylyl\" %s"% eq,type(eq))bool_1True bool_2False print(f"打印出类型,{bool_1},类型是{ty…

【论文笔记】MetaBEV: Solving Sensor Failures for BEV Detection and Map Segmentation

原文链接&#xff1a;https://arxiv.org/abs/2304.09801 1. 引言 目前&#xff0c;多模态融合感知中的一大问题在于忽视了传感器失效带来的影响。之前工作的主要问题包括&#xff1a; 特征不对齐&#xff1a;通常使用CNN处理拼接后的特征图&#xff0c;存在几何噪声时可能导致…

2023-8-14 前缀和

原题链接&#xff1a;前缀和 #include <iostream> using namespace std;const int N 100010;int n, m;int a[N], s[N];int main () {scanf("%d%d", &n, &m);for(int i 1; i < n; i ) scanf("%d", &a[i]);for(int i 1; i < n;…

Oracle Database12c数据库官网下载和安装教程

文章目录 下载安装Oracle自带的客户端工具使用 下载 进入oracle官网 点击下载连接之后右上角会有一个下载 我们只需要数据库本体就够了 运行这个下载器 等待下好之后即可 出现 Complete 之后代表下载成功&#xff0c;然后我们解压即可 安装 双击 双击setup.exe 根据…

windows电脑安装了多个版本python 用vscode编程如何指定版本

在状态栏中找到 Python 版本号。这个版本号表示当前正在使用的 Python 解释器版本。 如果需要切换到其他版本的 Python&#xff0c;请点击版本号&#xff0c;然后从列表中选择所需的 Python 版本。列表中的 Python 版本是按照安装顺序排列的。这里一般会有多个版本可供选择

URL编码指南

URL简介 URL 是统一资源定位符&#xff08;Uniform Resource Locator&#xff09;的缩写。它是用于在互联网上定位并访问资源的一种标识方式。 URL通常由以下几个组成部分组成&#xff1a; 协议&#xff08;Protocol&#xff09;&#xff1a;指示要使用的协议&#xff0c;如…