【笔记】——Javascript（1）

一．JavaScript简介

JavaScript的组成：ECMAScript、DOM、BOM

ECMAScript

1）它定义了脚本语言的所有属性、方法和对象。

2）JavaScript/ActionScript/ScriptEase等其他语言通过实现ECMAScript作为其功能的基准。

DOM

1）每个浏览器都有其自身ECMAScript接口的实现，这些ECMAScript接口被扩展成DOM、BOM等。

2）根据W3C的DOM规范，DOM接口与浏览器、平台、语言无关，故用户可以访问页面的其他标准组件。其解决了访问站点中的数据、脚本和表现层对象时，一些浏览器和系统的冲突。

3）DOM把整个网页规划成，由节点层级构成的文档。

BOM

1）常见功能：弹出/移动/关闭/调整 浏览窗口；提供Web浏览器相关信息的导航对象；提供页面详细信息的定位对象；提供屏幕分辨率参数的屏幕对象；支持cookie；不同浏览器自身的新特性(如IE的ActiveX类)...

 

二、Web标准

——Web标准概述

1）Web标准为一系列标准的集合。

    网页分为结构Structure、表现presentation、行为Behavior。

 

三、JavaScript基础

——JavaScript语法

1）  区分大小写。

2）  若类型变量。

3）  行尾的分号可有可无。

4）  括号用于代码块。

5）  注释方式同于C和Java。

——变量

1）可不用声明或用var(variable)关键字声明变量。可同时声明多个。

2）名称规则：①首字符可为字母/下划线/美元符，其后还可有数字。

             ②变量名不能为关键字和保留字。

             ③3种标记规则：Camel/Pascal/匈牙利标记法

——9种数据类型

String、Number、Boolean、Object、Undefined、Null

和3种在JS运行时中间结果的数据类型Reference、List、Completion

1）字符串

①获取字符串 个数：length属性。【双字符算一个字符】

②获取 指定位置的字符：charAt()方法

③获取 子字符串：slice()、substring()、substr()

    slice()和substring()都接受两个参数，指起始位置和终止位置，不包含终止字符。可忽略第二个参数。

        区别在于负数参数：前者负数从末端计数。后者负数归0，较小数为始，较大数为终。

    substr()的首参数为起始位置，次参数为长度。

④搜索 子字符：indexOf()、lastIndexOf()

    indexOf()往前搜。lastIndexOf()往后搜。返回指定字符的位置，找不到则返回-1。

        可设置第2参数指定开始搜索位置。位置都是从前面的0下标开始。

2）数值

①var num = 7e5； //其中“7e5”表示“700000”。

②toExponential()用于将数值 转换为 科学计数法。参数表小数位数。

3）布尔型

只有true和false两个值。

    typeof()返回变量的类型。

4）类型转换

①转换为 字符串型：toString()参数可指定要转换成的进制数

②转换为数字型：parseInt()转换为整数。parseFloat()转换为浮点数。都从0位置开始，检查到非数值时结束。参数可指定要转换成的进制数。

字符串型、数字型、布尔型都属于离散型。离散的变量只能存储一个值，存储一组值的变量需使用数值array。

5）数组

①由相同名称的多个值构成的集合。

②由Array关键字声明，可同时制定个数/长度length：var aTeam = new Array(12): //长度可容12个元素

                      直接用参数创建元素：var aMap = new Array(“China”，“USA”，“Britain”):

③由方括号[]声明：var aMap = [“China”，“USA”，“Britain”]:

④数组 转换为 字符串：toString()。

⑤指定数组的 连接符：join()参数为连接数组项的字符串。无参数等同toString()；空字符串表不用连接符；

⑥字符串 转换为 数组：split()参数为分隔字符串的标识。

⑦使数组元素 反序：reverse()【字符串没有类型方法，但可通过split()转换为数组反序后用join()转回字符串】

⑧使数组元素 按字母排序：sort()

——函数

1）arguments对象：可访问函数的参数【通过下标】。

                   function aFunc(){if(arguments[0]==“aWord”){do something}:}

    函数参数个数：arguments.length

2）ECMAScript不会检验传递给函数的参数个数是否超过函数定义的。【Netscape文档表面最多26个】任何遗漏的参数都以undefined形式传给函数，多余的参数回被自动忽略。

——其他对象

1）对象是自我包含的数据集合。访问对象数据2种方式：属性和方法。【属性是对象中的变量，方法则是函数】

    创建对象：new关键字。var myCar = new Car()；

2）Date对象

①ECMAScript把日期存储为距离UTC时间1970年1月1日0点的毫秒数。【协调世界时UTC由原子钟提供】

②计算 程序运行速度：在程序始末各创建一个时间对象，通过第二个时间对象减去前面的，得出运行时间。

