JavaScript基础

day01

--------------------------------------------------------------------------------------------------------

JavaScript概述：

1>JavaScript是嵌入HTML中在浏览器中的脚本语言，具有和Java和C语言类似的语法；

2>是一种网页编程技术，用来向HTML页面添加交互行为；

3>JavaScript直接嵌入HTML页面，由浏览器执行代码，不进行预编译；

4>最早由网景公司在Netscape2.0首次推出了JavaScript，当时命名参考了Java的名称；

5>现在由ECMA组织维护JavaScript标准。

JavaScript特点：

1>可以使用任何文本编辑工具编写；

2>由浏览器内置的JavaScript引擎执行代码：

- 解释执行：事先不编译，逐行执行；

- 基于对象：内置大量现成对象。

3>适宜：

- 客户端数据计算；

- 客户端表单合法性验证；

- 浏览器事件的触发；

- 网页特殊显示效果制作；

- 服务器的异步数据提交。

使用JavaScript：

1>事件定义式：在事件定义时直接写js；

2>嵌入式：使用<script>标签；

3>文件调用式：代码位于单独的.js文件中，html页面引用.js文件。为纯文本文件，文件中不需要包含<script>标签，直接书写js代码。示例：<script src="myJs.js" type="text/javascript"></script>。

4>JavaScript的代码错误：

- 解释性代码，代码错误，则页面中无效果；

- IE浏览器：状态栏、开发工具；

- Firefox浏览器、Chrome浏览器：使用错误控制台查看。

语法规范：

1>由Unicode字符集编写；

2>注释：单行：//；多行：/* */；

3>大小写敏感；

4>使用分号或者换行结束，一行中有多个语法不能省略分号；

5>JavaScript语言中代表特定含义的词称为保留字，不允许程序再定义为标识符(class、int、float)。

数据类型：

1>没有初始化的变量则自动取值为undefined；

2>变量没有类型，统一用关键字var声明，变量所引用的数据是有类型的；

3>JS数据类型：

a>特殊类型：

- null：空；

- undefined：未定义。

b>内置对象：

- Number：数字；

- String：字符串；

- Boolean：布尔；

- Function：函数；

- Array：数组。

c>外部对象：

- window：浏览器对象；

- document：文档对象。

d>自定义对象：

- Object：自定义对象。

4>parseInt：强制转换成整数，如果不能转换，则返回NaN(not a number)；

5>toString：所有数据类型均可以转换为String类型；

6>typeof：查询当前类型，返回String/number/boolean/object/function/undefined；

7>isNaN( )：判断被检测表达式经过转换后是否不是一个数，如果被检测表达式不是数则返回true，否则返回false；

8>全等(===)：类型相同，数值相同；

9>不全等(!==)：数值或类型相同；

10>条件运算又称三目/三元运算，结构为：表达式?表达式1:表示2；

11>while是前测试循环，do-while是后测试循环；

12>Java中表达式必须返回布尔值，JS中的表达式可以是任意表达式，即可以返回任意类型值，一切表示空的值都是false；

--------------------------------------------------------------------------------------------------------

day02

--------------------------------------------------------------------------------------------------------

内置对象：

1>常用内置对象：

- String对象；

- Number对象；

- Boolean对象；

- Array对象；

- Math对象；

- RegExp对象；

- Function对象。

2>String对象常用方法：

- str.toLowerCase()：小写转换；

- str.toUpperCase()：大写转换；

- str.charAt()：返回指定位置的字符；

- str.charCodeAt()：返回指定位置字符的Unicode编码；

- str.indexOf(findstr,[index])：返回findstr在str中出现的首字符位置索引，如果没有找到，返

回-1，index表示开始查找的位置索引；

- str.lastIndexOf(findstr,[index])：返回findstr在str中出现的首字符位置索引，如果没有找到，

返回-1，index表示开始查找的位置索引，lastIndexOf表示从后面找起；

- str.substring(start,[end])：获取子字符串，start开始位置，end结果位置；

- str.split(bystr,[howmany])：拆分子字符串，bystr分割用的字符串，howmany指定返回的数组

的最大长度，可以省略，返回分割的字符串数组；

3>Number对象常用方法：

- data.toFixed(num)：转换字符串，并保留小数点后一定位数，如果必要，该数字会被舍入，也

可以用0补足；

4>Array对象常用方法：

- arr.reverse()：反向数组，改变arr数组中数值的顺序；

- arr.sort([sortfunction])：数组排序，sortfunction可选项，用来确定元素顺序的函数的名称；

5>Math对象常用方法：

- Math.PI；

- Math.E；

- Math.round(3.56)；

6>Date对象常用方法：

- 读写时间毫秒数：getTime()、setTime(毫秒)；

- 读写时间分量：getDate()、getFullYear()、setDate()、setFullYear()等；

- 转换为字符串：toString()、toLocaleTimeString()、toLocaleDateString()；

