JavaEE_day03_JS01

一、元素获取：

相关知识：

javascript代码在<javascript></javascript>标签中书写，然后放在<head></head>标签中；
window.onload()方法表示html只要一加载，就立马触发的事件
function（）函数，也可以表示一个方法，分为'有方法名'的和'无方法名'的.
用document.getElementById(id)获取指定元素，然后用 .value获取值

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>获取元素+++</title>
        <script>
            //window可要可不要
            window.onload=function(){
            var uEle=document.getElementById("username");
            var uValue=uEle.value;
            alert(uValue);
            
            }
            
        </script>
    </head>
    <body>
        用户名：<input type="text" name="username"/ id="username"><br />
        密码：<input type="password"  name="password"/>
    </body>
</html>

效果图如下：

元素获取.png

二、表单页面校验

相关知识：

onsubmit事件表示点击提交按钮后触发；
邮箱校验用正则表达式 .test()；

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>注册页面+++</title>
        <script>
            function checkForm(){
                //校验用户名
                var uValue=document.getElementById("user").value;
                if(uValue==""){
                    alert("用户名不能为空");
                    return false;
                }
                //校验密码
                var pValue=document.getElementById("password").value;
                if(pValue==""){
                    alert("密码不能为空");
                    return false;
                }
                //校验确认密码
                var rpValue=document.getElementById("repassword").value;
                if(rpValue!=pValue){
                    alert("两次密码输入不一致");
                    return false;
                }
                //校验邮箱
                var eValue=document.getElementById("eamil").value;
                if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
                    alert("邮箱格式不正确!");
                    return false;
                }
            }
        </script>
    </head>
    <body>
        <form  onsubmit="return checkForm()">
        用户名<input type="text" name="user"  id="user"/>
        密码<input type="password" name="password" id="password"/>
        确认密码<input type="password" name="repassword"  id="repassword" />
            Emaile<input type="text" name="email"  id="eamil"/>
    </form>
    </body>
</html>

三、JS实现轮播图：

1、轮播图初识：

相关知识：

onclick事件表示点击普通按钮后会触发一个函数；

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>切换图片+++</title>
        <style>
            div{
                border: 1px solid white;
                width:500px ;
                height: 350px;
                margin: auto;
                text-align: center;
            }
        </style>
        
        <script>
            var i=1;
            function changeImg(){
                i++;
                document.getElementById("img1").src="../../img/"+i+".jpg";
                if(i==3){
                    i=0;
                }
            }
        </script>
    </head>
    <body>
        <div>
            <input type="button" value="下一张" onclick="changeImg()"/>
            ![](../../img/1.jpg)
        </div>
    </body>
</html>

效果图如下：
点击“下一张”，更换图片

轮播图.png

2、轮播图定时播放：

相关知识：

在<body></body>标签中写入onload事件，调用一个函数；

<body onload="init()">
</body>

然后init()函数调用setInterval（）方法。

function init(){
                //书写轮图片显示的定时操作
                setInterval("changeImg()",3000);
            }

四、 JS实现广告弹窗（持续三秒自动关闭）

相关知识：

confirm("弹窗内容")方法表示弹出一个窗口；
prompt("请输入价格")弹出一个窗口，供输入价格；
time = setInterval("showAd()",3000);
clearInterval(time);
外部引入JavaScript文件

<script type="text/javascript" src="1.js" ></script>

代码如下：
01_Window对象.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Window对象</title>
        <script>
            //确认弹出框
            //confirm("您确定是否删除吗？");
            //输入框
            //prompt("请输入价格");
        </script>
    </head>
    <body>
        <a href="02_History对象.html">点我！</a>
    </body>
</html>

02_History对象.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>History对象</title>
        <script>
            function fanhui(){
                history.go(1);
                //history.back();
            }
        </script>
    </head>
    <body>
        <input type="button" value="返回上一页" onclick="fanhui()"/><br />
        <a href="03_Location对象.html">下一页</a>
    </body>
</html>

03_Location对象.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Location对象</title>
    </head>
    <body>
        <input type="button" value="跳转到history页面" onclick="javascript:location.href='02_History对象.html'"/>
    </body>
</html>

五、注册页面校验完善

相关知识：

onfocus聚焦事件，将鼠标指针指向输入框就触发；
onblur离焦事件，将鼠标指针移出输入框就触发；

代码实现如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function showTips(id,info){
                document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
            }
            
            
            function check(id,info){
                //1.获取用户输入的用户名数据
                var uValue = document.getElementById(id).value;
                //2.进行校验
                if(uValue==""){
                    document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
                }else{
                    document.getElementById(id+"span").innerHTML="";
                }
            }
        </script>
    </head>
    <body>
        用户名<input type="text" name="user" size="34px" id="user" onfocus="showTips('user','用户名必填！')" onblur="check('user','用户名不能为空！')"/><span id="userspan"></span>
        密码<input type="password" name="password" size="34px" id="password" onfocus="showTips('password','密码必填')" onblur="check('password','密码不能为空!')"/><span id="passwordspan"></span>
    
    </body>
</html>

六、总结：

javascript简单介绍
ECMAScript
1.语法
2.变量：只能使用var定义，如果在函数的内容使用var定义，那么它是一个局部变量，如果没有使用var它是一个全局的。弱类型！
3.数据类型：原始数据类型(undefined/null/string/number/boolean)
4.语句：
5.运算符：==与===的区别
6.函数：两种写法(有命名称，匿名的)

BOM对象
window:alert(),prompt(),confirm(),setInterval(),clearInterval(),
setTimeout(),clearTimeout()
history:go(参数)，back(),forward()
location: href属性

事件：
onsubmit()此事件写在form标签中，必须有返回值。
onload()此事件只能写一次并且放到body标签中
其它事件放到需要操作的元素位置。(onclick、onfocus、onblur)

获取元素：
document.getElementById("id")
获取元素里面的值:
document.getElementById("id").value

向页面输出
弹窗：alert();……
向浏览器中写入内容：document.write(内容)；
向页面指定位置写入内容,innerHTML

JavaEE_day03_JS01

一、元素获取：

二、表单页面校验

三、JS实现轮播图：

四、 JS实现广告弹窗（持续三秒自动关闭）

五、 注册页面校验完善

六、总结：

推荐阅读更多精彩内容

五、注册页面校验完善