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() 返回字符或字符串从后向前搜索第一次出现的下标位置
替换字符串
分割字符串
tolowercase() 把字符串转换为小写
touppercase() 把字符串转换为大写
12、javascript中数组的概念,数组常用的属性方法
1) 数组的概念
l 数组对象是使用单独的变量名来存储一系列的值
2) 常用属性
设置或返回数组中元素的数目。 |
3) 常用方法
连接两个或更多的数组,并返回结果。 |
|
把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 |
|
删除并返回数组的最后一个元素 |
|
向数组的末尾添加一个或更多元素,并返回新的长度。 |
|
颠倒数组中元素的顺序。 |
|
删除并返回数组的第一个元素 |
|
从某个已有的数组返回选定的元素 |
|
对数组的元素进行排序 |
|
删除元素,并向数组添加新元素。 |
|
返回该对象的源代码。 |
|
把数组转换为字符串,并返回结果。 |
|
把数组转换为本地数组,并返回结果。 |
|
向数组的开头添加一个或更多元素,并返回新的长度。 |
|
返回数组对象的原始值 |
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 |
当用户点击某个对象时调用的事件句柄。 |
2 |
|
在用户点击鼠标右键打开上下文菜单时触发 |
|
|
当用户双击某个对象时调用的事件句柄。 |
2 |
|
鼠标按钮被按下。 |
2 |
|
当鼠标指针移动到元素上时触发。 |
2 |
|
当鼠标指针移出元素时触发 |
2 |
|
鼠标被移动。 |
2 |
|
鼠标移到某元素之上。 |
2 |
|
鼠标从某元素移开。 |
2 |
|
鼠标按键被松开。 |
2 |
2) 键盘事件
属性 |
描述 |
dom |
某个键盘按键被按下。 |
2 |
|
某个键盘按键被按下并松开。 |
2 |
|
某个键盘按键被松开。 |
2 |
3) 表单事件
属性 |
描述 |
dom |
元素失去焦点时触发 |
2 |
|
该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) |
2 |
|
元素获取焦点时触发 |
2 |
|
元素即将获取焦点时触发 |
2 |
|
元素即将失去焦点时触发 |
2 |
|
元素获取用户输入时触发 |
3 |
|
表单重置时触发 |
2 |
|
用户向搜索域输入文本时触发 ( <input="search">) |
|
|
用户选取文本时触发 ( <input> 和 <textarea>) |
2 |
|
表单提交时触发 |
2 |
15、浏览器对象(bom)的分层结构,window对象的属性,常用方法
1) bom和dom的分层结构
2) window对象的属性
属性 |
描述 |
返回窗口是否已被关闭。 |
|
设置或返回窗口状态栏中的默认文本。 |
|
对 document 对象的只读引用。请参阅 document 对象。 |
|
对 history 对象的只读引用。请参数 history 对象。 |
|
返回窗口的文档显示区的高度。 |
|
返回窗口的文档显示区的宽度。 |
|
length |
设置或返回窗口中的框架数量。 |
用于窗口或框架的 location 对象。请参阅 location 对象。 |
|
设置或返回窗口的名称。 |
|
对 navigator 对象的只读引用。请参数 navigator 对象。 |
|
返回对创建此窗口的窗口的引用。 |
|
返回窗口的外部高度。 |
|
返回窗口的外部宽度。 |
|
pagexoffset |
设置或返回当前页面相对于窗口显示区左上角的 x 位置。 |
pageyoffset |
设置或返回当前页面相对于窗口显示区左上角的 y 位置。 |
parent |
返回父窗口。 |
对 screen 对象的只读引用。请参数 screen 对象。 |
|
返回对当前窗口的引用。等价于 window 属性。 |
|
设置窗口状态栏的文本。 |
|
返回最顶层的先辈窗口。 |
|
window |
window 属性等价于 self 属性,它包含了对窗口自身的引用。 |
|
只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。ie、safari 和 opera 支持 screenleft 和 screentop,而 firefox 和 safari 支持 screenx 和 screeny。 |
3) window对象的方法
方法 |
描述 |
显示带有一段消息和一个确认按钮的警告框。 |
|
把键盘焦点从顶层窗口移开。 |
|
取消由 setinterval() 设置的 timeout。 |
|
取消由 settimeout() 方法设置的 timeout。 |
|
关闭浏览器窗口。 |
|
显示带有一段消息以及确认按钮和取消按钮的对话框。 |
|
创建一个 pop-up 窗口。 |
|
把键盘焦点给予一个窗口。 |
|
可相对窗口的当前坐标把它移动指定的像素。 |
|
把窗口的左上角移动到一个指定的坐标。 |
|
打开一个新的浏览器窗口或查找一个已命名的窗口。 |
|
打印当前窗口的内容。 |
|
显示可提示用户输入的对话框。 |
|
按照指定的像素调整窗口的大小。 |
|
把窗口的大小调整到指定的宽度和高度。 |
|
按照指定的像素值来滚动内容。 |
|
把内容滚动到指定的坐标。 |
|
按照指定的周期(以毫秒计)来调用函数或计算表达式。 |
|
在指定的毫秒数后调用函数或计算表达式。 |
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、选项卡
直接查看附件:选项卡