JavaScript详解

2023-11-09

目录

 一、什么是JavaScript?

二、JavaScript的引入方式

 三、JavaScript的基础语法

3.1 书写语法

3.2 输出语句 

3.3 变量

3.4 数据类型

3.5 运算符

3.6 流程控制语句

 3.7 函数

 四、JavaScript对象

 4.1 Array对象

4.2 String对象

4.3 自定义对象

五、BOM对象

5.1 window对象

5.2 history对象

5.3 location对象

六、DOM对象

七、事件监听

八、案例——表单验证

 九、正则表达式


 一、什么是JavaScript?

JavaScript是一门跨平台、面向对象的脚本语言(不需要编译,直接解释运行即可),来控制网页的行为,它能使网页可交互

W3C标准:网页主要由三部分构成

  • 结构:HTML
  • 表现:CSS
  • 行为:JavaScript

JavaScript和Java是完全不同的语言,不论是概念还是设计。但是在基础语法上类似。

JavaScript(简称:JS)在1995年由Brendan Eich发明,并于1997年成为一部ECMA标准。

ECMAScript 6(ES6)是最新的JavaScript版本(发布于2015年)

二、JavaScript的引入方式

1.内部脚本:将JS代码定义在HTML页面中

在HTML中,JavaScript代码必须位于<sctipt></sctipt>标签之间

 <script>
        /*弹出警告框*/
        alert("hello js");
</script>

提示: 

  •  在HTML文档中可以在任意地方,放置任意数量的<script>
  • 一般把脚本置于<body>元素的底部,可改善显示速度,因为脚本执行会拖慢显示

2.外部标签:将JS代码定义在外部JS文件中,然后引入HTML页面中

外部文件:demo.js

alert("hello js");

 引入外部js文件:

<script src="../js/demo.js"></script>

注意:

  1. 外部文件不能包含<script>标签
  2. <script>标签不能自闭合,必须写成<script></script>

 三、JavaScript的基础语法

3.1 书写语法

  1. 区分大小写:与Java一样,变量名、函数名以及其他一切东西都是区分大小写的
  2. 每行结尾的分号可有可无
  3. 注释:单行注释://注释内容   多行注释:/*注释内容*/ 
  4. 大括号表示代码块
    if(count == 3){
        alter(count);
    } 
    

3.2 输出语句 

 3.3 变量   

 3.4 数据类型

3.5 运算符

 3.6 流程控制语句

  • if判断
  • switch选择
  • for循环
  • while循环
  • do...while循环

 3.7 函数

 四、JavaScript对象

 4.1 Array对象

4.2 String对象

trim():去除字符串前后两端的空白字符

4.3 自定义对象

五、 BOM对象

5.1 window对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<input type="button" onclick="on()" value="开灯">
<img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center;">
<input type="button" onclick="off()" value="关灯">

<script>

  function on(){
    document.getElementById('myImage').src='../imgs/on.gif';
  }

  function off(){
    document.getElementById('myImage').src='../imgs/off.gif'
  }

  var x = 0;
  //定时器
  //根据一个变化的数字,产生固定个数的值:2种可能 x % 2
  setInterval(function (){

    if(x%2 == 0){
      on();
    }else{
      off();
    }
    x++;
  },1000);
</script>

</body>
</html>

5.2 history对象

5.3 location对象

六、 DOM对象

 

修改 img 对象的 src 属性来改变图片 

 style:设置元素css样式
 innerHTML:设置元素内容

通过将 复选框(checkbox) 元素对象的 checked 属性值设置为 true 来改变复选框的选中状态

 七、事件监听

 八、案例——表单验证

 HTML源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="../css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号?</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>


