JavaScript进阶(五)

有聚焦,肯定就有失焦。onblur事件与onfocus是相对事件,当光标离开当前获得聚
焦对象的时候,触发onblur事件,同时执行被调用的程序。
如下代码,网页中有用户和密码两个文本框。当前光标在用户文本框内时(即焦点在
文本框),在光标离开该文本框后(即失焦时),触发onblur事件,并调用message()
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>失焦事件</title>
<script type="text/javascript">
 function message(){
 alert("请确定已输入用户名后,在离开!")}
</script>
</head>
<body>
 <form>
 用户:<input name="username" type="text" value="请输入用户名:" onblur="message()">
 密码:<input name="password" type="text" value="请输入密码:">
 </form>
</body>
</html>
选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用
的程序就会被执行。
如下代码,当选中用户文本框内的文字时,触发onselect事件,并调用函数message()
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onselect</title>
<script type="text/javascript">
function message(){
 alert("您触发了选中事件");}
</script>
</head>
<body>
 <form>
 用户:<input name="username" type="text" value="请输入用户名!" onselect="message()">
 <!-- 当选中用户文本框内的文字时,触发onselect事件。 -->
 </form>
</body>
</html>
通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。如下代码,
当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!"
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onChange</title>
<script type="text/javascript">
 function message(){alert("您改变了文本内容!")}
</script>
</head>
<body>
 <form>
 用户:<input name="username" type="text" value="请输入用户名" onChange="message()">
 <!-- 当改变用户文本框内的文字后,触发onChange事件。 -->
 </form>
</body>
</html>
事件会在页面加载完成后,立即发生,同时执行被调用的程序。注意:1.加载页面
时,触发onload事件,事件写在<body>标签内。2.此节的加载页面,可理解为打开
一个新页面时。如下代码,当加载一个新页面时,弹出对话框"加载中,请稍等..."
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onLoad</title>
<script type="text/javascript">
 function message(){
 alert("加载中,请稍等...");}
</script>
</head>
<body >
 欢迎学习JavaScript
</body>
</html>
当用户退出页面时(页面关闭,页面刷新等),触发onunload事件,同时执行调用
的程序。
注意:不同浏览器对onunload事件支持不同。
如下代码,当退出页面时,弹出对话框"您确定离开该网页吗?"
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onUnload</title>
<script type="text/javascript">
 window.onunload=onunload_message;
 function onunload_message(){
 alert("您确定离开该网页吗?");
}
</script>
</head>
<body>
欢迎学习JavaScript
</body>
</html>
留个题目:
使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除。
提示:获取元素的值设置和获取方法为:例:赋值:document.getElementById(“id”).value = 1; 取值:var = document.getElementById(“id”).value;
答案如下:
<!DOCTYPE html>
<html>
 <head>
  <title> 事件</title>  
  <script type="text/javascript">
   function count(){
    //获取第一个输入框的值
    var a=parseInt(document.getElementById("txt1").value);
 //获取第二个输入框的值
 var b=parseInt(document.getElementById("txt2").value);
 //获取选择框的值
 var c=document.getElementById("select").value;
 //获取通过下拉框来选择的值来改变加减乘除的运算法则
 var d;
 switch(c){

case "+":

d=a+b;

break;

case "-":

d=a-b;

break;

case "*":

d=a*b;

break;

case "/":

d=a/b;

break;

}

//设置结果输入框的值

document.getElementById("fruit").value=d;
   }
  </script> 
 </head> 
 <body>
   <input type=‘text‘ id=‘txt1‘ /> 
   <select id=‘select‘>
  <option value=‘+‘>+</option>
  <option value="-">-</option>
  <option value="*">*</option>
  <option value="/">/</option>
   </select>
   <input type=‘text‘ id=‘txt2‘ /> 
   <input type=‘button‘ value=‘ = ‘ onclick="count()"/> <!--通过 = 按钮来调用创建的函数,得到结果--> 
   <input type=‘text‘ id=‘fruit‘ />   
 </body>
