javaweb

1.独占一行   容量级

2.不会独占一行  文本级

 type：表单项

name：传输数据时候的名字

value：传输的数据

id：属性的唯一标识

如图示例：

 三、css了解内容

将script脚本卸载html页面里

 alter：在网页初始化时引入一个警告窗口

将script脚本单独写在一个js文件里，在html里调用

（2）输出方式

运行结果：

1.var

全局变量

2.let

局部变量

3.const

常量

1.关于==和===的区别

==:
    1. 判断类型是否一样，如果不一样，则进行类型转换
    2. 再去比较其值

===:全等于
    1. 判断类型是否一样，如果不一样，直接返回false
    2. 再去比较其值

    var age1 = 20;
    var age2 = "20";

    // alert(age1 == age2);// true
    // alert(age1 === age2);// false

2.关于类型转换
类型转换：
    * 其他类型转为number：
        1. string: 按照字符串的字面值，转为数字.如果字面值不是数字，则转为NaN。一般使用parseInt
        2. boolean: true 转为1，false转为0

    * 其他类型转为boolean：
        1. number:0和NaN转为false，其他的数字转为true
        2. string:空字符串转为false，其他的字符串转为true
        3. null:false
        4. undefined:false

字符转数字：

     var str = +"20";
    var str = "20";
    alert(parseInt(str) + 1);

布尔型转为数字：

var flag = +false;
    alert(flag);

字符型转为布尔型：

var str = "asb"
 if(str){
        alert("转为true");
    }else {
        alert("转为false");
    }

  var a=5
  var b =5

  
  //定义函数方法一 function 函数名 （参数）{方法体}
  // function add(a,b){
  //   return a+b
  // }
  //定义函数方法二 var 函数名 = function（参数）{方法体}
  var add = function (a,b){
    return a+b
  }
  let  result = add(a,b)
alert( result)

1.Array数组

 下面包含：    1. 数组的定义方法2种

                       2. 数组数值查询方法

                        3.数组遍历方法

                        4.数组的三个属性

                        5.两个常用方法

// /**
//  * 定义数组的方法：
//  * var 数组名 = new Array（数据1，数据2，数据3）
//  * var 数组名 = [数据1，数据2，数据3]  （常用）
//        访问数组数据：
//                 数组名[索引] = 值
//                       arr[1] = 1 ;
//  */

            var arr1 = new Array(1,2,3)
//        查看数组的数值
            alert(arr1[0]) //访问第一个数据
//        属性1：类型不固定 可以放各种类型的数据
            var arr2 =["问你一个问题","翁鑫怡聪明吗？","哦，当然","当然是很笨","高黎怎么说的","你确定要听","hahah1是的","妈的翁鑫怡臭傻逼"]
            // alert(arr2);
//        属性2：length（数组长度）*配合for循环遍历数组
               for (let i = 0; i < arr2.length; i++) {
                      alert( arr2[i]) ;
                 }
//         属性3：不定长度,无限拉长，没有定义的位置为undefined
              arr2[15]=20;
               alert(arr2[15]);
               alert(arr2[14])
//          常用方法1：push()在现在的数据末尾添加新的数据
              var arr3 = [1,2];
              alert(arr3);
              arr3.push(4);
               alert(arr3);
//          常用方法二:splice(从何处开始删除，删除数量) 批量删除数据
            arr4 = [0,1,2,3,4,5,6,7,8,9];
            arr4.splice(0,4)
            alert(arr4)

常用方法:

<1>alert（"d出的内容"）d出警告框

不再演示

<2>confirm（"显示的文字"）显示带有一段文字且有确定和取消的选择框

                注意：confirm有返回值，类型是布尔类型。当点击确定返回true，点击取消返回false

可根据返回值做相应处理。

    let confirm1 = confirm("你是沙雕吗？");//注意confirm有返回值，布尔类型
        if(confirm1){
            alert("你确实沙雕")
        }else{
            alert("你还是沙雕")
        }

<3>setInterval(方法，时间)  按照指定的时间，循环执行指定的方法

 setInterval(function (){alert("你是个大聪明")},3000)
          //每三秒执行一次，d出警告框“你是个大聪明”

<4>setTimeout(方法，时间)  到达指定的事件后，执行某个方法，且只执行一次

 setTimeout(function (){alert("你是个大聪明")},3000)
          //三秒后执行d出警告框“你是个大聪明”，只执行一次

<1>.back（）

返回上一个历史标签页面URL:

<2>.forward（）

