web前端（javascript）

javascript：

1. ECMAScirpt(规范了基本的语法)
2. BOM （浏览器对象模型）
3. DOM  (文档对象模型)

特点：
  1. 跨平台
  2. 安全性（javascript的代码不能直接访问硬盘的内容）

---

ECMAScirpt

javascript都是放在script标签中的，一旦加载，就会顺序执行

javascript代码的编写：

方式1：可以使用<script>标签体内进行编写

格式：

<script type="text/javascript">

       js代码;;

</script>

方式2：引入外部的javascript文件。

格式：<script src="js文件路径" type="text/javascript"></script>

注意： 

1. <script>是有开始标签与结束标签的，千万不要在一个标签中结束了
2. 如果<script>已经用于引入了js文件，那么该<script>标签体就不能再写js代码

ECMAScript注释与 Java语言的注释相同

---

变量声明：var 变量名 = 数据;

变量注意事项：

1. 在javascript中声明变量是使用var关键字声明的，javascript中的变量可以存储任意的数据类型数据.
2. javascript中变量数据类型是根据存储的值决定的，可以随时更改存储数据的类型。
3. 定义了多个同名的变量是，后定义的同名变量是覆盖前面定义的同名变量。
4. 声明变量的时候可以省略var关键字，但是不建议省略。

查看变量的数据类型：typeof  变量名

javascript的数据类型：

number 小数与整数

string 字符串   注意： javascript中没有字符的概念，只有字符串，字符串可以写在单引号或双引号中。

boolean 布尔数据类型

undefined 代表该变量没有定义

---

运算符:
+(加法、正数、 连接符)

/ 除法不能整除的时候结果是小数，因为没有整数数据类型

比较运算符：> <

数字与字符串进行比较，会先把字符串转换成数字再进行比较

字符串与字符串的比较规则：
情况1： 能找到对应位置上的不同字符，那么就比较第一个不同字符的大小。
情况2： 不能找到对应位置上的不同字符，这时候比较的是两个字符串的长度。

逻辑运算符：

&&没有单与

三目运算符：
布尔表达式?值1:值2;

---

控制流程语句：

if(判断条件){符合条件执行的代码 }

特殊之处： 在javascript中的if语句条件不单可以写布尔表达式，还可以写任何的数据。

number ：非0为true, 0为false.

string ：内容不空是true， 内容空的时候是false。

undefined：false

NaN： false

选择语句： 

switch(变量){
case 值1：
break;
case 值2：
break;
.....
default：
break;
}

特殊之处：在javascript中case后面可以跟常量、变量、表达式

for-in语句：类似java for增强

for(var  变量名  in  遍历的目标){
}

作用：将遍历的结果放进"变量名"，可通过 "遍历的目标[变量名]" 范围具体数据

1. 可以用于遍历数组的元素。  注意： 使用for-in语句遍历数组元素的时候，遍历出来是数组的下标。
2. 可以用于遍历对象的所有属性数据。 注意： 使用for-in语句遍历对象的属性的时候，遍历出来的是对象的属性名。

with语句:有了With语句，在存取对象属性和调用方法时就不用重复指定对象。

with(对象){

可不用加对象名，直接使用对象方法

}

---

对象：

伪对象：基本类型是伪对象，他们都有属性和方法

内置对象:

String对象

创建方式：

方式1：new String("字符串的内容");

方式2：var str = "字符串的内容";

常用方法：

anchor（）    生产锚点

blink（）    为元素添加blink标签

charAt()     返回指定索引位置处的字符。

charCodeAt()      返回指定位置上字符的 Unicode 编码。

fontcolor()      给字符串添加带有 COLOR 属性的一个 HTML <FONT> 标记

indexOf()      返回 String 对象内第一次出现子字符串的字符位置

italics()      把 HTML <I> 标记放置在 String 对象中的文本两端。

link()      把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。

replace()      返回根据正则表达式进行文字替换后的字符串的复制

split()      切割

Substr()      截取子串

toUpperCase()      转大写

toLowerCase()     转小写

Number对象

创建方式：

方式1：var 变量=  new Number(数字)

方式2：var 变量 = 数字;

常用的方法：

toString()  把数字转换成指定进制形式的字符串。

toFixed()   指定保留小数位,而且还带四舍五入的功能

Math对象

ceil() 向上取整

floor() 向下取整

random()  随机数方法，产生的伪随机数介于 0 和 1 之间（含 0，不含 1），

round()    四舍五入

Array数组对象:

创建方式

*方式1：var 变量名 = new Array();     创建一个长度为0的数组。

方式2：var 变量名= new Array(长度)    创建一个指定长度的数组对象。

方式3：var 变量名 = new Array("元素1","元素2"...);     给数组指定元素创建数组的对象。

方式4：var 变量名 = ["元素1","元素2"...];

注意细节：在javascript中数组的长度是可以发生变化的。

arr3 = arr1.concat(arr2);      concat把arr1与arr2的数组元素组成一个新的数组返回

join("");      join使用指定的分隔符把数组中的元素拼装成一个字符串返回

pop() ;       移除数组中的最后一个元素并返回该元素

