初学JavaScript

什么是JavaScrip:

JavaScript 是一种高级编程语言,主要用于网页开发。它是一种动态、弱类型的语言,可以在客户端(浏览器)中运行,并与 HTML 和 CSS 一起用于创建交互式网页。JavaScript 可以添加动态功能,例如表单验证、页面元素操作、动画效果等。它还可以与服务器端的后端语言(如PHP、Java等)进行交互,从而实现更复杂的功能。


如何使用JavaScrip:

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

Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。

最简单的hello world案例:

<!DOCTYPE html>
<html><head></head><body><script>alert("Hello World");</script></body>
</html>

浏览器打开就会弹出hello world弹窗

其中alert是JavaScript中的一个弹窗函数,用来显示一条消息框给用户,通常用于给用户提供一些提示或警告信息。alert函数接受一个字符串作为参数,该字符串将显示在弹窗中。用户需要点击确认按钮才能关闭弹窗。

或者直接用JavaScrip输出网页内容,以下内容会输出一个h1格式的helloworld标题和一个段落样式的hello world文字


<!DOCTYPE html>
<html>
<body>
<script>
document.write("<h1>hello world</h1>");
document.write("<p>hello world</p>");
</script></body>
</html>

其中document.write是JavaScript中的一个方法,用于向HTML文档中插入内容。它可以将任意的文本、HTML代码或JavaScript代码输出到页面上,可以在页面加载时动态地生成内容。

当使用document.write方法时,它会将要输出的内容直接写入到当前页面的位置。如果在页面加载完毕后再使用document.write方法,它会覆盖整个页面的内容。

但是需要注意的是,使用document.write方法会直接修改页面的内容,可能会导致一些意外的结果。因此,在实际开发中,更推荐使用DOM操作来插入内容到页面上。

或者通过点击改变HTML内容,实现简单交互:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body><h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function changedemo()
{x=document.getElementById("demo");  // 找到id等于demo的元素x.innerHTML="Hello world!";    // 改变内容
}
</script>
<button type="button" onclick="changedemo()">点击这里</button></body>
</html>

在点击按钮之后就会把id等于“demo”的元素里面的内容改成hello world

document.getElementById是JavaScript中的一个方法,用于通过元素的id来获取对应的元素对象。通过document.getElementById方法,可以在HTML文档中查找具有指定id的元素,并返回该元素的引用。这个方法非常常用,可以用来操作和修改HTML元素的属性、样式、内容等。使用方法很简单,只需要调用document.getElementById,并传入要查找的元素的id作为参数。如果找到匹配的元素,就会返回该元素的引用;如果没有找到匹配的元素,则返回null。


需要注意的是,每个HTML文档中的元素id应该是唯一的,否则可能会出现预期之外的结果。另外,使用document.getElementById方法只能获取到第一个匹配的元素,如果有多个具有相同id的元素,只会返回第一个。如果需要获取多个元素,可以使用其他的选择器方法,如document.getElementsByClassName或document.querySelectorAll等。


简单交互案例灯泡开和关:

先去下载两张一样的但是图片颜色不一样的灯泡图片并保存

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body><script>
function changeImage()
{element=document.getElementById('Light_bulb')if (element.src.match("turn_on")){element.src="turn_off.png";}else{element.src="turn_on.png";}
}
</script>
<img id="Light_bulb" onclick="changeImage()" src="turn_on.png" width="180" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p></body>
</html>

我的图片是保存在和代码文件同一层级,所以路径就直接写图片名,如果图片是单独保存的要注意自己路径是否有错

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

浏览器打开点击灯泡图片即可实现灯泡开关灯


如上所示,如果你需要改变元素中的某些内容,可以使用

document.getElementById通过元素的id来获取对应的元素对象。

然后通过document.getElementById方法,在HTML文档中查找具有指定id的元素,并返回该元素的引用。如改变颜色样式可写为

document.getElementById("xxx").style.color="#xxxxx"


注意:

