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

智能推荐

程序员如何优化自己的职业程序?_程序员怎么走系统优化路线-程序员宅基地

文章浏览阅读700次。突如其来的疫情,打乱了所有职场人的节奏。年前裸辞,打算年后再找工作,拿到offer的希望,瞬间渺茫;领了年终奖,准备迎接“跳槽季”,迎来的是裁员、企业倒闭。困守在家中的人,也在线上交流着对未来的担忧:“疫情什么时候结束?我该怎么安排跳槽节奏?”“公司会不会裁员?我该怎么让自己不可替代?”“疫情对行业有什么影响?我要不要朝线上发展?”这些..._程序员怎么走系统优化路线

GCN公式中特征矩阵和邻接矩阵的处理_(1)获取点簇特征矩阵x,并计算邻接矩阵a,自连接邻接矩阵 , 及 ; (2)输入两层的gcn-程序员宅基地

文章浏览阅读1.2w次,点赞7次,收藏45次。https://mp.weixin.qq.com/s?__biz=MzI0ODcxODk5OA==&mid=2247509797&idx=4&sn=0f356b8f6397ad6e0743e192ed182ede&chksm=e99e94dcdee91dcad9bc842ed129b27e7cfe649fc3407e21e7e0c05060c7f6daf346d628f189&mpshare=1&scene=23&srcid=0617GtNIERqCM_(1)获取点簇特征矩阵x,并计算邻接矩阵a,自连接邻接矩阵 , 及 ; (2)输入两层的gcn

上传文件前先预览图片的实现方法_php 上传前 预览图片-程序员宅基地

文章浏览阅读625次。https://blog.csdn.net/fireofjava/article/details/46011381_php 上传前 预览图片

java操作redis简单示例_java redis hashmap-程序员宅基地

文章浏览阅读4k次。java操作redis简单示例_java redis hashmap

python 输出颜色与样式的方法_python windll getstdhandle-程序员宅基地

文章浏览阅读2.9k次。上次遇到这个问题就想写下来,其实当时我也不怎么会,老师说这个东西不需要理解,只需要死记硬背,写的多了就记住了,所以今天搜集了几篇文章,加上自己的理解,写下了这篇python 输出颜色的样式与方法的文章,一方面想自己记录下自己的理解,另一方面想用自己通俗的理解送给需要的盆友。在写python 程序代码的时候,我们知道python 输出的字符串颜色和一般字符相同,但是许多时候,我们需要强调某些字符..._python windll getstdhandle

中国移动一键登录 —— Flutter(安卓)_flutter一键登录-程序员宅基地

文章浏览阅读3.7k次,点赞4次,收藏15次。随着Flutter逐渐的被越来越多的公司所采用,那么如何将中国移动统一认证SDK接入到Flutter应用中。目录1.准备工作2.开始接入3.运行调试4.注意事项1.准备工作1.1 下载好统一认证SDK,这里使用的版本是quick_login_android_5.8.11.2 在移动开发平台申请好应用拿到appid、appkey2.开始接入2.1 按照统一认证SDK接入文档配置好权限,READ_PHONE_STATE权限根据应用方需要选择是否添加,SDK不强制要求._flutter一键登录

随便推点

python字符串案例_python中str1 = 'abcdefg' str2 = 'abcdefg' print(id(-程序员宅基地

文章浏览阅读870次。str1 = 'abcdefg higklmn'print(str1)print(id(str1))print(type(str1))print(dir(str1))print(str1[1:2])# 修改字符串,拼接字符串print(str1 + ' HELLO WORD')# 格式化字符串print('姓名 %s 年龄 %d' % ('小白',10))..._python中str1 = 'abcdefg' str2 = 'abcdefg' print(id(str1)) print(id(str2))

飞思卡尔S12系列(基于MC9S12XET256MAA和/MC9S12XEP100)中断PIT资料总结和分享_pitmtld0=100-1;设置定时器0的计数值,这里设置为99,用于生成一个定时周期。pitld-程序员宅基地

文章浏览阅读2.9k次。核心内容就在这张图上:   相信大家都明白总线的概念,在图中可以看到6个定时器模块,Micro Timer 0、Micro Timer 1、Timer 0、Timer 1、Timer 2、Timer 3,其中前两个是8位的,后四个是16位的。从图中可以看出PIT模块是以总线时钟(Bus Clock)为基准时钟的,总线时钟通过8位Micro Timer 0和Micro Timer 1倍频..._pitmtld0=100-1;设置定时器0的计数值,这里设置为99,用于生成一个定时周期。pitld0=10000-1;设置定时器0的加载值,这里设置为9999,表示定时器0的溢出时间为10000个时钟周期。

ModBus-RTU通讯协议编程_modbusrtu设备编程-程序员宅基地

文章浏览阅读7.5k次,点赞9次,收藏78次。编者说:ModBus通信协议结构简单,编程方便,在工业应用现场被广泛使用,特别是PLC应用场合。需要指出的是,ModBus只是一种通信协议,即设备之间的数据约束方式,使用时需要有底层的驱动程序支持,例如,串口通讯。串口通信使用简单,在ModBus协议中应用广泛。在信号的传输方式上又分为RS-232通信,RS-485通信,这种区分只是在数据的传输方式方作划分,底层的驱动程序完全一样。需要长距离、..._modbusrtu设备编程

DayDayUP_linuxC学习日记 _利用C实现文件的复制_该程序通过从待复制的文件中逐步读出数据到缓冲区,再把缓冲区的数据逐个写入-程序员宅基地

文章浏览阅读607次。read/write 的使用 读函数read ssize_t read(int fd,void *buf,size_t nbyte)read函数是负责从fd中读取内容.成功时,read返回实际所读的字节数,如果返回的值是0,表示已经读到文件的结束了. 小于0表示出现了错误.如果错误为EINTR说明读是由中断引起的, 如果是ECONNREST表示网络连接出了问题. 写函数write ssi_该程序通过从待复制的文件中逐步读出数据到缓冲区,再把缓冲区的数据逐个写入

maven项目简介-程序员宅基地

文章浏览阅读1.1k次。前言: 最近在公司接触的项目都是"maven项目",可是除了安装了一个maven的插件和项目中多了一个maven的配置文件外,对于maven的事情就看不到了,于是今天查了一些关于maven的相关介绍,跟大家一个分享下,看看maven到底是个什么东东... 正题:1.Maven能做什么? Maven是一个强大的构建工具,可以帮我们自动化构建过程,从清理、编译、测试_maven项目

Windows高级调试 调试工具简介_windbg logviewer.exe-程序员宅基地

文章浏览阅读2.6k次。第一部分 概 述第1章 调试工具简介许多技术性的书籍和文章都指出了在正确的软件设计和软件工程原则中包含的重要性。有些书侧重于介绍在方法与实践之间的均衡性,而有些书则注重对方法的描述。一些书讨论了面向对象设计、设计模式以及模块化编程等方法,这些方法都能帮助我们编写出更强大的软件。毫无疑问,正确的软件开发方法是所有软件项目获得成功的必要条件。然而,它们却并不是软件项目_windbg logviewer.exe