JavaScript详解-程序员宅基地

技术标签: java  前端  正则表达式  Javaweb  javascript  

目录

 一、什么是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;
}

 九、正则表达式

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_48373085/article/details/128750402

智能推荐

CrossOver软件2022可以使苹果MAC电脑运行Windows软件应用_crossover mac-程序员宅基地

文章浏览阅读952次。CrossOver软件2022可以使苹果MAC电脑运行Windows软件应用_crossover mac

【论文翻译】VGG网络论文中英对照翻译--(very deep convolutional networks for large-scale image  recognition)_vgg论文翻译-程序员宅基地

文章浏览阅读4.8k次,点赞6次,收藏39次。【开始时间】2018.09.23【完成时间】2018.09.24【论文翻译】VGG网络论文中英对照翻译--(very deep convolutional networks for large-scale image recognition)【中文译名】 用于大规模图像识别的甚深卷积网络【论文链接】https://arxiv.org/abs/1409.1556目录 本文概..._vgg论文翻译

PythonStock(14):使用pandas 批量处理股票数据,批量计算股票指标_pandas_ta dmi-程序员宅基地

文章浏览阅读1w次,点赞5次,收藏49次。前言使用Python开发一个股票项目。 项目地址: https://github.com/pythonstock/stock 相关资料: http://blog.csdn.net/freewebsys/article/details/78294566 主要使用开发语言是python。 使用的lib库是pandas,tushare,TensorFlow,tornado等。本文的_pandas_ta dmi

如何给Jupyter添加python库路径_jupyter 增加库路径-程序员宅基地

文章浏览阅读9.4k次,点赞6次,收藏18次。【时间】2018.12.13【题目】如何给Jupyter添加python库路径转载链接:http://www.cnblogs.com/jisongxie/p/9892660.html概述python 在cmd中import模块成功,但是在jupyter notebook中出现No module xxx found的问题,这是没有将python库路径添加到环境变量中造成的,解决方法是..._jupyter 增加库路径

FatFs 文件系统使用_fatfs下载-程序员宅基地

文章浏览阅读4.7k次,点赞3次,收藏37次。FatFs 文件系统使用1.简介FatFs是面向小型嵌入式系统的一种通用的 FAT 文件系统。它完全是由 ANSIC 语言编写并且完全独立于底层的 I/O 介质。因此它可以很容易地不加修改地移植到其他的处理器当中,如 8051、PIC、 AVR、 SH、 Z80、 H8、 ARM 等。 FatFs 支持 FAT12、 FAT16、 FAT32 等格式,所以我们利用写好的 SPI Flash 芯片驱动或者SD驱动,把 FatFs 文件系统代码移植到工程之中,就可以利用文件系统的各种函数,对 SPI Fla_fatfs下载

Delphi常用代码汇总_delphi软件头部代码-程序员宅基地

文章浏览阅读2k次。◇[DELPHI]网络邻居复制文件uses shellapi;copyfile(pchar('newfile.txt'),pchar('//computername/direction/targer.txt'),false);◇[DELPHI]产生鼠标拖动效果通过MouseMove事件、DragOver事件、EndDrag事件实现,例如在PANEL上的LABEL:var x_delphi软件头部代码

随便推点

前端用CryptoJS类库的AES加密,后端解密不出来_前端aes加密后端解密报错-程序员宅基地

文章浏览阅读9.2k次。前端使用CryptoJS类库,进行AES加密提交到后台之后,后台解密失败,报错Given final block not properly padded经过一番搜索,终于有了解决方案!由于后台java使用AES加密使用的是AES/EBC/PKCS5Padding进行初始化的,1、首先var key = CryptoJS.enc.Utf8.parse(key); 2、由于后端用的P_前端aes加密后端解密报错

Git Hooks 使用说明_run git hooks-程序员宅基地

文章浏览阅读3.8k次,点赞2次,收藏12次。官方文档 Git - githooks DocumentationLearn how to improve your Git skillsGit 除了版本控制,还有一些其他的高级功能,其中之一就是Git Hooks,明面意思就是钩子,可以类比于钩子函数。简单说就是Hook会在做某些事情的前后被钩子钩走去一些额外事情,那么这些额外事情我们可以用作于检查、测试和部署等操作。在 Git 中有许多的事件(commit、push 等等),每个事件也是对应了有不同的钩子的(如 commit 前,commit ._run git hooks

当老师计算机要学哪些科目,如果可以当老师,哪门科目的老师最没有压力,工作很轻松?...-程序员宅基地

文章浏览阅读1.2k次。今年高考结束,不少市重点高中也送走了一批学校的尖子生。有很多老教师,已经从教十几年了。甚至有的教师教了几十年的书,直到近几年才因为年龄的原因不得不退休。记得我当年高中的时候,化学老师就因为得了膀胱癌而提前退休,当时我们还是高二,结果我们高二的教学担子就全部落在了一位正在教高三的化学老师身上。高中老师所需要担负的责任也非常多,尤其是高中的班主任,更要管理到几乎每一个学生。不仅高中如此,现在的初中生也..._计算机专业当老师可以教哪些科目

问题解决之-Spring Data开发手册|Java持久化API(JPA)需要了解到什么程度呢?_api问题怎么解决-程序员宅基地

文章浏览阅读115次。JPA,Java Persistence API是Sun官方提出的Java持久化规范。它为Java开发人员提供了一种对象/关联映射工具来管理Java应用中的关系数据。它的出现主要是为了简化现有的持久化开发工作和整合ORM技术ORM:通过使用描述对象和数据库之间映射的元数据,将程序中的对象自动持久化到关系数据库中。本质就是将数据从一种形式转换到另外一种形式。同时也结束了Hibernate、TopLink等ORM框架各自为营的局面。JPA充分吸收了Hibernate、TopLink等ORM框架的基础上发展起_api问题怎么解决

yuv420数据快速裁剪_yuv422 横向裁剪 cpu占用率-程序员宅基地

文章浏览阅读2.2k次,点赞3次,收藏2次。yuv420数据快速裁剪 最近碰到一个项目需求,这个项目是两年多年已经量产的项目,这是一个车载后视镜项目,当时配置的后视摄像头是确定的,也就是说这个后视摄像头是厂家定制出去的,当时研发在做倒车显示的时候,显示的画面是完整的裸数据,没有裁剪过,也就是后视摄像头出来的CVBS数据是N制式的时候就是720X480的原始数据来显示的。 但是最近又接到一个需求,就是这个_yuv422 横向裁剪 cpu占用率

874复习第四天-习题7编程题_.#include<stdio.h>#definen6voidmain(){inti,a[n]={2-程序员宅基地

文章浏览阅读832次,点赞2次,收藏9次。编程实现从键盘任意输入20个整数,计算其中所有非负数之和//计算20个非负整数之和#include<stdio.h>#include<string.h>int main(){ int i,sum=0; int a[20]; for(i=0;i<20;i++) { scanf("%d",&a[i]); } for(i=0;i<20;i++) { if(a[i]>=0) { sum=sum+a[i]; } } p_.#include#definen6voidmain(){inti,a[n]={2,5,8,10,15,21};for(i=0

推荐文章

热门文章

相关标签