JavaScript入门:用JS点亮你的第 1 个网页圣诞树!

2024-05-05 19:04

本文主要是介绍JavaScript入门:用JS点亮你的第 1 个网页圣诞树!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

你好,我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生,一枚程序媛,感谢关注。回复 “前端基础题”,可免费获得前端基础 100 题汇总,回复 “前端工具”,可获取 Web 开发工具合集

299篇原创内容-更多前端系列内容可以go公众.h:云桃桃

后台回复“前端工具”可获取开发工具,持续更新中

后台回复“前端基础题”可得到前端基础100题汇总,持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

今天,我们开始聊一聊 JavaScript。JavaScript(简称 JS)是一种高级的、解释型的编程语言。它是最受欢迎和广泛使用的编程语言之一,尤其在 Web 开发领域。

在前端开发中,JavaScript 是 Web 开发的三大核心技术之一,与 HTML 和 CSS 一起构成了网页的基石,它们三者相辅相成,共同构成了一个完整的网页。HTML 负责定义网页的结构和内容,CSS 负责美化网页的样式,而 JavaScript 则负责为网页添加交互功能,动态效果,数据处理等。

如果把 HTML 比作是网页的骨架,CSS 比作是网页的化妆师,那么 JavaScript 就是网页的灵魂,它让网页充满了生机和活力。

好,那让我们先看 JS 的 4 个简单案例吧。

JS 交互案例

一、改变 html 的内容

代码如下:

<h1 id="title"></h1><script>document.getElementById('title').innerHTML = 'hello JS!'
</script>

二、开关灯的圣诞树

效果如下:

图片

<button onclick="openLamp()">开圣诞树</button><img id="img1" border="0" src="img/tree2-gray.png" style="text-align: center" /><button onclick="offLamp()">关圣诞树</button><script>function openLamp() {document.getElementById('img1').src = 'img/tree2-color.png'}function offLamp() {document.getElementById('img1').src = 'img/tree2-gray.png'}
</script>

三、改变 CSS 的样式

<a href="#" id="changeATagColor">这是链接!</a><script>document.getElementById('changeATagColor').style.backgroundColor = '#ec4b69'document.getElementById('changeATagColor').style.color = '#0ff'
</script>

看,a 标签的默认样式已经改了。

四、显示,隐藏元素

<!-- 暂时把高度撑起来一下 -->
<div style="width: 256px; height: 256px"><img id="img2" src="img/tree2-color.png" alt="" />
</div>
<button onclick="showTree()">点我显示圣诞树</button>
<button onclick="hideTree()">点我隐藏圣诞树</button>
<script>function showTree() {document.getElementById('img2').style.display = 'block'}function hideTree() {document.getElementById('img2').style.display = 'none'}
</script>

整体效果如下,是不是很有趣呢?

图片

OK,本文完,下文聊聊 JS 的使用。

这篇关于JavaScript入门:用JS点亮你的第 1 个网页圣诞树!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/962436

相关文章

springboot rocketmq配置生产者和消息者的步骤

《springbootrocketmq配置生产者和消息者的步骤》本文介绍了如何在SpringBoot中集成RocketMQ,包括添加依赖、配置application.yml、创建生产者和消费者,并展... 目录1. 添加依赖2. 配置application.yml3. 创建生产者4. 创建消费者5. 使用在

Spring Retry 实现乐观锁重试实践记录

《SpringRetry实现乐观锁重试实践记录》本文介绍了在秒杀商品SKU表中使用乐观锁和MybatisPlus配置乐观锁的方法,并分析了测试环境和生产环境的隔离级别对乐观锁的影响,通过简单验证,... 目录一、场景分析 二、简单验证 2.1、可重复读 2.2、读已提交 三、最佳实践 3.1、配置重试模板

Spring中@Lazy注解的使用技巧与实例解析

《Spring中@Lazy注解的使用技巧与实例解析》@Lazy注解在Spring框架中用于延迟Bean的初始化,优化应用启动性能,它不仅适用于@Bean和@Component,还可以用于注入点,通过将... 目录一、@Lazy注解的作用(一)延迟Bean的初始化(二)与@Autowired结合使用二、实例解

SpringBoot使用Jasypt对YML文件配置内容加密的方法(数据库密码加密)

《SpringBoot使用Jasypt对YML文件配置内容加密的方法(数据库密码加密)》本文介绍了如何在SpringBoot项目中使用Jasypt对application.yml文件中的敏感信息(如数... 目录SpringBoot使用Jasypt对YML文件配置内容进行加密(例:数据库密码加密)前言一、J

Java中有什么工具可以进行代码反编译详解

《Java中有什么工具可以进行代码反编译详解》:本文主要介绍Java中有什么工具可以进行代码反编译的相关资,料,包括JD-GUI、CFR、Procyon、Fernflower、Javap、Byte... 目录1.JD-GUI2.CFR3.Procyon Decompiler4.Fernflower5.Jav

Spring Boot 中正确地在异步线程中使用 HttpServletRequest的方法

《SpringBoot中正确地在异步线程中使用HttpServletRequest的方法》文章讨论了在SpringBoot中如何在异步线程中正确使用HttpServletRequest的问题,... 目录前言一、问题的来源:为什么异步线程中无法访问 HttpServletRequest?1. 请求上下文与线

在 Spring Boot 中使用异步线程时的 HttpServletRequest 复用问题记录

《在SpringBoot中使用异步线程时的HttpServletRequest复用问题记录》文章讨论了在SpringBoot中使用异步线程时,由于HttpServletRequest复用导致... 目录一、问题描述:异步线程操作导致请求复用时 Cookie 解析失败1. 场景背景2. 问题根源二、问题详细分

Java对象和JSON字符串之间的转换方法(全网最清晰)

《Java对象和JSON字符串之间的转换方法(全网最清晰)》:本文主要介绍如何在Java中使用Jackson库将对象转换为JSON字符串,并提供了一个简单的工具类示例,该工具类支持基本的转换功能,... 目录前言1. 引入 Jackson 依赖2. 创建 jsON 工具类3. 使用示例转换 Java 对象为

SpringBoot快速接入OpenAI大模型的方法(JDK8)

《SpringBoot快速接入OpenAI大模型的方法(JDK8)》本文介绍了如何使用AI4J快速接入OpenAI大模型,并展示了如何实现流式与非流式的输出,以及对函数调用的使用,AI4J支持JDK8... 目录使用AI4J快速接入OpenAI大模型介绍AI4J-github快速使用创建SpringBoot

Java中的Cursor使用详解

《Java中的Cursor使用详解》本文介绍了Java中的Cursor接口及其在大数据集处理中的优势,包括逐行读取、分页处理、流控制、动态改变查询、并发控制和减少网络流量等,感兴趣的朋友一起看看吧... 最近看代码,有一段代码涉及到Cursor,感觉写法挺有意思的。注意是Cursor,而不是Consumer