javaScript（适用于初学者）

javaScript

语言，在浏览器中运行，实现动态效果

什么是脚本语言？
脚本语言是为了缩短传统的编写-编译-链接-运行(edit-compile-link-run)过程而创建的计算机编程语言。

1、脚本语言(JavaScript，VBscript等)介于HTML和C,C++,Java,C#等编程语言之间。
HTML通常用于格式化和链接文本。而编程语言通常用于向机器发出一系列复杂的指令。
2、脚本语言与编程语言也有很多相似地方，其函数与编程语言比较相像一些,其也涉及到变量。
与编程语言之间最大的区别是编程语言的语法和规则更为严格和复杂一些.
3、与程序代码的关系：脚本也是一种语言，其同样由程序代码组成。
4、脚本语言是一种解释性的语言,例如Python、vbscript,javascript等等,它不像其他语言可以编译成二进制代码,
以可执行文件的形式存在，脚本语言不需要编译，可以直接用，由解释器来负责解释。
5、脚本语言一般都是以文本形式存在,类似于一种命令。

优点：
快速开发：脚本语言极大地简化了“开发、部署、测试和调试”的周期过程。
容易部署:大多数脚本语言都能够随时部署，而不需要耗时的编译/打包过程。
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、
平板电脑和智能手机等设备。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行

变量
是一种引用内存位置的容器，用于保存在执行脚本时可以更改的值。
变量的命名：
变量名必须以字母或下划线 (_) 开头
变量名可以包含数字，但是不能以数字开头
由于JavaScript区分大小写，所以可用的字母包括A到Z（大写）和a到z（小写）的字符
不能使用JavaScript的关键字保留字

定义变量、初始化、赋值
1.定义变量
关键字:var
例:var num;
也可以同时声明多个变量，各个变量之间用逗号隔开。
2.初始化变量
在定义变量的时候，就给值 如：var num=1;
3.给变量赋值
(1)定义变量: var username;
(2)变量赋值: username=“张三”;

