我的一贯作风：首先，放一张图来表示我要说明的东西。
（一）
1.Javascript是什么？
JavaScript是一种基于对象和事件驱动的解释性的脚本弱类型语言，与HTML结合，增强功能，并提高与最终用户间的交互性能。大部分使用者将它用于创建动态交互网页，为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。
2.基本特点
a、解释执行，事先不编译；逐行执行，无需进行严格的变量声明；
b、简洁易用，可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序
c、基于对象，内置大量现成对象，编写少量程序可以完成目标
d、跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
3.用途
a、适合做哪些事情：
客户端数据计算，表单合法性验证；浏览器对象的调用，事件的触发；网页特殊显示效果制作
b、不适合做哪些事情：
大型应用程序，图像、多媒体处理，网络实时通讯应用
（二）组成部分
三大结构
1、语法
Javascript 必须嵌套在HTML文档中，才能使用
嵌入网页的三种方式
a、在定义事件时直接写入JavaScript脚本（在标签中写）
<input type="button" value="点我去百度" onclick="window.open('http://www.baidu.com')" />
b、在网页中直接嵌入JavaScript
<input type="button" value="点我去百度" onclick="goBaiDU()" />
<script type="text/javascript">
function goBaiDU(){
window.open('http://www.baidu.com');
}
</script>
c、在网页中调用独立JavaScript文件(提倡)
<script type="text/javascript" src="../js/01_.js"></script> //引用外部js文件
<input type="button" value="点我去百度" onclick="goBaiDU()" />
建议：写成单独的js文件有利于结构和行为的分离。<script> </script> 可放在网页任意位置，且一个页面中可放几个<script> </script> 它们之间不同部分的方法与变量可以共享的
数据类型
- 在HTML中大小写是不敏感的，但是在JavaScript程序中大小写是敏感的
- 分类
- a 、String类型
（1）字符串常量首尾由单引号或双引号括起
（2）JavaScript 中没有字符类型，即无char
（3）特殊字符：必须加上右字符串中部分划线\
特殊字符
- b、Null、Undefined
（1）Null在程序中代表变量没有值
（2）Undefined代表变量的值尚未指定 - c、数组——定义一系列变量
（1）数组中元素的类型可以不一致，数组元素也可以是一个数组，即多维数组；
（2）数组长度可以随意改变的，定义数组长度时，不会固定死。之后，也可以不断地添加元素，不会报错的； - d、函数
函数的定义:
function 函数名 (参数){
函数体;
return 返回值;
}
（1）可以使用变量、常量或表达式作为函数调用的参数
（2）函数由关键字function定义
（3）函数名的定义规则与标识符一致，大小写是敏感的
（4）返回值必须使用return
其余的和大部分语言一样，有：数据强制性转换、运算符、控制语句。在此不详细说明
2、对象
JavaScript是一种基于对象语言，对象是JavaScript中最重要的元素。对象是一系列属性与方法的集合。
属性,可以是基本数据类型，也可是复合数据类型。
访问对象属性与方法，通过.号
JavaScript包含四种对象：
- 内置对象 ：Date,Math,String,Array…
- 自定义对象：Person,Card
- 浏览器对象： window,document…
- ActiveX对象 ：ActiveXObject（AJAX中讲到）
3、BOM（Browser Object Model）浏览器对象模型
BOM对象
-
Window对象
（1）window 对象是 JavaScript 层级中的顶层对象
（2）代表一个浏览器窗口或一个框架
（3）在 <body> 或 <frameset> 每次出现时被自动创建
A、属性
status 状态栏
opener 获取创建当前窗口的窗口的引用
B、window对象的方法
open() 打开新窗口
alert() 显示一个警告框
confirm() 选择确定。
prompt() 输入框
setTimeout() 一次性定时器，延时器
setInterval() 周期性定时器，时间 -
Location 对象
href 设置或获取整个URL为字符串
reload(） 重新装入当前页面，常用于刷新 -
screen 对象
availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏
availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏
height 获取屏幕的垂直分辨率
width 获取屏幕的水平分辨率 -
Document对象属性：
forms 获取页面所有表单对象
eg:window.document.forms.length; //window.document.forms相当于一个数组
images 获取页面所有图片对象
links 获取所有含有href属性的超链接对象
referrer 获取将用户引入当前页面的位置URL
bgColor 设置或获取表明对象后面的背景颜色的值。
fgColor 设置或获取文档的前景(文本)颜色。
方法：
write() 在指定窗口的文档中写入一个或多个 HTML表达式
- History对象
length 获取历史列表中的元素数目
go(0) 从历史列表中装入URL，参数为0时表示浏览器刷新 - Navigator对象
appName 获取浏览器的名称
appVersion 获取浏览器运行的平台和版本
4. DOM （Document Object Model）文档对象模型
- DOM树
举个栗子：
DOM树
如上图所示，HTML文档是由节点构成的集合，四种常见的DOM节点
（1）文档节点document
（2）元素节点——标签 Element
（3）文本节点——文字内容 TextElement
（4）属性节点——元素属性 AtrributeElement
- DOM属性
（1）文档里的每个节点都有以下属性。
nodeName:一个字符串，其内容是给定节点的名字。 var name = node.nodeName;
- 如果节点是元素节点，nodeName返回这个元素的名称
- 如果是属性节点，nodeName返回这个属性的名称
- 如果是文本节点，nodeName返回一个内容为#text 的字符串
注:nodeName 是一个只读属性。
（2）nodeType：返回一个整数，这个数值代表着给定节点的类型。
nodeType 属性返回的整数值,常用的有三种：
Node.ELEMENT_NODE ---1 -- 元素节点
Node.ATTRIBUTE_NODE ---2 -- 属性节点
Node.TEXT_NODE ---3 -- 文本节点
nodeType 是个只读属性
（3）
nodeValue：返回给定节点的当前值（字符串）
如果给定节点是一个属性节点，返回值是这个属性的值。
如果给定节点是一个文本节点，返回值是这个文本节点的内容。
如果给定节点是一个元素节点，返回值是 null
nodeValue 是一个 读/写 属性，但不能对元素节点的 nodeValue 属性设置值，
但可以为文本节点的 nodeValue 属性设置一个值。
- 查找元素节点
- getElementById() 返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.
- 返回是节点集合：
getElementsByName() 寻找有着给定name属性的所有元素
getElementsByTagName() 寻找有着给定标签名的所有元素
- 查看是否存在子节点
hasChildNodes()
该方法用来检查一个元素是否有子节点，返回值是 true 或 false.
var booleanValue = element.hasChildNodes();
文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false. - 替换子节点 replaceChild()
把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针。
如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中 - 查找属性节点和值
getAttribute()
返回一个给定元素的一个给定属性节点的值
var attributeValue = element.getAttribute(attributeName);
getAttributeNode()通过属性获取属性节点
网友评论