③参数 初始化时间对象：

    new Date（“month dd，yyyy hh：mm：ss”）；

    new Date（“month dd，yyyy”）；

    new Date（yyyy，mth，dd，hh，mm，ss）；

    new Date（yyyy，mth，dd）；

    new Date（ms）；

    yyyy：4位数年份。   month：英文月份。   mth：月份0-11。   dd：日数1-31。

    hh：小时数0-23。    mm：分针数0-59。    ss秒数。          ms：毫秒数。

※ new Date()在不同浏览器中显示格式不同。【即输出的字符串不同】

④获取时间：

    aDate.getFullYear()     四位数年份。

    aDate.getYear()         不同浏览器，返回两位或四位数年份【不推荐】

    aDate.getMonth()        月份0-11

    aDate.getDate()         日期1-31

    aDate.getDay()          星期0日-6六

    aDate.getHours()        小时数0-23

    aDate.getMinutes()      分钟数0-59

    aDate.getSeconds()      秒数0-59

    aDate.getMilliseconds() 毫秒数0-999

    aDate.getTime()         返回从GMT时间1970年1月1日0点0分0秒至aDate的毫秒数

⑤设置时间：aDate.setFullYear...()

——数学计算：Math对象

1）常用属性：   Math.E：e自然对数的底      Math.PI：π圆周率      Math.SQRT2：2的平方根

2）最值：min()、max()返回一组数的最小/大值。

3）小数 转换 整数：ceil()向上取整、floor()向下取整、round()四舍五入

4）生成随机数：random()  返回0和1中间的随机数，不包含0和1。

    返回1-100中的随机数：var aNum = Math.floor(Math.random()*100+1)；【包含1和100】

    返回2-99中的随机数：var aNum = Math.floor(Math.random()*99+2)；【包含1和100】

※通常将随机选择打包成一个函数，需要时再调用。

function selectFrom(firstVal，lastVal){

    var sum = lastVal–firstVal + 1；

    return Math.floor(Math.random()*sum + firstVal)；}

5）Math的其他方法：Math.abs(x)返回x的绝对值....

——BOM基础

JS提供一些对象用于与浏览器窗口的交互。

这些对象包括：window、document、location、navigator、screen等。统称为BOM。

1）window对象

表示整个浏览器窗口。

①4个常用方法：moveBy(dx，dy)  向右移动dx像素，向下移动dy像素。

                moveTo(x，y)   移动到相对用户屏幕的(x，y)处。

                resizeBy(dw，dh)相对当前，宽度增加dw像素，长度增加dh像素。【负数为缩小】

                resizeTo(w，h)  宽度调整为w像素，高度调整为h像素。【不能用负数】

②打开新窗口：open()

四个参数：冒号包围，逗号分隔。

    1新窗口url

    2新窗口名称【_blank/_self/_parent/_top/框架名】【与a元素的target属性相同】

    3新窗口是否替换当前页面的布尔值

    4特性字符串说明：left、top：新窗口坐标。          width、height：新窗口宽高。

                     resicable：是否可拖动调整大小。  scrollable：是否使用滚动条。【默认no】

                     toolbar、status、location：【默认no】是否显示工具栏、状态栏、地址栏。

③关闭窗口：close()

④弹出信息：alert()   单向对话框。一个确定按钮。

            confirm() 返回一个布尔值。一个确定按钮和一个取消按钮。

            prompt()  返回一个字符串。两个参数：脚本提示、默认值。

⑤window的history属性：尽管无法获取历史页面的URL，但通过history属性可访问历史页面。

    使浏览器后退一页：window.history.go(-1)；等同于window.history.back()；

    使浏览器前进一页：window.history.go(1)； 等同于window.history.forward()；

2）document对象

为window的一个属性，故可访问window的所有属性和方法。即window.document == document为true。

①原本用于处理页面文档的功能被CSS和DOM取代，故现在主要用于读写一些网页属性/属性集合。

        如，读写URL。导航到新窗口【在FF不通用】：document.URL=“http://xxx.com/y”；

②常用属性：anchors 网页中锚的集合。 由<a name=”anchorsName”>标记

          applets   applet集合。

          embeds    嵌入对象的集合。 由<embed>标记

          forms     表单的集合。

          images    图片的集合。

          links     超链接的集合。   由<a href=“URL”>标记

e.g：var myLinks = document.links；

     myLinks[2].target = “_blank”；

③向浏览器直接插入HTML流：write()

    除非置于在<script>的顶层，否则使用事件句柄调用函数中的document.write()方法时，插入的内容会以覆盖当前页面的形式出现。

3）location对象

表示载入窗口的URL。用于分析和设置网页URL。window对象和document对象的属性。

①常用属性：hash：若URL包含书签#，返回该符号后面的内容。

            search：执行GET请求的URL中间号(？)后的部分。

            href：当前载入的完整URL。

            host：服务器名称。

            pathname：URL中主机名后的部分。

            protocol：URL使用的协议。

            port：URL周明华请求的端口号。

