任务十八:基础JavaScript练习(一)

面向人群:
JavaScript初学者
难度:
简单

重要说明

百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践。

课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的。因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案,同样也可以帮助我们学到很多知识。所以,我们列出的参考资料未必是实现需求所必须的。有的时候,实现题目的要求很简单,甚至参考资料里就有,但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时,要多思考,多提问,多质疑。相信通过和小伙伴们的交流,能让你的学习事半功倍。

任务目的

  • 学习与实践JavaScript的基本语法、语言特性
  • 初步了解JavaScript的事件是什么
  • 初步了解JavaScript中的DOM是什么

任务描述

  • 如图,模拟一个队列,队列的每个元素是一个数字,初始队列为空
  • 有一个input输入框,以及4个操作按钮
    • 点击"左侧入",将input中输入的数字从左侧插入队列中;
    • 点击"右侧入",将input中输入的数字从右侧插入队列中;
    • 点击"左侧出",读取并删除队列左侧第一个元素,并弹窗显示元素中数值;
    • 点击"右侧出",读取并删除队列又侧第一个元素,并弹窗显示元素中数值;
  • 点击队列中任何一个元素,则该元素会被从队列中删除

任务注意事项

  • 实现简单功能的同时,请仔细学习JavaScript基本语法、事件、DOM相关的知识
  • 请注意代码风格的整齐、优雅
  • 代码中含有必要的注释
  • 示例图仅为参考,不需要完全一致
  • 需要考虑数字输入的合法性
  • 建议不使用任何第三方库、框架

任务协作建议

  • 团队集中讨论,明确题目要求,保证队伍各自对题目要求认知一致
  • 各自完成任务实践
  • 交叉互相Review其他人的代码,建议每个人至少看一个同组队友的代码
  • 相互讨论,最后合成一份组内最佳代码进行提交

在线学习参考资料

时间: 2024-10-10 01:59:59

任务十八:基础JavaScript练习(一)的相关文章

轻松学习JavaScript十八:JavaScript之DOM简介

一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,运行开发人员添加,移除和修改页面的某一部分.HTML或XML页面的每个部分都 是一个节点的衍生物.通过DOM,可访问HTML文档的所有元素.当网页被加载时,浏览器会创建页面的文档对象模 型,DOM模型被构造为对象的树. DOM是W3C(万维网联盟)的标准.DOM定义了访问HTML和XML文档的标准."W3C 文档对象模型(DOM)是中立

全栈JavaScript之路(十八)HTML5 自定义数据属性

HTML5 规范规定,用户可以为元素 自定义非标准属性, 但是要添加 data- 前缀. 目的是为元素提供与页面渲染无关的信息.或者语义信息.这些属性名可以随意添加,只要带上前缀 data- 开头就可以. <div id="myid" data-appid="1" data-appname="csdn"></div> 添加属性这后可以通过 dataset 访问自定义属性,dataset 属性 是DOMStringMap  

《Javascript权威指南》学习笔记之十八:BOM新成就(1)--客户端存储数据(Web SQL DataBase实现)

使用本地存储和会话存储可以实现简单的对象持久化,可以对简单的键值对或对象进行存储.但是,对于比较复杂的关系数据进行处理时,就要用Web SQL Database.浏览器对Web SQL Database的支持情况如图: 一.如何使用Web SQL Database <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

Bootstrap &lt;基础二十八&gt;列表组

列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 class .list-group-item. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的列表组</title> <link href="/boo

Android基础笔记(十八)- Fragment

博客的感悟终点-开始 什么是Fragment 添加fragment到Activity的两种方式 Fragment的生命周期 Fragment的向下兼容 Fragment之间的通信 博客的感悟,终点-开始 这个是基础的最后一篇博客了,学习了很多,也有很多感触. 就在这里大致总结一下. 坚持往往很难,完美的坚持下去更难.这是写这十八篇博客的感悟. 时间流失的很快,总是感觉时间不够用.慢慢的就会让自己博客的质量下降.今天反思了一下,我这样不就是在制造"破窗户"吗?(破窗户理论不知道的可以去看

Objective-C(十八、谓语使用及实例说明)——iOS开发基础

结合之前的学习笔记以及参考<Objective-C编程全解(第三版)>,对Objective-C知识点进行梳理总结.知识点一直在变,只是作为参考,以苹果官方文档为准~ 十八.谓语的使用及实例说明 首先先介绍基本常用的谓词: (1)逻辑运算符 && AND || OR 都可以用 (2)IN包含 (3)模糊查询 a.以--开头 BEGINSWITH b.以--结尾 ENDSWITH c.包含-.字符 CONTAINS (4)用like进行模糊查询 通配符:*表示任意个字符 ?表示单

Python之路【第十八篇】:Web框架们

Python之路[第十八篇]:Web框架们 Python的WEB框架 Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Python的标准库外,其不依赖任何其他模块. 1 2 3 4 pip install bottle easy_install bottle apt-get install python-bottle wget http://bottlepy.org/bottle.py Bottle框架大致可以分为以下部分: 路

48. 蛤蟆的数据结构笔记之四十八的有向无环图的应用关键路径

48. 蛤蟆的数据结构笔记之四十八的有向无环图的应用关键路径 本篇名言:"富贵不淫贫贱乐 ,男儿到此是豪雄.-- 程颢" 这次来看下有向无环图的另一个应用关键路径. 欢迎转载,转载请标明出处:http://blog.csdn.net/notbaron/article/details/47135061 1.  关键路径 与AOV-网相对应的是AOE-网(Activity On Edge)即边表示活动的网.AOE-网是一个带权的有向无环图,其中,顶点表示事件(Event),弧表示活动,权表

程序员的奋斗史(三十八)——大学断代史(二)——我与数据库的故事

文/.温国兵 惰性人皆有之,也算是人的一大天性.几日之前便构思好此文,怎奈每日杂事繁多,今日才提起笔,作下此文.本文谈谈我与数据库的故事. 说起和数据库结缘,还得从大一说起.大一刚开始接触C语言,每日就沉浸在无止境的代码中.在网上查资料的过程中,看到别人用C语言写了一个小型的图书操作程序,数据库采用的是SQL Server,运行出来的效果图很炫,惊叹原来还可以这样管理数据.熟知C语言的同学肯定对文件操作不陌生,当时我们写程序如果有静态数据,都是放在文件里的.直到后来做的C语言课程设计,我也是一大

【转载】COM 组件设计与应用(十八)——属性包

原文:http://vckbase.com/index.php/wv/1265.html 一.前言 书接上回,本回着落在介绍属性包 IPersistPropertyBag 接口的实现方法和调用方式.属性包,是以“名称 - 值”的方式提供组件持续性的支持,而“名称 - 值”恰恰又适合于用文本方式来表现.下面的片段是在 HTML 中插入 Microsoft MonthView Control ActiveX 控件后的样式: <object classid="clsid:232E456A-87C