java Script复习总结

一：基础知识

1、JavaScript语言的历史

l  早期名称：livescript

l  开发公司：网景公司（netscape）

2、JavaScript语言的基本特点

l  基于对象

l  事件驱动

l  解释性语言

l  实时性

l  动态性

l  跨平台

l  开发使用简单

l  安全性

l  脚本语言

l  弱类型

3、JavaScript语言的组成

l  ECMAScript

l  DOM

l  BOM

4、JavaScript常用的输入输出语句

l  alert()                                 警告对话框

l  prompt()                            提示对话框

l  confirm()               消息对话框

l  document.write()            向页面里输出内容

l  console.log()                    向控制台输出内容

l  innerHTML                        向标签里输出内容

5、JavaScript能做什么，使用什么环境，如何引用js文件

l  能做什么：

n  客户端表单验证

n  页面动态效果

n  动态改变页面内容

l  使用环境：

n  浏览器内执行

l  如何引用：

n  <script src="index.js"></script>

n  <script src="test.js" language="JavaScript"></script>

6、JavaScript的代码写在哪儿，放在网页的什么位置？

l  写在哪里：

n  js文件中

n  js标签中

l  放在哪里：

n  标准位置：head标签中或者body标签中

n  笼统说法：页面任意位置

7、JavaScript常见的数据类型及特点

n  JS数据类型的分类：

u  基本数据类型：（注意大小写，它们不一样）

l  string                （字符串类型）

l  number            （数值类型）

l  boolean           （布尔类型）

l  null                    （空类型）

l  object               （对象类型）

l  undefined        （未定义类型）

u  引用数据类型：（注意大小写，它们不一样）

l  Array                 （数组类型）

l  Boolean           （布尔类型）

l  Date                          （日期类型）

l  Math                 （数学运算）

l  Number            （数值类型）

l  String                （字符串类型）

l  RegExp             （正则类型）

l  Function           （函数类型）

n  JS数据类型的特点：

u  一切变量都用var来定义

8、JavaScript中常用的类型转换函数

l  parseInt()                  转换为数字

l  parseFloat()     转换为小数

l  Number()                  转换为数字

l  Boolean()                 转换为布尔值

l  String()             转化为字符串

l  toString()        转换为字符串

9、JavaScript中Date对象的创建及其常用的属性和方法

l  如何创建：

var myDate=new Date();

l  常用属性：

暂不常用

l  常用方法：                                                  取值范围

getFullYear()               获取年份（四位数字）

getMonth()                   获取月份（0 ~ 11）

getDate()                      获取天数（1 ~ 31）

getHours()                   获取小时（0 ~ 23）

getMinutes()               获取分钟（0 ~ 59）

getSeconds()              获取秒数（0 ~ 59）

getMilliseconds()      获取毫秒（0 ~ 999）

10、JavaScript中Math对象的创建及其常用的属性和方法

l  如何使用：

var pi_value=Math.PI;

var sqrt_value=Math.sqrt(15);

l  常用属性：

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

l  常用方法：

floor(数字)                             对数进行下舍入

ceil(数字)                                对数进行上舍入

max(数字1,数字2)           返回两个数字中的最大值

min(数字1,数字2)             返回两个数字中的最小值

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

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

11、JavaScript中String对象的创建及其常用的属性和方法

l  如何创建：

var str = new String(s);

l  常用属性：

length      返回字符串的长度

l  常用方法：

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

indexOf()               返回字符或字符串从前向后搜索第一次出现的下标位置

lastIndexOf()          返回字符或字符串从后向前搜索第一次出现的下标位置

replace()                替换字符串

split()                      分割字符串

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

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

12、JavaScript中数组的概念，数组常用的属性方法

1)       数组的概念

l  数组对象是使用单独的变量名来存储一系列的值

2)       常用属性

length

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

3)       常用方法

concat()	连接两个或更多的数组，并返回结果。
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	颠倒数组中元素的顺序。
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串，并返回结果。
toLocaleString()	把数组转换为本地数组，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值

13、JavaScript中创建节点，增加节点，删除节点，复制节点的方法

1)       创建节点

l  document.createElement()    创建元素节点，参数为标签名

2)       增加节点

l  m.appendChild(n)                   为m元素在末尾添加n节点

l  m.insertBefore(k,n)                 在m元素的k节点前添加n节点

3)       删除节点

l  m.removeChild(n)                   删除m元素中的n节点

l  m.replaceChild(k,n)                 用n节点取代m元素中的k节点

4)       复制节点

l  m.cloneChild()                        复制m节点并将复制出来的节点作为返回值

l  参数为true时，则将m元素的后代元素也一并复制。否则，仅复制m元素本身

14、JavaScript中常见的事件有哪些，什么时候、什么情况触发。

1)       鼠标事件

