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

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程,特意画了如下的类图,包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口,接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类,它们之间的依赖,构建起了整个框架。想要理解整个架构,最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文(security context)的信息。当前操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory