JavaScript-基础知识

JavaScript 简介

JavaScript是基于对象和事件驱动的脚本语言，作用在客户端（浏览器）。

JavaScript的特点:

1、交互性

2、安全性（不可以访问本地的硬盘）

3、跨平台性（浏览器就可以解析js语言）

JavaScript和java的不同

语法相仿，但JavaScript和Java一点关系都没有

Netscape（网景），静态效果。livescript（javascript的前身）

java诞生后，livescript升级，改名javascript

微软后来开发了一套jscript语言

之后找了 sun 微软 ecma（欧洲计算机制造协会）推出了现在的标准ECMAScript标准

JavaScript是基于对象，java是面向对象的。

JavaScript只需要解析就可以执行，而java需要先编译成字节码文件，再执行。

JavaScript是一种弱类型的语言，java是强类型语言

一个完整的JavaScript实现由以下三个部分组成

1、核心（ECMAScript JS的语法，函数，变量）

2、文档对象模型（DOM Document Object Model）

3、浏览器对象模型(BOM Browser Object Model)

JavaScript的语法

JavaScript和HTML的结合方式

HTML的<Script type=“text/javascript”>js的代码</Script>标签用于把JavaScript插入在HTML页面中

1、内部JS程序，在HTML的源码中

<Script type=“text/javascript”>

//JS内容

alert(1);

</Script>

2、使用script标签中的src参数，调用外部的JS

<Script type=“text/javascript” src=“外部js文件的路径”>

</Script>

!在引用外部js的script标签间不能编写任何JavaScript代码 标签可以放在Html文件的任意位置

javascript的语法

关键字

      var 声明变量

标示符

      和java一样

注释

      和java一样

变量

      声明变量，只使用一个关键字 var num = 999; var str=“baby”;

5种基本数据类型

      Undefined、Null、Boolean、Number 和 String

      String 字符串类型

      js中双引号和单引号都代表字符串

      Number 数字类型

      不区分整数和小数

      Boolean 布尔类型

      Null 空，给引用赋值的

      Undefined 未定义（声明变量，没有赋值）

      声明变量，使用var关键字

      typeof() 判断当前变量是什么类型的数据

运算符

      JS的运算符

      1、算数运算符

      0或者null是false，非0或非null是true，默认是用1表示，大于零的数字都是ture

      2、赋值运算符

      和java一样

      3、比较运算符

      == 比较值是否相同

=== 比较值的类型是否相同

      4、逻辑运算符

      和java一样

      5、三元运算符

      条件？值1：值2

js的数组

      声明数组

      var arr = [12,22,43];

      var arr = new Array(5) 声明数组，长度是5

      var arr = new Array(2,3,4) 声明数组，元素是2 , 3 , 4 ,

数组的属性

      长度 length

      数组的长度随添加元素的个数动态改变

数组的方法

      join(s) 传入一个字符标识，作为数组的分隔符，返回一个带传入分隔符的包含数组所有元素的字符串。

      concat() 拼接数组或者元素，返回一个新数组，或者将元素添加到数组中。

      pop() 删除最后一个元素，返回最后一个元素

      push() 向末尾添加一个元素，返回新数组的长度

      sort() 排序

---

js的方法

      通过function关键字 声明方法

      function 方法名称（参数列表）{
方法体
return null；
}

JS的动态函数

---

JS中全局变量和局部变量

      全局变量：定义<script>标签中的变量，在页面的任意位置上都能拿到。

      局部变量：定义在方法内部的变量

      使用js提供的内置对象Function

---

