任务目的

  • 学习与实践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. OAuth2 .net MVC实现获取token

    OAuth2 的原理这里不多讲,可以看:https://www.cnblogs.com/icebutterfly/p/8066548.html 直奔主题:这里要实现的功能为,统计微软的Owin程序集实 ...

  2. maven相关的说明以及通过它来创建项目

    1.什么是maven maven的本质是一个项目构建工具 2.maven的作用 那么作为一个项目构建工具我们又为什么要使用它以及好处呢 首先项目构建的本质是什么:项目代码从源代码到程序文件的过程是代码 ...

  3. 未来一年的13大手机APP开发趋势

    无论是欢呼出租车,保存票据,订购披萨还是在线购物,您可以立即联系到什么设备?你的智能手机 这是您需要的朋友,在如何查找信息和简化日常任务方面发挥着不可或缺的作用. 移动技术以光速增长; 我们不能否认手 ...

  4. Java基础28-继承

    /* 继承的概述: 1.提高了代码复用性,简化了代码 2.让类与类之间产生了继承关系,才有了后面的多态特性的存在 注意:千万不要为了获取其他类的功能简化代码,而建立继承关系,必须要类与类之间存在继承关 ...

  5. (转)使用Cobbler批量部署Linux和Windows:Cobbler服务端部署(一)

    原文:http://www.cnblogs.com/pluse/p/8316914.html http://blog.51cto.com/dreamway/1166589---------Cobble ...

  6. (转)python之os,sys模块详解

    python之sys模块详解 原文:http://www.cnblogs.com/cherishry/p/5725184.html sys模块功能多,我们这里介绍一些比较实用的功能,相信你会喜欢的,和 ...

  7. spring 3.0 整合redis

    参考文章:https://blog.csdn.net/weixin_42184707/article/details/80361464 其中遇到了问题,第一,redis的xml配置文件中的,头部地址资 ...

  8. 鹅厂优文|主播pk,如何实现无缝切换?

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文作者,rexchang(常青),腾讯视频云终端技术总监,2008 年毕业加入腾讯,一直从事客户端研发相关工作,先后参与过 PC QQ.手 ...

  9. 第2天:JavaScript基础(运算符、案例、循环、冒泡以及prompt提示输入框)

    一元运算在前在后的区别 加加 var num1 = 10; //++在后面 先参与运算 再自加1 var sum1 = num1++ +10; console.log("sum1的值:&qu ...

  10. 使用在线工具下载YouTube视频

    YouTube上面有数不尽的视频资源,很多人都想从上面下载自己喜欢的视频,但是不得其法.那么,究竟怎样从YouTube上面下载视频呢?其实,一点也不难.只要你在Google上面搜索free youtu ...