javaweb2:javascript+正则表达式

本文主要是介绍javaweb2:javascript+正则表达式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一：js基础

1.变量类型

数值类型number 函数类型function
js是弱类型语言，变量类型可变化

var i;
    i=12;
    alert(typeof (i));
    i="abc";
    alert(typeof (i));

2.特殊值

undefined：未定义，所有js变量未赋值的时候，默认undefined
null:空值
NAN：not a number 非数字非数值，比如数字*字符串 结果是NAN

3.关系比较

== 做简单字面值比较 如"12"==12 true
=== 字面值+变量数据类型的比较

4.逻辑运算

且&&、或||、取反！
所有变量都可作为Boolean，其中0、null、undefined、“”（空串）都认为是false
&&：当表达式全为真，返回最后一个表达式的值
    当表达式有一个为假，返回第一个为假的表达式的值
||：当表达式全为假，返回最后一个表达式的值
    当表达式有一个为真，返回第一个为真的表达式的值

5.数组

var 数组名=[]; var 数组名=[1,"asc"]
通过数组下标赋值，最大的下标值会自动给数组扩容 
    如var arr=[];arr[0]=12,arr[2]="abc";//arr.length=3,arr[1]=undefined;

6.函数

1.方式一格式：
       function 函数名（形参列表）{函数体}
                形参列表中直接写参数名，不用定义类型or var
                带返回值 直接在函数体内使用return语句
2.方式二格式
        var 函数名=function（形参列表）{函数体}
                注意该函数名代表整个函数，而不是用来接收返回值的变量
arguments数组：
函数不允许重载，但函数中有arguments隐性参数，即不需要定义却可以直接用来获取所有参数的变量，类似java中可变长参数
    比如调用函数fun(1,2,3……) 自动填入arguments数组中且可以在函数体内使用

function fun1(){
  return arguments[0]+arguments[1];
}
alert(fun1(1,234,5));//235

7.自定义对象

方式一：
  对象的定义：var 变量名=new Object();对象实例（空对象）
             变量名.属性名=值； 定义一个属性
             变量名.函数名=function（）{}；定义一个函数
  对象的访问：变量名.属性/函数名（）；
方式二：
  var 变量名={
      属性名:值, 定义属性
      属性名:值, 定义属性
      函数名:function(){}; 定义函数
  };

<script type="text/javascript">
    var obj=new Object();
    obj.name="华仔";
    obj.age=12;
    obj.fun=function (){
        alert(this.name+this.age)
    }
    obj.fun();
</script>

二：事件

电脑输入设备与页面进行交互响应

1.常用事件

onload加载完成事件： 页面加载完成后，常用于做页面js代码初始化操作
onclick单击事件： 按钮的点击响应
onblur失去焦点事件：用于输入框失去焦点后验证其输入内容是否合法
onchange内容发生改变事件：下拉列表和输入框内容发生改变后的操作
onsubmit表单提交事件：表单提交前，验证所有表单项是否合法

2.事件注册

静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码
动态注册事件：通过js代码得到的dom对象，再通过dom对象.事件名=function（）{}赋予事件响应后的代码
             1.获取标签对象 2.标签对象.事件名=func（）{}

onclick事件：

方式一： 
<button onclick="onclickfun()">
    按钮1
  </button>
function onclickfun(){
      alert("静态注册")//console.log("静态注册");/*console是控制台对象，log（）是打印的方法*/
    }
方式二：
 <button id="bt01">
    按钮2
  </button>
window.onload=function (){
      var bt01Obj =document.getElementById("bt01");
      bt01Obj.onclick=function (){
        alert("动态注册")
      }
    }

onsubmit事件：

<form action="http://localhost:8080" method="get" onsubmit="return onsubmit11()"> 
<!--return false 阻止表单提交-->
    <input type="submit" value="静态注册">
 </form>
 function onsubmit11(){
      alert("静态注册");
      return false;
    }

<form action="http://localhost:8080" method="get" id="f1"> <!--return false 阻止表单提交-->
   <input type="submit" value="动态注册">
 </form>
window.onload=function (){
      var ff1=document.getElementById("f1");
      ff1.onsubmit=function (){
        alert("动态注册");
        return false;
      }
    }

3.检验文本内容

用户名<input type="text" id="username" value="xhx">
<span id="usernameSpan" style="color: red"></span>
<button onclick="onclickfun()">校验</button>

function onclickfun(){
            var usernameObj=document.getElementById("username");/*获取dom对象*/
            var usernameText=usernameObj.value;/*通过dom对象查看属性*/
            var patt=/^\w{5,12}$/;
            var usernameSpanObj=document.getElementById("usernameSpan");
            if (patt.test(usernameText)){
                usernameSpanObj.innerHTML="输入合法";/*标签的所有文本内容，可读可写*/
            }else {
                usernameSpanObj.innerHTML="<img src=\"如何请同事吃饭.png\" >";
            }
}

4.正则表达式

正则表达式：/e/ 字符串中包含e
*            /[abc]/ /[a-z]/ 字符串至少包含其中一个字母
*            /[^abc]/ 除了abc以外的任何字符
*            /(red|blue|green)/ 查找任何指定的选项
*            /\w/  查找单词字符，包含a-z,A-Z,0-9,_
*            /a+/  查找字符串中至少包含一个a
*            /^a{3,5}$/ 要求字符串从头到尾符合要求，a{3,5}匹配包含3个或5个a的字符串

5.DOM模型

方法：
document.getElementsByName（“xx”）：获取所有name为xx的标签
document.getElementsByTagName("input"):input是标签名，返回的都是该标签的对象

document object model 文档对象模型，把文档中的标签、属性、文本、转换成对象来管理
在div标签中添加文本，方式一：文本是<div>的子结点；方式二：对象.属性的方式赋值

window.onload=function (){
            var divObj=document.createElement("div");
            var textNodeObj=document.createTextNode("文本");
            divObj.appendChild(textNodeObj);
           /* divObj.innerHTML="文本";*/
            document.body.appendChild(divObj);
        }

兴趣爱好：<input type="checkbox" name="hobby" value="cpp" checked="checked">c++
<input type="checkbox" name="hobby" value="java" >java
<input type="checkbox" name="hobby" value="js" >js
</br>
<button onclick="checkAll()">全选</button>
function checkAll(){
            var hobbies=document.getElementsByName("hobby");
            for (var i=0;i<hobbies.length;i++){
                hobbies[i].checked=true;
            }
        }

这篇关于javaweb2:javascript+正则表达式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！