javaScript

JAVAScript

什么是javaScript

javaScript是由网景公司引发出来的一种在Navigator浏览器上执行的程序语言

     是一种基于对象 和事件驱动 的简单并且有安全性的脚本语言

javaScritp组成

1. ECMAScript  是核心

2. DOM：文档对象模型，把整个页面规划成由节点层级构成的文档

3. BOM:  浏览器对象模型，对浏览器窗口进行访问和操作

特点：

1.是一种脚本语言，不需要先编译，只需要一个解释器就可以执行

2.基于面向对象的，没有继承，有封装，没有继承也就没有多肽

3.事件驱动，网页中的某种操作叫做事件，事件发生，可能会引起事件的响应

4.简单：只有一种变量类型 var

5.安全性：不能访问本地硬盘，不能将数据存入服务器，不能对网络文档进行修改和删除

只能通过浏览器实现信息的浏览和动态的交互

6.跨平台：依赖于浏览器本身，于操作平台无关

缺点：如果浏览器对 javaScript的支持不够的话，效果可能显示不全面，或者不显示

和JAVA的区别：

1.不同公司前身不同，一个netscape公司的，为了扩展浏览器开发的语言

JAVA是SUN公司的OAK语言

2.基于对象，和面向对象的区别，没有继承，没有多肽

3.变量类型强弱不同

1. JAVAScritp 的引入方式

     1.直接在head中写  <script > </script>

  可以再中间写  alert ("好好学习")；

     2. 创建 javascript文件， 通过

<script  src="文件地址"  type="引入类型"  charset="引入文件的编码”>

2中引入的方式不能合在一起进行编写

alert(“String”)；  表示要提示的内容

2. javaScript中的运算符

基本运算符基本一致

== 首先是先进行数据类型比较，如果类型不一致，则统一转换成number

在进行比较，一样返回true，不一样返回false

=== 等同符  首先进行数据类型的比较：类型不一致直接返回F，一致比较

3. 将内容输出在屏幕上

dodument.writer

4. JAVAScript 中函数声明的方式

    声明方式二

声明方式三

console.log(“需要输出的内容"),输出到浏览器的控制台

JS中的函数中是可以有返回值的

5.JS中的变量

1.JS中的变量区分大小写

2.JS中的变量可以是可以重复的，但重复的变量会覆盖

3.JS中的分号可以省略，但是不建议这么用

4.JS中不区分单引号和双引号

6.JS中的数据类型

1.number 数字类型

2.String 字符串类型

3.Boolean 布尔类型

4.Object 类型

5.JAVA中也存在强制转型

5.JAVAScript中的数组

1.数组的声明

1.  var  array1 = new Arrary();

2.  var  array2 = new Array(56);  如果声明了并没有添加内容，会是undefined

3.  var  array3 = new Array(1,2,3,4,5,6)

4.  var  array4 = [3,4,6,7];  不能使用： var  array5 = [6]; 和 var  array6 = [];

undefined(便利会显示undefined)  =   d

empty（直接打印会显示 empty） =

字符串的空（加了字符串显示会把empty显示为 字符串空）

2. 数组的扩容和缩小

1. array2.length = 3; 自动砍掉后面的

2. array3.length= 80; 会补充空的字符串 “”

3.数组中的便利

1. for(var i;i<array.lenth:i++){console.log(array[i])}

2. for(vaf  i    in   aray){console,log(array[i])}

4.数组中的常用方法

1. pop() 弹栈方法，删除并返回顶端的

2.push() 压栈方法，返回新的长度和在末尾添加

3. splice() 删除和添加方法

6. JS中常用的对象  Date \  String \ Math \  Global 对象

1.Date 中的方法

1.getYear)    当前的年 - 1900年

2.getMonth()  当前月，0-11

3.getDate() 当前几号

4.getDay() 星期几 ，0是星期天

5.getFullYear() 得到全年的表示形式

6.toLocaleString() 得到本地的时间表示形式

2.String 中的方法

1. substr(2) 从2开始截取，一直到最后

2. substr(1,2) 从第一位开始截取，截取的长度 size

3. substring(2) 从2开始截取，一直到最后

4.substring(1,2) index , begin

3. Math 中的方法

1. floor(D)地板

