day16开始学习js

最新推荐文章于 2025-03-06 18:59:04 发布

原创最新推荐文章于 2025-03-06 18:59:04 发布 · 239 阅读

0 ·

CC 4.0 BY-SA版权

初学前端开发专栏收录该内容

46 篇文章

订阅专栏

博主完成html和css学习后，记录约3小时的JS学习笔记。介绍了API，包括浏览器API（如DOM、地理位置、画布等）和第三方API（如Twitter、谷歌地图等），还提及html中input标签placeholder属性，最后分享了自己制作小计算器的代码及部分用法。

经过前些天的复习，前两天得以快速完成了day12-15的任务，于是html和css的学习暂时告于段落。

JS笔记

总用时约3小时

API：应用程序接口（Application Programming Interfaces）

API分两种

浏览器 API

文档对象模型 API（DOM（Document Object Model）API）能通过创建、移除和修改 HTML，为页面动态应用新样式等手段来操作 HTML 和 CSS。比如当某个页面出现了一个弹窗，或者显示了一些新内容（像上文小 demo 中看到那样），这就是 DOM 在运行。
地理位置 API（Geolocation API）获取地理信息。这就是为什么谷歌地图可以找到你的位置，而且标示在地图上。
画布（Canvas）和 WebGL API 可以创建生动的 2D 和 3D 图像。人们正运用这些 web 技术制作令人惊叹的作品。参见 Chrome Experiments 以及 webglsamples。
诸如 HTMLMediaElement 和 WebRTC 等影音类 API 让你可以利用多媒体做一些非常有趣的事，比如在网页中直接播放音乐和影片，或用自己的网络摄像头获取录像，然后在其他人的电脑上展示（试用简易版截图 demo 以理解这个概念）。

第三方 API

Twitter API、新浪微博 API 可以在网站上展示最新推文之类。
谷歌地图 API、高德地图 API 可以在网站嵌入定制的地图等等。

html中input标签的placeholder属性：在不输入时，浅色显示内容。

我制作了一个小计算器！

html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>IFE ECMAScript</title>
</head>
<body>        
    <input id="first-number" type="number" value="0" placeholder="第一个数字">
    <input id="second-number" type="number" value="0" placeholder="第二个数字">
    <button id="add-btn">加</button>
    <button id="minus-btn">减</button>
    <button id="times-btn">乘</button>
    <button id="divide-btn">除</button>
    <p id="result">运算结果</p>
    <script src="myScript.js"></script>
</body>
</html>

JS:

var x1 = document.getElementById("first-number").value;
var x2 = document.getElementById("second-number").value;
var add = x1 + x2;
var subtract = x1 - x2;
var multiply = x1 * x2;
var divide = x1 / x2;
function calculation1() {
  x1 = document.getElementById("first-number").value;
  x2 = document.getElementById("second-number").value;
  add = parseFloat(x1) + parseFloat(x2);
  document.getElementById("result").innerHTML = add;
}
function calculation2() {
  x1 = document.getElementById("first-number").value;
  x2 = document.getElementById("second-number").value;
  subtract = parseFloat(x1) - parseFloat(x2);
  document.getElementById("result").innerHTML = subtract;
}
function calculation3() {
  x1 = document.getElementById("first-number").value;
  x2 = document.getElementById("second-number").value;
  multiply = parseFloat(x1) * parseFloat(x2);
  document.getElementById("result").innerHTML = multiply;
}
function calculation4() {
  x1 = document.getElementById("first-number").value;
  x2 = document.getElementById("second-number").value;
  divide = parseFloat(x1) / parseFloat(x2);
  document.getElementById("result").innerHTML = divide;
}

document.getElementById("add-btn").addEventListener("click", calculation1);
document.getElementById("minus-btn").addEventListener("click", calculation2);
document.getElementById("times-btn").addEventListener("click", calculation3);
document.getElementById("divide-btn").addEventListener("click", calculation4);