JavaScript简介

JavaScript简介

---

JavaScript是什么

JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要目的是，验证发往服务器端的数据、增加 Web互动、加强用户体验度等。

Javascript特点

• JavaScript 是一种轻量级的编程语言。
• JavaScript 是可插入 HTML 页面的编程代码。
• JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
• JavaScript 简单易懂

Javascript引入

内嵌式

<script type="text/javascript">js代码</script>

外链式

<script src="xx.js"></script>

JavaScript数据类型

• 布尔值（Boolean），有2个值分别是：true 和 false.
• null ， 一个表明 null 值的特殊关键字。
• JavaScript 是大小写敏感的，因此 null 与 Null、NULL或变体完全不同。
• undefined ，和 null 一样是一个特殊的关键字，undefined 表示变量未定义时的属性。
• 数字（Number），整数或浮点数，例如： 4 或者 2.00。
• 字符串（String），字符串是一串表示文本值的字符序列，例如：“abcde” 。
• *代表（Symbol） ( 在 ECMAScript 6 中新添加的类型).。一种实例是唯一且不可改变的数据类型。

变量声明

• var str=“变量名”;
• var num=1.5;
• age=23;
• var str=new String;
• var cars=new Array(“A”,“B”,"");

函数写法

标准写法

// 函数的定义
function fun() {
    alert('常规写法');
}
// 函数的调用
fun()

匿名函数法

var fun = function(){
    alert('匿名函数定义');
}
// 函数的调用
fun()

对象方法

var test = {
    fun1: function(){  },
}
// 调用
test.fun2();

构造函数法

var fun = function(){ };  // 定义函数对象
fun.prototype.test = function(){ 
    alert('');
}

// 调用
var myfun = new fun(); // 创建对象
myfun.test(); // 调用对象属性

对象

var person = function(name) {
this.name = name;
this.eat=function()
	{
alert(name+"吃饭");
	}
}
var p=new person("lucy");
p.eat();

var person=new Object();//创建对象
person.name= "lucy";//设置name属性值为lucy
person.eat=function()
{
	alert(person.name+"吃饭");
}
person.eat(;//调用对象方法

事件处理

事件	描述
onblur	元素或窗口本身失去焦点时触发
onclick	单击鼠标时触发。
ondbclick	双击鼠标时触发
onerror	出现错误时触发
onfocus	任何元素或窗口本身获得焦点时触发
onload	页面载入后在window对象上触发;所有框架都载入后,在框架集上触发；
onmousedown	单击任何一个鼠标按键时触发
onmouseover	鼠标移到某个元素时触发
onmouseout	鼠标从某个元素移开时触发
onmouseup	释放任意一个鼠标按键时触发
onsubmit	单击提交按钮时，在<form>上触发
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时,鼠标指针的垂直坐标。
screenX	返回当某个事件被触发时,鼠标指针的水平坐标。
screenY	返回当某个事件被触发时,鼠标指针的垂直坐标。

JavaScript HTML DOM

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性（一般属性）
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应（事件属性）

通常是通过 JavaScript来操作 HTML 元素。有三种方法来做这件事：

• 通过 id 找到 HTML 元素
• 通过标签名找到 HTML 元素
• 通过类名找到 HTML 元素

方法	描述
getElementById0	返回对拥有指定id的第一个对象的引用。
getElementsByName0	返回带有指定名称的对象集合。
getElementsByTagName0	返回带有指定标签名的对象集合。

getBoundingClientReect()方法

  getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
  getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。该函数返回一个Object对象，该对象有6个属性：
  top,lef,right,bottom,width,height；这里的top、left和css中的理解很相似，width、height是元素自身的宽高，
  但是right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。
例如：

var box=document.getElementById('box');         // 获取元素
alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right);       // 元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom);      // 元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left);  
alert(box.getBoundingClientRect().width);  
document.documentElement.clientTop;  
document.documentElement.clientLeft; 
functiongGetRect (element) {
    var rect = element.getBoundingClientRect();
    var top = document.documentElement.clientTop;
    var left= document.documentElement.clientLeft;
    return{
      			 top:top;
                  bottom:bottom;
                  left:left;
                  right:right;
                  width:width;
                  height:height;
    }
}