经过前些天的复习,前两天得以快速完成了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);
其中用到了一些东西,暂且写一下用法:
getElementById:通过元素id获得元素
parseFloat:转换为浮点型
addEventListener:添加事件监听器(事件,发生事件后执行的函数)
用的行数挺多的,应该有更好的方法。