【JavaScript】实战训练小项目-WebAPI

简介: 在上一篇文章中,其实我们并没有学JS和HTML的互动,而是各干各的

JavaScript实战训练小项目 & WebAPI

1. JS操作DOM树

在上一篇文章中,其实我们并没有学JS和HTML的互动,而是各干各的


现在,我们就要用JS让HTML更有活力~

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理,处理的结果可以加入到当前的页面。DOM是一种基于树的API文档,它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX,它可以用于处理很大的XML文档,由于大,所以不适合全部放在存储器中处理。


你可以简单的理解为,jS操作DOM树就是在获得HTML的标签元素并有一些动作


而这个过程,就需要用到一些WebAPI

1.1 获得HTML控件/元素标签

根据id来获取对象

document就是本文件对应的对象!

可以通过name…等等去获取

但是最常用的是id,因为id是有唯一性的

document.getElementById("标签的id名");


1.2 操纵控件

1.2.1 获取属性值

获取到的对象,就有对应的属性

document.getElementById("id").value;

1

1.2.1 修改属性值

例子:


我以替换背景图片为例

不加js代码的html代码:



效果:



加了之后的代码:



效果:



解释:


点击按钮,调用js函数触发背景替换


1.3 实现一个猜数字的功能

js中任何产生随机数呢?


可以去查一查mdn文档



生成一个1到10的随机数


一共十个值,乘以十取整

初始是1,取整后加一


注意:js中有一些是默认的内置函数,比如select…,所以如果发现运行不了,可能是因为你的函数与内置函数重名了~

<div>
    <h3>猜数字游戏</h3>
    玩家请输入一个 1 - 10 的数字: 
    <input type="text" id="input_number"><br>
    <input type="button" value="查看结果" onclick="select1()">
    <div id="result">
    </div>
    <script>
        function select1() {
            //产生随机数
            var number = parseInt(Math.random() * 10) + 1;
            var inputNumber = document.getElementById("input_number").value;
            var msg;
            if(number == parseInt(inputNumber)) {
                msg = "<h4>恭喜你,猜对了</h4>";
            }else {
                msg = "<h4>猜错了,正确的数字是" + number + "</h4>";
            }
            document.getElementById("result").innerHTML = msg;
        }
    </script>
</div>

获取到div对象,可以向里面添加html代码或者文本


innerHTML,添加html代码块,并被浏览器编译

innerText,添加文本,不被浏览器编译

调用前会清空之前此对象的inner影响的效果

innerHTML效果:



innerText效果:

document.getElementById("result").innerText = msg;



