JS的学习

一、JavaScript的简介

【1】为什么学习 JavaScrip

1、html+css 只是可以实现静态的页面无法实现动态的效果

作用：1表单的校验

2、背景图片的更换

3、操作节点的信息

【2】JavaScript的概念

JavaScript一种直译式脚本语言， 是一种动态类型、 弱类型、基于原型的语言，内置支持类型

【3】JavaScript组成 

a.ECMAScript：JavaScript的核心

b.文档对象模型（DOM）：DOM（文档对象模型）是 HTML 和XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档

c.浏览器对象模型（BOM）对浏览器窗口进行访问和操作

【4】JavaScript语言的特点

 1.脚本语言

  脚本语言是一种简单的程序，是由一些ASCII字符构成，可以使用任何一种文本编辑器编写。一些程序语言（如C、C++、Java等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器就可以执行。

 脚本语言是指在web浏览器内有解释器解释执行的编程语言，每次运行程序的时候，解释器会把程序代码翻译成可执行的格式。

2、基于对象的语言

  面向对象有三大特点（封装，继承，多态）却一不可。

  通常“基于对象”是使用对象，但是无法利用现有的对象模板产生新的对象类型，也就是说“基于对象”没有继承的特点。没有了继承的概念也就无从谈论“多态”

3. 事件驱动：

  在网页中执行了某种操作的动作，被称为“事件”(Event)，比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

4、简单性

  变量类型是采用弱类型，并未使用严格的数据类型。   var a,b,c;  a=123;  b=“abc”;  a=b;

5、安全性

  JavaScript不能访问本地的硬盘，不能将数据存入到服务器上，不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互

6、跨平台性

  JavaScript依赖于浏览器本身，与操作平台无关，

 只要计算机安装了支持JavaScript 的浏览器（装有JavaScript解释器），JavaScript 程序就可以正确执行。

缺点

  各种浏览器支持JavaScript的程度是不一样的，支持和不完全支持JavaScript的 浏览器在浏览同一个带有JavaScript脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。

二、Js 的引入方式

引入的方式一、

<script type="text/javascript">

            /*网页中的弹框*/

        alert("引入的方式一");

</script>

js引入的方式二、

 type:引入文件的类型 src： 引入文件的路径  charset:指定引入的编码

<script type="text/javascript"

src="js/test.js" charset="UTF-8" ></script>

注意：引入js 的时候两种引入方式千万不要二合一

三、js 中的变量

【1】JS中变量的声明

    var  变量名=值；

【2】JS中变量的使用注意的事项

A、js中的变量的名称和java中标识符的命名保持一致就可以了。

B、js中变量名称是可以重复的，但是后者的名称会把前者的名称值覆盖

C、js中末尾即使没有分号结束也是可以的，但是不推荐大家这样书写。

四、JS 中的数据类型

1.基本数据类型(四种)

a.number（数字类型的数据）

b.string（字符串类型）

c.boolean（布尔数据类型）

d.object（对象类型） 

2.JS 中特殊数据类型（三种） 

a.undefined(未定义)

b.NaN(不是一个数字) not  a  number

c.null(空对象)

五、JS 中的运算符

1.算数运算符

  +  -  *  /  %  ++  --

2.  逻辑运算符 

  &  |  !  &&  ||  ^  <  >　　　＜＝　　 

＝　　　！＝

 3. 连接符

4.连接符

  ＋

5.特殊运算符

a.(==)等值符

  先比较类型  如果类型一致，在比较内容，如果类型不一致，这时候会进行强制转换统一转number类型，然后再进行内容的比较

b.  (===)等同符

  先比较类型  如果类型一致，在比较内容如果类型不一致 直接返回false；

六、控制语句 

1.条件语句

a.if (){}只要条件满足就执行

b. if(){}else{} 如果。。。。或者的关系

c.if(){} else if(){}..else{}先判断if语句是否满足，满足则输出语句，结束，如果不满足，则判断else if条件，满足则输出语句，结束，如果不满足，则往后继续进行判断，直到都不满足，输出else语句。

2.分支语句（选择语句）

  switch(){

    case value:  break;

    default: break;

  }

