JavaScript 教程

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;
				// 获取 box
				var 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;
				// 获取 box
				var box   = document.getElementById(box_id);
				// 取消变色
				box.style.backgroundColor = "#C1D2F0";
				// 取消跟随移动
				box.onmousemove = null;
			}

			var DraggerOnMouseMove = function (box_id) {
				// 获取事件
				var event = window.event;
				// 获取 box
				var 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;
				// 获取 box
				var 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;
				// 获取 box
				var box   = document.getElementById(box_id);
				// 取消变色
				box.style.backgroundColor = "#C1D2F0";
			}

			var DraggerOnMouseMove = function (box_id) {
				// 获取事件
				var event = window.event;
				// 获取 box
				var 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>