属性	描述	DOM
onclick	当用户点击某个对象时调用的事件句柄。	2
oncontextmenu	在用户点击鼠标右键打开上下文菜单时触发
ondblclick	当用户双击某个对象时调用的事件句柄。	2
onmousedown	鼠标按钮被按下。	2
onmouseenter	当鼠标指针移动到元素上时触发。	2
onmouseleave	当鼠标指针移出元素时触发	2
onmousemove	鼠标被移动。	2
onmouseover	鼠标移到某元素之上。	2
onmouseout	鼠标从某元素移开。	2
onmouseup	鼠标按键被松开。	2

2)       键盘事件

属性	描述	DOM
onkeydown	某个键盘按键被按下。	2
onkeypress	某个键盘按键被按下并松开。	2
onkeyup	某个键盘按键被松开。	2

3)       表单事件

属性	描述	DOM
onblur	元素失去焦点时触发	2
onchange	该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)	2
onfocus	元素获取焦点时触发	2
onfocusin	元素即将获取焦点时触发	2
onfocusout	元素即将失去焦点时触发	2
oninput	元素获取用户输入时触发	3
onreset	表单重置时触发	2
onsearch	用户向搜索域输入文本时触发 ( <input="search">)
onselect	用户选取文本时触发 ( <input> 和 <textarea>)	2
onsubmit	表单提交时触发	2

15、浏览器对象（BOM）的分层结构，window对象的属性，常用方法

1)       BOM和DOM的分层结构

2)       window对象的属性

属性	描述
closed	返回窗口是否已被关闭。
defaultStatus	设置或返回窗口状态栏中的默认文本。
document	对 Document 对象的只读引用。请参阅 Document 对象。
history	对 History 对象的只读引用。请参数 History 对象。
innerheight	返回窗口的文档显示区的高度。
innerwidth	返回窗口的文档显示区的宽度。
length	设置或返回窗口中的框架数量。
location	用于窗口或框架的 Location 对象。请参阅 Location 对象。
name	设置或返回窗口的名称。
Navigator	对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener	返回对创建此窗口的窗口的引用。
outerheight	返回窗口的外部高度。
outerwidth	返回窗口的外部宽度。
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent	返回父窗口。
Screen	对 Screen 对象的只读引用。请参数 Screen 对象。
self	返回对当前窗口的引用。等价于 Window 属性。
status	设置窗口状态栏的文本。
top	返回最顶层的先辈窗口。
window	window 属性等价于 self 属性，它包含了对窗口自身的引用。
screenLeft screenTop screenX screenY	只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。

3)       window对象的方法

方法	描述
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()	在指定的毫秒数后调用函数或计算表达式。

16、文档对象模型DOM里document的常用的查找访问节点的方法及含义（getElement系列）

l  document.getElementById()

l  document.getElementsByClassName()

l  document.getElementsByName()

l  document.getElementsByTagName()

l  document.getElementsByTagNameNS()

17、获取滚动条距离页面顶端的距离 scrollTop

18、隐式类型转换：如字符+数值  结果是字符

1)       typeof运算符

l  typeof "John"                               // 返回 string  字符型

l  typeof 3.14                                 // 返回 number 数值型

l  typeof NaN                                 // 返回 number

l  typeof false                                // 返回 boolean布尔型

l  typeof [1,2,3,4]                           // 返回 object

l  typeof {name:'John', age:34}      // 返回 object空值

l  typeof new Date()                       // 返回 object

l  typeof function () {}                    // 返回 function

l  typeof myCar                             // 返回 undefined (如果 myCar 没有声明)

l  typeof null                                   // 返回 object

2)       常考题型

l  转换1：字符串+数值=》数值，结果为NAN（parseInt(“abc”+10)  == NAN）

l  转换2：数值+字符串=》数值，结果为数值（parseInt(10+”abc”)  ==  10）

19、变量的声明使用、js语法基础、js的注释

1)       JS的变量声明

第一种	var 变量名称; 变量名称 = 变量值;
第二种	var 变量名称 = 变量值;

2)       JS的注释

第一种（单行注释）	// 注释内容
第二种（文档注释）	/** * 注释内容 */

20、switch语句、for语句、if语句

1)       switch语句格式或者实例

2)       for语句格式或者实例

3)       if语句格式或者实例

21、break 、continue的含义

l  break：直接结束循环

l  continue：跳过本次循环，进行下一次

22、typeof用法

（1）typeof运算符

l  typeof "John"                              // 返回 string

l  typeof 3.14                               // 返回 number

l  typeof NaN                                // 返回 number

l  typeof false                                // 返回 boolean

l  typeof [1,2,3,4]                          // 返回 object

l  typeof {name:'John', age:34}      // 返回 object

l  typeof new Date()                      // 返回 object

l  typeof function () {}                     // 返回 function

l  typeof myCar                             // 返回 undefined (如果 myCar 没有声明)

l  typeof null                                 // 返回 object

23、isNaN（）函数的用法意义