7>RegExp对象常用方法：

- 创建RegExp对象：

var rgExp = /pattern/flags;

var rgExp = new RegExp("pattern",["flags"]);

- flags标识有以下几点：

g：设定当前匹配为全局模式；

i：忽略匹配中的大小写检测。

- RegExpObject.test(str)：如果字符串str中含有RegExpObject匹配的文本，则返回true；

- RegExpObject.exec(str)：检索字符串中指定的值，返回找到的指定值；

8>方法：

- str.replace(regexp,tostr)；

- str.match(regexp)；

- str.search(regexp)；

9>使用说明：

- regexp：代表正则表达式或字符串；

- replace：返回替换后的结果；

- match：返回匹配字符串的数组；

- search：返回匹配字符串的首字符位置索引；

10>Function对象：

- JS函数就是Function对象，函数名就是指向Function对象的引用；

- 函数的返回值默认是undefined，可以使用return返回具体的值；

- JS函数没有重载，无论传入多少个参数，调用都是同一个函数；

- 没有接收到实参的参数值是undefined；

- 所有的参数传递给arguments数组对象，表示函数的参数数组；

- 创建函数：var functionName = new Function(arg1,...,argN,functionBody)；

- 创建匿名函数：var fun = function(arg1,...,argN) {fun_body;return value;}；

- 全局函数：全局函数可以用于所有JavaScript对象(parseInt/parseFloat/isNaN/eval)；

- eval函数：用于计算表达式字符串，或者用于执行字符串中的JavaScript代码。

--------------------------------------------------------------------------------------------------------

day03

--------------------------------------------------------------------------------------------------------

外部对象概述：

1>浏览器对象模型：Browser Object Model，用来访问和操纵浏览器窗口，使JavaScript有能力与浏览器对话；

2>通过使用BOM，可移动窗口、更改状态栏文本、执行其它不与页面内容发生直接联系的操作；

3>没有相关标准，但被广泛支持；

4>文档对象模型：Document Object Model，用来操作文档；

5>定义了访问和操作HTML文档的标准方法；

6>应用程序通过对DOM树的操作，来实现HTML文档数据的操作；

7>window：history/navigator/document/location/screen；

window对象：

1>所有JavaScript全局对象、函数以及变量均自动成为window对象成员；

2>常用属性：

- history：浏览过窗口的历史记录对象；

- navigator：浏览器相关信息；

- document：窗口中显示的HTML文档对象；

- location：窗口文件地址对象；

- screen：当前屏幕对象；

3>常用方法：

- alert()、confirm()、prompt()；

- setTimeout()、clearTimeout()；

- setInterval()、clearInterval()；

4>对话框：

- alert(str)：提示对话框，显示str字符串内容；

- confirm(str)：确认对话框，显示str字符串内容，按"确定"按钮返回true，其它操作返回false；

- prompt()：输入框；

5>定时器：

- 多用于网页动态时钟、制作倒计时、跑马灯效果等；

- setInterval(exp,time)：周期性触发代码exp，返回已经启动的定时器对象；

- clearInterval(tID)：停止启动的定时器；

- setTimeout(exp,time)：一次性触发代码exp，返回已经启动的定时器对象；

- clearTimeout(tID)：停止启动的定时器；

常用属性：

1>screen对象包含有关客户端显示屏幕的信息(width/height/availWidth/availHeight)；

2>history对象包含用户(在浏览器窗口中)访问过的URL：

- length：浏览器历史列表中的URL数量；

- back()：后退；

- forward()：前进；

- go(num)：跳转到指定记录；

3>location对象包含有关当前URL的信息：

- href属性：当前窗口正在浏览的网页地址；

- reload()：重新载入当前网址，同按下刷新按钮。

4>navigator对象包含有关浏览器的信息(navigator.userAgent)；

DOM概述：

1>当网页被加载时，浏览器会创建页面的文档对象模型；

2>通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML；

3>JavaScript能够改变页面中的所有HTML元素；

4>JavaScript能够改变页面中的所有HTML属性；

5>JavaScript能够改变页面中的所有CSS样式；

6>JavaScript能够对页面中的所有事件做出反应；

7>DOM模型被构建为对象的树，这棵树的根就是document对象。

8>DOM提供了如下操作：

- 查找节点；

- 读取节点信息；

- 修改节点信息；

- 创建新节点；

- 删除节点。

读取、修改：

1>nodeName：节点名称。

- 元素节点和属性节点：标签或属性名称；

- 文本节点：永远是#text；

- 文档节点：永远是#document；

2>nodeType：节点类型。

- 元素节点：返回1；

- 属性节点：返回2；

- 文本节点：返回3；

- 注释节点：返回8；

- 文档节点：返回9；

3>元素节点内容:

- innerText：设置或获取位于对象起始和结束标签内的文本；

- innerHTML：设置或获取位于对象起始和结束标签内的文本；

