Javascript基本介绍

我的一贯作风：首先，放一张图来表示我要说明的东西。

（一）
1.Javascript是什么？
JavaScript是一种基于对象和事件驱动的解释性的脚本弱类型语言，与HTML结合，增强功能，并提高与最终用户间的交互性能。大部分使用者将它用于创建动态交互网页，为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。
2.基本特点
a、解释执行，事先不编译；逐行执行，无需进行严格的变量声明；
b、简洁易用，可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序
c、基于对象，内置大量现成对象，编写少量程序可以完成目标
d、跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
3.用途
a、适合做哪些事情：
客户端数据计算，表单合法性验证；浏览器对象的调用，事件的触发；网页特殊显示效果制作
b、不适合做哪些事情：
大型应用程序，图像、多媒体处理，网络实时通讯应用
（二）组成部分

三大结构

1、语法
Javascript 必须嵌套在HTML文档中，才能使用
嵌入网页的三种方式
a、在定义事件时直接写入JavaScript脚本（在标签中写）

b、在网页中直接嵌入JavaScript

c、在网页中调用独立JavaScript文件(提倡)

     //引用外部js文件  

建议：写成单独的js文件有利于结构和行为的分离。 可放在网页任意位置，且一个页面中可放几个 它们之间不同部分的方法与变量可以共享的

数据类型

• 在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）在 或 每次出现时被自动创建
  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()通过属性获取属性节点