是否不是一个数字，如果真，则证明不是数字，如果假，则证明是数字

二：编程题目

1、动态显示当前时间

代码截图：（为了更好的演示，请用谷歌运行页面）

代码文本：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<script type="text/javascript">

// 每隔1秒钟，获取一次当前时间，然后输出

setInterval(function() {

// 创建日期对象

var nowDate = new Date();

// 获取时间的值

var year         = nowDate.getFullYear();       // 获取年份，例如（2018）

var month      = nowDate.getMonth();         // 获取月份，范围（0~11）

var day       = nowDate.getDate();             // 获取日份，范围（1~31）

var hour              = nowDate.getHours();           // 获取小时，范围（0~23）

var minute      = nowDate.getMinutes();       // 获取分钟，范围（0~59）

var second     = nowDate.getSeconds();       // 获取秒数，范围（0~59）

// 控制台输出

console.log(year + "-" + (month + 1) + "-" + day + " " + hour + ":" + minute + ":" + second);

}, 1000);

</script>

</body>

</html>

2、倒计时

代码截图：（为了更好的演示，请用谷歌运行页面）

代码文本：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<script type="text/javascript">

// 定义时间变量，保存需要倒计时几秒

var time = 5;

// 每隔1秒钟，执行一次，如果当前时间等于1，停止计时

var sid = setInterval(function() {

// 判断是否停止计时器，如果时间为1，则直接清除计时器

if(time == 1) {

clearInterval(sid);

}

// 输出当前时间

console.log("当前时间：" + time);

// 时间减少1秒钟

time = time - 1;

}, 1000);

</script>

</body>

</html>

3、开关灯

代码截图：（为了更好的演示，请用谷歌运行页面）

代码文本：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<!-- 用来存放小灯泡的图片 -->

<img src="img/dengpao_off.gif" id="dengpao" />

<!-- 用来控制小灯泡的开关 -->

<button id="btn">开灯</button>

<!-- JavaScript代码 -->

<script type="text/javascript">

var dengpao = document.getElementById("dengpao");     //获取图片框

var btn    = document.getElementById("btn");                //获取按钮框

// 当按钮被单击的时候，触发事件

btn.onclick = function(){

// 判断当前是不是开灯

if(btn.innerHTML == '开灯') {

dengpao.src = "img/dengpao_on.gif";

btn.innerHTML = "关灯";

} else {

dengpao.src = "img/dengpao_off.gif";

btn.innerHTML = "开灯";

}

};

</script>

</body>

</html>

4、全选反选

代码截图：（为了更好的演示，请用谷歌运行页面）

代码文本：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<!-- 选择框状态 -->

<input type="checkbox" id="zhuangtai" />

<button id="qbxz">全部选中</button>

<button id="qbbx">全部不选</button>

<button id="fxcz">反选操作</button>

<hr />

<!-- 选择框容器 -->

<div id="box">

<input type="checkbox" /> 计算1701班 <br/>

<input type="checkbox" /> 计算1702班 <br/>

<input type="checkbox" /> 计算1703班 <br/>

<input type="checkbox" /> 计算1801班 <br/>

<input type="checkbox" /> 计算1802班 <br/>

<input type="checkbox" /> 计算1803班 <br/>

</div>

</body>

<!-- JavaScript代码 -->

<script type="text/javascript">

var zhuangtai         = document.getElementById("zhuangtai");                                                       // 获取状态框

var qbxz                   = document.getElementById("qbxz");                                                                // 全部选中按钮

var qbbx                  = document.getElementById("qbbx");                                                                // 全部不选按钮

var fxcz           = document.getElementById("fxcz");                                                                 // 反选操作按钮

var inputs       = document.getElementById("box").getElementsByTagName("input");    // 复选框的数组

/*功能介绍：全部选中*/

qbxz.onclick = function() {

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

inputs[i].checked = true;

}

zhuangtai.checked = true;

};

/*功能介绍：全部不选*/

qbbx.onclick = function() {

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

inputs[i].checked = false;

}

zhuangtai.checked = false;

};

/*功能介绍：反选操作*/

fxcz.onclick = function() {

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

if(inputs[i].checked == true) {

inputs[i].checked = false;

} else {

inputs[i].checked = true;

}

}

// 更改状态框

zhuangtai.checked = checkAllChoice();

};

/*功能介绍：复选框单击事件*/

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

inputs[i].onclick = function() {

zhuangtai.checked = checkAllChoice();

};

}

/*功能介绍：检查是否全部选中*/

function checkAllChoice() {

// 设置标记，记录是否全部选中，默认全部选中

var flag = true;

// 循环判断是否全部选中，如果有一个没有选中，则标记位置就为false

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

if(inputs[i].checked == false) {

flag = false;

}

}

// 返回结果（true或者false）

return flag;

}

</script>

</html>

5、图片轮播

直接查看附件：图片轮播

6、选项卡

直接查看附件：选项卡