[前端基础]javascript知识总结

  baikapala

一、javascript 概述---js 

1、js是一种基于对象和事件驱动的解释性脚本语言,应用于网页的编程处理 

2、JavaScript、JScript/VbScript----W3C

3、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;
以前,我总以为自己是菜鸟,也总想着早起的鸟儿有虫吃。直到有一天我想飞,才愕然的发现自己没有翅膀和羽毛,我竟然是菜虫!早起的虫儿被鸟吃……原来,百足应该厚积薄发!