2. ceil(D)天花板

3. round(D) 随机数

4.Global 中的方法，主要是eval方法，将字符串转成代码

javaScript中的事件

什么是事件？ 是可以被javaScript侦测到的行为

总结事件的一般使用情况：

onchange \ onkeydown \ onkeyup \ onblur \ onfocus 结合单、双行文本框使用

onload 一般作用在body

onmouseover \ onmouseout \ onmousemove  结合div元素使用

BOM和DOM 的结构

什么是BOM，是Browser的简写，是浏览器对象模型

BOM是由一系列的对象组成，是访问，控制，修改浏览的属性的方法

BOM没有统一标准，可以自己定义，BOM的顶层是Window对象

什么是DOM，是Document  Object  Model的简写，是文档对象模型

DOM是一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示

DOM是一系列的对象组成，是访问、检索、修改SHTML文档内容与结构的标准方法

DOM是由W3C制定与维护，可以跨平台，顶层是Document对象

DOM中的常用方法：

1. window . alert() 只有确定的弹窗

2. window . confirm() 有取消的弹框，有返回值 类似JAVA中的Boolean类型

3. window . prompt() 含有输入内容的弹框，返回值是输入的内容

4. window . setInterval( A, B) 设定该方法B间隔时间执行一次A

5. window . clearInterval() 设定清除间隔方法

BOM中常用的对象

1. location 对象

1. location . host   主机名+端口号

2. location . hostname 主机名

3. location . port 端口号

4. location . href  页面跳转

5. location . reload() 重新加载页面

2. History 对象学习

1. history . length  返回浏览器历史列表中 URL的数量

2. history . forward();  前进一个网页

3. history . back();  后退一个网页

4. history . go(0) ; 0代表刷新，-3代表后退3个网页，3代表前进3个网页

3. Screen对象学习

1. screen.width 得到屏幕的宽

2. screen. height 得到屏幕的高

4. Navigator 对象学习

1. navigator . userAgent; 获得用户的代理对象

DOM对象学习：

DOM中操作的内容

1.查询元素

2.操作文本

3.操作属性

4.操作CSS样式

5.操作元素

1.直接获得DOM对象的方式

1.根据ID名获得 通过 document.getElementById(" id名称")

2.根据标签的获得， document . getElementByTagName("标签名“)；

这里获得的是一个数组

3.通过Class元素获得  document. getElementByClassName ("class名")

获得的是多个，是一个数组

4.通过Name属性获得， getElementByName("NAME名");

2.间接获得元素对象的方式

1. 获得子节点对象

1.获得父节点的对象

2.通过父节点获得子节点

2.获得父节点

1.获得子节点

2.通过子节点的 parentNode获得父节点

3. 获得兄弟节点

1.获得当前节点

2.获得上一个节点包括空节点 previousSibling;

3.获得上一个节点 previousElementSibling;

4.获得下一个节点包含空节点，nextSIbling;

5.获得下一个节点不报刊空节点，nextElementSibling;

3.DOM中对象操作元素

1.首先需要获得元素的属性

 var  inp = document.getElementById("inp");

        inp.type="button" 修改了type的属性

 inp.value=XXX 修改了value的属性

需要注意的是，如果需要修改元素的属性，那么sytle只支持行内式写法

2.通过添加class名称，直接获得div的class进行修改

但是这里需要注意的是就近原则

DOM中操作元素节点的内容

1.首先通过 var con = document.get的方法，得到标签

2. con.innerText 只是获得 标签内的文本的内容

3. con.innerHTML  获得全部的东西，包括空格和标签

4. con.innerText = XXX ,赋予文本值，会覆盖，不会识别HTML的代码

5.con.innerHTML = XXX, 也是赋予文本值，会覆盖，会识别HTML的代码

6. innerText += XXX,  innerHtml +=XXX,实现内容的累加

1. innerHTML, innerText, value

innerHTML,  innerText 通常使用到双标签上

例外情况  select 标签、 textarea 标签 也是用value获得的属性

value : 通常是单标签 ：input

2.创建一个节点对象

Form表单中 的readonly,和disabled

1.readonly 是原色的 只读框，数据可以提交到后台

2. disabled 是灰色的只读框，数据不能提交到后台

3.表单的提交形式校验