JavaScript(JS)三种使用方式,三种输出方式,及快速注释。---[用于后续web渗透内容]

news2024/11/28 0:54:50

JavaScript(JS)是一种广泛使用的编程语言,允许在网页中添加交互性和动态效果。在HTML中,<script>标签用于引入和执行JavaScript代码。

JS代码

js1.html \\js三种使用方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="alert('你好');">元素绑定事件</button>
    <script>
        alert("这是内嵌方式的弹窗");
    </script>

    <script src="js2.js"></script>
    
</body>
</html>

js2.js \\js外部脚本文件

alert("这是外链方式的弹窗")

js3.js \\三种输出方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        alert('弹窗输出');

        console.log("控制台输出")

        document.write("页面输出")

    </script>
</body>
</html>

JS三种使用方式

1. 元素绑定事件

 

<button οnclick="alert('你好');">元素绑定事件</button>

 

在这个例子中,<button>标签使用了一个内联事件处理器 onclick。当用户点击这个按钮时,浏览器会执行 onclick 属性中的JavaScript代码。代码调用了 `alert` 函数,显示一个包含消息“你好”的警告框。

df49be9e11a2430994b3e4aeca7134b6.png

2. 内嵌脚本

<script>
    alert("这是内嵌方式的弹窗");
</script>

 

这个 <script> 标签包含了一个内嵌的JavaScript代码块。当浏览器解析到这个标签时,会执行标签内的代码。在案例中,代码块中的 alert 函数会在页面加载时被调用,弹出一个包含消息“这是内嵌方式的弹窗”的警告框。

3b0ba349eb684762a4bc4764fc159e89.png

3. 外部脚本文件

<script src="js2.js"></script>

 

这个 <script>标签用于引入一个外部的JavaScript文件,即 `js2.js`。这个文件包含了JavaScript代码,与内嵌不同,它是存储在一个单独的文件中。这种方法有助于保持HTML代码的清晰和整洁。

 

js2.js 文件的内容如下:

 

alert("这是外链方式的弹窗");

 

当浏览器加载HTML页面时,会加载并执行 `js2.js` 文件中的代码,将弹出一个包含消息“这是外链方式的弹窗”的警告框。

232b8c74182649649c94c4fc2308cc75.png

 

 JavaScript三种输出方式

1. 弹窗输出:使用 alert() 函数在浏览器中弹出一个警告框,显示传递的字符串。

 

alert('弹窗输出');

632fa97cc94c454e95a403dd25364d54.png

2. 控制台输出:使用 console.log() 函数将信息输出到浏览器的控制台。进入控制台查看和调试代码的执行结果,而不会干扰页面的正常显示。   

 

console.log("控制台输出"); //f12或者ctrl+shift+j打开浏览器控制台

8c13256a67c944bfa6c132f25212d0be.png

3. 页面输出:使用 document.write() 函数将字符串输出到当前文档的输出流中。会在页面上直接显示文本,在页面加载后使用 document.write(),会覆盖页面的当前内容。   

 

document.write("页面输出");

9428fafb19544fb18e8c16fce6ae3f24.png

 

JavaScript注释

在 <script> 标签内,有两种注释方式:

1. 单行注释:使用 // 进行注释,注释内容会一直持续到行尾。可以使用快捷键 Ctrl + /(在大多数代码编辑器中)快速添加或删除单行注释。

// Ctrl + ? 单行注释

 

2. 多行注释:使用 /* 开始,*/ 结束,可以跨越多行。可以使用快捷键 Alt + Shift + A(在大多数代码编辑器中)添加或删除多行注释。
   /*
       alt + shift + A 多行注释
   */

 

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

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

相关文章

Tomcat命令行窗口、IDEA中Tomcat控制台 中文乱码问题解决方案

Tomcat出现中文乱码问题 打开Tomcat文件夹下的conf/logging.properties文件&#xff0c;将下图位置中的编码由UTF-8全部替换成GBK 然后重启Tomcat服务器&#xff0c;问题解决 Intellij IDEA启动Tomcat服务器控制台出现中文乱码 解决方案非常简单&#xff0c;按照下图设置控制…

将数字状态码在后台转换为中文状态

这是我们的实体类 可以看出我们的状态status是2如过返回到前端我们根本不知道2代表的是什么&#xff0c;所以我们需要再这里将数字转换成能看懂的中文状态&#xff0c;首先我们创建一个枚举类 先将我们状态码所对应的中文状态枚举出来&#xff0c;然后创建一个静态方法&#…

设计模式学习(六)——《大话设计模式》

设计模式学习&#xff08;六&#xff09;——《大话设计模式》 简单工厂模式&#xff08;Simple Factory Pattern&#xff09;&#xff0c;也称为静态工厂方法模式&#xff0c;它属于类创建型模式。 在简单工厂模式中&#xff0c;可以根据参数的不同返回不同类的实例。简单工厂…

超平实版Pytorch CNN Conv2d

torch.nn.Conv2d 基本参数 in_channels (int) 输入的通道数量。比如一个2D的图片&#xff0c;由R、G、B三个通道的2D数据叠加。 out_channels (int) 输出的通道数量。 kernel_size (int or tuple) kernel&#xff08;也就是卷积核&#xff0c;也可…

基于Springboot的社区防疫物资申报系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的社区防疫物资申报系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系…

Netty-NioServerSocketChannel与NioSocketChannel

