Java Script

JavaScript用于向HTML页面文件添加交互行为,是一种由浏览器解释执行的脚本语言。
  • 能做什么?
    1. 动态写入html文本:document.write("<h1>"+title+"</h1>");
    2. 读写html元素:document.getElementById("id").value="";
    3. 响应html事件:onsubmit="return checkInput()",提交表单之前先校验
    4. 校验数据:onchange="checkEmail()";if(/\d*/.exec(age)!=age)return alert("年龄必须是整数!");
    5. 交互行为:confirm("确认要删除吗?");prompt("请输入金额:","100");
    6. 检测浏览器:Navigator.appName|appVersion,读写Cookie:document.cookie="";
  • 基础语法:
    1. 注释://单行,/*多行*/;变量:var name=value;弱类型;特殊字符:\' \" \& \n \r \t
    2. 运算符:算术+ - * / % ++ --,赋值= += -+ *= /= %=,比较== === != > < >= <=,逻辑&& || !,条件(condition)?yes:no,空void(obj)=undefined,位~ & | ^ << >> >>>,逗号
    3. 分支:if...else if...else...,switch...case-break...default
    4. 循环:for(var=init;var<=end;var+=step)...,while(condition)...,do...while(condition)
    5. 跳转:break,continue,return
    6. 数组遍历:var array=["a","b","c"]; for(var idx in array){alert(array[idx]);}
  • 事件:HTML事件能出发浏览器中的行为,JavaScript能侦测到这些事件。
    HTML元素 HTML events JavaScript events
    body frameset窗口 onload onunload onload onUnload
    onabort onerror onresize
    input select表单 onchange onselect onChange
    onsubmit onreset onSubmit
    onblur onfocus onFocus onBlur
    input textarea...键盘 onkeydown onkeypress onkeyup onkeydown onkeypress onkeyup
    a button div...鼠标 onclick ondbclick onclick ondbclickl
    onmouseup onmousedown onmouseup onmousedown
    onmouseover onmouseout onmousemove onMouseOver onMouseOut onmousemove
  • 面向对象:
    1. 内置对象:
      String:字符串,substring子串,indexof查找,replace替换,toLowerCase小写,bold加粗样式
      Date:日期,new Date()当前时间,getTime毫秒,getFullYear年,getDay周,>比较
      Array:数组,push/pop/shift加减值,join拼接串,concat合并,sort排序,reverse反转,shift移位
      Boolean:逻辑,假值:空、0、null、""、false、NaN、undefined
      Math:数学,round舍入,random随机,min取小值,sqrt平方根
      RegExp:正则,test是否包含匹配的串,exec返回匹配的串,"g"模式和多次exec可以找到所有匹配
      全局:encodeURI/decodeURI编码参数,escape/unescape转义,eval求值${request.attr}、<s:property value="key"/>,setTimeout/clearTimeout计时,parseInt解析数字
    2. HTML DOM对象:用于访问和处理文档元素
      Document:整个文档,getElementById获取标识,getElementByTagName获取组,createElement(tag)
      Form:document.forms表单,enctype类型(multipart/form-data上传)
      Image:document.images图像,src源,
      Anchor:document.links链接,
      Style:element.style样式,key=value属性
      Select:options选项,selectedIndex选择,
    3. 浏览器对象:
      Navigator:navigator浏览器,appName名称,appVersion版本,
      Cookie:document.cookie识别用户,name=value名值对
      History:history浏览历史,back/forward/go后退
      Location:location当前地址,href跳转地址,reload重新加载
  • 日期控件:
    1. My97DatePicker:
      日期输入框:<input id="d11" type="text" onClick="WdatePicker()"/>
      图片选择钮:<input id="d12" type="text"/><img onclick="WdatePicker({el:'d12'})" src="../skin/datePicker.gif" width="16" height="22" align="absmiddle">,el还可以指定span、div、area等带有innerHtml属性的元素
      周次显示:isShowWeek:true,每周第一天:firstDayOfWeek(0为周日)
      显示挂历:<div id="div1"></div><script>WdatePicker({eCont:'div1',onpicked:function(dp){alert('你选择的日期是:'+dp.cal.getDateStr())}})</script>
      起始日期:startDate:'1980-05-01',%y-%M动态当前年月;alwaysUseStartDate:true
      日期限制:minDate:'2006-09-10',maxDate:'2008-12-20',同真实日期格式
      格式:yMdHmswW年月日时分秒星期周次,例:dateFmt:"yyyy年MM月dd日 HH时mm分ss秒",这时通常需要保存真实日期值:vel:"inputTextId",通常为hidden字段
      双月份选择:doubleCalendar:true
      语言:lang:"en|zh_cn|zh_tw",皮肤:skin:"default|whyGreen"
  • 播放器
    1. 使用ActiveX控件(IE)或Flash插件(FireFox):
      <OBJECT classid="clsid:05589FA1-C356-11CE-BF01-00AA0055595A">
      <PARAM NAME="FileName" VALUE="<%=basePath %>${BEnAddrCode}"/>
      <EMBED type="application/x-mplayer2" src="<%=basePath %>${BEnAddrCode}"/>
      </OBJECT>
    2. 使用自定义Flash播放器:通常需要指定width和height
      <OBJECT classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" style="width:537;height:64">
      <PARAM name=movie value="<%=designPath%>/flash/SoyinkePlayer.swf?file=/apple/asApp.ac&key=${key}&nextChapterId=${nextChapterId}" />
      <EMBED src="<%=designPath%>/flash/SoyinkePlayer.swf?file=/apple/asApp.ac&key=${key}&nextChapterId=${nextChapterId}" WIDTH="537" HEIGHT="64" TYPE="application/x-shockwave-flash"
      </EMBED>
      </OBJECT>
  • 文件上传:
    1. ajaxload.js
      new AjaxUpload("#id",{
      action:"/file/ajaxUpload.ac",
      name:"ajaxUploadFile",
      data:{key:value},
      autoSubmit:false,
      onComplete:function(file,response){}
      }




posted @ 2012-07-23 16:30  xlongwei  阅读(...)  评论(... 编辑 收藏
xlongwei