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详解 的相关文章

  • 如何在 QueryDSL 中选择文字

    我目前正在开发一个使用 queryDSL 和 hibernate 的项目 其中它需要一个选择文字 按照发布的示例here https stackoverflow com questions 18691317 querydsl how to
  • Java ArrayList 和 HashMap 动态

    有人可以提供一个创建Java的例子吗ArrayList and HashMap在飞行中 所以而不是做一个add or put 实际上在类实例化时为数组 哈希提供种子数据 举个例子 类似于 PHP 的例子 array array 3 1 2
  • 自 JRE 1.7.0_25 起,Batik 无法进行转换

    自从我更新到 JAVA 1 7 0 25 以来 蜡染在应用转换时会抛出异常 堆栈跟踪是 java awt image ImagingOpException Unable to transform src image at java awt
  • 将上部字符转换为下部字符,将下部字符转换为上部字符(反之亦然)[重复]

    这个问题在这里已经有答案了 我需要将某些字符串中的所有较低字符转换为较高字符 并将所有较高字符转换为较低字符 例如 var testString heLLoWorld 应该 HEllOwORLD 转换后 在不保存临时字符串的情况下实现此目的
  • 获取 JSON 中的 HTML 以在 React 组件中呈现为 HTML

    试图找出如何让链接实际呈现为链接 现在 在我从 Json 文件中读取这行文本后 React 将超链接渲染为文字文本 而不将其渲染为链接 一些数据 json about John has a blog you can read a href
  • express 或express-generator:我需要两者吗?

    只是探索 Node js 并遇到了 Express 在 npm 存储库站点上https www npmjs com package express https www npmjs com package express它明确指出安装是 np
  • Angular 2 runOutsideAngular 仍然改变 UI

    从我的理解来看runOutsideAngular https angular io docs ts latest api core index NgZone class html runOutsideAngular anchor 如果我需要
  • 将 Maven 控制台与 m2eclipse 一起使用

    Maven 新手在这里 有没有办法在 Eclipse 中打开控制台并在 M2Eclipse 插件上执行 Maven 命令 这是一个非常好的插件 但我环顾四周 没有找到我想要的一些功能 谢谢 如果你想运行特定的maven插件 你可以这样做 g
  • Sequelize.js - “不关联到”

    我在从数据库获取完整数据时遇到一些问题 那是我的模型 User module exports function sequelize DataTypes return sequelize define user id type DataTyp
  • 为 Meteor 数据创建编号列表

    有没有办法获取 Meteor 集合中项目的编号列表的 编号 我知道我可以在 html 中做到这一点 但我觉得如果我可以在 spacebars 中放置一些东西 那么样式会更容易 如果我可以使用更好的术语 请告诉我 像这样的东西 前 20 部电
  • SQlite 获取最近的位置(带有纬度和经度)

    我的 SQLite 数据库中存储有纬度和经度的数据 我想获取距我输入的参数最近的位置 例如我当前的位置 纬度 经度等 我知道这在 MySQL 中是可能的 并且我已经做了相当多的研究 SQLite 需要一个自定义外部函数来实现半正弦公式 计算
  • 在 Apache Servicemix 4 中的 OSGi 包之间共享配置文件?

    有人能够在 SMX4 中的两个或多个捆绑包之间成功共享配置吗 我正在寻找的是这样的 有一个文件 SMX HOME etc myconfiguration cfg 使此配置 可用 以便使用 Spring dm 通过 OSGi 配置管理将其注入
  • “强制更新快照/版本” - 这是什么意思

    在 Maven 项目中 选择 更新项目 时 有一个名为 强制更新快照 版本 的选项 它有什么作用 强制更新快照 版本 就像运行以下命令 mvn U install U 也可以用作 update snapshot 看here http boo
  • 水平平滑滚动 100px

    Heyjo problem 一周以来我一直在寻找 javascript 或 jQuery 代码 以便在我的网站上实现滚动按钮 我失败的那一刻是按钮应该多次工作的时候 他的任务不是滚动到专用元素 而是应该向左滚动 例如 100px 此外 滚动
  • ExpressJS - DELETE 请求后 res.redirect

    我一直在寻找如何执行此操作 我正在尝试在发出删除请求后重定向 这是我正在使用的代码没有重定向 exports remove function req res var postId req params id Post remove id p
  • 对于双核手机,availableProcessors() 返回 1

    我最近购买了一部 Moto Atrix 2 手机 当我尝试查看手机中的处理器规格时 Runtime getRuntime availableProcessors 返回 1 proc cpuinfo 也仅包含有关处理器 0 的信息 出于好奇
  • javascript:window.print() 打印 2 页,而我有 1 页

    我有一个简单的 HTML 文档 其中仅包含图像标签 我想在文档加载后打印图像 我的代码 img src form1 jpg alt form1 style margin 0 auto display block 它可以工作 但问题是它打印图
  • 将 div 文本分配给变量然后显示它

    我有一个简单的任务 我试图完成学习 JavaScript 但一直无法找到明确的答案 这是代码 div Testing div 基本上我希望将方框 div 中的文本存储到变量中 然后 我想在页面的不同部分显示该变量的文本 使用上面的代码我得到
  • Volley 在第一次调用方法时返回 null

    我正在尝试使用 volley 从服务器检索数据 但是当我第一次调用此方法时 我收到服务器的响应 但该方法返回 null 如果我第二次调用它 我会得到最后的响应 public String retrieveDataFromServer Str
  • 将其元素添加到另一个列表后清除列表

    我正在做一个程序 它获取更多句子作为参数 我制作了 2 个列表 一个称为 propozitie 其中包含每个句子 另一个称为 propozitii 其中包含所有句子 问题是 当我在遇到 后清除 propozitie 列表时 它也会清除 pr

随机推荐

  • 利用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