②location.href属性与document.URL属性相似，皆可导航到新页面。前者对各浏览器的兼容性更好。

    采用此方法导航，新地址会被加入到浏览器的历史栈中，前个页面之后，即可通过“后退”访问之前的页面。对于像安全级别较高的银行系统 不希望用户通过“后退”返回，可以用location.replace()方法代替。

③重新加载页面：reload() 接受一个布尔值参数。true则从服务器上重载，false则从缓存上重载。

4）navigator对象

包含系列浏览器信息的属性。可用于浏览器检测。

①浏览器信息查询：userAgent属性

5）screen对象

用户的屏幕信息。window对象的属性。

属性：width/height：屏幕宽高。

        availWidth/availHeight：窗口可使用的屏幕宽高。【[ə'veɪl]有用】

        colorDepth：用户表示颜色的位数。

※全屏：window.moveTo(0，0)；

        window.resizaTo(window.availWidth，window.availHeight)；

 

四、CSS进阶

传统HTML缺点：维护困难、标记不足、网页过胖、定位困难...

——<div>与<span>

1）<div>division块级元素block-level element。

2）<span>行内元素inline element。

    故，<div>标签可包含<span>元素，反之则不行。

——元素定位

1）float定位：在父级的content区域浮动。

2）position定位：4个值static/absolute/relative/fixed

        配合position定位的属性：top/right/bottom/left

3）z-index空间位置：调整position定位时 重叠块的上下位置。同值时按原有高低覆盖关系。

五、DOM模型

定义了用户操作文档对象的接口。使开发者能将HTML作为XML文档来处理。

——网页DOM模型框架

DOM完成了 通过树状图的这种划分关系，使整个HTML文档结构清晰可见，各个元素之间的关系很容易表达出来。

——DOM模型中的节点

在DOM中有3种节点：元素/文本/属性 节点。

1）元素节点(element node)

    可以说正个DOM模型都是由元素节点构成的。标签p/li/h1等为元素节点的名称。

    根元素为html。

2）文本节点(text node)

    文本节点被包含在元素节点内部。

3）属性节点(attribute node)

    几乎所有元素都有title属性用于描述。

——使用DOM

 

1）访问节点

①getElementByTagName()

返回相同标签名的元素的NodeList

※文档的 DOM结构 必须在文档加载完后 才能分析出来。故以上语句需在页面加载后才能生效。

②getElementById()

返回指定id的元素。

※IE-Bug：当某元素的id值 与其前面某元素的name值相同时，此方法对name值元素作用有效，对id值元素无效。

    解决：最好的办法是避免id和name值相同。

2）检测节点类型

①通过nodeType属性克检测出节点类型。

    返回一个(代表节点类型的)整数值。有12个可取值。【document.nodeType返回9】

    元素节点返回1、属性节点返回2、文本节点返回3【故，可对某种类型的节点做单独处理，常用于搜索节点】

3）利用父子兄关系 查找节点

父子兄：DOM模型中节点之间最重要的3种关系。

①通过父子关系 获取某节点的所有子节点：hasChildNodes()和childNodes属性

    判断是否有子节点：if（hasChildNodes()）{dosomething}

    使用childNodes属性 可遍历所有子节点名 和显示出来。

※IE7-Bug：再IE7中显示出所有子节点名；在FF显示出所有节点名外，之间的空格也会被当成子节点计算出来。

②反过来也可通过某节点 获取其所有父节点：parentNode属性。

    最近的父节点：var p = aNode.parentNode.lastChild；

③通过兄弟关系 读写同一层次的节点：previousSibling属性、nextSibling属性【因①中bug，故仅适用于IE】

解决兼容性：用while循环进行nodeType判断 过滤掉“nodeType不为1或null”的值。

4）设置节点属性

①getAttribute(“属性名”)只能通过一个元素节点对象调用！不能用document对象调用。

②setAttribute(“属性名”，“属性值”)

5）创建和添加节点

①创建元素节点：createElement(“元素名”)

②创建文本节点：createTextNode(“文本”)

    【为元素节点添加-文本节点，即添加子节点：eleVar.appendChild(texVar)/该方法添加的位置，位于childNode位于列表尾部】

③创建文档碎片节点：createDocumentFragment()

6）在特定节点前 插入节点

通过父节点的insertBefore()方法：同replaceChild()有两个参数。

7）在特定节点后 插入节点

没有直接方法，可自行编码：判断若为最后一个节点，则用appendChild()添加到末尾；否则添加到下一个兄弟节点的前面insertBefore()。

8）删除节点

通过父节点的removeChild()方法：oP.parentNode.removeChild(oP)

9）替换节点

通过父节点的replaceChild()方法：olP.parentNode.removeChild(newP，oldP)

 

====================================================================

【笔记】——Javascript（2）