基础JavaScript练习(一)
任务目的
- 学习与实践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练习(一)的更多相关文章
- 回归基础: JavaScript 变量提升
from me: javascript的变量声明具有hoisting机制,它是JavaScript一个基础的知识点,也是一个比较容易犯错的点,平时在开发中,大大小小的项目都会遇到. 它是JavaScr ...
- js基础--javaScript数据类型你都弄明白了吗?绝对干货
欢迎访问我的个人博客:http://www.xiaolongwu.cn 数据类型的分类 JavaScript的数据类型分为两大类,基本数据类型和复杂数据类型. 基本数据类型:Null.Undefine ...
- 基础JavaScript练习(三)总结
任务目的 实践JavaScript数组.字符串相关操作 任务描述 基于任务四进行升级 将新元素输入框从input改为textarea 允许一次批量输入多个内容,格式可以为数字.中文.英文等,可以通过用 ...
- 基础JavaScript练习(二)总结
任务目的 学习与实践JavaScript的基本语法.语言特性 练习使用JavaScript实现简单的排序算法 任务描述 基于上一任务 限制输入的数字在10-100 队列元素数量最多限制为60个,当超过 ...
- 基础JavaScript练习(一)总结
任务目的 在上一任务基础上继续JavaScript的体验 接触一下JavaScript中的高级选择器 学习JavaScript中的数组对象遍历.读写.排序等操作 学习简单的字符串处理操作 任务描述 参 ...
- 零基础JavaScript编码(三)总结
任务目的 在上一任务基础上继续JavaScript的体验 接触一下JavaScript中的高级选择器 学习JavaScript中的数组对象遍历.读写.排序等操作 学习简单的字符串处理操作 任务描述 参 ...
- 零基础JavaScript编码(二)
任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM ...
- 零基础JavaScript编码(一)
任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--JS基础语法
1.变量 定义:从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服.玩具.水果...等. 命名:变量名字可以任 ...
- Ajax基础--JavaScript实现
ajax原理 1.ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. 通俗地讲就是:AJAX 通过在后台与 ...
随机推荐
- OAuth2 .net MVC实现获取token
OAuth2 的原理这里不多讲,可以看:https://www.cnblogs.com/icebutterfly/p/8066548.html 直奔主题:这里要实现的功能为,统计微软的Owin程序集实 ...
- maven相关的说明以及通过它来创建项目
1.什么是maven maven的本质是一个项目构建工具 2.maven的作用 那么作为一个项目构建工具我们又为什么要使用它以及好处呢 首先项目构建的本质是什么:项目代码从源代码到程序文件的过程是代码 ...
- 未来一年的13大手机APP开发趋势
无论是欢呼出租车,保存票据,订购披萨还是在线购物,您可以立即联系到什么设备?你的智能手机 这是您需要的朋友,在如何查找信息和简化日常任务方面发挥着不可或缺的作用. 移动技术以光速增长; 我们不能否认手 ...
- Java基础28-继承
/* 继承的概述: 1.提高了代码复用性,简化了代码 2.让类与类之间产生了继承关系,才有了后面的多态特性的存在 注意:千万不要为了获取其他类的功能简化代码,而建立继承关系,必须要类与类之间存在继承关 ...
- (转)使用Cobbler批量部署Linux和Windows:Cobbler服务端部署(一)
原文:http://www.cnblogs.com/pluse/p/8316914.html http://blog.51cto.com/dreamway/1166589---------Cobble ...
- (转)python之os,sys模块详解
python之sys模块详解 原文:http://www.cnblogs.com/cherishry/p/5725184.html sys模块功能多,我们这里介绍一些比较实用的功能,相信你会喜欢的,和 ...
- spring 3.0 整合redis
参考文章:https://blog.csdn.net/weixin_42184707/article/details/80361464 其中遇到了问题,第一,redis的xml配置文件中的,头部地址资 ...
- 鹅厂优文|主播pk,如何实现无缝切换?
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文作者,rexchang(常青),腾讯视频云终端技术总监,2008 年毕业加入腾讯,一直从事客户端研发相关工作,先后参与过 PC QQ.手 ...
- 第2天:JavaScript基础(运算符、案例、循环、冒泡以及prompt提示输入框)
一元运算在前在后的区别 加加 var num1 = 10; //++在后面 先参与运算 再自加1 var sum1 = num1++ +10; console.log("sum1的值:&qu ...
- 使用在线工具下载YouTube视频
YouTube上面有数不尽的视频资源,很多人都想从上面下载自己喜欢的视频,但是不得其法.那么,究竟怎样从YouTube上面下载视频呢?其实,一点也不难.只要你在Google上面搜索free youtu ...