push();       将新元素添加到一个数组中，并返回数组的新长度值

reverse();        翻转数组的元素

shift();        移除数组中第一个元素并返回

slice(start,end);     指定数组的开始索引值与结束索引值截取数组的元素，并返回子数组

sort(sortNumber);         排序，默认字符串比较规则排序，数字排序一定要传入排序的方法。

function sortNumber(num1,num2){

return num1-num2;

}

splice(1,2,"1","2","3"···);    第一个参数是开始删除元素的索引值， 第二参数是删除元素的个数，往后的数据就是插入的元素

日期对象（Date）

var date = new Date(); //获取到当前的系统时间

年：date.getFullYear()

月：date.getMonth()+1

日：date.getDate()

时：date.getHours()

分：date.getMinutes()

秒：date.getSeconds()

格式化输出时间：date.toLocaleString()

 定时方法：window.setInterval("代码",毫秒数); 第一个参数要指定调用的代码，第二参数是每隔指定的毫秒数调用参数一的代码。

---

创建自定义对象:

在javascript没有类的概念，只要有函数即可创建对象。在JavaScript中可以自定义对象，添加新的属性，添加新的方法
方式1：通过function设计一个对象

   1.1使用无参的函数创建对象

function Hero(){}

var H = new Hero();    //创建了一个Hero对象

H.id = 001;

H.name = "盖伦";

   1.2使用带参的函数创建对象

function Hero(name){  this.name = name;  this.kill = function(){     document.write(this.name + "正在杀敌<br>");  }} var gareen = new Hero("盖伦");gareen.kill();

方式2：通过new Object()创建一个对象

var hero = new Object();hero.name = "盖伦"; //定义一个属性name，并且赋值hero.kill = function(){  document.write(hero.name + " 正在杀敌" ); //定义一个函数kill}  hero.kill(); //调用函数kill

方式3：使用字面量的方式创建

var H = {id：001，name："盖伦"，    kill：function(){        alert(this.name+" 正在杀敌");    }}

---

函数:
正常方式：function 函数名(形参列表){ 函数体 ;}

构造器方式：var 函数名 =  new function("形参列表", "函数体 ; ")

直接量或匿名或无名方式：var 函数名 =  function(形参列表){ 函数体 ; }

javascript的函数注意细节：

1. 在 javascript中函数定义形参是不能使用var关键字声明变量。
2. 在javascript中 的函数是没有返回值类型的，如果函数需要返回数据给调用者，直接返回即可，如果不需要返回则不返回。
3. 在 javascript中是没有函数重载的概念，后定义的同名函数会直接覆盖前面定义同名函数。
4. 在javascript中任何的函数内部都隐式的维护了一个arguments（数组）的对象，给函数传递数据的时候，是会先传递到arguments对象中，然后再由arguments对象分配数据给形参的。

---

常用的函数：

alert("显示的内容..") ;      弹出框，打断程序运行

document.write("数据") ;     向页面输出数据，可输入html等

console.log("数据");     控制台打印输出

confirm(确认框);   prompt(输入框);

网页获取的数据都是字符串类型的，一般需要字符串转数字：

IsNaN()   判断该字符串是否是一个数字，不是数字返回true，是数字返回false

parseInt()  可以把一个字符串转换成整数。

parseFloat() 可以把一个字符串转换成小数。

parseInt方法：

如果接收的字符串含有非数字的字符，那么会从字符串的首个字符开始寻找，一直找到非数字字符为止，然后就使用前面的数字字符转换成数字。

如果一个字符串是以0x开头，那么会把字符串中的内容当成十六进行的数据处理的

如果首位是0，那么就想祛除0再进行转换

---

Prototype原型属性

是javascript实现继承的主要手段。

注意细节：

1.prototype是函数(function)的一个必备属性(书面的说法是"保留属性")(只要是function,就一定有一个prototype属性)

2.prototype的值是一个对象

3.可以任意修改函数的prototype属性的值。

4.一个对象会自动拥有prototype的所有成员属性和方法

例：把自己编写的getMax方法添加到内置的Array数组对象上//找数组最大值getMax方法Array.prototype.getMax = function(){var max = this[0];for(var index = 1; index<this.length ; index++){if(this[index]>max){max = this[index];}}return max;}//相当于以下代码：functoin Array(){this.prototype = new Object();this.getMax = function(){······};}

---

BOM( Browser Object MOdel) 

浏览器对象模型中把浏览器的各个部分都是用了一个对象进行描述，如果要操作浏览器的一些属性，我就可以通过浏览器对象模型的对象进行操作。

全局对象： window【代表了一个新开的窗口】
全局变量： document ，location【浏览器地址】， history【访问历史】， navigator【浏览器】， screen【客户端屏幕】
全局方法：alert()； confirm()； prompt()； open()； close()；

window对象

属性：innerheight、innerwidth 属性：只读属性，声明了窗口的文档显示区的高度和宽度

方法：

open()    打开一个新的窗口。

resizeTo()    将窗口的大小更改为指定的宽度和高度值。

moveBy()    相对于原来的窗口移动指定的x、y值。

