回顾JavaScript

以前学的时候，总是走马观花，没有太认真，实习后发现还是要好好把JS的所有内容回顾一边，在回顾的过程里面，把JavaScript最核心的内容给挑了出来，写下这篇博客。如果你想非常快速的学习或者因为时间要先学js最重要的内容，这篇文章很适合你。

1.定义变量 var person=null; 打印输出为null
  var person;      打印输出为undefined
  var car=""       打印输出什么都不显示
提示：JavaScript具有隐含的全局概念，意味着你不声明的任何变量都会成为一个全局对象属性




2.函数 动态匿名函数  var myVar=myFunction();如果有返回值，把返回值赋给myVar


       四种调用方式：直接调用        函数名（参数列表）
    在连接中调用    <a href="javascript:函数名()">描述文字</a>
    在事件中调用    事件类型=函数名（）
    递归调用


3.事件  JS事件是可以被 JavaScript 侦测到的行为。
        HTML 事件是发生在 HTML 元素上的事情。
        当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
HTML 事件可以是浏览器行为，也可以是用户行为。
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

事件绑定到JS：
<some-HTML-element some-event="some JavaScript">


<button οnclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
解释：JavaScript 代码将修改 id="demo" 元素的内容。


事件集合：              事件描述
onchange                HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
onblur 元素失去焦点时触发
onfocus 元素获取焦点时触发
onchange 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)

JavaScript 可以做什么?


事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:


    页面加载时触发事件
    页面关闭时触发事件
    用户点击按钮执行动作
    验证用户输入内容的合法性
    等等 ...


可以使用多种方法来执行 JavaScript 事件代码：


    HTML 事件属性可以直接执行 JavaScript 代码
    HTML 事件属性可以调用 JavaScript 函数
    你可以为 HTML 元素指定自己的事件处理程序
    你可以阻止事件的发生。
    等等 ...
4.字符串
var x = "John";
var y = new String("John");
typeof x // returns String
typeof y // returns Object
不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用：
数字与字符串相加，返回字符串：y="5"+5; 55 这个是字符串
获取input的值：年龄:<input id="age" value=18 />    value=18是input里面默认显示的值，此处如果输入为数字，必做验证！
        age=document.getElementById("age").value;
5.正则表达式


在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子字符串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子字符串。


var str = "Visit w3cschool!";
var n = str.search("w3cschool");  n=6

    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace(/microsoft/i,"W3cSchool"); i  是一个修饰符 ，表示不区分大小写；g：搜索全局；m 执行多行匹配


匹配说明：
[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从 0 至 9 的数字。
(x|y) 查找任何以 | 分隔的选项。
\d 查找数字。
\s 查找空白字符。
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。



RegExp（）对象的使用，用来判断是否包含某些元素，有一些方法可以去调用
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));   true
document.write(patt1.exec("The best things in life are free")); e


例子：验证邮箱
<script type="text/javascript">
  function ischeckemail(){
var email = document.getElementById("emailname").value;
 if (email != "") {
    var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
    isok= reg.test(email );
      if (!isok) {
           alert("邮箱格式不正确，请重新输入！");
           document.getElementById("emailname").focus();
           return false;
       }
   };
}
</script>


               HTML：
<input type="text" id="emailname">
<input type="submit" value="检测Email地址格式是否正确"
onClick="return ischeckemail()" >


6.表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。


表单数据经常需要使用 JavaScript 来验证其正确性：




验证表单数据是否为空？


    验证输入是否是一个正确的email地址？


验证日期是否输入正确？


验证表单输入内容是否为数字型？
例子：检查必填项是否填写：
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
 {
 alert("First name must be filled out");
 return false;
 }
}


<form name="myForm" action="demo_form.asp" οnsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>


E-mail 验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：    
function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Not a valid e-mail address");
  return false;
 }
}


<form name="myForm" action="demo_form.asp" οnsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>