3.循环语句

  a..while(){}

  至少执行一次循环体

  b.  do{}while()

  c.for(var  i =0 ； i<10;i++){}

七、JS 中函数的声明

1.函数声明的三种形式

（1） function  函数名（）{

      函数体 

}

(2) var  函数名=function(){

        函数体

}

(3)  var  函数名=new  Function("函数体")；

2.函数参数传递

    在js中实参的个数和形参的个数可以不一致

3.函数的返回值

  如果函数没有return  这时候返回 undefined

4.   ():函数执行符

八、常用对象  

1.Date日期对象 

Date 对象方法

Date()返回当日的日期和时间。

getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)。

getDay()从 Date 对象返回一周中的某一天 (0 ~ 6)。

getMonth()从 Date 对象返回月份 (0 ~ 11)。

getFullYear()从 Date 对象以四位数字返回年份。

getYear()请使用 getFullYear() 方法代替。

getHours()返回 Date 对象的小时 (0 ~ 23)。

getMinutes()返回 Date 对象的分钟 (0 ~ 59)。

getSeconds()返回 Date 对象的秒数 (0 ~ 59)。

getMilliseconds()返回 Date 对象的毫秒(0 ~ 999)。

getTime()返回 1970 年 1 月 1 日至今的毫秒数。

getTimezoneOffset()返回本地时间与格林威治标准时间 (GMT) 的分钟差。

getUTCDate()根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。

getUTCDay()根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。

getUTCMonth()根据世界时从 Date 对象返回月份 (0 ~ 11)。

getUTCFullYear()根据世界时从 Date 对象返回四位数的年份。

getUTCHours()根据世界时返回 Date 对象的小时 (0 ~ 23)。

getUTCMinutes()根据世界时返回 Date 对象的分钟 (0 ~ 59)。

getUTCSeconds()根据世界时返回 Date 对象的秒钟 (0 ~ 59)。

getUTCMilliseconds()根据世界时返回 Date 对象的毫秒(0 ~ 999)。

parse()返回1970年1月1日午夜到指定日期（字符串）的毫秒数。

setDate()设置 Date 对象中月的某一天 (1 ~ 31)。

setMonth()设置 Date 对象中月份 (0 ~ 11)。

setFullYear()设置 Date 对象中的年份（四位数字）。

setYear()请使用 setFullYear() 方法代替。

setHours()设置 Date 对象中的小时 (0 ~ 23)。

setMinutes()设置 Date 对象中的分钟 (0 ~ 59)。

setSeconds()设置 Date 对象中的秒钟 (0 ~ 59)。

setMilliseconds()设置 Date 对象中的毫秒 (0 ~ 999)。

setTime()以毫秒设置 Date 对象。

setUTCDate()根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。

setUTCMonth()根据世界时设置 Date 对象中的月份 (0 ~ 11)。

setUTCFullYear()根据世界时设置 Date 对象中的年份（四位数字）。

setUTCHours()根据世界时设置 Date 对象中的小时 (0 ~ 23)。

setUTCMinutes()根据世界时设置 Date 对象中的分钟 (0 ~ 59)。

setUTCSeconds()根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。

setUTCMilliseconds()根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。

toSource()返回该对象的源代码。

toString()把 Date 对象转换为字符串。

toTimeString()把 Date 对象的时间部分转换为字符串。

toDateString()把 Date 对象的日期部分转换为字符串。

toGMTString()请使用 toUTCString() 方法代替。

toUTCString()根据世界时，把 Date 对象转换为字符串。

toLocaleString()根据本地时间格式，把 Date 对象转换为字符串。

toLocaleTimeString()根据本地时间格式，把 Date 对象的时间部分转换为字符串。

toLocaleDateString()根据本地时间格式，把 Date 对象的日期部分转换为字符串。

UTC()根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。

valueOf()返回 Date 对象的原始值。

2.Math对象学习

Math 对象属性（不常用）

E返回算术常量 e，即自然对数的底数（约等于2.718）。

LN2返回 2 的自然对数（约等于0.693）。