</html>
什么是对象?JavaScript中的所有事物都是对象,如:字符串、数组、数值、函数
等,每个对象带有属性和方法。
对象的属性:反映该对象某些特定的性质的,如:字符串的长度图像的长宽等;
对象的方法:能够在对象上执行的动作。例如,表单的“提交”(Submit),时间的
“获取”(getYear)等;
JavaScript提供多个内建对象,比如String,Date,Array等等,使用对象前先定义,
如下使用数组对象:
var objectName=new Array();//使用new关键字定义对象
或者
var objectName=[];
访问对象属性的语法:
objectName.propertyName
如使用Array对象的length属性来获得数组的长度:
var myarray=new Array(6);//定义数组对象
var myl=myarray.length;//访问数组长度length属性
以上代码执行后,myl的值为6
访问对象的方法:
objectName.methodName()
如使用string对象的toUpperCase()方法来将文本转换为大写:
var mystr="Hello world!"//创建一个字符串
var request=mystr.toUpperCase();//使用字符串对象方法
以上代码执行后,request的值是:HELLO WORLD!
日期对象可以存储任意一个日期,并且可以精确到毫秒数(1/1000秒)
定义一个时间对象:
var Udate=new Date();
注意:使用关键字new,Date()的首字母必须大写
使Udate称为日起对象,并且已有初始值:当前时间(当前电脑系统时间)
如果要自定义初始值,可以用以下方法:
var d=new Date(2012,10,1);//2012年10月1日
var d=new Date(‘Oct 1,2012‘);//2012年10月1日
我们最好使用下面介绍的方法来严格定义时间。
访问方法语法:"<日期对象>,<方法>"
Date对象中处理时间和日期的常用方法:
方法名称  功能描述
get/setDate()  返回/设置日期
get/setFullYear() 返回/设置年份,用四位数表示
get/setYear()  返回/设置年份
get/setMonth()  返回/设置月份。0:1月...11:12月。所以加一
get/setHours()  返回/设置小时,24小时制
get/setMinutes() 返回/设置分钟数
get/setSeconds() 返回/设置秒钟数
get/setTime()  返回/设置事件(毫秒为单位)

下面来介绍get/setFullYear()返回/设置年份,用四位数表示
var mydate=new Date();//当前事件2014年3月6日
document.write(mydate+"<br>");//输出当前时间
document.write(mydate.getFullYear()+"<br>");//输出当前年份
mydate.setFullYear(81);//设置年份
document.write(mydate+"<br>");//输出年份被设定为0081年
注意:不同浏览器,mydate.setFullYear(81)结果不同,年份被设定为0081或81两种
情况。
结果:
Thu Mar 06 2014 10:57:47 GMT+0800
2014
Thu Mar 06 0081 10:51:47 GMT+0800
注意:
1.结果格式依次为:星期、月、日、年、时、分、秒、时区(火狐浏览器)
2.不同浏览器,时间格式有差异。
返回星期方法:
getDay()返回星期,返回的是0-6的数字,0表示星期天,如果要返回相对应"星期"
通过数组完成,代码如下:
<script type="text/javascript">
 var mydate=new Date();//定义日期对象
 var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星
期六"];//定义数组对象,给每个数组项赋值
 var mynum=mydate.getDay();//返回值存储在变量mynum中
 document.write(mydate.getDay());//输出getDay()获取值
 document.write("今天是:"+weekday[mynum]);//输出星期几
</script>
注意:以上代码是2014年3月7日,星期五运行。
结果:
5
今天是星期五
get/setTime()返回/设置事件,单位毫秒数,计算从1970年1月1日零时到日期对象
所指的日期的毫秒数。
如果将目前对象所指的日期推迟1小时,代码如下:
<script type="text/javascript">
 var mydate=new Date();
 document.write("当前事件:"+mydate+"<br>");
 mydate.setTime(mydate.getTime()+60*60*1000);
 document.write("推迟一个小时时间:"+mydate);
</script>
结果:
当前时间:Thu Mar 6 11:46:27 UTC+0800 2014
推迟一个小时时间:Thu Mar 6 12:46:27 UTC+0800 2014
注意:1.一小时60分 一分60秒 一秒1000毫秒
2.时间推迟一小时就是:"x.setTime(x.getTime()+60*60*1000);"

时间: 2024-12-26 17:19:56

JavaScript进阶(五)的相关文章

Python爬虫进阶五之多线程的用法

前言 我们之前写的爬虫都是单个线程的?这怎么够?一旦一个地方卡到不动了,那不就永远等待下去了?为此我们可以使用多线程或者多进程来处理. 首先声明一点! 多线程和多进程是不一样的!一个是 thread 库,一个是 multiprocessing 库.而多线程 thread 在 Python 里面被称作鸡肋的存在!而没错!本节介绍的是就是这个库 thread. 不建议你用这个,不过还是介绍下了,如果想看可以看看下面,不想浪费时间直接看 multiprocessing 多进程 鸡肋点 名言: "Pyt

