任务目的

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

任务描述

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

任务注意事项

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

任务完成与总结:

还是一脸的懵Zzzz

//事件绑定函数,兼容浏览器差异
function addEvent(element, event, listener) {
if (element.addEventListener) {
element.addEventListener(event, listener, false);
}
else if (element.attachEvent) {
element.attachEvent("on" + event, listener);
}
else {
element["on" + event] = listener;
}
} //遍历数组的方法,针对数组中每一个元素执行fn函数,并将数组索引和元素作为参数传递,后面用
function each(arr, fn) {
for (var cur = 0; cur < arr.length; cur++) {
fn(arr[cur], cur);
}
} window.onload = function() {
var container = document.getElementById("container");
var buttonList = document.getElementsByTagName("input");
//定义队列的对象
var queue = {
str: [], leftPush: function(num) {
this.str.unshift(num);
this.paint();
}, rightPush: function(num) {
this.str.push(num);
this.paint();
}, isEmpty: function() {
return (this.str.length == 0);
}, leftPop: function() {
if (!this.isEmpty()) {
alert(this.str.shift());
this.paint();
}
else {
alert("The queue is already empty!");
}
}, rightPop: function() {
if (!this.isEmpty()) {
alert(this.str.pop());
this.paint();
}
else {
alert("The queue is already empty!");
}
}, paint: function() {
var str = "";
each(this.str, function(item){str += ("<div>" + parseInt(item) + "</div>")});
container.innerHTML = str;
addDivDelEvent();
}, deleteID: function(id) {
console.log(id);
this.str.splice(id, 1);
this.paint();
} } //为container中的每个div绑定删除函数
function addDivDelEvent() {
for (var cur = 0; cur < container.childNodes.length; cur++) { //这里要使用闭包,否则永远绑定到指定div上的delete函数的参数永远等于跳出时的cur值(length);
addEvent(container.childNodes[cur], "click", function(cur) {
return function(){return queue.deleteID(cur)};
}(cur));
}
} //为4个按钮绑定函数
addEvent(buttonList[1], "click", function() {
var input = buttonList[0].value;
if ((/^[0-9]+$/).test(input)) {
queue.leftPush(input);
}
else {
alert("Please enter an interger!");
}
});
addEvent(buttonList[2], "click", function() {
var input = buttonList[0].value;
if ((/^[0-9]+$/).test(input)) {
queue.rightPush(input);
}
else {
alert("Please enter an interger!");
}
});
addEvent(buttonList[3], "click", function(){queue.leftPop()});
addEvent(buttonList[4], "click", function(){queue.rightPop()});
}

  

效果展示

先保存着,日后再看再研究。。。

基础JavaScript练习(一)的更多相关文章

  1. 回归基础: JavaScript 变量提升

    from me: javascript的变量声明具有hoisting机制,它是JavaScript一个基础的知识点,也是一个比较容易犯错的点,平时在开发中,大大小小的项目都会遇到. 它是JavaScr ...

  2. js基础--javaScript数据类型你都弄明白了吗?绝对干货

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 数据类型的分类 JavaScript的数据类型分为两大类,基本数据类型和复杂数据类型. 基本数据类型:Null.Undefine ...

  3. 基础JavaScript练习(三)总结

    任务目的 实践JavaScript数组.字符串相关操作 任务描述 基于任务四进行升级 将新元素输入框从input改为textarea 允许一次批量输入多个内容,格式可以为数字.中文.英文等,可以通过用 ...

  4. 基础JavaScript练习(二)总结

    任务目的 学习与实践JavaScript的基本语法.语言特性 练习使用JavaScript实现简单的排序算法 任务描述 基于上一任务 限制输入的数字在10-100 队列元素数量最多限制为60个,当超过 ...

  5. 基础JavaScript练习(一)总结

    任务目的 在上一任务基础上继续JavaScript的体验 接触一下JavaScript中的高级选择器 学习JavaScript中的数组对象遍历.读写.排序等操作 学习简单的字符串处理操作 任务描述 参 ...

  6. 零基础JavaScript编码(三)总结

    任务目的 在上一任务基础上继续JavaScript的体验 接触一下JavaScript中的高级选择器 学习JavaScript中的数组对象遍历.读写.排序等操作 学习简单的字符串处理操作 任务描述 参 ...

  7. 零基础JavaScript编码(二)

    任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM ...

  8. 零基础JavaScript编码(一)

    任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以 ...

  9. 二、JavaScript语言--JS基础--JavaScript进阶篇--JS基础语法

    1.变量 定义:从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服.玩具.水果...等. 命名:变量名字可以任 ...

  10. Ajax基础--JavaScript实现

    ajax原理 1.ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. 通俗地讲就是:AJAX 通过在后台与 ...

随机推荐

  1. 颠覆我的Thread.join()

    学而时习之,不亦说乎!                              --<论语> 为什么说是颠覆? 1)任何对象都可以作为锁对象,锁对象的行为都是一样的吗?之前我一直认为锁对 ...

  2. kafka监控服务搭建

    wget https://github.com/Morningstar/kafka-offset-monitor/releases/download/0.4.1/KafkaOffsetMonitor- ...

  3. Request.QueryString 的用法

    比如常见的URL网页地址都有 xxx.asp?type=reLogin   ?号后面的就是querystring querystring是asp中获取数据的一个方法. 那么就可以用request.qu ...

  4. Linux 中的rsh,ssh

    第一部分 rsh 的安装与配置 http://www.ttlsa.com/linux/configure-rsh-rcp-scp-on-centos/ http://www.ahlinux.com/s ...

  5. Java学习之路(三):Java中的数组

    数组的概述和定义的格式 数组的作用: 用来存储同种数据类型的多个值 数组的基本概念: 数组是存储同一种数据类型多个元素的集合.就相当于一个容器. 注意:数组既可以存储基本数据类型,也可以存储引用数据类 ...

  6. Web测试注意事项

    参考文章:http://www.51testing.com/html/07/n-3723307.html 总结下遇到的web测试的时候需要注意的地方: 页面分辨率:  通常是计算机的默认分辨率,但是还 ...

  7. linux-pm2用法

    devo.ps团队对JavaScript的迷恋已经不是什么秘密了;node.js作为服务器端,AngularJS作为客户端,某种程度上说,我们的堆栈是用它建成的.我们构建静态客户端和RESTful J ...

  8. Java并发编程之volatile关键字解析

    一内存模型的相关概念 二并发编程中的三个概念 三Java内存模型 四深入剖析volatile关键字 五使用volatile关键字的场景 volatile这个关键字可能很多朋友都听说过,或许也都用过.在 ...

  9. JavaScript call 和apply 的理解

    这两个方法对于一些新手而言难耐弄清他们到底是怎么回事,对我我来讲我对call和apply的方法理解的也比较含糊.今天闲来无事准备彻底搞call和apply到底是怎么回事.本着互联网分享精神.我将我自己 ...

  10. php mktime()函数

    PHP提供一个很好用的函数mktime().你只要按顺序传送给mktime()你希望表示的小时,分钟,秒数,月份,日期,及年份,mktime()就会返回该日期自1970年1月1日的总秒数.获取2000 ...