python笔记-Javascript

最新推荐文章于 2023-03-12 11:33:09 发布

原创最新推荐文章于 2023-03-12 11:33:09 发布 · 228 阅读

CC 4.0 BY-SA版权

这篇博客介绍了JavaScript的基础知识，包括其动态类型、弱类型特性，以及在网页中的应用。内容涵盖了注册表单的用户名校验、轮播图实现、定时弹出广告、用户注册功能、表格全选全不选操作。同时，讲解了ECMAScript的基础语法，如变量定义、数据类型、比较操作、函数定义，以及BOM和DOM对象的相关操作，如window的alert和location.href，和常用的DOM事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Javascript概述

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

注册表单校_校验用户名是否为空

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<style></style>-->
    <!--<link>-->
    <script>


//  *****************************1. 校验用户名是否为空? ***************************
//        需求:
//          1. 判断用户名是否为空?
//          2. 校验密码是否大于6位， 如果不满足则不合法?
        // 定义一个函数
        function checkForm() {
//        1). 获取输入用户名标签提交的内容；
            var user = document.getElementById('username').value;

//        2). if判断用户名是否为空?
//        3). 如果数据合法， 继续执行， 提交表单；
//        4). 如果数据不合法， 不让表单提交? (显示弹出框报错) --- alert
            if (user === '') {
                alert("用户名不能为空!");
                return false;
            }


// ******************************2. 校验密码长度是否小于6 **************************
// 难点: 获取密码长度(http://www.w3school.com.cn/js/js_obj_string.asp)
//            var passwdlen = document.getElementById('passwd').value.length;
            var passwdlen = document.getElementsByName('passwd')[0].value.length;
            if (passwdlen < 6){
                alert("密码不合法: 长度小于6！");
                return false;
            }
        }
    </script>


</head>
<body>

<!--
实现步骤:
    1. 确定事件类型onsubmit(常见事件类型的网址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
    2. 对这个事件绑定一个函数(执行的操作写在函数里面);
    3. 函数的核心功能: 校验用户名是否为空?
        1). 获取输入用户名标签提交的内容；
        2). if判断用户名是否为空?
        3). 如果数据合法， 继续执行， 提交表单；
        4). 如果数据不合法， 不让表单提交? (显示弹出框报错) --- alert


-->
<form action="#" method="get" onsubmit="return checkForm()">
    <!--get: 填写的信息会在url里面显示， 对于重要的数据来说是不安全的；
        post: 填写的信息不会在url里面显示
        -->
    用户名: <input type="text" name="username" placeholder="用户名" id="username"><br/>
    密 &nbsp;&nbsp;&nbsp;码: <input type="password" name="passwd" placeholder="密码" id="passwd"><br/>
    <input type="submit" value="注册">


</form>

</body>
</html>

在这里插入图片描述

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    块级元素居中:margin: 0 auto;
    行内元素居中:  text-align: center;
     -->
    <style>
        #sowing_map{
            width: 590px;
            height:500px;
            margin: 0 auto;
            text-align: center;

        }
    </style>


    <script>
        window.onload = function () {
            // 每隔1s自动执行某一个函数
            setInterval('changeImg()', 1500);
        };

        // 1. 定义一个变量， 控制图片的循环顺序;
        var i = 1;
        function  changeImg() {

            // 2. 当点击下一页时， i+1, 这个时候， 图片变成img2;
            i += 1;
            // 3.  修改img标签里面的src属性内容;
            document.getElementById('img').src = 'img/img' + i + '.jpg';

            // 4. 如果图片轮播结束， 从头开始轮播；
            if (i === 6){
                i = 0;
            }
        }

    </script>
</head>
<body>

<!--思路:
    1. 确定事件类型为onclick事件；
    2. 并跟对应的函数changeImg绑定在一起；
    3. 实现函数功能；
        1). 当点击下一页按钮之后， 修改img标签里面的src属性内容;

-->
<div id="sowing_map">
    <img src="img/img1.jpg" id="img">
</div>
</body>
</html>

在这里插入图片描述

JS外部引入-定时弹出广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    块级元素居中:margin: 0 auto;
    行内元素居中:  text-align: center;
   Js的引入方式:
        - 内部引入: 直接在head标签里面的<script>写的内容;
        - 外部引入:<script src="js/main.js" ></script
     -->
    <link href="css/main.css" rel="stylesheet">
    <script src="js/main.js" ></script>
</head>
<body>

<!--

目标:
    实现网页定时弹出广告， 并定时取消弹出的广告;

步骤:
    1. 在页面设置一个隐藏的图片; style="display: none"
    2. 确定事件类型为onload， 为其绑定一个函数;
    3. 设置定时执行显示图片的函数showAd();
    4. 编写定时任务里面的函数showAd()----
            - 获取标签的样式display=‘block’;
            - 清除显示广告的定时任务;
            - 编写隐藏广告图片的定时任务;

    5. 实现定时任务里面的函数hiddenAd();
        - 获取标签的样式display=‘none’;
        - 清除隐藏广告的定时任务;





-->
<div id="sowing_map">
    <img src="img/img1.jpg" id="img">
</div>

<div id="ad">
    <img src="img/img7_ad.jpg" id="ad_img" style="display: none">

</div>
</body>
</html>

在这里插入图片描述

