[前端基础]javascript知识总结

一、javascript 概述---js#

js是一种基于对象和事件驱动的解释性脚本语言，应用于网页的编程处理
JavaScript、JScript/VbScript----W3C
js的书写方式:

直接写在 onxxx 事件中
<script>块中，onxxx 事件中调用---当前页面的重用
js 文件中，页面上先使用 <script src="">引入，onxxx 事件中调用---建议使用

二、基础语法#

1、变量#

声明变量 var 名称 = 值；变量的数据类型以赋值为准标识符：不以数字开头的数字、字母、下划线和 $ ，不能和保留关键字重名

2、数据类型#

基本类型：string/number/bool 特殊类型：null/undefined 复杂类型：Array/Date/Math/.... String类型：字符串，一对双引号或者一对单引号，特殊字符使用转义符（\x，汉字对应一个 \uxxxx）

3、基本数据类型之间的转换#

隐式转换：规则显式转换：使用转换方法 parseInt/parseFloat/toString NaN----not a number isNaN("???")---bool，判断是否可以转化为数值：is not a number("??")---true

4、运算符与表达式#

if(a == b)-----值 if(a === b)---严格相等-----值和类型

三元运算符逻辑表达式 ? 表达式成立取值1 : 表达式不成立取值2 (if a == b) ? (do something) : (do something)

5、流程控制#

默认情况下，顺序执行---改变其执行顺序条件：if/else、switch/case 循环：for、while

三、内置对象的使用#

1、String对象#

创建 var s = "mary"; 属性 var n = s.length; 方法

var s1 = s.substring(1,3); 
toLowerCase/toUpperCase 
split  1,2,3,4 
substring 
charAt 
indexOf/lastIndexOf 
replace/search/match---结合正则表达式使用、实现对string的操作 
replace(/\d{3}/ ,"*")

正则表达式：js中，放置在 /中间/ 结合匹配标识用:g(global)i(ignour)m(multiline) /gcd/gim

2、Array 对象#

创建数组

var a1 = new Array(3); 
    a1[0] = 12; 
    a1[1] = "mary"; 
    a1[2] = true; 
     
    var s2 = [12,"mary",true];//简写方式 
 
    var s3= new Array(); 
    a3[0] = [10,20]; 
    a3[1] = [30,40];

属性 length 方法

 XXX.toString()---使用 ， 连接成一个字符串，常用于输出数组的内容显示 
 XXX.join("|")----使用 | 连接 
 concat----数组的加法 
 slice-----数组的截取 
 reverse 
 sort----默认情况下，按照字符比较 
 ----按照数值比较，先定义一个用于比较规则的方法，将方法作为参数传给 sort

3、Math 对象#

直接使用不需要new 属性或者方法： Math.round()

4、Number 对象#

toString toFixed(n)---保留小数点后n位

5、正则表达式对象#

正则表达式本身就是一个纯文本的表达式，用来表示对文本的匹配，比如 \d{3} [a-z]{2,5} [a-zA-Z0-9]{4} 不同的语言、环境下，有着不同的应用

js中对于正则表达式的应用：一：结合string 的对象方法：replace/search/match 二：直接使用正则表达式对象的方法

var  r = /\d{3}/;--r 是一个正则表达式对象 
r.test(string)----bool

常用于验证界面的录入

6、Date 对象#

创建

var r = new Date();--当前 
var r = new Date("2013-12-23");

方法

getXXX()--getDate()/getMonth 
setXXX() 
toXXX()---得到某种格式的字符串

9、方法#

a、定义：

function Name(x,y,z) 
{ 
return XXX; 
}

b、重载 js不可以实现传统意义上的重载---js中，只要方法重名，以最后一次定义的为准, 方法中可以使用 arguments 得到传入的参数的数组。模拟实现方法的重载
c、方法和 Function 对象
d、使用方法时方式一：方法，与功能相关----function sss(){} 方式二：方法仅为某个方法里所使用，创建一个 Function对象即可,适用于方法体简单

var f = new Function("参数1","参数2","方法体");

方式三：使用匿名函数---适用于方法体复杂

var f = function(){};

10、全局函数#

所有js的对象均可使用

parseInt/parseFloat
isNaN 
decodeURI/encodeURI   (xxxx.html?name=mary&age=17&sex=%45%65)
eval：传入一个字符串，计算或者执行它

四、DHTML 应用 dynamic#

1、什么是 DHTML 应用#

DHTML 是一种用来创建动态站点的技术组合物。通过 DHTML，Web 开发者可控制如何在浏览器窗口中显示和定位 HTML 元素。

2、对象模型#

window history location navigator screen event document对象模型分为两类：DOM（文档对象模型）和 BOM（浏览器对象模型）

3、window 对象#