对象类型
（Object）JS中的所有事务都是对象
document.write(typeof(num)+"<分支语句，且循环语句；
while do ,while for,continue,break;br />");
在 JavaScript 中，对象是拥有属性和方法的数据。

1.属性和方法
属性是与对象相关的值。
方法是能够在对象上执行的动作。
举例：汽车就是现实生活中的对象。
汽车的属性：名称、型号、重量、颜色。
汽车的方法：启动、驾驶、刹车

2.JavaScript中的对象
例:var message=“Hello World!”
实际上已经创建了一个JavaScript字符串的对象，字符串对象拥有内建的属性length。length=5
属性：txt.length=5;
方法:txt.indexof()
txt.replace()

3.创建JavaScript对象
JavaScript 中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。
使用字面量表示法(字面量表示如何表达这个值,一般除去表达式，给变量赋值时,等号右边都可以认为字面量）
方法：将成员信息写到{}中,并赋值给一个变量,此时这个变量就是一个对象
可以给对象的成员进行赋值,也可以获取对象的成员信息。
调用对象的方法
person2.msg();
通过构造函数方式创建(使用对象构造器)
方法：var obj=new 函数名();
单行注释以 // 开头。
多行注释以 /* 开始，以 */ 结尾。
console.log©;
alert©;
JavaScript数据类型转换
1.转换为字符串类型
2.转换成数字型
3.转换成布尔类型
parseFloat():转化为小数
NaN不是整数 isNaN():判断一个数是不是整数
tostring()不适合null和underfined
var scores1=new Array(20,30,40,50,60);
document.write(“scores1:”+scores1+"
");

函数：系统函数和自定义函数

1.系统函数
parseInt():转化为整型
parseFloat()；转化为小数
indexof(value,fromindex):返回字符串首次出现的位置
reverse():反转
substring():截取字符串
isNaN():验证不是数字
2.自定义函数
语法:function 函数名称(参数列表){
}

Ajax
即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。
Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新技术）。
传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。

同步方式与异步方式的区别：
同步方式发送请求：发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，客户端会一直处于等待过程中。
异步方式发送请求：发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。

AJAX引擎会在不刷新浏览器地址栏的情况下，发送异步请求
使用JavaScript获取浏览器内置的AJAX引擎（XMLHttpRequest对象）
使用js确定请求路径和请求参数
AJAX引擎对象根据请求路径和请求参数进行发送请求
服务器接收到Ajax引擎的请求进行处理：
服务器获得请求参数数据
服务器处理请求业务（调用业务层代码）
服务器响应数据给Ajax引擎
Ajax引擎获得服务器响应的数据，通过执行JavaScript的回调函数将数据更新到浏览器页面的具体位置：
通过设置给Ajax引擎的回调函数获取服务器响应的数据
使用JavaScript在指定的位置，显示响应的数据，从而局部修改页面的数据，达到局部刷新的目的

3.函数调用
触发事件的时候调用方法
js代码方法内调用
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。
JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
JSON 具有自我描述性，更易理解
JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。

1.JSON 语法规则
数据在名称/值对中
数据由逗号分隔
大括号保存对象
中括号保存数组

2.JSON 名称/值对
JSON 数据的书写格式是：名称/值对。
3.JSON 值
JSON 值可以是：数字、字符串、逻辑值、数组、对象、null
JSON 对象使用在大括号({})中书写。
对象可以包含多个 key/value（键/值）对。
key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
key 和 value 中使用冒号(:)分割。
每个 key/value 对使用逗号(,)分割。

2.访问对象值
①可以使用点号（.）来访问对象的值
②也可以使用中括号（[]）来访问对象的值

3.循环对象
可以使用 for-in 来循环对象的属性

4.嵌套 JSON 对象
JSON 对象中可以包含另外一个 JSON 对象
5.json 对象和 json 字符串的区别：
json 对象:var str1 = { “name”: “zhangsan”, “sex”: “man” };
json字符串:var str2 = ‘{ “name”: “wangwu”, “sex”: “man” }’;
json数组
JSON 数组在中括号中书写。
JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
1.数组作为 JSON 对象

实例：[ “Google”, “Tengxun”, “Taobao” ]
2.JSON 对象中的数组
{
“name”:“zhangsan”,
“age”:20,
“hobby”:[ “swimming”, “running”, “playgame” ]
}

我们可以使用索引值来访问数组：
x = myObj.hobby[0];
可以使用for循环或者 for-in 来访问数组
JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
语法：JSON.parse(text[, reviver])
参数说明：text:必需， 一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。
把 JSON 文本转换为 JavaScript 对象
JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。
eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。
必须把文本包围在括号中
例：var obj = eval ("(" + txt + “)”);
var txt=’{“user”:[’+
‘{“account”:“admin”,“pwd”:“admin”},’+
‘{“account”:“user”,“pwd”:“user”}]}’;
为什么使用 JSON？
对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用
JS中的两大核心；BOM和DOM
DOM：文档对象模型 JS去操作DOM树结构(JS操作HTML)
BOM:浏览器对象模型 JS操作浏览器
注意:由于window对象表示当前窗口对象,可以将对象省略。

常见方法：
1.alert(); 弹出对话框
2.confirm():询问确认的对话框(确定和取消按钮)
3.prompt():提示用户输入的对话框 返回用户输入的字符串
4.open():打开新的浏览器窗口 加载给定的URL地址
5.close():关闭浏览器窗口
常见的属性:
1.history:客户端访问过的URL信息(历史记录)
2.location:当前的URL信息
1.onload ：网页加载事件(加载DOM树结构 图像 css)
2.onmouseover:鼠标移动到某个元素上面
3.onclick:当用户单击某个对象的时候执行的操作
4.onkeydown:键盘的按键事件
5.onchange:内容发生变化触发的事件
1.onload ：网页加载事件(加载DOM树结构 图像 css)
2.onmouseover:鼠标移动到某个元素上面
3.onclick:当用户单击某个对象的时候执行的操作
4.onkeydown:键盘的按键事件
5.onchange:内容发生变化触发的事件
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

1.getElementByID方法
它是document对象特有的函数。该方法返回一个与那个有着给定id属性值的元素节点对应的对象。
2.getElementsByTagName方法
可返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。
该方法也只有一个参数，该参数是标签的名字。
3.getElementsByClassName方法
HTML5 DOM中新增的一个方法。这个方法让我们能通过class属性中的类名来访问元素。
4.getElementsByName方法
getElementsByName() 方法可返回带有指定名称的对象的集合
该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），
所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=新样式
getAttribute方法只有一个参数，我们要查询的属性的名字。
该方法不属于document对象，只能通过元素节点对象调用。
setAttribute方法允许我们用属性节点的值做修改。
与getAttribute一样，setAttribute也只能用于元素节点。
setAttribute()方法需要我们向它传递两个参数：obiect.setAttribute(attribute,value)
通过父节点删除子节点removeChild()；

创建一个元素节点:
1). createElement(): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串.
方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1.
新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.

2. 创建一个文本节点:
1). createTextNode(): 创建一个包含着给定文本的新文本节点. 这个方法的返回值是一个指向新建文本节点引用指针.
它是一个文本节点, 所以它的 nodeType 属性等于 3.
方法只有一个参数：新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里

3. 为元素节点添加子节点:
1). appendChild(): var reference = element.appendChild(newChild):
给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点.
方法的返回值是一个指向新增子节点的引用指针.

4. 插入节点:
1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是
element 元素的一个子节点。

5 删除节点:
从一个给定元素里删除一个子节点
格式：var reference = element.removeChild(node);
返回值：返回值是一个指向已被删除的子节点的引用指针。
注意：某个节点被 removeChild() 方法删除时，这个节点所包含的所有子节点将同时被删除。