开篇--JavaScript在web中的简单使用（一）

开头 ： 进入CSDN的时间好长了，一直以来无论是学习上还是工作上，碰到问题一般都是在CSDN上找到解决的办法，但是由于害怕写的东西有太多问题会受到嫌弃，所以一直以来不敢写博客，都是在笔记中记载。最近一直受到好友的鼓励，决定鼓起勇气，迈开第一步，我也开始学习写博客，希望以后的路上有更多好友相助，如果我写的文章有问题，多多指导！最近在学习java开发的知识，打算把学习过程中的笔记和心得总结一下，和大家分享分享。

JavaScript简介

javaScript是一种脚本语言（脚本语言其实就是一种轻量级的编程语言），是一种解释性的语言，因为其代码不需要进行预编译处理，在web中，JavaScript是直接嵌入在HTML页面中，由浏览器来执行；一般是由数行代码组成，主要是用来向HTML页面添加交互行为。javascript的主要作用就是用来添加页面动画效果，提供用户操作体验，一般应用在：嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、验证提交数据、监测访客的浏览器信息等。（注：javascript和Java并没有什么关系）

JavaScript的组成

javascript主要有三大组成内容：ECMAScript (核心) ，DOM(文档对象模型)， BOM(浏览器对象模型) 。

ECMAScript

ECMAScript包含基本语法、变量、关键字、保留字、数据类型、语句、函数等；ECMAScript 的五种原始数据类型：Undefind、Null、Boolean 、Number 、String（这边对Null和Undefined做一下区分，Null是指对象不存在，而Undefined是指对象存在，但是访问属性或者方法不存在即对象未初始化），对变量或者值可以调用typeof方法获取运算返回值对应是：undefind、object、boolean、mumber、string。 为什么null的返回值是object呢，因为javascript中把null当作对象的占位符，而原始数据类型的存储在栈中。ECMAScriptd的七种引用数据类型（七个对象）：String、Number、Boolean、Math、Date、Array、Regxp(正则表达式)，这些引用类型的数据都是存储在堆中。

DOM

DOM的全称是Document Object Model，包含整个html页面的内容。

BOM

DOM的全称是Browser Object Model，包含整个浏览器相关内容

JavaScript的语法

JavaScript变量的规范和平时使用Java时有点像：变量名称必须以字母或下划线开头，中间可以是数字、字符或下划线；变量名不能包含空格等符号；不能使用javascript关键字作为变量名。这边需要注意这几点：JavaScript严格区分大小写；JavaScript的变量是弱类型的，什么是弱类型呢，在JavaScript中，定义变量的时候不需要指定明确的变量类型，定义变量时都是使用var，而且使用起来也很方便，带var说明是局部变量，不带var说明是成员变量，所以使用起来不用那么纠结。

JavaScript的运算符也和Java大体上相同，有一个比较特殊的就是“==”和“===”，这个要怎么理解呢，“==”左右两个变量在做比较的时候会对类型自动进行转换；“===”在做比较的时候就不会进行自动转换而是直接判断。

JavaScript的函数有三种定义方式：

方式一
function add(a,b)
{ // 没有返回值，形参不需要声明类型
return a+b; // 可以返回
}
// alert(add(1,2));

// 方式二 

function 匿名函数， sub成为函数名称
var sub = function(a,b)
{
return a-b;
}
// alert(sub(10,8));

// 方式三 

使用Function对象 定义函数
// 语法 new Funtion(arg1,arg2 ... , body)

但是我们一般都是使用第一种和第二种方式。

BOM对象

到这里为止，我们聊的都是ECMAScript对象，下面我们谈一下浏览器对象BOM。

BOM对象中主要有Window对象，Navigater对象，Location对象，History对象，Screen对象；其中Window、History、Location相对比较重要，而Window是我们最经常用到的对象。Window 对象表示浏览器中打开的窗口，如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的window 对象。

window对象需要掌握的对象方法有：
alert();显示带有一段消息和一个确认按钮的警告框
setInterval();按照指定的周期（以毫秒计）来调用函数或计算表达式
clearInterval();取消由 setInterval() 设置的 timeout
setTimeout();在指定的毫秒数后调用函数或计算表达式
clearTimeout();取消由 setTimeout() 方法设置的 timeout
confirm();显示带有一段消息以及确认按钮和取消按钮的对话框
prompt();显示可提示用户输入的对话框

history对象需要掌握的对象方法有：
back(); 加载history列表中的前一个URL
foward(); 加载history列表中的下一个URL
go(); 加载history列表中的某一个具体的页面

Location对象常用的属性和方法有：
href;返回当前页面的URL
pathname;返回URL的路径名
assign();为当前的窗口加载新的文档

DOM对象

在JavaScript中，整个html文件都称作Document；而html中的所有的标签都称作元素（Element）,我们平时在标签内所做的那些设置称作属性（Attribute），开始标签和结束标签之间放置的内容称作这个标签的Text;而这所有的Document、Element、Attribute、Text统称为（节点）Node。

Document对象
每个载入浏览器的HTML文档都会成为Document对象。

Document常用对象方法：
getElementById();返回设置了该ID的对象
getElementByName();返回设置了该名称的所有对象的集合
getElementByTagName();返回设置了该标签名的所有对象的集合
后面两个方法获取之后需要遍历（这里补充一点，在JavaScript中集合就相当于java中的数组，可以直接通过下标获取对应的对象）
createTextNode(); 创建文本节点.
createElement(); 创建元素节点
后面的这两个方法一般用于在代码中动态地添加节点

Element对象：
我们所认知的html页面中所有的标签都是Element元素。

常用的element对象方法：
appendChild(); 在该元素中添加新的子节点，并且座位最后一个子节点
firstChild(); 返回该元素下的第一个子节点
getAttribute();通过传入属性名获取到改元素中对应属性的属性值
innerHTML；后面加等号并赋上对应的设置内容就是设置元素，后面不加等号就是获取该元素的设置内容
inserBefore(); element.lastChild(); element.setAttribute();

Attribute对象
我们所认知的html页面中所有标签里面的属性都是Attribute元素。

常用的属性对象的属性方法：
attr.value;获取该属性的属性值