js的对象和API

      String对象

      属性:length 长度

      方法：

      和html相关的方法

      bold() 粗体

      fontcolor() 字体颜色

      fontsize() 设置字体大小(1-7)

      italics()斜体

      sup() 上标

      sub() 下标

      link(url) 设置链接

      和java中类似的方法

      charAt() 返回指定位置的字符

      indexof() 返回字符的位置

      substring(strat,stop) 按下标位置截取字符串(从strat位置开始，到stop位置结束，不包含stop位置)

      substr(start，length）截取字符串（从start位置开始，按length的长度截取）

去除字符前后两端的空格，返回一个字符

---

Date对象

      var date = new Date(); 当前时间

方法

      tolocaleString()

显示当地日期格式

      getFullYear()

获取年份

getMonth()

获取月份（0-11） 需要+1

      getDate()

获取当年前月的日期（几号）

      getDay()

获取星期几

      getTime() 毫秒值

      setTime() 根据毫秒设置时间

      Date.prase(); 可以根据日期字符串，返回毫秒值

---

Math对象

      ceil() 向上取整

      floor() 向下取整

      round() 四舍五入

      random() 获取（0-1之间的）随机数

RegExp对象

      new RegExp(“表达式”)

      var reg = /表达式/;

      var reg = /^表达式$/;

校验方法

      reg.exec（string）

      reg.test(string);

如果匹配返回true，不成功返回false

---

全局函数

      使用全局函数，不需要任何对象

      eval()

      解析字符串，执行js代码

      isNaN()

      判断是否非数字值

      parseInt()

      解析字符串，返回整数；

---

BOM 浏览器对象模型

Brower Object modle

Window 窗口对象

      alert(“提示内容”)弹出提示框

      confirm(“参数”)询问框

      提供两个按钮，确定和取消 点击确定返回true 点击取消返回false

      moveBy() 移动浏览器（有时候浏览器为了安全，会禁用该方法）

      setIntval(“函数”,毫秒值) 每隔毫秒值执行一次函数，返回一个ID值

      setTimeout(“函数”,毫秒值)到毫秒后执行一次函数，返回一个ID值

Navigator 和浏览器版本相关的对象

      userAgent 获取浏览器的相关信息

      window.navigator.userAgent

Screen 和屏幕相关的对象

History 和浏览器历史相关的对象

      back() 返回上一个页面

      forward() 返回下一页

      go() 传参数

      go(1) 等于forward

      go(-1) 等于back

Location 和浏览器地址相关的对象

      herf 获取和设置浏览器的路径

      location.herf = "地址"设置地址

      location.protocol 返回当前链接的协议

DOM 文档对象模型

document object model

文档：标记型文档(html/xml)

对象：封装属性和行为（方法）

模型：共性特征的体现

DOM解析HTML的方法，是把HTML全部（元素（标签）、文本、属性）封装成DOM对象

<span id="spanid">文本</span>

DOM想要操作标记型文档需要先解析。（解析器）

DOM解析HTML文档（浏览器充当了解析器的角色，解析HTML

浏览器如何通过DOM解析HTML

DOM的三个级别和DHTML

level1、将HTML封装成文件对象

level2、在level1的基础上添加新的功能，例如对事件和CSS样式的支持

level3、支持xml1.0的一些新特性

DHTML

动态的HTML，它不是一门语言，是多项技术综合体的简称

包括html css dom javascript

这四种语言的职责

html： 负责提供标签，封装数据，这样方便操作数据

css： 负责提供样式，对标签中的样式进行定义

DOM： 负责将标签内容进行解析，封装成对象，对象中具有属性和行为

Javascript：负责提供程序设计语言，对页面中的对象进行逻辑操作

Document 对象：代表整个文档

方法：

document.getElementById(“ID名称”);

通过元素的ID的属性获取元素（标签）的对象。

document.getElementByName(“name属性”);

通过名称获取元素对象的集合(返回数组);

document.getElementTagName(“标签名称”);

通过标签名称获取对象的集合(返回数组)

write(“文本内容（html的标签）”);

把文本内容写到浏览器上

document.createElement(“元素名称”);

创建元素对象

document.createTextNode(“文本内容”);

创建文本内容

document.appendChild(“子节点”);

Element 对象:

获取元素对象

使用document.getElementId(“标签ID名称”)方法可以获取到标签的对象，同时也可以访问对象的属性（元素）。

获取到对象后，使用getAttribute(“属性名”) 获取属性的值。

使用setAttirbute(“属性名”，“属性的值”)修改属性的值

removeAttribute(“属性名”)删除属性

获取元素下的所有的子节点

document.getElementById(“ID名称”).getElementByTagName(“子节点的标签名”)

Node： 节点对象

nodeName:节点名称

nodeType：节点类型

nodeValue：节点的值

	元素	属性	文本
nodeName	大写的标签名称	属性名称	#text
nodeType	1	2	3
nodeValue	null	属性的值	文本内容

parentNode 获取父节点（永远是一个元素节点）

IE6-8	IE9-11 Chrome FireFox
firstChild 第一个节点	firstElementChild第一个节点
lastChild最后一个节	lastElementChild 最后一个节点
nextSibling 下一同级节点	nextElementSibling?下一同级节点
previousSibling 上一同级节点	previousElementSibling?上一同级节点

方法

hasChildNodes() 检查是否包含子节点

hasAttributes() 检查是否包含属性