<script>

    //1. 验证用户名是否符合规则
    //1.1 获取用户名的输入框
    var usernameInput = document.getElementById("username");

    //1.2 绑定onblur事件 失去焦点
    usernameInput.onblur = checkUsername;

    function checkUsername() {
        //1.3 获取用户输入的用户名
        var username = usernameInput.value.trim();

        //1.4 判断用户名是否符合规则:长度 6~12,单词字符组成
        var reg = /^\w{6,12}$/;
        var flag = reg.test(username);

        //var flag = username.length >= 6 && username.length <= 12;
        if (flag) {
            //符合规则
            document.getElementById("username_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("username_err").style.display = '';
        }

        return flag;
    }


    //1. 验证密码是否符合规则
    //1.1 获取密码的输入框
    var passwordInput = document.getElementById("password");

    //1.2 绑定onblur事件 失去焦点
    passwordInput.onblur = checkPassword;

    function checkPassword() {
        //1.3 获取用户输入的密码
        var password = passwordInput.value.trim();

        //1.4 判断密码是否符合规则:长度 6~12
        var reg = /^\w{6,12}$/;
        var flag = reg.test(password);

        //var flag = password.length >= 6 && password.length <= 12;
        if (flag) {
            //符合规则
            document.getElementById("password_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("password_err").style.display = '';
        }

        return flag;
    }


    //1. 验证手机号是否符合规则
    //1.1 获取手机号的输入框
    var telInput = document.getElementById("tel");

    //1.2 绑定onblur事件 失去焦点
    telInput.onblur = checkTel;

    function checkTel() {
        //1.3 获取用户输入的手机号
        var tel = telInput.value.trim();

        //1.4 判断手机号是否符合规则:长度 11,数字组成,第一位是1

        //var flag = tel.length == 11;
        var reg = /^[1]\d{10}$/;
        var flag = reg.test(tel);
        if (flag) {
            //符合规则
            document.getElementById("tel_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("tel_err").style.display = '';
        }

        return flag;
    }


    //1. 获取表单对象
    var regForm = document.getElementById("reg-form");

    //2. 绑定onsubmit 事件
    regForm.onsubmit = function () {
        //挨个判断每一个表单项是否都符合要求,如果有一个不合符,则返回false

        var flag = checkUsername() && checkPassword() && checkTel();

        return flag;
    }

</script>
</body>
</html>

 register.css:

* {
    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;
}

 九、正则表达式

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript详解 的相关文章

随机推荐

  • 利用Python采集某站上的所有陪玩妹子信息!听说现在做陪玩的都非常漂亮?

    前言 我想应该很多男生都是会打游戏的吧 女生就手机游戏 王者 刺激战场这些应该多些 男生应该就是英雄联盟 穿越火线 绝地求生等等一系列的游戏吧 那么你知道陪玩是什么时候就冒出来的新职业吗 知道的话可以告诉我一下哦 今天咱们的主要目的还是玩爬
  • Docker容器网络更改

    1 添加自定义网络 默认是桥接模式 docker network create 网络名称 2 解除容器绑定的网络 docker network disconnect 网络名称 容器名称 3 为容器重新指定网络 docker network
  • 《数据结构、算法与应用C++语言描述》使用C++语言实现二维数组稀疏矩阵

    数据结构 算法与应用C 语言描述 使用C 语言实现二维数组稀疏矩阵 稀疏矩阵定义 一个mxn 的矩阵 如果大多数元素都是0 则称为稀疏矩阵 spare matrix 一个矩阵如果不是稀疏的 就称为稠密矩阵 dense matrix 在稀疏矩
  • 如何设计一个分布式系统去分析3亿条数据?

    V xin ruyuanhadeng获得600 页原创精品文章汇总PDF 目录 从一个新闻门户网站案例引入 推算一下你需要分析多少条数据 黄金搭档 分布式存储 分布式计算 这篇文章聊一个话题 什么是分布式计算系统 一 从一个新闻门户网站案例
  • ROS学习之利用xacro/URDF模型搭建及rviz和gazebo仿真

    建议好好研究一下P3DX中的代码 非常有借鉴意义 xacro非常重要的作用是利用类似宏的方式 利用参数化来快速搭建模型 A ROS Gazebo Pioneer 3DX model created by Rafael Berkvens mo
  • qu32调音台说明书_Qu-32 数字调音台

    技术参数 触摸屏 7英寸 800x480彩色触摸屏 推子 100mm 电动推子 32个麦克风 线路输入 平衡XLR 19dBu最大输入电平 TRS带10dB定值衰减 总谐波失真 噪声 均一增益0dB 0 0005 89dBu 20 20kH
  • STM32F103C8T6 驱动 oled 4针篇

    1 配置STM32编译环境 大部分买的STM32F103C8T6属于国产的 会导致程序烧录报错 如果出现问题参考另一篇STM32F103C8T6程序烧录方法 流浪法师解剖鱼的博客 CSDN博客 2 烧录程序 环境配置好后 编写程序烧录就可以
  • 把int变量赋值给char数组 C语言

    char p 10 int i for i 0 i lt 10 i p i char 0 i
  • ubuntu setup nvidia development environment on a single machine(not virtual machine)

    ubuntu 18 04 gtx1080ti setup nvidia driver using software update building in ubuntu refer to address1 i choose nvidia dr
  • 阿里巴巴为什么能抗住90秒100亿?看完这篇你就明白了!

    作者 huashiou链接 https segmentfault com a 1190000018626163 1 概述 本文以淘宝作为例子 介绍从一百个并发到千万级并发情况下服务端的架构的演进过程 同时列举出每个演进阶段会遇到的相关技术
  • librdkafka介绍文档

    ntroduction to librdkafka the Apache Kafka C C client library librdkafka 是一个C实现的高性能 Apache Kafka 客户端 为生产环境提供了一个可靠和高性能的客户
  • 算法题记录【华为od】货币换算单位

    题目描述 思路分析 就是直接处理 比较麻烦的的是将字符串处理成数组 我用的是正则匹配 代码解析 t input 4 100CNY101fen 100HKD102cents 100JPY103sen 100EUR104eurocents 10
  • rabbitmq(四)、消息丢失问题

    丢失消息的三种情况 生产者弄丢了数据 RabbitMQ 弄丢了数据 消费端弄丢了数据 一 生产者弄丢了数据 生产者将数据发送到 RabbitMQ 的时候 可能数据就在半路给搞丢了 因为网络问题啥的 都有可能 方法一 此时可以选择用 Rabb
  • linux cp无法创建一般文件夹,cp: 无法创建普通文件 : 文件已存在

    背景 碰到一个偶现的编译出错问题 如图 报错的信息是 cp 无法创建普通文件 xxx 文件已存在 排查原因 看了下 Makefile 这句非常简单 就是 cp xxx xxx 而已 本身没什么问题 那再结合上下文出现的打印 一个异常之处就是
  • Jupyter快捷键-查看并设置

    1 快捷键 Jupyter 笔记本有两种不同的键盘输入模式 编辑模式允许您将代码或文本输入到一个单元格中 并通过一个绿色边框的单元格来表示 命令模式将键盘与笔记本级命令绑定在一起 并通过一个灰框 左边距蓝色的单元格显示 命令行模式 按 Es
  • 《魔童降世》影评——从封神演义谈到宿命

    今日看完魔童降世中的哪吒 不得不称赞这次改编很精妙 也不得不说编剧的三观很正 哪吒在我们大多数人的心中可能是纯真无害的小孩子 生来便拥有法宝乾坤圈和混天绫 得遇名师太乙真人 修得神通三头六臂 坚持正义 帮助武王伐纣 灭石叽 最后肉身 莲花
  • ImportError: libopenblas.so.0: cannot open shared object file: No such file or directory

    安装OpenBLAS的步骤 1 下载最新的openblas git clone https github com xianyi OpenBLAS git 没有安装git 先安装git CentOS安装git yum install git
  • MyBatisPlus的@TableId注解来实现自增序列id自动插入的功能

    写法 TableId value 数据库主键字段 type IdType 六种类型之一 例如 TableId value user id type IdType AUTO 1 ASSIGN ID 雪花算法 如果不设置 type 值 默认则使
  • Flink_03_Window(个人总结)

    声明 1 本文为我的个人复习总结 并非那种从零基础开始普及知识 内容详细全面 言辞官方的文章 2 由于是个人总结 所以用最精简的话语来写文章 3 若有错误不当之处 请指出 keyBy不仅是为了分组 同时还是为了能把数据分布到不同分区进行并行
  • JavaScript详解

    目录 一 什么是JavaScript 二 JavaScript的引入方式 三 JavaScript的基础语法 3 1 书写语法 3 2 输出语句 3 3 变量 3 4 数据类型 3 5 运算符 3 6 流程控制语句 3 7 函数 四 Jav