HTML 输出流中使用 document.write,相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用(如使用函数),会覆盖整个文档。


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

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

相关文章

电脑误删除的文件怎么恢复?6个方法图文详解!

“我在电脑上误删除了一些比较重要的文件&#xff0c;现在不知道应该怎么操作了&#xff0c;有没有可以分享一下经验的朋友呀&#xff1f;” 在数字化世界的浪潮中&#xff0c;电脑成为了我们处理、存储和分享信息的重要工具。然而&#xff0c;随着我们对电脑的依赖日益加深&am…

【云原生】kubernetes中Configmap原理解析与应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

236. 二叉树的最近公共祖先(C++)

文章目录 前言一、题目介绍二、解决方案三、优化总结 前言 在本篇文章中我们将会讲解二叉树中极为经典的题目236. 二叉树的最近公共祖先 一、题目介绍 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的…

如何借VR之手,让展厅互动更精彩?

VR虚拟现实技术以其卓越的沉浸式体验为特点&#xff0c;引领用户踏入一个全新的虚拟世界&#xff0c;正因如此&#xff0c;它开始被广泛应用于展厅、商业等多个领域。那么&#xff0c;今天&#xff0c;让我们就来了解一下这种技术是如何为展厅带来精彩互动体验的吧&#xff01;…

日常使用工具(截图,笔记,一键启动)

目录 一,截图 Snipaste 二.笔记 Joplin 三.翻译 四.自动启动软件 这篇记录一下工作中用的很顺手的工具. 一,截图 Snipaste 官网:Snipaste - 截图 贴图 下面是官方手册. 使用 我都是直接F1 就会出现选择框,随意拖动大小,选择下方工具栏,相应位置, 二.笔记 Joplin 官网:…

el-table表格实现鼠标拖动而左右滑动

场景描述&#xff1a; 表格样式较为复杂&#xff0c;10条数据超出整个屏幕的高度&#xff0c;因而导致无法快速拖动滚动条&#xff0c;所以提出需要在表格内容区拖动鼠标&#xff0c;从而实现无需滚动到底部就可以左右拖动表格内容的效果。 具体实现&#xff1a; 实现的方式…

[排序算法]4. 图解堆排序及其代码实现

先来看看什么是堆? 堆是一种图的树形结构&#xff0c;被用于实现“优先队列”&#xff08;priority queues&#xff09; 注:优先队列是一种数据结构&#xff0c;可以自由添加数据&#xff0c;但取出数据时要从最小值开始按顺序取出。 在堆的树形结构中&#xff0c…

.NET 某和OA办公系统全局绕过漏洞分析

转自先知社区 作者&#xff1a;dot.Net安全矩阵 原文链接&#xff1a;.NET 某和OA办公系统全局绕过漏洞分析 - 先知社区 0x01 前言 某和OA协同办公管理系统C6软件共有20多个应用模块&#xff0c;160多个应用子模块&#xff0c;从功能型的协同办公平台上升到管理型协同管理平…

JS-06 原型式继承借用构造函数实现继承

目录 1 原型式继承 场景 前置问题 实现方法 2 借用构造函数实现继承 前置问题 错误的实现方式 正确的实现方式 1 原型式继承 场景 a、创建一个纯洁的对象&#xff1a;对象在控制台打印什么属性都没有 b、创建一个继承自某个父对象的子对象 前置问题 一个对象里有很…

基于稀疏辅助信号平滑的心电信号降噪方法(Matlab R2021B)

基于形态成分分析理论&#xff08;MCA&#xff09;的稀疏辅助信号分解方法是由信号的形态多样性来分解信号中添加性的混合信号成分&#xff0c;它最早被应用在图像处理领域&#xff0c;后来被引入到一维信号的处理中。 在基于MCA稀疏辅助的信号分析模型中&#xff0c;总变差方…

【前端篇】前端开发大厂面试真题