javascript进阶笔记(2)

js是一门函数式语言,因为js的强大威力依赖于是否将其作为函数式语言进行使用.在js中,我们通常要大量使用函数式编程风格.函数式编程专注于:少而精.通常无副作用.将函数作为程序代码的基础构件块. 在函数式编程中,有一种函数称为匿名函数,也就是没有名称的函数,是js中的一个非常重要的概念.通常匿名函数的使用情况是,创建一个供以后使用的函数.比如将匿名函数保存在一个变量里面,或将其作为一个对象方法,更有甚者将其作为一个回调等等之类的. //保存在变量中,通过fn去引用 var fn=function

Javascript进阶---前言

前言: 在没有完全认识Javacript的时候,经常用Javascript/jQuery操纵DOM,改个样式什么的,使用Ajax进行前端后端的数据交互. 经常会想,这近些年大热的Javascript就只能做这么点事儿吗? 直到后来,慢慢接触到了AngularJS.NodeJS才知道,才知道将Javascript作为一门完整的语言去看待,而不仅仅是网页的脚本. Javascript进阶学习笔记,将会以ECMAScript 6为标准,去学习真正的Javascript. 注意: 1.整理内容具有个人偏

JavaScript进阶系列06,事件委托

在"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数"中已经有了一个跨浏览器的事件处理机制.现在需要使用这个事件处理机制为页面元素注册事件方法. □ 点击页面任何部分触发事件 创建一个script1.js文件. (function() { eventUtility.addEvent(document, "click", function(evt) { alert('hello'); }); }(

JavaScript进阶系列02,函数作为参数以及在数组中的应用

有时候,把函数作为参数可以让代码更简洁. var calculator = { calculate: function(x, y, fn) { return fn(x, y); } }; var sum = function(x, y) { return x + y; }, diff = function (x, y) { return x - y; }; var sumResult = calculator.calculate(2, 1, sum), diffResult = calculat

JavaScript进阶(一)

OK接下来,我们再次梳理一遍js并且提高一个等级. 众所周知,web前端开发者需要了解html和css,会只用html和css创建一个漂亮的页 面,但是这肯定是不够的,因为它只是一个静态的页面,我们还需要用JavaScript 增加它的行为,为网页添加动态效果. 首先,JavaScript能做什么? 1.增强页面动态效果(如:下拉菜单,图片轮播,信息滚动等) 2.实现页面与用户之间的实时,动态交互(如:用户注册,登录验证等) JavaScript进阶篇章能学习到什么呢? 在JavaScript入

JavaScript 进阶篇的学习~

---恢复内容开始--- 让你认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面而已.我们还需使用JavaScript增加行为,为网页添加动态效果.准备好,让JavaScript带你进入新境界吧! JavaScript能做什么? 1.增强页面动态效果(如:下拉菜单.图片轮播.信息滚动等) 2.实现页面与用户之间的实时.动态交互(如:用户注册.登陆验证等

5. 蛤蟆的数据结构进阶五动态查询

5. 蛤蟆的数据结构进阶五动态查询 本篇名言:"判断一个人,不是根据他自己的表白或对自己的看法,而是根据他的行动. --列宁" OK,我们接下去来看下动态查询. 欢迎转载,转载请标明出处:http://blog.csdn.net/notbaron/article/details/47284473 1.  动态查找表 动态查找表:若在查找过程中可以将查找表中不存在的数据元素插入,或者从查找表中删除某个数据元素,则称这类查找表为动态查找表.动态查找表在查找过程中查找表可能会发生变化.对动态

JavaScript进阶系列07,鼠标事件

鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keypress事件,而会触发Keydown和Keyup事件,这就是Keypress事件与Keydown.Keyup事件的不同之处.另外,通常使用Keypress事件来获取用户输入信息. 继续使用"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件

JavaScript进阶系列04,函数参数个数不确定情况下的解决方案

本篇主要体验函数参数个数不确定情况下的一个解决方案.先来看一段使用函数作为参数进行计算的实例. var calculate = function(x, y, fn) { return fn(x, y); }; var sum = function(x, y) { return x + y; }; var diff = function(x, y) { return x - y; }; var sumResult = calculate(1, 2, sum), diffResult = calcu