2. JQuery

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由[John Resig](https://baike.baidu.com/item/John Resig/6336344?fromModule=lemma_inlink)发布。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。


jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的CSS选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。


简而言之,它就是一个工具js,是一个很好的外部资源,它提供了很多简洁高效的API


怎么引入呢?

下载jquery的js文件

马HTML/jquery.min.js · 游离态/马拉圈2023年5月 - 码云 - 开源中国 (gitee.com)

使用jquery的网络地址访问

https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js

然后用script标签引入外部资源就行了


写在head里,保证后续的js代码都能够使用jquery的API

上面的猜数字游戏是原生的js代码,现在是使用jquery的代码:


这些API需要通过jQuery这个对象去调用,有一个别名“$”,但是不建议使用,因为其他的一些js框架,也会使用到这个别名,所以会冲突~

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>WebAPI Test</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    </head>
    <body id="body">
        <div>
            <h3>猜数字游戏</h3>
            玩家请输入一个 1 - 10 的数字: 
            <input type="text" id="input_number"><br>
            <input type="button" value="查看结果" onclick="selectByJQuery()">
            <div id="result">
            </div>
            <script>
                function selectByJQuery() {
                    var number = parseInt(Math.random() * 10) + 1;
                    var inputNUmber = jQuery("#input_number").val();
                    var msg;
                    if(number == parseInt(inputNumber)) {
                        msg = "<h4>恭喜你,猜对了</h4>";
                    }else {
                        msg = "<h4>猜错了,正确的数字是" + number + "</h4>";
                    }
                    jQuery("#result").html(msg);
                }
            </script>
        </div>
    </body>
</html>


效果更刚才一致,不做展示


你可能会觉得,这也简约不到哪里去啊

这是因为我们的代码很简单,代码一多或者一些场景就会很简约~

前提是你熟悉那些API,不过,不会的查一下就行了呗~

前面的更换背景的代码可更改为:


jQuery获取标签对象可以参考CSS的标签选择器~

function change() {
    jQuery("body").css("background-image",                      "url(https://img0.baidu.com/it/u=3007501660,4148393477&fm=253&fmt=auto&app=138&f=JPEG?w=563&h=500)");
}

jQuery的赋值不是等号赋值,而是传值给对应的函数


效果一致



val方法既可以获取值,也可以修改值


不传参,返回对应值

传参,value修改成对应的值,返回修改前的值

其他标签属性的方法类似

function selectByJQuery() {
    var number = parseInt(Math.random() * 10) + 1;
    jQuery("#input_number").val(number);
    var inputNumber = jQuery("#input_number").val();
    var msg;
    if(number == parseInt(inputNumber)) {
        msg = "<h4>恭喜你,猜对了</h4>";
    }else {
        msg = "<h4>猜错了,正确的数字是" + number + "</h4>";
    }
    jQuery("#result").html(msg);
}

更改成这样的话,效果如下所示:


接下来,我们将用js和jquery去实现几个小项目:


计算器

聚合搜索

表白墙

3. 简单计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单计算器</title>
    <link rel="stylesheet" href="cal.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
</body>
</html>

body中的一些页面元素:

<div class="calculator">
    <div class="cal">
        <form action="#">
            <h2>简单计算器</h2>
            <div class="row">
                数字一:<input type="text" id="c1">
            </div>                
            <div class="row">
                数字二:<input type="text" id="c2">
            </div>
            <div class="option">
                <input type="button" value="相加" onclick="add()" id="a">
                <!-- id不能与函数重复,否则会误判 -->
                <input type="button" value="相减" onclick="sub()" id="s">
                <input type="button" value="相乘" onclick="mul()" id="m">
                <input type="button" value="相除" onclick="div()" id="d">
            </div>
            <div class="clear">
                <div class="reset">
                    <input type="reset" value="清空" id="up" onclick="update()">
                </div>
            </div>
        </form>
    </div>
</div>

js代码:

<script>
    function add() {
        var numb1 = jQuery("#c1").val();
        var numb2 = jQuery("#c2").val();
        var sum = parseInt(numb1) + parseInt(numb2);
        jQuery("#a").val(sum);
    }
    function sub() {
        var numb1 = jQuery("#c1").val();
        var numb2 = jQuery("#c2").val();
        var sum = parseInt(numb1) - parseInt(numb2);
        jQuery("#s").val(sum);
    }
    function mul() {
        var numb1 = jQuery("#c1").val();
        var numb2 = jQuery("#c2").val();
        var sum = parseInt(numb1) * parseInt(numb2);
        jQuery("#m").val(sum);
    }
    function div() {
        var numb1 = jQuery("#c1").val();
        var numb2 = jQuery("#c2").val();
        var sum = parseFloat(numb1) / parseInt(numb2);
        jQuery("#d").val(sum);
    }
    function update() {
        jQuery("#a").val("相加");
        jQuery("#s").val("相减");
        jQuery("#m").val("相乘");
        jQuery("#d").val("相除");
    }
</script>

css文件:

有时间可以研究一下,这里只是为了美观~

html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    background-image: url("海.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.calculator {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cal {
    width: 600px;
    height: 400px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
}
.cal h2 {
    font-size: 24px;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 40px;
}
.cal .row {
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-around;/*设置flex的原因就是要用这个*/
    align-items: center;
    font-size: 25px;
    font-weight: 900;
    margin: 10px;
}
#c1 {
    width: 400px;
    height: 45px;
    font-size: 23px;
    text-indent: 10px;
    border-radius: 10px;
}
#c2 {
    width: 400px;
    height: 45px;
    font-size: 23px;
    text-indent: 10px;
    border-radius: 10px;
}
.option input {
    display: block;
    font-weight: 900;
    font-size: 20px;
    width: 100px;
    height: 70px;
    color: rgba(255, 255, 255, 0.618);
    border-radius: 20px;
    background-color: rgba(251,114,153, 0.7);
}
.option {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
}
.clear {
    display: flex;
    justify-content: center;
    align-items: center;
}
.reset #up {
    width: 200px;
    height: 30px;
    background-color:rgba(0, 0, 0, 0.4);
    color: white;
    font-weight: 900;
    line-height: 30px;
    text-align: center;
    border-radius: 2010px;
    border:none;
    margin-top: 20px;
    transition: all 0.618s;
}
#up:hover{
    background-color: rgba(251,114,153, 0.7);
}

