JavaScript学习笔记（一）

最新推荐文章于 2025-12-05 08:37:05 发布

原创

最新推荐文章于 2025-12-05 08:37:05 发布 · 471 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #笔记

1、什么是`JavaScript`?

所有的例子及学习逻辑均来自W3School，以下只是我自己学习的笔记，具体内容可直接参考JS教程
JavaScript 是属于 HTML 和 Web 的编程语言,是 web 开发者必学的三种语言之一：

HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程
在 HTML 中，JavaScript 代码必须位于 < script> 与 < /script> 标签之间。
旧的 JavaScript 例子也许会使用 type 属性：< script type="text/javascript">。
type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。

2、`JavaScript` 简介

getElementById("id")
根据id来获取元素
JavaScript 同时接受双引号和单引号
用法示例：

document.getElementById("demo").innerHTML = "Hello JavaScript";

作用：获取id为demo的元素，并将其内容修改为Hello JavaScript。
提示：JavaScript 同时接受双引号和单引号。

第一个javascript:

<! DOCTYPE html>
<html>
<body>
<h2>这是第一个javaScript</h2>

<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
点击这里显示日期</button>

<p id="demo"></p>

</body>
</html>

运行效果：
在这里插入图片描述

3、以示例方式理解`JavaScript`的使用：

3.1、使用`javascript`改变HTML属性

document.getElementById('myImage').src='open1.png' 改变图片

<!--使用javascript改变HTML属性 -->
<html>
<body>
<h4>2、使用javascript改变HTML属性</h4>
<button onclick="document.getElementById('myImage').src='open1.png'">打开</button>
<img id="myImage" border="0" src="closebutton.png" style="text-align:center;"></img>
<button onclick="document.getElementById('myImage').src='closebutton.png'">关闭</button>
</body>
</html>

运行效果；
在这里插入图片描述

3.2、使用`javascript`改变`HTML`样式

document.getElementById('textsizeDemo').style.fontSize='35px' 改变字体大小

<!--使用javascript改变HTML样式 -->
<html>
<body>
<p id="textsizeDemo">点击按钮改变字体大小</p>
<button type="button" onclick="document.getElementById('textsizeDemo').style.fontSize='35px'">点击我</button>
</body>
</html>

运行效果：
在这里插入图片描述

3.3、使用`javascript`隐藏或者显示`HTML`元素

document.getElementById('textHide').style.display='none' 设置隐藏
document.getElementById('textHide').style.display='block' 设置显示

<!--使用javascript隐藏或者显示HTML元素 -->
<html>
<body>
<p id="textHide">点击按钮隐藏或者显示我</p>
<button type="button" onclick="document.getElementById('textHide').style.display='none'">隐藏</button>
<button type="button" onclick="document.getElementById('textHide').style.display='block'">显示</button>
</body>
</html>

运行效果：
在这里插入图片描述

代码附件：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    button {
     
     
      background-color: plum;
      padding: 10px;
      color: white;
      border-radius: 5px;
      outline: none;
      border: 0px;
      font-size: 17px;
    }
  </style>
</head>

<body>

  <!-- JS改变内容-点击改变文字 -->
  <p id="demep">js能改变Html的内容</p>
  <button type="button" onclick='document.getElementById("demep").innerHTML="Hello China"'>点击我</button>

  <!-- JS改变内容-直接赋值 -->

  <p>时间：年</p>
  <p id="demo4"> </p>
  <script>
    var d = new Date("2024");
    document.getElementById("demo4").innerHTML = d;
  </script>

  <p>时间：年月</p>
  <p id="demo3"> </p>
  <script>
    var d = new Date("2024-06");
    document.getElementById("demo3").innerHTML = d;
  </script>

  <p>时间：年月日</p>
  <p id="demo2"> </p>
  <script>
    var d = new Date("2024-06-02");
    document.getElementById("demo2").innerHTML = d;
  </script>

  <p>时间：年月日 时分秒</p>
  <p id="demo5"> </p>
  <script>
    var d = new Date("2024-06-02T12:00:00");
    document.getElementById("demo5").innerHTML = d;
  </script>



  <!--JS改变内容-点击更换图片  -->
  <img id="img01" src="imgs/flower.png" style="text-align:center;">
  <button onclick="document.getElementById('img01').src='imgs/flower02.png'">更换图片</button>
  <button type="button" onclick='document.getElementById("img01").src="imgs/flower.png"'>恢复图片</button>


  <!-- JS改变Html样式 -->
  <p id="demo06">JS改变Html样式 </p>
  <button onclick="document.getElementById('demo06').style.fontSize='30px'">改变文字大小</button>

  <br>
  <!-- JavaScript 能够隐藏 HTML 元素 -->
  <p id="demo07">JavaScript 能够隐藏 HTML 元素</p>
  <button onclick="document.getElementById('demo07').style.display='none'">隐藏文字</button