用户注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function  showUserTip() {
            // 1. 获取标签对象;
            document.getElementById('userTip').innerHTML = '<b style="color: lightgray;">用户名不能为空</b>';
        }


        function showPwdTip() {
       // 1. 获取标签对象;
            document.getElementById('pwdTip').innerHTML = '<b style="color: lightgray;">密码必须大于6位</b>';
        }

        function  checkUser() {
            //1. 离焦时判断用户名是否为空?
            var name = document.getElementById('user').value;
            // 2. 如果为空， 右边来一个红色的提示;
            // 3. 如果不为空， 则取消所有提示;
            if (name === ''){
                document.getElementById('userTip').innerHTML = '<b style="color: #f10180">用户名不能为空</b>'
                return false;

            }else{
                document.getElementById('userTip').innerHTML = '<b style="color:  green"> ok </b>'
                return true;
            }
        }
        function  checkPwd() {
//            alert('离焦');
             //1. 离焦时判断用户名是否为空?
            var pwdLen = document.getElementById('pwd').value.length;
            // 2. 如果为空， 右边来一个红色的提示;
            // 3. 如果不为空， 则取消所有提示;
            if (pwdLen < 6){
                document.getElementById('pwdTip').innerHTML = '<b style="color: #f10180">密码必须大于等于6位</b>'
                return false;

            }else{
                document.getElementById('pwdTip').innerHTML = '<b style="color:  green"> ok </b>'
                return true;

            }

        }
    </script>



</head>
<body>

<!--
实现目标:


步骤:
    1). 确定事件类型(onfocus-聚焦事件)， 并为其绑定一个函数;
    2). 确定事件类型(onblur-离焦事件)， 并为其绑定一个函数;
-->
<form action="#" method="get">
    <input type="text" id='user' placeholder="输入用户名" name="username" onfocus="showUserTip()"
           onblur="checkUser()">
    <span id="userTip"></span><br/>
    <input type="password" id="pwd" placeholder="密码" name="passwd" onfocus="showPwdTip()"
           onblur="checkPwd()">
    <span id="pwdTip"></span><br/>
    <input type="submit" value="注册">
</form>
</body>
</html>

在这里插入图片描述

表格的全选和全不选

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

    <script>
        function  checkAll() {

            //1. 获取全选框对象
            var checkAllEle = document.getElementById('checkAll');

//            alert(checkAllEle);
//            //判断该单选框是否被选中，
//            alert(checkAllEle.checked);

            // 2. 对编号前面的复选框的状态进行判断;
            //      - 如果状态为选中， 则设置所有的单选框为选中状态;
            //      - 如果状态为没有选中， 则设置所有的单选框为没有选中状态;
            if (checkAllEle.checked){
                    //- 如果状态为选中， 则设置所有的单选框为选中状态;
                    var checkOnes = document.getElementsByName('checkOne');
                    // 依次遍历所有的单选框， 设置状态为选中;li = [1,2,3,4]
                    for(var i =0; i<checkOnes.length; i++){
                        // li[0] li[1] li[2] li[3]
                        checkOnes[i].checked = true;

                    }
            }else{
                    //- 如果状态为未选中， 则设置所有的单选框为未选中状态;
                    var checkOnes = document.getElementsByName('checkOne');
                    // 依次遍历所有的单选框， 设置状态为选中;li = [1,2,3,4]
                    for(var i =0; i<checkOnes.length; i++){
                        // li[0] li[1] li[2] li[3]
                        checkOnes[i].checked = false;

                    }

            }

        }


    </script>
</head>
<body>


<!--

需求:
    实现批量选中和批量不选中

步骤分析:
    1). 确定事件类型:鼠标单击单选按钮时(onclick事件)， 绑定一个函数；
    2). 编写函数checkAll()
-->

<table style="width: 600px;margin: 0 auto;margin-top: 50px;text-align: center;" border="1px">
    <th style="text-align: center;" colspan="5">
        <input type="button" value="添加">
        <input type="button" value="删除">
    </th>
    <tr>

        <th><input type="checkbox" id="checkAll" onclick="checkAll()"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>2</td>
        <td>1</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>4</td>
        <td>4</td>
        <td>1</td>
        <td>4</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>5</td>
        <td>5</td>
        <td>1</td>
        <td>5</td>
    </tr>
</table>

</body>

在这里插入图片描述

总结

ECMAScript(基础语法)
1). 定义变量的时候:
- var a = 1; 局部变量
- a = 1; 全局变量

2). Js里面的数据类型:字符串、数字、布尔、数组、对象、Null、Undefined
(string, number, boolean<true, false>)

3). 比较

    ==：   5==‘5’ (返回true) 5==5 (返回true)
    ===：   5===‘5’ (返回false) 5===5 (返回true)

4). 函数如何定义:
- 命名函数
function 函数名(){
函数体
}
- 匿名函数

baidu

5). if, for, while, 三元运算符

BOM对象:
Windows: alert(), setInterval(), clearInterval()
location: href() --(跳转到指定的页面)

DOM:
常用的事件: onsubmit(特殊点，一定要有boolean类型的返回值), onclick， onfocus， onblur, onchange,

警告信息的实现方式:
- 弹出框: alert()
- 向页面的指定位置写入内容:

document.getElementById('userTip').inner HTML='<b style="color:red">用户名信息不能为空</b>'