//对话框 
window.alert() 
window.confirm() 
window.prompt()

//打开新窗口
window.open(url,name,配置); 
window.close();

//定时器相关
//周期性
window.setInterval(func,time); 
window.clearInterval()
//一次性
window.setTimeout(func,time); 
window.clearTimeout();

4、document对象#

html 页面上的每个内容作为一个节点对象----整个文档是一颗节点树，document 对象代表的整个树，树根 DOM：文档对象模型

a、查询---找到文档中的某个节点对象方法一：

document.getElementById("")---通过id找到对象或者null

方式二：根据层次关系来查询

 obj.parentNode 
 obj.childNodes---节点的数组 
 obj.firstChild/lastChild

方式三：根据标签名称查找

document.getElementsByTagName("input")---节点的数组 
obj.getElementsByTagName("input")[1]

b、读取信息或者修改信息----知道节点的类型方式一：将 HTML 标签对象化

<input     obj.value/type 
<a    obj.href 
<img    obj.src

方式二：元素中间的文本内容-----innerHTML

<a>text</a>    obj.innerHTML

方式三、样式简单样式

<p style="color:red;">p text</p> 
obj.style.color = "red"; 
obj.style.fontSize = "18pt"; 
obj.style.backgroundColor = "silver";复杂的样式：建议在 样式表 中先定义好 
obj.className = "";

c、不知道节点对象的类型时----读取数据？

obj.nodeName----全大写方式，返回当前元素的标签的名称

d、增加新节点第一步：创建新的节点对象

document.createElement("a/input/p"); 
<a></a>  <input />  <p></p>

第二步：设置新对象的各信息第三步：加入

xxx.appendChild(newObj);---追加 
xxx.insertBefore(newObj,refNode);

e、删除

XXX.removeChild(obj); 
obj.parentNode.removeChild(obj);

5、HTML DOM#

基于标准的DOM操作，进行封装，以实现代码的简化，比如：

var obj = new Option("JDBC","1"); 
sel.options[1] = obj;

DOM方式： createElement(“tr”) HTML DOM 方式：

table.insertRow(index);
row.insertCell(index);

6、history 对象#

当前浏览器窗口的历史访问记录---确实有历史记录

history.back(); 
history.forward(); 
history.length;

7、screen 对象#

代表的就是当前屏幕信息--只能读取，不能修改

var w = screen.width/availWidth;//ok 
screen.width = 123; //error

8、location 对象#

代表的是 URL 地址栏实现对 URL的修改，实现从页面去往另一个页面 :

location.href = "url";--保留历史访问记录 
location.replace("url");--替换，没有历史

页面间跳转：

<a>----静态 
window.open----一定打开新窗口 
history.xxx()----受限于历史记录 
location.href----保留历史记录 
location.replace()----不保留

9、navigator 对象#

js中，可以循环对象的所有的属性，如下

for(var p in navigator)//p代表对象的每个属性 
{ 
}

10、event事件#

a、事件分类鼠标事件：onclick/onmouseover/onmouseout/ondblclick 键盘事件：onkeyup/onkeydown 状态事件：onblur/onfocus/onchange/onload/onunload
b、如何定义事件

<元素标签中 onxxx = "function();"----静态 
btnObj.onxxx = Function； ----动态

c、事件可以被取消常用于页面的提交时

onxxx = "return true;"---默认值，事件触发 
onxxx = "return false;"---事件被取消

d、事件有冒泡机制当多层元素定义了相同的事件时，事件从最里层开始触发，层层向上
e、event 对象封装了和当前事件相关的所有信息

clientX/clientY----事件发生的点 
srcElement/target---源元素对象，引发当前事件的元素 
使用event对象时，可以直接在 html 页面或者js代码中使用 event 关键字获得对象----firefox 除外 
firefox：只能在 html 页面上使用 event ，js 中不可用

浏览器兼容问题：标准，特殊问题特殊处理（event）

五、js中的面向对象基础#

**特性 -- 封装、继承、抽象、多态 ** *封装：*对象相关的数据和行为组织起来 *数据：*属性 *行为：*方法

1、使用 Object#

使用简单，重用性差----适用于简单数据的封装

var obj = new Object(); 
obj.name = "mary"; 
obj.age = 18; 
obj.isGra = true;

2、创建一个类#

使用较为复杂，重用性好---适用于大多数情况下的封装

function Student(n,a) 
    { 
        this.name = n; 
        this.age = a; 
    } 
 
var p1 = new Student("mary",18); 
var p2 = new Student("john",20);

3、JSON对象#

var obj = { 
    "name":"mary", 
    "age":18 
}; 
var p1 = {}; 
var p2 = {}; 
var array = new Array(); 
array[0] = p1; 
array[1] = p2;