LN10返回 10 的自然对数（约等于2.302）。

LOG2E返回以 2 为底的 e 的对数（约等于 1.414）。

LOG10E返回以 10 为底的 e 的对数（约等于0.434）。

PI返回圆周率（约等于3.14159）。

SQRT1_2返回返回 2 的平方根的倒数（约等于 0.707）。

SQRT2返回 2 的平方根（约等于 1.414）。

Math 对象方法

ceil(x)对数进行上舍入。

floor(x)对数进行下舍入。

log(x)返回数的自然对数（底为e）。

max(x,y)返回 x 和 y 中的最高值。

min(x,y)返回 x 和 y 中的最低值。

random()返回 0 ~ 1 之间的随机数。

round(x)把数四舍五入为最接近的整数。

3.String对象学习

3.1String 对象属性

constructor 对创建该对象的函数的引用

length 字符串的长度

prototype 允许您向对象添加属性和方法

3.2 String 对象方法

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

concat()连接字符串。

fontcolor()使用指定的颜色来显示字符串。

indexOf()检索字符串。

fontsize()使用指定的尺寸来显示字符串。

split()把字符串分割为字符串数组。

substr()从起始索引号提取字符串中指定数目的字符。

substring()提取字符串中两个指定的索引号之间的字符。

toString()返回字符串。

toLocaleLowerCase()把字符串转换为小写。

toLocaleUpperCase()把字符串转换为大写。

toLowerCase()把字符串转换为小写。

toUpperCase()把字符串转换为大写。

4.数组学习 

4.1数组的声明方式

方式一    var arr=new Array(); 

方式二  var arr2=new Array(5);  5代表数组的长度

方式三  var arr3=new Array("你好",123,new String(),true);

方式四  var arr4=["bjsxt",123,new Date(),false]; 

4.2Array 对象属性

constructor返回对创建此对象的数组函数的引用。

length设置或返回数组中元素的数目。

prototype使您有能力向对象添加属性和方法。

4.3Array 对象方法

pop()删除并返回数组的最后一个元素

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

shift()删除并返回数组的第一个元素

splice()删除元素，并向数组添加新元素。

例：splice(1,2)删除开始的下标   删除的个数

        splice(1,0,"你")    添加的操作

unshift()向数组的开头添加一个或更多元素，并返回新的长度。

4.4数组的扩容

a.扩大数组 empty

      arr.length=10;

b.缩小数组

    arr.length=2;

4.5数组的遍历

方式一 

for(var i=0;i<arr.length;i++){

console.log(arr[i]);

}

方式二 i:是数组的下标

for(var i in arr){

console.log(arr[i]);

}

九、event 事件

1.什么是事件

事件是可以被 JavaScript 侦测到的行为 网页中的每个元素都可以产生某些可以触发 JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数

事件通常与函数配合使用， 这样就可以通过发生的事件来驱动函数执行

2.有哪些事件

属性      当以下情况发生时，出现此事件

onabort 图像加载被中断

onblur  元素失去焦点

onchange  用户改变域的内容

onclick  鼠标点击某个对象

ondblclick  鼠标双击某个对象

onerror  当加载文档或图像时发生某个错误

onfocus  元素获得焦点

onkeydown  某个键盘的键被按下

onkeypress  某个键盘的键被按下或按住

onkeyup  某个键盘的键被松开

onload  某个页面或图像被完成加载

onmousedown  某个鼠标按键被按下

onmousemove  鼠标被移动

onmouseout  鼠标从某元素移开

onmouseover  鼠标被移到某元素之上

onmouseup  某个鼠标按键被松开

onreset  重置按钮被点击 onresize  窗口或框架被调整尺寸

onselect  文本被选定

onsubmit  提交按钮被点击

onunload  用户退出页面

十、BOM和 DOM对象 

1. 什么是BOM

  BOM是Browser Object Model的简写，即浏览器对象模型。

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

  BOM没有统一的标准(每种客户端都可以自定标准)。 

  BOM的顶层是window对象

2. 什么是DOM

  DOM是Document Object Model的简写，即文档对象模型。 

  DOM用于XHTML、XML文档的应用程序接口(API)。 

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

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

  DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。 

  DOM的顶层是document对象

