JavaScript 教程

JavaScript 是一种动态编程语言，如果愿意的话，你可以将其理解为任何一种编程语言。但是， JavaScript 可以作为脚本嵌入网页，创造各种各样的应用程序。因此，它称为了前端程序员不得不会的编程语言之一。

基本语法

JavaScript 是一种 OOP 编程语言，一等公民是对象，对象有 属性 和 方法 两种特征，任何对象都可以赋予任何属性和方法。

• 创建对象： var Person = {};
• 添加属性： Person.age = 18;
• 添加方法： Person.eat = function () {return "eating";}

事件响应

html 中的元素也被 JavaScript 视为对象，通过添加特定的方法，可以在网页捕获到特定的事件的时候做出一定的响应。

事件的类型有：

• onclick
• onmousedown
• onmouseup
• onmousemove

项目：拖拽目标

下面贴一段实现拖拽目标的JS代码：

<script>var DraggerOnMouseDown = function (box_id) {// 获取事件var event = window.event;// 获取 boxvar box   = document.getElementById(box_id);// 变色box.style.backgroundColor = "green";// 鼠标和左上角的坐标差box.diffX = event.clientX - box.offsetLeft;box.diffY = event.clientY - box.offsetTop;// 跟随移动box.onmousemove = function () { DraggerOnMouseMove(box_id) };// 鼠标抬起box.onmouseup   = function () { DraggerOnMouseUp(box_id) };}var DraggerOnMouseUp = function (box_id) {// 获取事件var event = window.event;// 获取 boxvar box   = document.getElementById(box_id);// 取消变色box.style.backgroundColor = "#C1D2F0";// 取消跟随移动box.onmousemove = null;}var DraggerOnMouseMove = function (box_id) {// 获取事件var event = window.event;// 获取 boxvar box   = document.getElementById(box_id);// 获取移动后的坐标var moveX = event.clientX - box.diffX;var moveY = event.clientY - box.diffY;
<!--                if(moveX < 0){-->
<!--                    moveX = 0;-->
<!--                } else if (moveX > window.innerWidth - box.offsetWidth){-->
<!--                    moveX = window.innerWidth - box.offsetWidth-->
<!--                }-->
<!--                if(moveY < 0) {-->
<!--                    moveY = 0;-->
<!--                } else if (moveY > window.innerHeight - box.offsetHeight){-->
<!--                    moveY =  window.innerHeight - box.offsetHeight-->
<!--                }-->// 改变坐标box.style.left = moveX + 'px';box.style.top  = moveY + 'px';}</script>

代码实现的逻辑是，首先定义三个函数 DraggerOnMouseDown, DraggerOnMouseUp, DraggerOnMouseMove，将 Down 先赋给要拖拽的对象，在 Down 的实现内部赋予对象 Up 和 Move 方法。这样写的好处是只要给对象 Down 方法，就可以同时实现 Down，Up 和 Move 三步。运行的过程如下

1. MouseDown. 赋予 Box 以 Up 和 Move 方法
2. 若 MouseMove, 则运行 Move 改变 Box 的坐标
3. 若 MouseUp, 则取消 Move 函数

这个拖拽程序的问题是，只有鼠标悬停在 Box 上方时，Down 和 Up 才会被触发。程序可能会因为帧数问题执行了 Down 却没有执行 Up。因此最好把 Down 和 Up 改成全局的函数，通过捕获来移动相应的 Box。

改进后的代码如下

<script>window.onload = function () {document.onmousedown = function () {var event = window.event;var box = event.target;document.drag_target = box;if (box.classList.contains('tb')) {document.getElementById("log").innerHTML = "on mouse down";DraggerOnMouseDown(box.id);document.onmousemove = function () { DraggerOnMouseMove(box.id); }}}document.onmouseup = function () {var event = window.event;var box = document.drag_target;if (box.classList.contains('tb')) {document.getElementById("log").innerHTML = "on mouse up";DraggerOnMouseUp(box.id);document.onmousemove = null;}document.drag_target = null;}}var DraggerOnMouseDown = function (box_id) {document.getElementById("log").innerHTML = "on mouse down";// 获取事件var event = window.event;// 获取 boxvar box   = document.getElementById(box_id);// 变色box.style.backgroundColor = "green";// 鼠标和左上角的坐标差box.diffX = event.clientX - box.offsetLeft;box.diffY = event.clientY - box.offsetTop;
<!--				// 抬起鼠标-->
<!--				box.onmouseup = function () { DraggerOnMouseUp(box_id) };-->}var DraggerOnMouseUp = function (box_id) {// 获取事件var event = window.event;// 获取 boxvar box   = document.getElementById(box_id);// 取消变色box.style.backgroundColor = "#C1D2F0";}var DraggerOnMouseMove = function (box_id) {// 获取事件var event = window.event;// 获取 boxvar box   = document.getElementById(box_id);// 获取移动后的坐标var moveX = event.clientX - box.diffX;var moveY = event.clientY - box.diffY;
<!--                if(moveX < 0){-->
<!--                    moveX = 0;-->
<!--                } else if (moveX > window.innerWidth - box.offsetWidth){-->
<!--                    moveX = window.innerWidth - box.offsetWidth-->
<!--                }-->
<!--                if(moveY < 0) {-->
<!--                    moveY = 0;-->
<!--                } else if (moveY > window.innerHeight - box.offsetHeight){-->
<!--                    moveY =  window.innerHeight - box.offsetHeight-->
<!--                }-->// 改变坐标box.style.left = moveX + 'px';box.style.top  = moveY + 'px';}</script>