js

0索引

1基础语法

2点击

3简单校验

1基础语法

基础语法

变量弱类型: varj= true
区分大小写
语句结束之后的分号,可以有,也可以没有
写在script标签|
JS的数据类型:

基本类型

string
number
boolean
undefine
null

引用类型

对象,内置对象

类型转换
JS的运算符和语句: .
运算符和java一样
"==="全等号:值和类型都必须相等
==值相等就可以了
语句和java一样
JS的输出

alert()直接弹框
document.write() 向页面输出
console.log() 向控制台输出
innerHTML: 向页面输出
获取页面元素: document.getElementyld("id的名称":

JS声明变量:

var变量的名称=变量的值

JS声明函数:

var 函数的名称= function () {
}
function函数的名称 () {
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            
//            <!--每句话之后有无；皆可-->
            var i=1;
            var j="123";            
            //alert("lisi".length);//直接弹框
            
            var str1=123;
            var str2="123";
            //lert(str1==str2);//true
            //alert(str1===str2);//false
            
            //向页面输出内容
            document.write("好好学习");
            //向控制台输出，通过检查可以在控制台看到输出
            console.log("向控制台输出");
        </script>
    </head>
    <body>
        
    </body>
</html>

2点击

内容：
1. 确定事件点击事件
2. 通常事件都会出发一个函数
3. 函数里面通常都会去操作页面元素,做一些交互动作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    
        <script>
            function dianwo(){
                //alert("我被点击了");
                //1.首先要获得这个div
                var div = document.getElementById("div1")
                div.innerHTML = "<font color='red'>内容被替换掉了</font>";
//                div.innerText = "<font color='red'>内容被替换掉了</font>";
            }
        </script>
    </head>
    <body>
        <input type="button" value="点我,修改DIV中的内容" onclick="dianwo()" />
        
        <div id="div1">
            这里的内容一会要被替换掉    
        </div>
    </body>
</html>

修改前：

修改后：

3简单校验

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            1.校验用户名, 长度不能小于6位
                1.确定事件: 提交事件 onsubmit
                2.事件要触发函数 checkForm()
                3. 函数中要去做一些校验
        -->
        <script>
            function checkForm(){
                
                //获取用户输入的内容
                var input1 = document.getElementById("username");
//                alert(input1.value);
                var uValue = input1.value;
                if(input1.value.length >= 6){
                    
                }else{
                    alert("对不起,用户名太短啦!")
                    return false;
                }
                
                //邮箱的校验
                //获取用户输入的邮箱的值
                var email = document.getElementById("email")
                var uEmail = email.value;
                //判断内容为正则表达式
                if(/^[a-z0-9]+([._\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(uEmail)){
                    alert("校验成功");
                }else{
                    alert("校验失败")
                    return false;
                }
                
                return true;;
            }
        </script>
        
    </head>
    <body>
        <!--checkForm()值得注意的是他必须要有返回值-->
        <form action="../01-网站首页的优化/网站首页.html" onsubmit="return checkForm()" >
            用户名:<input type="text" id="username" /><br />
            密码:<input type="password" id="password" /><br />
            邮箱:<input type="text" id="email" /><br />
            
            <input type="submit" value="提交" />
        </form>
    </body>
</html>