效果:


4. 聚合搜索

聚合搜索就是一个页面,上面有一栏按钮,按一下就跳转到对应的网址,栏下的页面转换为对应的网址,但是选择栏还在

主要是为了提高体验感~

html:


嵌入页面用iframe标签

我们只需要点击按钮的时候,改变iframe的src属性即可

用到attr方法,左边为属性名,右边为替换后的值

b站有这个复制嵌入代码的功能:


牛好的歌!


设置这个可以让视频可以放大至全屏!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="AS.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <title>聚合搜索</title>
  </head>
  <body>
    <!-- 这里是我比较常用的网站,可以实际更换 -->
    <!-- 值得一提的是,有些网址不支持“嵌套” -->
    <div id="option">
      <input type="button" value="b站" onclick="toBilibili()" />
      <input type="button" value="CSDN" onclick="toCSDN()" />
      <input type="button" value="码云" onclick="toGit()" />
    </div>
    <hr />
    <!-- 嵌入网页的框架iframe标签 -->
    <!-- 给一个初始页面 -->
    <div class="ifm">
        <iframe src="#" id="frame"></iframe>
    </div>
    <script>
      function toBilibili() {
        jQuery("#frame").attr("src", "https://www.bilibili.com/");
      }
      function toCSDN() {
        jQuery("#frame").attr(
          "src",
          "https://blog.csdn.net/?spm=1000.2115.3001.4477"
        );
      }
      function toGit() {
        jQuery("#frame").attr("src", "https://gitee.com/carefree-state");
      }
    </script>
  </body>
</html>



CSS修饰:


感兴趣的可以看看~

html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    background-image: url("海.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
#option {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-around;
}
#option input {
    display: block;
    font-weight: 900;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.618);
    border-radius: 9px;
    background-color: rgba(251,114,153, 0.7);
}
.ifm {
    height: calc(100% - 30px);
    display: flex;
    justify-content: center;
    align-items: center;
}
iframe {
    width: 1200px;
    height: 600px;
}


效果:


一开始出现了“套娃”现象,其实#号代表就是当前的页面了,所以它将页面套了进去

不会出现无限套娃的现象,内部限制了

可能会有一些网站拒绝被嵌入的

image.png

5. 表白墙

这是个简陋的表白墙

输入发起者,输入接收者,输入表白话语,然后显示在表白墙上

想法:


左上角是输入框,为”表白“

右边为表白详细,为”墙“

script行为:


获取三个信息

进行非空校验

通过trim去掉空格后,看看是不是空字符串

用alert提醒

用focus聚焦到对应的文本框

