任务目的

  • 学习与实践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. Luogu - P3384 树链剖分 [挂模板专用]

    题意:请码个树剖模板支持子树区间加/查询和路径加/查询 纯练手 盲敲技能++ 以后网络赛复制模板速度++++ 对链操作时注意方向 #include<bits/stdc++.h> #defi ...

  2. Linux工具安装配置之Oracle

    对于Oracle的安装真的是心生恐惧,特别是一堆堆的依赖包.趁这次DBA在南京,实际操作一番. 两种方式,1.全新安装:2.硬拷贝 全新安装,参考下面这个介绍 http://www.cnblogs.c ...

  3. 3dsmax2013卸载/安装失败/如何彻底卸载清除干净3dsmax2013注册表和文件的方法

    3dsmax2013提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dsmax2013失败提示3dsmax2013安装未完成,某些产品无法安装,也有时候想重新 ...

  4. Linux下用tree命令列出树形图

    命令用法: tree 参数: -a 显示所有文件和目录. -A 使用ASNI绘图字符显示树状图而非以ASCII字符组合. -C 在文件和目录清单加上色彩,便于区分各种类型. -d 显示目录名称而非内容 ...

  5. ios 得到每周的星期一开始和星期天结束的日期

    得到每周 星期一零点(即本周的开始) 和星期天 24 点(即本周的结束和下一周的开始)的时间 NSDate *now = [NSDate date]; NSCalendar *calendar = [ ...

  6. 关于reduce的使用方法

    var rowData=[ {data:4,date:'06',code:'cr_3',name:'桥吊3'}, {data:1,date:'03',code:'cr_1',name:'桥吊1'}, ...

  7. 【LESS系列】基本语法

    这里将直接以实例的方式展示 LESS 的基本语法. less code 是编译前的代码,css code 是编译后的代码. 本文的内容,同样是引自[http://www.ibm.com/develop ...

  8. 安装和部署Jenkins

    安装和部署Jenkins 环境 操作系统:ubuntu 14.04.4 LTS 下载Jenkins wget https://mirrors.tuna.tsinghua.edu.cn/jenkins/ ...

  9. Python基础(2) - 动态数据类型

    Python是一门强类型语言,单定义变量时不需要制定类型. C#这样定义变量: ; VB这样定义变量: Python不需要制定类型,给变量赋什么类型的值,它就是什么类型.(穿神马就是神马?) > ...

  10. JavaScript中 运算符

    运算符对一个或多个变量或值(操作数)进行运算,并返回一个新值 根据所执行的运算,运算符可分为以下类别: (1) 算术运算符 (2) 比较运算符 运算符 说 明 示 例 ==  等于. 如果两个操作数相 ...