为助力小伙伴们梳理前端知识体系&#xff0c;从而能够充分地做好面试准备&#xff0c;那么今天就来给大家分享一份前端开发的面试真题与相关知识点&#xff0c;其中涵盖了最新版本的八股文&#xff08;包含最新的 Vue 3 面试题&#xff09;、高频算法题以及大佬的面经&#xff…

嵌入式进阶——EEPROM读写

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 设置EEPROM读写String字符串官方示例 EEPROM是一种可擦写可编程只读存储器&#xff08;Electrically Erasable Programmable Read-…

[ARM-2D 专题] arm-2d项目简介

Arm-2D 是一个用于 Cortex-M 处理器上的 2.5D 图像处理的开源项目。 由ARM公司开发和维护&#xff0c;属于官方性质的项目&#xff0c;目前最新版本为V1.1.6. 2022年7月发布1.0的预览版&#xff0c; 2023年2月发布第一个正式版V1.1.1&#xff0c;近一年来快速迭代和功能增强&a…

数据库-SQL优化下

Group by 优化 limit优化 count优化 UPDATE优化 当用id去更改的时候,一个是id1 另一个id2 这是没毛病的&#xff0c;因为加的是行锁 但是如果根据name 一个是where nameaa. 另一个是namehh,在另一个事务没提交前&#xff0c;另一个不能提交&#xff0c;因为name字段不是索引…

数据结构复习指导之B树和B+树

目录 B树和B树 考纲内容 1.B树及其基本操作 1.1B树的查找 1.2B树的高度&#xff08;磁盘存取次数&#xff09; 1.3B树的插入 1.4B树的删除 2.B树的基本概念 B树和B树 考纲内容 考研大纲对 B树和 B树的要求各不相同&#xff0c;重点在于考查B树&#xff0c;不仅要求理解…

基于51单片机数字频率计的设计

本文提出设计数字频率计的方案,重点介绍以单片机AT89C51为控制核心,实现频率测量的数字频率设计。测频的基本原理是采用在低频段直接测频法,在低频段直接测频法的设计思路,硬件部分由单片机和数计显示电路组成;软件部分由信号频率测量模块和数据显示模块等模块实现。应用单…

Raven2掠夺者2渡鸦2账号需要验证怎么解决 超简单验证账号教程

《渡鸦2》是一款源自韩国的创新力作&#xff0c;作为《Raven》系列的最新续篇&#xff0c;这款游戏在MMORPG手游领域内再度扩展了其标志性的暗黑奇幻宇宙&#xff0c;融入了大量革新的游戏设计与丰富内容。定档于2024年5月29日开启公测的《渡鸦2》&#xff0c;正处在紧张刺激的…

美光拟投巨资在日本广岛建DRAM厂,目标2027年底投产

美光科技&#xff08;Micron Technology&#xff09;据日本媒体报道&#xff0c;计划在日本广岛县新建一座DRAM芯片生产工厂&#xff0c;目标最快于2027年底投入运营。这一举措标志着美光在增强其内存芯片生产能力方面的又一重大步伐。 报道称&#xff0c;新工厂的总投资规模预…

Kotlin核心编程知识点-03-类型系统

文章目录 1.null 引用2.可空类型2.1.安全的调用 ?.2.2.Elvis 操作符 ?:2.3.非空断言 !!.2.4.类型检查2.5.类型智能转换 3.比 Java 更面向对象的设计3.1.Any&#xff1a;非空类型的根类型3.2.Any?: 所有类型的根类型3.3.自动装箱和拆箱3.4.数组类型 4.泛型&#xff1a;让类型…

CVPR2024《RMT: Retentive Networks Meet Vision Transformers》论文阅读笔记

论文链接&#xff1a;https://arxiv.org/pdf/2309.11523 代码链接&#xff1a;https://github.com/qhfan/RMT 引言 ViT近年来在计算机视觉领域受到了越来越多的关注。然而&#xff0c;作为ViT的核心模块--自注意力缺乏空间先验知识。此外&#xff0c;自注意力的二次计算复杂度…