第一节JavaScript 简介与使用

  • JavaScript简介

JavaScript是互联网上最流行的脚本语言,这门语言可用于HTML和Web,更广泛用于服务器、PC、电脑、智能手机等设备上。

JavaScript是一种轻量级的编程语言。

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

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

二、JavaScript用法

1、描述

HTML中的JavaScript脚本代码必须位于<script>与</script>标签之间。

JavaScript脚本代码可被放置在HTML页面的<body>和<head>标签中。

2、<script>标签

如在HTML中插入JavaScript,请使用<script>标签

<script>是代码的起始位置

</script>是代码的结束位置

  1. JavaScript.write(“”)直接写入内容到HTML中

示例代码:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>JavaScript简介与使用</title><script type="text/javascript">document.write("script标签在head标签中,将此内容直接写入到HTml中");document.write("<p>我是一个段落</p>")</script>
</head>
<body><p>您只能在 HTML 输出流中使用 document.write。 如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。</p>
</body>
</html>

效果图:

4、JavaScript对事件的反应

只上在body标签中代码:

<body><h1>我的第一个 JavaScript</h1><p>JavaScript 能够对事件作出反应。比如对按钮的点击:</p><button type="button" onclick="alert('欢迎!')">点我!</button></body>

效果图:

5、JavaScript改变HTMl内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