发送成功情况数据

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="pursue.css">
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
        <title>表白墙</title>
    </head>
    <body>
        <div class="container">
            <div class="container-left">
                <div class="card">
                    <form action="#">
                        <h1>表白</h1>
                        <div class="row">
                            谁:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="c1">
                        </div>    
                        <div class="row">
                            想对谁:<input type="text" id="c2">
                        </div>            
                        <div class="row">
                            说:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="c3">
                        </div>
                        <div class="print">
                            <div class="s">
                                <input type="button" value="发送" id="go" onclick="send()">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="container-right">
                <div class="article" id="a">
                    <h1 style="font-size: 50px;">墙</h1>
                </div>
            </div>   
        </div>
        <script> 
            function send() {
                var text1 = jQuery("#c1");
                var text2 = jQuery("#c2");
                var text3 = jQuery("#c3");
                if(text1.val().trim() == "") {
                    alert("请输入是谁!");
                    text1.focus();
                    return;
                }
                if(text2.val().trim() == "") {
                    alert("请输入想对谁说!");
                    text2.focus();
                    return;
                }
                if(text3.val().trim() == "") {
                    alert("请输入想说什么!");
                    text3.focus();
                    return;
                }
                var loveWords =  "<br><h2>" + text1.val() + " 想对 " + text2.val() + " 说 " + text3.val() + "!</h2>";
                jQuery("#a").append(loveWords);
                text1.val("");
                text2.val("");
                text3.val("");
            }
        </script>
    </body>
</html>

css修饰:


感兴趣可以看看~

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html {
    height: 100%;
}
body {
    background-image: url(海.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100%;
}
.container {
    /* 固定宽度 */
    width: 1000px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
}
/* 增加可读性 */
.container .container-left {
    height: 100%;
    width: 25%;
}
.container .container-right {
    height: 100%;
    width: 74%;
}
.card {
    margin-top: 10px;
    height: 245px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 25px;
}
.article {
    margin-top: 10px;
    height: calc(100% - 10px);
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 15px;
    padding: 5px 20px;
    overflow: auto;
    /* 内容溢出,滚动条放入这里 */
}
.article h2 {
    color: rgba(251, 114, 153, 0.8);
}
.card h1 {
    font-size: 50px;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
}
.row {
    height: 30px;
    width: 100%;
    display: flex;
    justify-content: space-around; /*设置flex的原因就是要用这个*/
    align-items: center;
    font-size: 15px;
    margin: 5px;
    font-weight: 900;
}
#c1 {
    width: 120px;
    height: 19px;
    font-size: 12px;
    text-indent: 4px;
    border-radius: 4px;
    font-weight: 900;
    color: rgba(251, 114, 153, 0.7);
}
#c2 {
    width: 120px;
    height: 19px;
    font-size: 12px;
    text-indent: 4px;
    border-radius: 4px;
    font-weight: 900;
    color: rgba(251, 114, 153, 0.7);
}
#c3 {
    width: 120px;
    height: 19px;
    font-size: 12px;
    text-indent: 4px;
    font-weight: 900;
    border-radius: 4px;
    font-weight: 900;
    color: rgba(251, 114, 153, 0.7);
}
.print {
    display: flex;
    justify-content: center;
    align-items: center;
}
.s #go {
    width: 150px;
    height: 25px;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    font-weight: 900;
    line-height: 25px;
    text-align: center;
    border-radius: 10px;
    border: none;
    margin-top: 10px;
    transition: all 0.618s;
}
#go:hover {
    background-color: rgba(251, 114, 153, 0.7);
}

效果:



非空校验:


相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
7天前
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
Next.js 实战 (二):搭建 Layouts 基础排版布局
|
2天前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
|
3天前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
|
18天前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
38 4
|
20天前
|
CDN
如何在项目中使用Moment.js库?
如何在项目中使用Moment.js库?
|
18天前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
22 2
|
2月前
|
JavaScript 前端开发 开发者
探索JavaScript原型链:深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链:深入理解与实战应用
32 1
|
1月前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
43 0
|
21天前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
21 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
101 2