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){}
   }

通过 为知笔记 发布