JavaScript10

目录

 1.键盘事件

2.BOM

2.1Navigator

2.2History

2.3 Location

3.定时器

setInterval ( )

 clearInterval( )

延时调用

4.类的操作

5.JSON

 JSON

将JSON字符串转换为JS中的对象

---

 1.键盘事件
 

• onkeydown    -按键被按下
• onkeyup    -按键被松开

document .onkeydown = function(){
console.log("按键被按下了");
};
Hocument . onkeyup = function(){
console.log( "按键松开了");
};

• 键盘事件   一般都会绑定给一些可以获取到焦点的对象或者是document
• 可以通过keyCode来获取按键的编码

通过它可以判断哪个按键被按下
除了keyCode,事件对象中还提供了几个属性
altKey
ctrlKey
shiftKey
-这个三个用来判断alt ctrl和shift是否被按下
如果按下则返回true,否则返回false

document . onkeydown = function(event ){
event = event|| window. event;
/*
*可以通过keyCode来获取按键的编码
*通过它可以判断哪个按键被按下
*/
//判断一个y是否被按下
if(event . keyCode===89){
console.log("y被按下了");}
}

 

//获取input
var input = document . getE1 ementsByTagName("input")[e];
input . onkeydown = function( event ){
event = event|| window. event ;
//console.1og(event . keyCode); 
//数字48 - 57
//使文本框中不能输入数字
if(event .keyCode >= 48 && event .keyCode <= 57){
//在文本框中输入内容，属于onkeydown的默认行为
/ /如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
retrn false;
}

window.onload = function(){
/ /为document绑定-个按键按下的事件
document . onkeydown = function(event){
event = event|| window . event;
//定义一个变量，来表示移动的速度
var speed = 10;
/**37左
*38上
*39右
*40下*/
switch( event. keyCode){
case 37:
//alert("向左"); 
//left值减小
box1.style.left = box1. offsetLeft-speed + "px";
break;
case 39:
//alert("向右");
box1.style.left = box1. offsetLeft+speed +"px";
break;
case 38:
//alert("向上");
box1.style.top = box1.offsetTop - speed + "px";
break;
case 40:
//alert("向下");
box1.style.top = box1.offsetTop + speed + "px" ;
break;
}

2.BOM

1. -浏览器对象模型
2. - BOM可以使我们通过JS来操作浏览器
3. -在BOM中为我们提供了一组对象，用来完成对浏览器的操作

BOM对象
Window

• -代表的是整个浏览器的窗口，同时window也是网页中的全局对象

Navigator

• -代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器

Location

• -代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面

History

• -代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
• 由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页
• 而且该操作只在当次访问时有效

Screen

• -代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息

2.1Navigator

1. 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
2. 由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
3. 一般我们只会使用userAgent来判断浏览器的信息，

userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，
不同的浏览器会有不同的userAgent
 

2.2History

1. 属性  length

   可以获取到当成访问的链接数量

   alert(history.length);

2. 方法

• back()

可以用来回退到上一个页面，作用和浏览器的回退按钮一样
history.back();

• forward()

可以跳转下一个页面，作用和浏览器的前进按钮一样
history.forward();

• go()

可以用来跳转到指定的页面
它需要一个整数作为参数
1：表示向前跳转一个页面相当于forward()
2：表示向前跳转两个页面
-1：表示向后跳转一个页面
-2：表示向后跳转两个页面

2.3 Location

该对象中封装了浏览器的地址栏的信息
 

window.onload = function(){
//获取按钮对象
var btn = document . getElementById("btn");
btn.onclick = function(){
//如果直接打印location,则可以获取到地址栏的信息(当前页面的完整路径)
alert(location);
/*如果直接将location属性修改为一个完整的路径，或相对路径
则我们页面会自动跳转到该路径，并且会生成相应的历史记录
*/
location = "http: //Www. baidu. com";
location = "01. BOM. html";}

1.assign()

• -用来跳转到其他的页面，作用和直接修改location一样

location. assign("http: //WWW. baidu. com");

2.reload()

• 用于重新加载当前页面，作用和刷新按钮一样
• 如果在方法中传递一-个true,作为参数，则会强制清空缓存刷新页面

location. reload(true);
3.replace()

• 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
• 不会生成历史记录，不能使用回退按钮回退

location. replace("01. BOM. html");
 

3.定时器

setInterval ( )

定时调用,可以将一个函数，每隔一段时间执行一次
参数:
1.回调函数，该函数会每隔一段时间被调用一次
2.每次调用间隔的时间，单位是毫秒
返回值:

• 返回一个Number类型的数据
• 这个数字用来作为定时器的唯一标识
   

//获取count
var count = document . getElementById("count");
//使count中的内容，自动切换
//JS的程序的执行速度是非常非常快的
//如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
var num = 1;
var timer = setInterval ( function( ){
count . innerHTML = num++ ; 
},1000);

 clearInterval( )

• 可以用来关闭一个定时器
• 方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器

延时调用

• 延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一-次
• 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一-次
• 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择

var timer = setTimeout (function(){
console.log(num++);
}, 3000);
//使用clearTimeout( )来关闭一个延时调用
clearTimeout (timer);

4.类的操作

1. 修改box的class属性
我们可以通过修改元素的class属性来间接的修改样式
这样一来， 我们只需要修改一次，即可同时修改多个样式，
浏览器只需要重新渲染页面一-次，性能比较好，
并且这种方式，可以使表现和行为进一步的分离
 

2.添加class属性

定义一个函数 addClass，用来向一个元素中添加指定的class属性值
参数:

• obj  要添加class属性的元素
• cn   要添加的class值 

3.hasClass

• 判断一个元素中是否含有指定的class属性值
• 如果有该class，则返回true,
• 没有则返回false

 

//定义一个函数，用来向一个元素中添加指定的class属性值
/*参数:
*obj  要添加clas s属性的元素
*cn   要添加的class值 */

function addClass(obj ，cn){
//检查obj中是否含有cn
if(!hasClass(obj，cn)){obj . className +="+cn;
}


function hasClass(obj, cn){
//判断obj中有没有cn class
//创建一个正则表达式
//var reg = /\bb2\b/ ;
var reg = new RegExp("\\b"+cn+"\\b");
return reg.test (obj . className);}

4.删除一个元素中的指定的class属性
 

function removeClass(obj ，cn){
//创建一一个正则表达式
var reg = new RegExp("\\b"+cn+"\\b");
//删除class
obj .className = obj.className . replace(reg，" ");
}

5. toggleClass

• 可以用来切换一 个类
• 如果元素中具有该类，则删除
• 如果元素中没有该类，则添加

function toggleClass(obj ，cn){
//判断obj中是否含有cn
if(hasClass(obj，ch)){
//有，则删除
removeClass(obj，cn);}
else{
//没有则添加
addClass(obj,cn);}
}

5.JSON

 JSON

• JS中的对象只有JS自己认识，其他的语言都不认识
• JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，
• 并且可以转换为任意语言中的对象，ISON在开发中主要用来数据的交互

JSON 

• JavaScript Object Notation JS对象表示法-
• JSON和JS对家的格式一样，只不过JSON字符串中的属性名必须加双引1号
• 其他的和JS语法一致

JSON分类:
1.对象{}
2.数组[]
 

JSON中允许的值:
1.字符串
2.数值
3.布尔值
4. null
5.对象
6.数组
 

将JSON字符串转换为JS中的对象

1. 在JS中，为我们提供了一一个工具类，就叫JSON
2. 这个对象可以帮助我们将一个JSON转换为JS对象， 也可以将一个JS对象转换为JSON

json -->js对象
JSON.parse()

• 可以将以ISON字符串转换为js对象
• 它需要一个ISON字符串作为参数，会将该字符串转换为JS对象
   

var json = '{"name":"孙悟空","age":18,"gender":"男"}';
var o = JSON.parse(json);
console.log(o.name);

JS对象---> JSON
JSON. stringify()

• 可以将一个JS对象转换为JSON字符串
• 需要一个js对象作为参数，会返回一个JSON字符串

var obj2 = {name:"猪八戒",age:18};
var str = JSON.stringify(obj2);
console.log(str);

JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中会报错，如果要兼容的话，则可以引入一个外部的js文件来处理

eval( )

1. 这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回
2. 如果使用eval( )执行的字符串中含有{} ,它会将{ }当成是代码块
3. 如果不希望将其当成代码块解析，则需要在字符串前后各加一个( )

eval ( )

• 这个函数的功能很强大，可以直接执行一个字符串中的js代码, 
• 但是在开发中尽量不要使用，首先它的执行性能比较差，然后它还具有安全隐患
   

var  str = '{"name":"孙悟空","age":18,"gender":"男"}';
var obj = eval("("+str+")");
console.log(obj);