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 的使用。