前端学习之JavaScript基础（一）

最新推荐文章于 2024-06-08 10:35:46 发布

极客小生

最新推荐文章于 2024-06-08 10:35:46 发布

阅读量363

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/shengshengshiwo/article/details/79017632

版权

前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

临近考试，还是像打了鸡血一般，决定写一篇关于JavaScript的学习笔记。

JavaScript的简单概述
JavaScript的基本语法
使用JavaScript完成表单校验
使用JavaScript完成图片轮播效果
使用JavaScript完成页面定时弹出广告

JavaScript的简单概述

什么是JavaScript？

JavaScript是浏览器端脚本语言,是一种基于对象（Object）和事件驱动（Event Driven）的脚本语言。啥意思呢？就是不用编译，有浏览器解释执行。

JavaScript的组成：

ECMAScript：JavaScript的核心；
BOM（Browser Object Model）：浏览器对象；
DOM（Document Object Model）:操作文档的元素和内容。

JavaScript的作用：

使用JavaScript添加页面动画效果
嵌入动态文本于HTML页面
对浏览器事件做出响应
读写HTML元素
验证提交数据
检测访客的浏览器信息等

JavaScript的引入

引入JavaScript的方式有两种：内嵌式和外联式。

内嵌式：HTML文档直接嵌入JavaScript脚本。

<script type="text/javascript">
    //javascipt代码
</script >

外联式：HTML链接外部的JavaScript文件

<script src="javascript.js" type="text/javascript" charset="utf-8"></script>

基本语法

变量

JavaScript的变量是弱类型，也就是说在JavaScript中，一个变量可以存放不同类型的数据。
-JavaScript的变量可以不声明，直接使用。默认值为：undefined。

数据类型

JavaScript的数据类型分为:基本类型和引用类型。

基本类型（五种）
- Undefined 类型
  - 只有一个值undefined
  - 当声明的值为初始化时，变量的默认值就是Undefined。
  - 函数无明确的返回值时，返回Undefined。
- String 类型
  - var Color = "blue";
  - 支持转义字符，\n、\r等。
  - 转换为字符串toString()方法。
- Null 类型
  - 只有一个专用值Null，表示尚未存在的对象。
  - 如果定义的变量准备用于保存对象，最好将其设置赋值为Null。
- Boolean 布尔类型
  - true 和 false
- Number 类型
  - 可以表示32位整数和64位浮点数
  - NaN（Not a Number）：非数值，表示本来要返回数值但没有返回熟知的情况。
  - alert(NaN == NaN); //false，NaN与任何值不相等，包括NaN。
  - 三个函数可以将非数值转化为数值：Number()、parseInt()、parseFloat()。
引用类型
- Array 类型（一组值的有序列表）
  - 同一个数组的每个单元都可以保存不同类型的值，如{“blue”, 3, true, null}。
  - 动态数组，长度可以动态调整。
  - 功能强大，提供栈、队列、排序等功能。
  - 创建方法包括以下三种方式：
    1）new Array();
    2）new Array(size);（size 是期望的数组元素个数）
    3）new Array(element0, element1, …, elementn);
  - Array对象包含的主要方法：
- Date 类型
  - Date 对象用于处理日期和时间，使用自UTC（Coordinated Universal Time,国际协调时间）1970年1月1日午夜（零时）开始经过的毫秒数来保存日期。
  - Date 对象常用的方法：
- RegExp 类型。RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具，用来被检索、替换那些符合某个模式的文本。
  - 语法：new RegExp(pattern, attributes);
    pattern：是一个字符串，指定了正则表达式的模式或其他正则表达式。
    attributes：是一个可选的字符串，包含属性 “g”、”i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。
  - 方括号用于查找某个范围内的字符：
  - 元字符（Metacharacter）是拥有特殊含义的字符。
  - RegExp对象属性：
  - RegExp对象方法：

JavaScript运算符

其他运算符和Java等其他语言大体一样。唯一需要注意的就是等性运算符。
==它在作比较的时候会进行自动转换。
===他在作比较的时候不会进行自动转换。

JavaScript的语句

这玩意和Java也差不多，没什么好说的。

JavaScript的基本操作

获取元素内容：
- 获取元素：
  document.getElemenById("id 名称")；
- 获取元素里面的值：
  `document.getElemenById(“id 名称”)。
JavaScript 事件：
- 表单提交事件：onsubmit
JavaScript的输入：
- 警告框：alert();
- 向页面的指定位置写入内容：innerHTML(属性);
- 向页面写入内容：document.write("");

使用JavaScript完成表单校验

下面简单做一下步骤分析：
1. 确定事件onsubmit并为其绑定一个函数。
2. 书写这个函数(获取用户输入的数据)。
3. 对输入的数据进行判断。
4. 如果输入的不正确，给出错误提示 alert
5. 如果输入合法，表单提交。

代码实现

HTML部分
为表单绑定一个事件：

<form action="#" method="get" onsubmit="return checkForm()">

对需要校验的定义id

<input type="text" name="user" id="user" />

JavaScript部分代码：

">    function checkForm(){
        /*校验用户名*/   
        var uValue =  document.getElementById("user").value;
        if(uValue==""){
            alert("用户名不能为空！");
            return flase;
        }
        /*校验邮箱*/
        var Evalue = document.getElementById("email").value;
        if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(Evalue)){
            alert("邮箱格式不正确！");
            return false;
        }
    }
</script>

完整版代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用JavaScript完成表单校验</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>
        <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
            <!--注册表单-->
            <tr>
                <td height="600px">
                    <!--嵌套一个十行二列的表格-->
                    <form action="#" method="get" name="regForm" onsubmit="return checkForm()">
                        <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
                            <tr>
                                <td>
                                    用户名
                                </td>
                                <td>
                                    <input type="text" name="user" size="34px" id="user"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    密码
                                </td>
                                <td>
                                    <input type="password" name="password" size="34px" id="password"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    确认密码
                                </td>
                                <td>
                                    <input type="password" name="repassword" size="34px" id="repassword"></input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Emaile
                                </td>
                                <td>
                                    <input type="text" name="email" size="34px" id="eamil"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    姓名
                                </td>
                                <td>
                                    <input type="text" name="username" size="34px"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    性别
                                </td>
                                <td>
                                    <input type="radio" name="sex" value="男"/>男
                                    <input type="radio" name="sex" value="女"/>女
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    出生日期
                                </td>
                                <td>
                                    <input type="text" name="birthday" size="34px"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    验证码
                                </td>
                                <td>
                                    <input type="text" name="yzm" />
                                    <img src="yanzhengma.png" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <input type="submit" value="注册" />
                                </td>
                            </tr>
                        </table>
                    </form>
                </td>               
            </tr>
            </tr>
        </table>
    </body>
</html>