4>节点属性：

- getAttribute()：根据属性名称获取属性的值；

- setAttribute()、removeAttribute()：

5>将HTML标记、属性和CSS样式都对象化；

6>元素节点样式：

a>style属性：

- node.style.color；

- node.stylefontSize；

b>className属性；

查询：

1>如果需要操作HTML元素，必须首先找到该元素；

2>查询节点的方式：

- 通过id查询；

- 通过层次(节点关系)查询；

- 通过标签名查询；

- 通过name属性查询；

3> 根据元素id查询节点：document.getElementById()，如果id值错误，则返回null；

4>根据层次查询节点：

- parentNode：遵循文档的上下层次结构，查询单个父节点；

- childNode：遵循文档的上下层次结构，查询多个子节点；

5>根据标签名查询节点：getElementsByTagName()；

- 忽略文档的结构；

- 查询整个HTML文档中的所有元素；

- 如果标签名称错误，则返回长度为0的节点列表；

- 使用节点列表的length属性获取个数；

- [index]：定位具体的元素；

6>根据name属性查询节点：document.getElementsByName()；

--------------------------------------------------------------------------------------------------------

day04

--------------------------------------------------------------------------------------------------------

document对象增加：

1>创建新节点：document.createElement(elementName)；

- elementName：要创建的元素标签名称；

- 返回新创建的节点；

2>添加新节点：

- parentNode.appendChild(newNode)：新节点作为最后一个子节点添加；

- parentNode.insertBefore(newNode,refNode)：参考节点，新节点位于此节点之前添加；

document对象删除：

1>node.removeChild(childNode)：删除某个子节点，childNode必须是node的子节点；

2>由父节点删除其下属的某个子节点；

自定义对象：

1>自定义对象是一种特殊的数据类型，由属性和方法封装而成；

- 属性指与对象有关的值：对象名.属性名；

- 方法指对象可以执行的行为或可以完成的功能：对象名.方法名()；

2>创建自定义对象：

- 直接创建对象；

- 使用构造器创建对象；

- 使用JSON创建对象；

3>直接创建对象(直接创建Object对象)：

function f1() {

var tch = new Object();

tch.name = "Tom";

tch.age = 20;

tch.work = function() {

alert("Java");

}

alert(tch.name);

alert(tch.age);

tch.work();

}

4>使用构造器创建对象：语法：function ObjName(参数1,参数2,参数3,.....){}；

function f2() {

var c = new Coder("Marry",25,function(){alert("我写java")});

alert(c.name);

alert(c.age);

c.work();

}

function Coder(name,age,work) {

this.name = name;

this.age = age;

this.work = work;

}

5>使用JSON创建对象：

- JSON(JavaScript Object Notation)是一种轻量级的数据交换格式；

- 使用名/值对的方式定义，名称需要使用“”引起来，多对定义之间使用逗号隔开；

function f3() {

var stu = {"name":"zs","age":25,"work":function(){alert("我学Java")}};

alert(stu.name);

alert(stu.age);

stu.work();

}

事件概述：

1>事件：指页面元素状态改变，用户在操作鼠标或键盘时触发的动作；

- 鼠标事件；

- 键盘事件；

- 状态改变事件；

2>event对象：事件触发后将会产生一个event对象；

3>通过一个事件属性，可以在某个事件发生时对某个元素进行某种操作；

4>鼠标事件：

- onclick;

- ondblclick;

- onmousedown;

- onmouseup;

- onmouseover;

- onmouseout;

5>键盘事件：

- onkeydown;

- onkeyup;

6>状态事件：

- onload;

- onchange;

- onfocus;

- onblur;

- onsubmit;

7>在html属性定义中直接处理事件(onclick属性)；

8>后绑定事件(在页面加载之后)，将script代码接在body中；

9>后绑定事件(onload)，写在head中，window.onload是页面加载事件，在网页加载之后自动触发；

10>取消事件：onXXX = "return false;"。

event对象：

1>任何事件触发后将会产生一个event对象；

2>event对象记录事件发生时鼠标位置、键盘按键状态和触发对象等信息；

3>获取event对象，需要考虑浏览器兼容性；

- IE浏览器：js或者html代码中直接使用event；

- Firefox浏览器：html代码中直接使用event，js代码中不能直接使用event关键字；

4>在html代码中，在事件句柄定义时，使用event关键字将事件对象作为参数传入方法(解决兼容)；

5>对于event事件，经常需要获得事件源；

- 事件源：即触发事件的元素(事件的目标节点)；

- IE浏览器：event.srcElement；

- Firefox浏览器：event.target；

事件处理机制：

1>冒泡机制：当处于DHTML对象模型底部对象事件发生时会依次激活上面对象定义的同类事件处理；

2>可以取消事件的冒泡：

- event.stopPropagation();

- event.cancelBubble = true;

--------------------------------------------------------------------------------------------------------