百度前端學(xué)院小斌學(xué)院任務(wù)四

zhoutk 發(fā)布于2019-08-20 16:24 / 1282人閱讀

摘要：任務(wù)目的學(xué)習(xí)與實(shí)踐的基本語法語言特性初步了解的事件是什么初步了解中的是什么任務(wù)描述如圖，模擬一個(gè)隊(duì)列，隊(duì)列的每個(gè)元素是一個(gè)數(shù)字，初始隊(duì)列為空有一個(gè)輸入框，以及個(gè)操作按鈕點(diǎn)擊左側(cè)入，將中輸入的數(shù)字從左側(cè)插入隊(duì)列中點(diǎn)擊右側(cè)入，將中輸入的數(shù)字從右

任務(wù)目的
學(xué)習(xí)與實(shí)踐JavaScript的基本語法、語言特性
初步了解JavaScript的事件是什么
初步了解JavaScript中的DOM是什么
任務(wù)描述
如圖，模擬一個(gè)隊(duì)列，隊(duì)列的每個(gè)元素是一個(gè)數(shù)字，初始隊(duì)列為空
有一個(gè)input輸入框，以及4個(gè)操作按鈕

點(diǎn)擊"左側(cè)入"，將input中輸入的數(shù)字從左側(cè)插入隊(duì)列中；
點(diǎn)擊"右側(cè)入"，將input中輸入的數(shù)字從右側(cè)插入隊(duì)列中；
點(diǎn)擊"左側(cè)出"，讀取并刪除隊(duì)列左側(cè)第一個(gè)元素，并彈窗顯示元素中數(shù)值；
點(diǎn)擊"右側(cè)出"，讀取并刪除隊(duì)列又側(cè)第一個(gè)元素，并彈窗顯示元素中數(shù)值；
點(diǎn)擊隊(duì)列中任何一個(gè)元素，則該元素會(huì)被從隊(duì)列中刪除

任務(wù)注意事項(xiàng)
實(shí)現(xiàn)簡(jiǎn)單功能的同時(shí)，請(qǐng)仔細(xì)學(xué)習(xí)JavaScript基本語法、事件、DOM相關(guān)的知識(shí)
請(qǐng)注意代碼風(fēng)格的整齊、優(yōu)雅
代碼中含有必要的注釋
示例圖僅為參考，不需要完全一致
需要考慮數(shù)字輸入的合法性
建議不使用任何第三方庫、框架

實(shí)現(xiàn)代碼



  
    
    IFE JavaScript Task 01

云服務(wù)器 GPU云服務(wù)器前端學(xué)院阿里學(xué)院學(xué)院技術(shù)學(xué)院

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/82910.html

相關(guān)文章

百度前端學(xué)院小斌學(xué)院任務(wù)四

摘要：任務(wù)目的學(xué)習(xí)與實(shí)踐的基本語法語言特性初步了解的事件是什么初步了解中的是什么任務(wù)描述如圖，模擬一個(gè)隊(duì)列，隊(duì)列的每個(gè)元素是一個(gè)數(shù)字，初始隊(duì)列為空有一個(gè)輸入框，以及個(gè)操作按鈕點(diǎn)擊左側(cè)入，將中輸入的數(shù)字從左側(cè)插入隊(duì)列中點(diǎn)擊右側(cè)入，將中輸入的數(shù)字從右任務(wù)目的學(xué)習(xí)與實(shí)踐JavaScript的基本語法、語言特性初步了解JavaScript的事件是什么初步了解JavaScript中的DOM是什么任務(wù)...

sorra 2019-08-01 16:47 評(píng)論0 收藏0
百度前端學(xué)院學(xué)習(xí)：動(dòng)態(tài)數(shù)據(jù)綁定（四）

摘要：模板的語法解析匹配實(shí)際數(shù)據(jù)替換模板拆分成兩個(gè)主要是為了解決深對(duì)象的問題，目前看過別的通過都是通過并不是一個(gè)很好的方法。最后修改一下和函數(shù) 題目地址源代碼地址任務(wù)分析這個(gè)任務(wù)主要是通過解析模板，替換中間出現(xiàn)的屬性，例子：姓名：{{user.name}} 年齡：{{user.age}} 替換后：姓名：youngwind 年齡：25 實(shí)現(xiàn) el...

Gilbertat 2019-08-20 14:50 評(píng)論0 收藏0
百度前端任務(wù)(3)(4)(5)——巧談前端基礎(chǔ)html,css布局

摘要：經(jīng)過了百度前端技術(shù)學(xué)院任務(wù)三和四五，在這里總結(jié)一下前端布局的一些個(gè)人見解，很多前端新手就是沒有理解怎么布局而一直學(xué)不好先說一下，我個(gè)人理解的前端布局的思想吧。經(jīng)過了百度前端技術(shù)學(xué)院任務(wù)三和四五，在這里總結(jié)一下前端布局的一些個(gè)人見解，很多前端新手就是沒有理解怎么布局而一直學(xué)不好先說一下，我個(gè)人理解的前端布局的思想吧。在前端布局的時(shí)候，先不要設(shè)計(jì)太多什么margin,paddin...

CoyPan 2019-08-30 15:52 評(píng)論0 收藏0
百度前端任務(wù)(3)(4)(5)——巧談前端基礎(chǔ)html,css布局

摘要：經(jīng)過了百度前端技術(shù)學(xué)院任務(wù)三和四五，在這里總結(jié)一下前端布局的一些個(gè)人見解，很多前端新手就是沒有理解怎么布局而一直學(xué)不好先說一下，我個(gè)人理解的前端布局的思想吧。經(jīng)過了百度前端技術(shù)學(xué)院任務(wù)三和四五，在這里總結(jié)一下前端布局的一些個(gè)人見解，很多前端新手就是沒有理解怎么布局而一直學(xué)不好先說一下，我個(gè)人理解的前端布局的思想吧。在前端布局的時(shí)候，先不要設(shè)計(jì)太多什么margin,paddin...

YacaToy 2019-08-01 16:12 評(píng)論0 收藏0
百度前端技術(shù)學(xué)院2017學(xué)習(xí)總結(jié)

摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴(kuò)大一倍，這樣才有移動(dòng)與變化的空間。不足及改進(jìn)總結(jié)來看，自己做得不夠，雖然也花了時(shí)間，不過能看出有敷衍的成分在。一、前言百度的前端技術(shù)學(xué)院IFE，2016年就聽說了，當(dāng)時(shí)自己也報(bào)名，還組成隊(duì)伍了，不過自己一個(gè)任務(wù)也沒完成就結(jié)束了，遺憾... 關(guān)注了IFE，知道2017年2月有新的一期培訓(xùn)，于是一直在等著報(bào)名，然后開始做里面發(fā)布的任務(wù)（...

pkwenda 2019-08-29 12:35 評(píng)論0 收藏0