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;
            }
        }

上一篇:XSS_Labs靶场通关


下一篇:Js Get 检测是否404