JavaScript语言入门

JavaScript介绍

• Javascript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。JS是Netscape网景公司的产品，最早取名为LiveScript;为了吸引更多java程序员。更名为JavaScript。
• JS是弱类型，Java是强类型。
• 特点：
  1. 交互性（它可以做的就是信息的动态交互）
  2. 安全性（不允许直接访问本地硬盘）
  3. 跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）

JavaScript和html代码的结合方式

• 第一种方式：只需要在head 标签中，或者在body标签中， 使用script 标签 来书写JavaScript代码
• 第二种方式：使用script 标签引入 单独的JavaScript代码文件

变量

• JavaScript的变量类型：
  数值类型： number
  字符串类型： string
  对象类型： object
  布尔类型： boolean
  函数类型： function
• JavaScript里特殊的值：
  undefined 未定义，所有js变量未赋于初始值的时候，默认值都是undefined.
  null 空值
  NaN 全称是：Not a Number。非数字。非数值。
• JS中的定义变量格式：
  var 变量名;
  var 变量名 = 值;

关系（比较）运算

等于： == 等于是简单的做字面值的比较
全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型

逻辑运算

且运算： &&
或运算： ||
取反运算： !

• 在JavaScript语言中，所有的变量，都可以做为一个boolean类型的变量去使用。
• 0 、null、 undefined、””(空串) 都认为是 false；
• && 且运算。
  有两种情况：
  第一种：当表达式全为真的时候。返回最后一个表达式的值。
  第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值
• || 或运算
  第一种情况：当表达式全为假时，返回最后一个表达式的值
  第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值
• 并且 && 与运算 和 ||或运算 有短路。
  短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行

数组

数组定义方式

JS 中 数组的定义：
格式：
var 数组名 = []; // 空数组
var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素

函数

函数的二种定义方式

• 第一种，可以使用function关键字来定义函数。
  function 函数名(形参列表){
  函数体
  }

在JavaScript语言中，如何定义带有返回值的函数？
只需要在函数体内直接使用return语句返回值即可！

• 函数的第二种定义方式
  使用格式如下：

var 函数名 = function(形参列表) { 函数体 }

注：在Java中函数允许重载。但是在JS中函数的重载会直接覆盖掉上一次的定义。

函数的 arguments 隐形参数（只在function函数内）

就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。
隐形参数特别像java基础的可变长参数一样。
public void fun( Object … args );
可变长参数其他是一个数组。

那么js中的隐形参数也跟java的可变长参数一样。操作类似数组。

JS中的自定义对象

Object形式的自定义对象

• 对象的定义：
  var 变量名 = new Object(); // 对象实例（空对象）
  变量名.属性名 = 值; // 定义一个属性
  变量名.函数名 = function(){} // 定义一个函数

• 对象的访问：
  变量名.属性 / 函数名();

{}花括号形式的自定义对象

• 对象的定义：
  var 变量名 = { // 空对象
  属性名：值, // 定义一个属性
  属性名：值, // 定义一个属性
  函数名：function(){} // 定义一个函数
  };

• 对象的访问：
  变量名.属性 / 函数名();

js中的事件

• 什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

• 常用的事件：
  onload加载完成事件： 页面加载完成之后，常用于做页面js代码初始化操作
  onclick单击事件： 常用于按钮的点击响应操作。
  onblur失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。
  onchange内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
  onsubmit表单提交事件： 常用于表单提交前，验证所有表单项是否合法。

• 事件的注册又分为静态注册和动态注册两种：

• 什么是事件的注册（绑定）？
  其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。

• 静态注册事件：通过html标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。

• 动态注册事件：是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。

• 动态注册基本步骤：
  1、获取标签对象
  2、标签对象.事件名 = fucntion(){}

DOM 模型

• DOM 全称是Document Object Model 文档对象模型
  大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。

Document对象

• Document 对象的理解：
  第一点：Document它管理了所有的HTML文档内容。
  第二点：document它是一种树结构的文档。有层级关系。
  第三点：它让我们把所有的标签 都 对象化
  第四点：我们可以通过document访问所有的标签对象。

Document对象中的方法介绍

document.getElementById(elementId)
通过标签的id属性查找标签dom对象，elementId是标签的id属性值

document.getElementsByName(elementName)
通过标签的name属性查找标签dom对象，elementName标签的name属性值

document.getElementsByTagName(tagname)
通过标签名查找标签dom对象。tagname是标签名

document.createElement( tagName)
方法，通过给定的标签名，创建一个标签对象。tagName是要创建的标签名

注：
document对象的三个查询方法，如果有id属性，优先使用getElementById方法来进行查询
如果没有id属性，则优先使用getElementsByName方法来进行查询
如果id属性和name属性都没有最后再按标签名查getElementsByTagName

以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

节点的常用属性和方法

• 节点就是标签对象
• 方法：

通过具体的元素节点调用
getElementsByTagName()
方法，获取当前节点的指定标签名孩子节点

appendChild( oChildNode )
方法，可以添加一个子节点，oChildNode是要添加的孩子节点

属性：
childNodes
属性，获取当前节点的所有子节点
firstChild
属性，获取当前节点的第一个子节点
lastChild
属性，获取当前节点的最后一个子节点
parentNode
属性，获取当前节点的父节点
nextSibling
属性，获取当前节点的下一个节点
previousSibling
属性，获取当前节点的上一个节点
className
用于获取或设置标签的class属性值
innerHTML
属性，表示获取/设置起始标签和结束标签中的内容
innerText
属性，表示获取/设置起始标签和结束标签中的文本