JavaScript入门

最新推荐文章于 2024-08-30 20:29:15 发布

Yeauty

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量428

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Yeauty/article/details/53340333

版权

JavaScript概述

什么是JavaScript?

运行在浏览器端的一个脚本语言

脚本语言是一种解释性的语言,例如Python、vbscript,javascript,installshield script,ActionScript等等,它不象c\c++等可以编译成二进制代码,以可执行文件的形式存在，脚本语言不需要编译，可以直接用，由解释器来负责解释。

脚本语言一般都是以文本形式存在,类似于一种命令。

JS的组成:

ECMAScript: 定义JS的语法规范

DOM: Document Object Model 文档对象模型,主要是用来操作文档树,对我们的html文件内容进行增删改查

BOM: Browser Object Model 它主要是用来操作浏览器的, 例如:浏览记录,跳转,获取屏幕信息

JS的语法:

区分大小写
语法要求不是特别严格, 语句结束的分号可有可无
变量是弱变量类型
- var i = 3;
- var i = “aaaa”
- var i = new Object();
JS代码需要写在<script></script>

JS的数据类型:

原始类型
- string
- number
- boolean
- undefined
- null
引用类型
- 内置对象, 注意: 引用类型的默认值是null

JS的运算符和语句:

运算符与Java中的相同
- 全等于 === : 类型和值都一致才返回true
语句和Java一致

JS的输出

alert(内容);
- 向页面弹出一个提示框
innerHTML:
- 向页面的某个元素中写一段内容
document.write();
- 向页面中写内容

步骤分析:

JS通常都是由事件驱动的, 确定事件 onclick
事件通常会触发一个js函数, 实现事件所要触发的函数
获取用户输入的值
对用户输入的值进行判断

代码实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>div注册页面</title>
        <script type="text/javascript" src="../js/regutils.js" ></script>
        <script>
            function checkForm(){
                var username = document.getElementById("username");
                var uValue = username.value;
                //alert(uValue);
                if(uValue == "" || uValue.length < 6){
                    alert("用户名不能为空或者长度小于6");
                    return false;
                }

                //判断密码
                var upass = document.getElementById("password").value;
                var uRepass = document.getElementById("repassword").value;
                if(upass.length < 8 ){
                    alert("密码不能小于8位数字");
                    return false;
                }
                if(upass != uRepass){
                    alert("两次输入的密码不一致!")
                    return false;
                }
                var phone = document.getElementById("phone").value;

                if(!/^[1][358][0-9]{9}$/.test(phone)){
                    alert("电话号码格式不正确");
                    return false;
                }

                var mail = document.getElementById("email").value;
                if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(mail)){
                    alert("邮箱输入不正确");
                    return false;
                }
                return true;
            }
        </script>
    </head>
    <body>
        <div>
            <!--LOGO部分-->
            <div>
                <div style="float: left; width: 33%;">
                    <img src="../img/logo2.png" />
                </div>
                <div  style="float: left; width: 33%;">
                    <img src="../image/header.jpg"/>
                </div>
                <div  style="float: left; width: 33%;">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>
            <!--导航栏部分-->
            <div style="clear: both;"></div>

            <div style="background: black; height: 50px;border: 1px solid red; width: 99%;">
                <ul>
                    <li style="display: inline; color: white;">首页</li>
                    <li style="display: inline; color: white;">手机数码</li>
                    <li style="display: inline; color: white;">鞋靴箱包</li>
                    <li style="display: inline; color: white;">香烟酒水</li>
                </ul>
            </div>
            <!--注册信息-->
            <div style="width: 99%; background: url(../image/regist_bg.jpg); height: 600px;">
                <div style="position: absolute;top:200px;left:300px;width: 50%;height:60%;background: white;border:5px solid gray;">
                    <form action="../07-CSS布局首页/div首页.html" onsubmit="return checkForm()">
                        <h3>用户注册</h3>
                        <table width="80%" height="70%" cellspacing="15px">
                            <tr>
                                <td>
                                    <label for="username">用户名:</label>
                                </td>
                                <td>
                                    <input type="text" id="username" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    密      码:
                                </td>
                                <td>
                                    <input type="password" id="password"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    确认密码:
                                </td>
                                <td>
                                    <input type="password" id="repassword"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    手机号码:
                                </td>
                                <td>
                                    <input type="text" id="phone"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    邮箱地址:
                                </td>
                                <td>
                                    <input type="text" id="email"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    出生日期:
                                </td>
                                <td>
                                    <input type="date" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <input type="submit" value="注册" />
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            <!--网站页脚-->
            <div>
                <img src="../img/footer.jpg" style="width: 100%;"/>
            </div>
            <!--网站链接信息-->
            <div style="text-align: center;">
                <a href="#">关于我们</a>
                <a href="#">联系我们</a>
                <a href="#">招贤纳士</a>
                <a href="#">法律声明</a>
                <a href="#">友情链接</a>
                <a href="#">支付方式</a>
                <a href="#">配送方式</a>
                <a href="#">服务声明</a>
                <a href="#">广告声明</a>
                <br />
                Copyright © 2005-2016 Yeauty商城 版权所有
            </div>
        </div>
    </body>
</html>

使用JS完成图片的轮播效果

技术分析:

每隔2秒钟切换一张图片

每隔2秒
切换图片

JS中的定时器:

需要用到BOM中的window对象

setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

如何切换图片:

首先要获取到图片元素,然后再去修改它的src属性
- document.getElementById(id);

img.src="../img/"+curIndex+".jpg";

步骤分析:

确定事件,文档加载完成 onload事件
实现事件所要触发的函数 init();
编写一个切换图片的方法
启动定时器,调用切换图片的方法

代码实现:

function init(){
  //获取图片的img
  var ad = document.getElementById("ad");
  var index = 0;
  //切换图片的函数
  function changeAd(){
    var curIndex = index % 3 + 1; // 0,1,2 ,0 ,1,2
    ad.src="../img/"+curIndex+".jpg";
    index++;
  }
  //启动定时器,调用切换图片的方法,传入的是方法的名字
  setInterval(changeAd,1000);
}

Yeauty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript入门

JavaScript概述什么是JavaScript?运行在浏览器端的一个脚本语言脚本语言是一种解释性的语言,例如Python、vbscript,javascript,installshield script,ActionScript等等,它不象c\c++等可以编译成二进制代码,以可执行文件的形式存在，脚本语言不需要编译，可以直接用，由解释器来负责解释。脚本语言一般都是以文
复制链接

扫一扫