moveTo()    将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。

setInterval("代码",毫秒数)    每经过指定毫秒值后就会执行指定的代码。

clearInterval()    根据一个任务的ID取消的定时任务。

setTimeout()    经过指定毫秒值后执行指定 的代码一次。

注意： 使用window对象的任何属性与方法都可以省略window对象不写的。

Location(地址栏对象)

location.href  ：设置及获取地址栏的对象

location.assign("路径");  跳转页面，与href不同：会添加记录到浏览历史

reload()    刷新当前的页面

协议location.protocol
主机名location.hostname
端口号 (默认是80，没有即表示80端口)location.port
主机加端口号location.host
访问的路径location.pathname
锚点location.hash);
参数列表 location.search

Screen(屏幕对象)，只有属性没有方法

availHeight    获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。

availWidth    获取系统屏幕的工作区域宽度，排除 Windows 任务栏。

height    获取屏幕的垂直分辨率。

width    获取屏幕的水平分辨率。

history（记录访问历史）

history.back();  返回上一次访问

history.go(-2);   -1表示上次，-2表示上上次访问，以次类推

---

事件：

事件驱动：JS代码写好后，需要外界触发后，方可运行，例如：单击事件，定时执行···

注册事件的方式：
方式一： 直接在html元素上注册

<body onload="ready()">

function ready(){

    alert("body的元素被加载完毕了..");

}

方式二：可以js代码找到对应的对象再注册。 推荐使用

var bodyNode = document.getElementById("body");

bodyNode.onload = function(){

    alert("body的元素被加载完毕");

}

常用事件：
鼠标点击相关：

onclick    在用户用鼠标左键单击对象时触发。

ondblclick    当用户双击对象时触发。

onmousedown    当用户用鼠标按钮按下对象时触发。

onmouseup    当用户在鼠标按钮松开对象时触发。

鼠标移动相关：

onmouseout    当用户将鼠标指针移出对象边界时触发。

onmousemove    当用户将鼠标划过对象时触发。

焦点相关的：

onblur    在对象失去输入焦点时触发。

onfocus    当对象获得焦点时触发。

其他：

onchange    当对象或选中区的内容改变时触发。

onload    在浏览器完成对象的装载后立即触发。

onsubmit    当表单将要被提交时触发。事件方法返回true提交，false不允许提交

---

*DOM(Document Object Model) 

文档对象模型：一个html页面被浏览器加载的时候，浏览器会对整个html页面上的所有标签都创建一个对应的对象进行描述。

页面对象组建成Document文档树，文档树每个标签对象都称作节点（Node）。组建好之后，按照树的结构将页面显示在浏览器的窗口中

我们只要能找到对应的对象操作对象的属性，则可以改变浏览器当前显示的内容。（通过js操控html:   获取节点—>设置属性）

HTML DOM 定义了访问和操作HTML文档的标准方法，详细内容查看DHTML文档

---

获取、设置节点：

document      代表当前页面的整个文档树

属性：

all      获取html文件中的所有标签节点

links      获取文档中含有href的属性的标签

body

通过html元素的标签属性找节点：

document.getElementById("html元素的id")

document.getElementsByTagName("标签名")   返回数组

document.getElementsByName("html元素的name")   返回数组

通过关系(父子关系、兄弟关系)找节点：

parentNode 获取当前元素的父节点。

childNodes 获取当前元素的所有下一级子元素。

firstChild 获取当前节点的第一个子节点。

lastChild 获取当前节点的最后一个子节点。

nextSibling     获取当前节点的下一个节点。（兄节点）
previousSibling    获取当前节点的上一个节点。（弟节点）

注意： 获取子节点的时候是包括了空文本或者是注释。我们可以通过标签的类型进行判断筛选：

文本节点的类型： 3

注释的节点类型： 8

标签节点的类型： 1

创建插入节点、设置节点的属性：

document.createElement("标签名")     创建新标签元素节点

elt.setAttribute("属性名", "属性值")    给节点设置属性

elt.appendChild(e)    添加元素到elt中最后的位置

插入目标元素的位置

elt.insertBefore(newNode, oldNode);    添加到elt中，child之前。   注意： elt必须是oldNode的直接父节点。

elt.removeChild(child);    删除指定的子节点。   注意： elt必须是child的直接父节点

Canvas.getContext(contextID)   方法返回一个用于在画布上绘图的环境

获取与设置属性：innerHTML       设置或返回 表格行的开始和结束标签之间的 HTML

css：元素节点的style属性即对应的css

    style.display="none"：隐藏

    style.backgroundColor="green"：背景色

注意：js代码要写在文档之后、或者写在window.onload里面（等对象转载完成）才能获取文档树

---

正则表达式：

创建方式：
方式1：

/ 正则表达式 / 模式

方式2：

new RegExp("正则表达式",模式);

正则表达式对象常用方法：

test()    使用正则对象去匹配字符串 如果匹配成功返回ture，否则返回false.

exec()    根据正则表达式去查找字符串符合规则的内容。

模式：

g （全文查找出现的所有 pattern）

i （忽略大小写）