加载下一个历史标签页面URL:

属性：href

可以更改当前的URL，以达到跳转标签的作用

location.href="https://www.baidu.com"
//跳转到百度

三秒后天转到百度，且有提示：

3
  

1.获取对应输入框的对象

例如：获取对应的用户名输入框的对象

//1.获取表单项用户名的对象
    var usernameInput = document.getElementById("username");

2.绑定事件

绑定用户名的对应事件：

//2.绑定事件
    usernameInput.onblur=checkusername;
    function checkusername(){
      // 获取用户名表单内容,trim()用于清除前后空格
      var usernames = usernameInput.value.trim();
      var flag =  usernames.length>6 && usernames.length<12;
      if (flag){
        document.getElementById("username_err").style.display='none'//把username_err的span属性display设为none会隐藏
      }else{
        document.getElementById("username_err").style.display=''//把username_err的span属性display设为空''会默认显示
      }
      return flag;
    }

3.验证所有输入框都正确传输数据

//表单提交
    var regs = document.getElementById("reg-form");
    regs.onsubmit=submitRegs;
    function submitRegs(){

     var flag =  checkusername() && checkpassword() && checktel();
      return flag;
    }

源码：

css：register

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.reg-content{
    padding: 30px;
    margin: 3px;
}
a, img {
    border: 0;
}

body {
    background-image: url("../imgs/reg_bg_min.jpg") ;
    text-align: center;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td, th {
    padding: 0;
    height: 90px;

}
.inputs{
    vertical-align: top;
}

.clear {
    clear: both;
}

.clear:before, .clear:after {
    content: "";
    display: table;
}

.clear:after {
    clear: both;
}

.form-div {
    background-color: rgba(255, 255, 255, 0.27);
    border-radius: 10px;
    border: 1px solid #aaa;
    width: 424px;
    margin-top: 150px;
    margin-left:1050px;
    padding: 30px 0 20px 0px;
    font-size: 16px;
    box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);
    text-align: left;
}

.form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] {
    width: 268px;
    margin: 10px;
    line-height: 20px;
    font-size: 16px;
}

.form-div input[type="checkbox"] {
    margin: 20px 0 20px 10px;
}

.form-div input[type="button"], .form-div input[type="submit"] {
    margin: 10px 20px 0 0;
}

.form-div table {
    margin: 0 auto;
    text-align: right;
    color: rgba(64, 64, 64, 1.00);
}

.form-div table img {
    vertical-align: middle;
    margin: 0 0 5px 0;
}

.footer {
    color: rgba(64, 64, 64, 1.00);
    font-size: 12px;
    margin-top: 30px;
}

.form-div .buttons {
    float: right;
}

input[type="text"], input[type="password"], input[type="email"] {
    border-radius: 8px;
    box-shadow: inset 0 2px 5px #eee;
    padding: 10px;
    border: 1px solid #D4D4D4;
    color: #333333;
    margin-top: 5px;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
    border: 1px solid #50afeb;
    outline: none;
}

input[type="button"], input[type="submit"] {
    padding: 7px 15px;
    background-color: #3c6db0;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    min-width: 80px;
    border: none;
    color: #FFF;
    box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
}

input[type="button"]:hover, input[type="submit"]:hover {
    background-color: #5a88c8;
}

input[type="button"]:active, input[type="submit"]:active {
    background-color: #5a88c8;
}
.err_msg{
    color: red;
    padding-right: 170px;
}
#password_err,#tel_err{
    padding-right: 195px;
}

#reg_btn{
    margin-right:50px; width: 285px; height: 45px; margin-top:20px;
}

html：

    
    
  



  
    欢迎注册
    已有帐号？ 登录
  
  


    


      

        
用户名
        

          
          

          用户名不太受欢迎
        

      

      

        
密码
        

          
          

          密码格式有误
        
      


      

        
手机号
        

          

          手机号格式有误
        
      

    

    
      
    
    

  

 {m,n}:至少m个至多n个

1.如何定义正则表达式规则

var reg = /^$ /   //规则写在//里面，^   表示开始   $  表示结束

2.方法tset（测试的字符串）

实例：

    // 规则：单词字符，6~12
    var reg = /^\w{6,12}$/;
    var str = "abcccc";
    var flag = reg.test(str);
    alert(flag);
    //数字字符，开头是1，一共11位
    var reg2 = /^[1]\d{11} $/
    var str2 = "13213636881"
    var flag = reg.test(str2);
    alert(flag);