NioServerSocketChannel NioServerSocketChannel是netty服务端的channel。在ServerbootStrap的bind方法中&#xff0c;通过反射&#xff0c;实例化对象NioServerSocketChannel。   NioServerSocketChannel对象实例化的过程中。 AbstractChannel中实例化channel的id&#xff…

TexStudio + MikTex 手动安装宏包

遇到上面这个 “宏包安装” 提示窗口后&#xff0c;设置来源为本地&#xff0c;随后在这个网址 https://mirrors.ustc.edu.cn/CTAN/systems/win32/miktex/tm/packages/ 下载所需的宏包&#xff0c;放到本地仓库里&#xff0c;即可 有三个宏包是必须要有的&#xff0c;它们是索…

UTS iOS插件

1、UTS插件无法出现 再uniapp x中使用时&#xff0c;必须给这个插件高度和宽度&#xff0c;否则出不来&#xff01; <uts-hello-view buttonText"点击按钮内容" style"width:375px;height: 375px;background-color: aqua;"></uts-hello-view>…

美业连锁门店收银系统源码-如何查看收款门店对应的加盟商?

美业管理系统源码 博弈美业SaaS系统 连锁多门店美业收银系统源码 多门店管理 / 会员管理 / 预约管理 / 排班管理 / 商品管理 / 促销活动 PC管理后台、手机APP、iPad APP、微信小程序 第一步&#xff1a; 登录pc管理后端 第二步&#xff1a; 进入企业组织管理-门店管理&a…

遥测终端赋能水库泄洪监测预警,筑牢度汛安全防线!

4月10日&#xff0c;水利部召开水库安全度汛视频会议。会议要求着力强化水库防洪“四预”措施&#xff0c;加快构建雨水情监测预报“三道防线”&#xff0c;完善预警信息发布机制&#xff0c;推进数字孪生水利工程建设&#xff0c;为科学调度指挥决策提供支持。强调坚决牢牢守住…

HTML5漫画风格个人介绍源码

源码介绍 HTML5漫画风格个人介绍源码&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面&#xff0c;重定向这个界面 效果截图 源码下载 HTML5漫画风格…

如何在ubuntu上使用clash

下载CLASH软件 修改配置文件 解压之后&#xff0c;将.env文件中的URL改为自己订阅的URL&#xff0c;然后再执行start.sh脚本 最后按照提示&#xff0c;将clash.sh添加到环境变量 如何修改端口 在start.sh中更改 祝大家在ubuntu上玩得开心

Linux设置真实IP

1.查看ens33网卡信息 vi /etc/sysconfig/network-scripts/ifcfg-ens33 #添加以下内容 BOOTPROTODHCP #协议类型 dhcp bootp none ONBOOTyes #启动时是否激活 yes | no#修改文件完成后&#xff0c;重启网络 service network restartping www.baidu.com #验证网络是否生效 ifco…

基于SpringBoot框架的智慧食堂

采用技术 基于SpringBoot框架实现的web的智慧社区系统的设计与实现~ 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBootMyBatis 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 页面展示效果 系统功能 系统首页 用户注册页面 菜品信息页面 …

Postman之全局变量与环境变量配置

实际开发中可能需要不停切换环境&#xff0c;接口中来回输入环境地址比较麻烦&#xff0c;故而通过定义变量来节约频繁更换测试地址所耗费的时间。Postman 允许定义自己的全局变量&#xff08;Globals&#xff09;与环境变量&#xff08;Environment&#xff09;&#xff0c;最…

Ribbon 添加右侧区域菜单项

效果图如下所示&#xff1a; 类似与上图效果所示&#xff0c;代码如下&#xff1a; RibbonPage* pageHome1 ribbonBar()->addPage(tr("Home")); //实现代码&#xff1a; { QMenu* menuOptions ribbonBar()->addMenu(tr("Options"))…

java mockito工具

java mockito工具 Mockito 中文文档 本文档参考hehonghui/mockito-doc-zh项目&#xff0c;如有侵权&#xff0c;请联系删除 Mockito框架官方地址mockito&#xff0c;文档地址。 Mockito库能够Mock对象、验证结果以及打桩(stubbing)。 该文档您也可以通过http://mockito.org获…

EFK环境搭建(基于K8S环境部署)

目录 一.环境信息二.安装nfs供应商三.安装elasticsearch四.安装kibana组件五.安装fluentd 一.环境信息 1.服务器及k8s版本 IP地址主机名称角色版本192.168.40.180master1master节点1.27192.168.40.181node1node1节点1.27192.168.40.182node2node2节点1.27 2.部署组件版本 序…

爬虫入门——Request请求

目录 前言 一、Requests是什么&#xff1f; 二、使用步骤 1.引入库 2.请求 3.响应 三.总结 前言 上一篇爬虫我们已经提及到了urllib库的使用&#xff0c;为了方便大家的使用过程&#xff0c;这里为大家介绍新的库来实现请求获取响应的库。 一、Requests是什么&#xff1…

Py之fireworks-ai:fireworks-ai的简介、安装和使用方法、案例应用之详细攻略

Py之fireworks-ai&#xff1a;fireworks-ai的简介、安装和使用方法、案例应用之详细攻略 目录 fireworks-ai的简介 fireworks-ai的安装和使用方法 1、安装 2、使用方法 # 使用Fireworks客户端库与某个预训练模型进行交互 fireworks-ai的案例应用 LLMs之Agent之Self-ask …