代码:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>JavaScript简介与使用</title><script type="text/javascript">function myFunction () {var curDocument = document.getElementById("pId"); // 查找元素curDocument.innerHTML = "Change HTML Content";    //改变内容}</script></head>
<body><h1>5、JavaScript改变HTMl内容</h1><p id="pId">JavaScript 能改变 HTML 元素的内容。</p><!-- <script type="text/javascript">function myFunction () {var curDocument = document.getElementById("pId"); // 查找元素curDocument.innerHTML = "Change HTML Content";    //改变内容}</script> --><button type="button" onclick="myFunction()">点击这里</button></body>
</html>

效果图:

说明:

 Var x = document.getElementById("修改标签内容的ID") -- 查找元素,

x.innerHTML = “修改的内容”-- 改变内容

将脚本放置于 <head> 或者 <body>中,脚本运行效果完全一致。

6、JavaScript改变HTMl图像

<body><script>
function changeImage()
{element=document.getElementById('myimage')if (element.src.match("bulbon")){element.src="/images/pic_bulboff.gif";}else{element.src="/images/pic_bulbon.gif";}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p></body>

        以上实例中代码 element.src.match("bulbon") 的作用意思是:检索 <img id="myimage" οnclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 bulbon 这个字符串,如果存在字符串 bulbon,图片 src 更新为 bulboff.gif,若匹配不到 bulbon 字符串,src 则更新为 bulbon.gif

JavaScript不仅可以修改文本、图像,也可以修改其他,比如:

改变HTML样式:

x=document.getElementById("demo") //找到元素

x.style.color="#ff0000"; //改变样式

7、JavaScript:验证输入

<body><h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{var x=document.getElementById("demo").value;if(x==""||isNaN(x)){alert("不是数字");}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button></body>

总结:

JavaScript 可以通过不同的方式来输出数据:

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台
  • 将脚本放置于 <head> 或者 <body>中,或者将js放在外部,脚本运行效果完全一致

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自动化集成有哪些典型应用场景?

为什么要做自动化场景集成&#xff1f; 主要分为以下几点&#xff1a; 提高效率/减少错误&#xff1a;减少人工操作、人为错误、人力成本&#xff0c;提高生产效率、生产质量和稳定性。 提高可靠性&#xff1a;提高系统的可靠性和稳定性&#xff0c;减少系统故障和停机时间。…

Vue入门——v-on标签

文章目录 规则v-on 一、案例总结 规则 v-on 作用&#xff1a;为html标签绑定事件语法&#xff1a; v-on&#xff1a;事件名&#xff1a;“函数名”简写为 事件名“函数名” 注意&#xff1a;函数需要定义在methods选项内部 一、案例 我们给案件绑定一个单击事件 <!DOCTYPE…

AI文章生成器-免费批量原创文章生成的工具

在科技的大潮中&#xff0c;AI技术愈发成熟&#xff0c;文言一心文章生成器悄然崭露头角。这一创新性工具的出现&#xff0c;为广大用户提供了快速、高效的文章生成方式。147SEO的批量原创功能更是锦上添花&#xff0c;让文章创作变得更为轻松。正是在这背后&#xff0c;我们看…

不再只是android,华为自爆Harmony将对标iOS

今年10月&#xff0c;华为官方宣布&#xff0c;鸿蒙OS 4升级设备数量已突破1亿&#xff0c;成为史上升级最快的鸿蒙OS版本。 日前&#xff0c;据数码博主“定焦数码”消息&#xff0c;大厂技术员工做适配&#xff0c;通过线下沟通时&#xff0c;华为反复提到一个问题&#xff…

Jupyter NoteBook未授权访问漏洞

任务一&#xff1a; 复现未授权访问的漏洞 任务二&#xff1a; 利用Jupter Notebook控制台执行系统命令&#xff0c;读取/etc/passwd内容 1.搭建环境 2.new下面直接进入终端&#xff0c;而且也不需要登录&#xff0c;我就直接进入了管理界面 3.直接把指令输入进入&#xf…

MySQL笔记-第06章_多表查询

视频链接&#xff1a;【MySQL数据库入门到大牛&#xff0c;mysql安装到优化&#xff0c;百科全书级&#xff0c;全网天花板】 文章目录 第06章_多表查询1. 一个案例引发的多表连接1.1 案例说明1.2 笛卡尔积&#xff08;或交叉连接&#xff09;的理解1.3 案例分析与问题解决 2. …

前端项目中获取浏览器版本的方法

在我们的前端项目中&#xff0c;navigator.userAgent属性含有当前浏览器相关信息&#xff08;比如版本号&#xff09;。 所以当我们想要获取用户当前访问的浏览器的版本时直接去解析navigator.userAgent字段就中。 废话不多说&#xff0c;下面看封装的获取浏览器版本的函数&am…

基于YOLOv8深度学习的安全帽目标检测系统【python源码+Pyqt5界面+数据集+训练代码】目标检测、深度学习实战

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

DataGrip 2023.2.3(IDE数据库开发)

DataGrip是一款数据库集成开发环境&#xff08;IDE&#xff09;&#xff0c;用于数据库管理和开发。 DataGrip提供了许多强大的功能&#xff0c;如SQL语句编辑、数据库连接管理、数据导入和导出、数据库比较和同步等等。它支持多种数据库&#xff0c;如MySQL、PostgreSQL、Ora…

【开源存储】minio对象存储部署实践

文章目录 一、前言1、介绍说明2、部署方式3、冗余模式4、约束限制4.1、规格参数4.2、API支持a、minio不支持的Amazon S3 Bucket APIb、minio不支持的Amazon S3 Object API 二、部署说明1、软件安装2、minio单机部署3、minio分布式部署3.1、前置条件3.2、开始运行3.3、操作说明 …

数据结构-03-栈

1-栈的结构和特点 先进后出&#xff0c;后进先出 是栈的特点&#xff1b; 从图中&#xff0c;我们看到A入栈先放入底部&#xff0c;然后依次B和C&#xff1b;出栈的顺序依次是C-B-A&#xff1b;这种结构只能在一端操作。所以当某个数据集合只涉及在一端插入和删除数据&#xf…

模型层——单表操作

单表操作 一 ORM简介 查询数据层次图解&#xff1a;如果操作mysql&#xff0c;ORM是在pymysq之上又进行了一层封装 MVC或者MTV框架中包括一个重要的部分&#xff0c;就是ORM&#xff0c;它实现了数据模型与数据库的解耦&#xff0c;即数据模型的设计不需要依赖于特定的数据库…

线性规划问题

线性规划问题&#xff1a; 将约束条件及目标函数都是决策变量的线性函数的规划问题称为线性规划问题 一般线性规划问题的描述&#xff1a; 为了解决这类问题&#xff0c;首先需要确定问题的决策变量:然后确定问题的目标&#xff0c;并将目标表示为决策变量的线性函数;最后找出问…

Spring Security 6.x 系列(8)—— 源码分析之配置器SecurityConfigurer接口及其分支实现

一、前言 本章主要内容是关于配置器的接口架构设计&#xff0c;任意找一个配置器一直往上找&#xff0c;就会找到配置器的顶级接口&#xff1a;SecurityConfigurer。 查看SecurityConfigurer接口的实现类情况&#xff1a; 在 AbstractHttpConfigurer 抽象类的下面可以看到所有…

利用异或、取反、自增bypass_webshell_waf

目录 引言 利用异或 介绍 eval与assert 蚁剑连接 进阶题目 利用取反 利用自增 引言 有这样一个waf用于防御我们上传的文件&#xff1a; function fun($var): bool{$blacklist ["\$_", "eval","copy" ,"assert","usort…

pip的基本命令和使用

pip 简介 pip是Python官方的包管理器&#xff0c;可以方便地安装、升级和卸载Python包。 pip 常用命令 显示版本和路径 pip --version获取帮助 pip --help升级pip和升级包 pip install --upgrade pip # Linux/macOS pip install -U pip # windowspip install…

每日一练【盛最多水的容器】

一、题目描述 11. 盛最多水的容器 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&…

Qt Creator使用Heob检测内存泄漏

开发环境&#xff1a;win10 qt5.12.0 编译环境:MinGW 使用内存泄漏排查工具heob步骤如下: 第一步:下载heob.exe--注&#xff1a;我本机仅有heob.exe还不行&#xff0c;提示如下 所以需要下载heob和Dwarfstack&#xff0c;然后把他们放到同级目录下&#xff0c;我已经下载并且…

Mybatis中的设计模式

Mybatis中的设计模式 Mybatis中使用了大量的设计模式。 以下列举一些看源码时&#xff0c;觉得还不错的用法&#xff1a; 创建型模式 工厂方法模式 DataSourceFactory 通过不同的子类工厂&#xff0c;实例化不同的DataSource TransactionFactory 通过不同的工厂&#xff…

js moment时间范围拿到中间间隔时间

2023.11.27今天我学习了如何对只返回的开始时间和结束时间做处理&#xff0c;比如后端返回了&#xff1a; [time:{start:202301,end:202311}] 我们需要把中间的间隔渲染出来。 [202301,202302,202303,202304,202305,202306,202307,202308,202309,202310,202311] 利用moment…