3.dom与bom 的关系：

蓝色框内是归DOM管的，红色框内归BOM管的；也可以说DOM也是归BOM管的

BOM 是为了操作浏览器出现的 API，window 是其根对象。

DOM 是为了操作文档出现的 API，document 是其根对象。

十一：BOM 对象-window

1.只含有确定的按钮
window.alert(）

2.含有确定按钮和取消按钮的弹框

window.confirm(）

3.含有输入内容的弹框 前部分代表的是提示的信息， 后面是输入内容的默认值

window.prompt("请输入昵称：","例如：李白");

4.windows对象的方法

alert()显示带有一段消息和一个确认按钮的警告框。

blur()把键盘焦点从顶层窗口移开。

clearInterval()取消由 setInterval() 设置的 timeout。

clearTimeout()取消由 setTimeout() 方法设置的 timeout。

close()关闭浏览器窗口。

confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。

createPopup()创建一个 pop-up 窗口。

focus()把键盘焦点给予一个窗口。

moveBy()可相对窗口的当前坐标把它移动指定的像素。

moveTo()把窗口的左上角移动到一个指定的坐标。

open()打开一个新的浏览器窗口或查找一个已命名的窗口。

print()打印当前窗口的内容。

prompt()显示可提示用户输入的对话框。

resizeBy()按照指定的像素调整窗口的大小。

resizeTo()把窗口的大小调整到指定的宽度和高度。

scrollBy()按照指定的像素值来滚动内容。

scrollTo()把内容滚动到指定的坐标。

setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。

setTimeout()在指定的毫秒数后调用函数或计算表达式。

5.定时器的应用 

页面加载完调用此函数

十二、Window中对象学习

1.Location：对象

var href= window.location.href;

//获得端口号 8020

var  port=window.location.port; 

//主机名称

var  hostname=window.location.hostname; 

//主机加端口号

var host=window.location.host;

//修改当前的URL地址       

window.location.href="http://www.taobao.com";

//刷新网页

window.location.reload();

2.History对象：

/返回历史记录的数量

var len=  window.history.length;

//后退按钮

window.history.back(); 

//前进按钮

window.history.forward();

//如果是正数标识前进指定的页面  如果是负数标识后退指定的页面，0代表刷新网页

window.history.go(-1);

3.Screen：对象：

//获得当前屏幕的分辨率

var he =  window.screen.height;

var wi =  window.screen.width;

Navigator对象：

//返回由客户机发送服务器的 user-agent 头部的值。 

console.log(window.navigator.userAgent);

十三、DOM 中的节点类型

1.什么是 DOM 

2.DOM节点分类 node

元素节点 element node  <a href="链接地址">我的链接</a>

  属性节点 attribute node  href="链接地址"

  文本节点 text node  链接地址  我的链接

3.DOM节点关系

a.父子关系（parent-child）：<html> 元素作为父级，<head> 和 <body> 元素作为子级

b.兄弟关系（Sibling）:<a> 和 <h1> 元素就是兄弟关系;<title> 和 <h1> 元素并不是兄弟关系

4.DOM操作的内容

  1.查询元素（进行操作元素、或者元素的属性、文本） 

  2.操作文本

  3.操作属性

  4.操作CSS样式（一个特殊的属性style）

  5.操作元素

十四、获得元素对象的方式(DOM)

直接获得的方式：
1.id名称获得对象   document.getElementById("id名称");

2.标签name名称获得对象   getElementsByTagName("标签名");

3.NodeList 获得name属性等于inp的所有的节点对象

document.getElementsByName("name属性名");

间接获得对象的方式：

1.获得父节点下的所有的子节点 空白的文本也是一个节点 

父节点.childNodes;

2.获得当前节点的父级节点---直系父节点

父节点.parentNode;

3.获得当前节点的上一个节点  

previousSibling;

获得上一个节点对象不包含空白文本

previousElementSibling;

4.获得当前节点的下一个节点

nextSibling;

获得下一个元素节点 不包括空白文本

nextElementSibling;