北京 切換校區

全國24小時免費熱線

400-009-1906

WEB前端實操

時間:   來源:尚學堂   閱讀:1,340

第一階段
1. 編寫第一個web界面

2. 編寫第一個web界面
    要求:內容左右居中,包含文本、圖片、超鏈接
3. 使用無序列表嵌套寫出水平布局導航欄
    要求:使用無序列表嵌套寫出水平布局導航欄
4. 使用表格寫出一個課程表
    要求:使用表格寫出一個課程表
5. 寫出下圖效果
    要求:圖片可以隨意更換成任意圖片,不必如下圖一樣圖片

6. 寫出下列表單

7. 寫出下圖表單

8. 寫出下圖布局
    要求:以下效果用途的小圖可以在圖片中截取,顏色取值使用吸色器吸取就可了

9. 使用伸縮盒模型寫出下圖效果
    要求:以下效果用途的小圖可以在圖片中截取,顏色取值使用吸色器吸取就可了

10. 使用浮動寫出下圖效果
     要求:注意,并非實現下圖完整效果,只是實現下列圖中的6個列表排列效果,要求使用浮動,圖片可以隨意添加任意圖片,顏色值使用吸色器吸取就可以了

11. 使用浮動定位寫出京東banner圖
     要求:使用浮動定位寫出京東banner圖
12. 根據下列要求完成站點
     要求:參考站點:https://www.wwtliu.com/sxtstu/blueberrypaiPc/
     a) 按照站點效果1:1實現
     b) 資源可以直接在當前站點中取到,瀏覽器中右鍵,檢查,在資源中可以拿到所有資源。
     c) 站點中的數據可以直接寫死在站點中
     d) 盡可能多的實現頁面效果

第二階段
1. 打印九九乘法表
    要求:打印九九乘法表
2. 用for循環和while循環分別計算100以內奇數和偶數的和,并輸出
    要求:用for循環和while循環分別計算100以內奇數和偶數的和,并輸出
3. 合并兩個數組,并給合并之后的數組首尾各添加數據1,10
    要求:合并數組:[100,200,300,400]和[500,600,700,800],?并給合并之后的數組首尾各添加數據1,10
4. 求出以下數組中最大值和最大值的下標
    要求:[23,12,43,25,45,66],求出最大值和最大值的下標
5. 使用遞歸完成階乘:5!
    要求:1!+2!+3!+4!+5!,求結果
6. 利用DOM完成內容添加結構,添加內容如下
    要求:給定容器div的id為root,要求向div中添加列表結構如下,
    ul>li*5>a[url]>網址,以上結構需要通過DOM創建
7. 動態給一個div結構設置自定義屬性(data-*),讀到一個已存在自定義屬性結構的div中的屬性。
    要求:動態給一個div結構設置自定義屬性(data-*),讀到一個已存在自定義屬性結構的div中的屬性
8. 完成節點的增刪改查,具體如下
    要求:給定div容器中含有一個span:<div><span>內容</span></div>
    a) 想div容器中添加一個a標簽
    b) 刪除div中的span標簽
9. 完成事件代理案例,具體如下
    要求:給出以下結構,用事件代理方式為每一個li標簽添加監聽事件

<div>
    <ul>
        <li>內容1</li>
        <li>內容1</li>
        <li>內容1</li>
    </ul>
</div>

10. 編寫代碼實現兼容IE和最新瀏覽器事件同時可以兼容移動端
     要求:編寫代碼實現兼容IE和最新瀏覽器事件同時可以兼容移動端
11. 編寫定時器,實現時鐘效果
     要求:編寫定時器,實現時鐘效果
12. 利用DOM操作,定時器等完成一個輪播圖效果
     要求:利用DOM操作,定時器等完成一個輪播圖效果,將完成效果封裝為js庫
13. 利用閉包,完成tab切換效果,具體效果參考淘寶
     要求:如下圖效果

14. 請給出this關鍵字的用法,越多越詳細越好
     要求:請給出this關鍵字的用法,越多越詳細越好
15. 創建一個person類,在創建一個son類,實現繼承
     要求:創建一個person類,在創建一個son類,實現繼承
16. 實現構造函數模式與原型模式的代碼
     要求:實現構造函數模式與原型模式的代碼
17. 利用觀察者模式實現以下場景
     要求:你去一家公司面試,面試完畢,公司讓你回家等消息。
     a) 要指定一個發布者(發布一個職位)
     b) 給發布者添加一個緩存列表,用于存放回調函數以便通知訂閱者(很多人來這家公司面試)
     c) 最后發布消息,發布者遍歷緩存列表,依次觸發訂閱者的回調函數(你是否被錄取的反饋)
18. 編寫一個郵箱和用戶名驗證的正則表達式
     要求:編寫一個郵箱和用戶名驗證的正則表達式
19. 實現瀑布流效果,代碼要求合理整潔
     要求:實現瀑布流效果,代碼要求合理整潔

第三階段
1. jQuery根據json數據將內容添加到容器中
    要求:json格式數據如下

[
    {
	name:”iwen”,
	age:20
    },
    {
	name:”ice”,
	age:22
    },
    {
	name:”ime”,
	age:24
    }
]

2. 使用jQuery完成輪播圖效果
    要求:
    a) 可無縫輪播
    b) 封裝js庫,根絕參數傳遞圖片數量和是否無縫輪播等操作
3. 使用jQuery實現呼吸燈動畫效果
    要求:使用jQuery實現呼吸燈動畫效果
4. 詳細解釋Bootstrap柵格系統,并解釋實現的原理
    要求:詳細解釋Bootstrap柵格系統,并通過代碼使用方式展示如何使用,觀察源碼,給出實現的原理
5. 使用swiper完成輪播圖效果
    要求:通過swiper的使用,希望大家可以熟練使用各種第三方提供的js庫

第四階段
1. 搭建PHP與Mysql環境
    要求:獨立搭建PHP與Mysql環境,解決端口被占用問題
2. 使用PHP完成奇數與偶數的判斷
    要求:使用PHP完成奇數與偶數的判斷
3. 理解PHP中類與對象的概念,簡述你認為的面向對象思想
    要求:理解PHP中類與對象的概念,簡述你認為的面向對象思想
4. 熟練使用PHPMyAdmin可視化工具,完成表的創建與刪除
    要求:熟練使用PHPMyAdmin可視化工具,完成表的創建與刪除
5. 數據庫操作語句練習,實現以下語句操作
    內容:創建一張學生表,表中包含,id、studentname、age、sex信息,錄入十條數據信息進行以下操作。
    要求:
    a) 增加語句:增加3條學生數據
    b) 刪除語句:刪除前三條學生信息
    c) 修改語句:修改最后一條學生信息
    d) 查詢語句:查詢所有信息
    e) 條件查詢語句:查詢性別為男的學生信息
6. PHP鏈接數據庫并提供數據接口
    要求:獨立完成服務器環境搭建,包含以下內容
    a) 提供學生信息查詢功能,并根據參數查詢信息提供前端接口
    b) 提供修改接口,可以根據接口傳遞參數修改信息
    c) 提供增加接口,可以根據接口傳遞參數增加信息
    d) 接口返回數據格式為json格式數據

第五階段
1. 掌握http協議,介紹以下內容
    要求:
    a) http介紹
     b) 主要特點
     c) Http之URL
     d) Http發送請求
    e) Http響應信息
    f) Http狀態碼
    g) Http請求方法
    h) Http工作原理
    i) GET和POST請求區別
2. 實現Ajax網絡請求,要求封裝可復用js文件
    要求:實現Ajax網絡請求,要求封裝可復用js文件
3. 解決前后端交互的跨域問題
    要求:
    a) 跨域產生的原因
    b) 什么情況下會產生跨域
    c) 如何解決跨域問題,jsonp、cors
    d) 跨域原理,解釋為什么不是真正的ajax
4. jQuery中的ajax如何實現,介紹所有可使用的參數
    要求:jQuery中的ajax如何實現,介紹所有可使用的參數

第六階段
1. 使用頭像上傳插件上傳頭像
    要求:上傳頭像插件可以裁剪圖片
2. 實現三級聯動,三級聯動插件要求自己實現
    要求:自主實現三級聯動效果,并封裝為js插件
3. 擴展jQuery插件功能
    要求:通過集成擴展jQuery插件功能
4. 實現富文本編輯器,使用百度ueditor即可
    要求:熟練使用插件
5. 優化代碼,將可復用代碼分離為js插件,盡可能整理業務邏輯到簡潔合理
    要求:本題為擴展題,主要考驗學生動手能力與理解能力。盡最大努力對代碼進行拆分與整理業務邏輯

第七階段
1. 請寫出你知道的H5新特性,并簡述每一個的用途
    要求:越多越好,但是寫出每一個的用途,最好通過具體代碼展示用途
2. 本地存儲有哪些方式,有什么區別?
    要求:寫出本地存儲都有哪些方式并寫出其區別
3. 簡述注冊登錄的整個過程,并通過代碼實現
    要求:必須通過代碼實現整個登錄與注冊的過程
4. Canvas繪制游戲地圖,地圖資源可以在網上搜索
    要求:使用Canvas繪制游戲地圖
5. 編寫REM對應JS代碼,要求可以適配640與750像素的設備
    要求:編寫REM對應JS代碼,要求可以適配640與750像素的設備
6. 使用Echarts圖標實現學生信息柱狀圖
    要求:涵蓋學生數量、年齡、性別等基本信息
7. 實現分頁代碼,并且將分頁封裝
    要求:實現分頁代碼,并封裝

第八節段
1. 請描述ng-show/ng-hide與ng-if的區別
    要求:請通過代碼展示具體描述區別
2. 解釋下什么是$rootScope以及和$scope的區別?
    要求:請畫圖描述兩者的區別,并描述使用場景
3. 表達式{{ yourModel }}是如何工作的?
    要求:此題延伸問題,請大家給出至少1個javascript模板,并簡述如何使用,通過代碼解釋也可以
4. 請簡述Angularjs中雙向數據綁定原理
    要求:簡述Angularjs中雙向數據綁定原理
5. 請給出Angular中至少三種實現不同模塊之間通信方式
    要求:要求通過代碼描述至少三種模塊之間通信方式
6. 請描述什么是路由,并實現
    要求:描述路由并且通過代碼實現路由,要求實現多層路由嵌套效果
7. 請描述為什么要有模塊化,解決了什么問題?
    要求:描述什么是模塊化,模塊化實現方式
8. 請使用requirejs完成音樂列表項目
    要求:
    a) 使用requirejs
    b) 接口請使用:http://www.wwtliu.com/blog/?p=271
    c) 代碼要進行分離
    d) UI樣式可參考百度音樂(也可以根據自己設計實現)
    e) 兼容移動端,可使用bootstrap實現
9. 獨立完成Nodejs環境搭建
    要求:了解NPM,可以運行基本服務器
10. 熟練使用express完成服務器端搭建
     要求:
     a) 代碼分離
     b) 路由分離
     c) 第三方依賴分離
     d) 連接數據庫
     e) 實現接口數據過濾
11. 請寫出ES6常用新特性
     要求:寫出你熟悉的ES6新特性
12. 描述箭頭函數,并且實現箭頭函數
     要求:描述箭頭函數,并且實現箭頭函數
13. 描述Promise是什么,什么時候使用,以及目前存在的兼容性問題
     要求:描述Promise是什么,什么時候使用,以及目前存在的兼容性問題
14. CSS預處理語言有哪些?Less語法請通過代碼依次描述
     要求:CSS預處理語言有哪些?Less語法請通過代碼依次描述
15. 前端構建工具有哪些,gulp的優勢在哪里,什么是熱更新?
要求:前端構建工具有哪些,gulp的優勢在哪里,什么是熱更新?
16. 版本管理器SVN和Git如何使用,并描述兩者的區別
     要求:
     a) 創建github賬號,并將本次答案推送到github
     b) 在github上多次修改答案,盡可能完善答案結果
     c) 將github個人主頁回答打當前平臺
     d) 并且描述沖突如何產生且如何解決
17. 搭建Webpack環境,并且將Webpack4.0版本需要修改的點修改掉
     要求:搭建Webpack環境,并且將Webpack4.0版本需要修改的點修改掉
18. 聊聊JSX語法,并且說出JSX語法如何解析的
     要求:熟悉JSX語法,并且知道如何解析,注意:代碼描述時要注意代碼規范
19. React中props與state是什么?有什么區別?
     要求:使用props和state分別通多代碼解釋如何使用,并用文本描述他們的區別
20. React實現組件與組價中的交互
     要求:子父級之間交互就可以了
21. 寫出React組件的生命周期函數
     要求:寫出React組件生命周期函數
22. 實現fetch網絡請求
     要求:代碼實現fetch網絡請求
23. Antd UI組件如何使用?如何配置?
     要求:完成Antd組件加載,并且使用其中的某個組件
24. 實現React路由功能,注意需要實現嵌套路由
     要求:實現React功能,注意需要實現嵌套路由
25. 實現Vue雙向數據綁定,并說出其實現原理
     要求:實現Vue雙向數據綁定,并說出其實現原理
26. 實現Vue組件之間的交互
     要求:實現子父組件之間數據傳遞,實現同級組件中數據傳遞
27. 創建Vue自定指令
     要求:實現Vue全局自定義指令,指令功能為添加次指令數字變為人民幣展示方式例如:10 –> ¥10.00
28. 簡述Axios是什么?如何使用,如何配置跨域處理。
     要求:簡述Axios是什么?如何使用,如何配置跨域處理
29. 實現微信底部導航tabBar效果,使用路由實現,并且要求選中高亮
     要求:實現微信底部導航tabBar效果,使用路由實現,并且要求選中高亮
30. 在Vue中實現列表數據上拉加載效果,可以使用第三方插件
     要求:實現Vue列表數據上拉加載效果,可以使用第三方插件
31. 使用Vuex實現訂單數據共享,購買訂單環境自己實現。
     要求:使用Vuex實現訂單數據共享,購買訂單環境自己實現

第九階段
1. 微信一個pages包含幾個文件?那幾個是必須文件?json文件是否可以為空?
    要求:微信一個pages包含幾個文件?那幾個是必須文件?json文件是否可以為空?
2. 實現微信小程序中跳轉頁面攜帶參數的代碼
    要求:
    a) 跳轉頁面數據為列表數據
    b) 列表跳轉攜帶不同數據
    c) 跳轉到對應頁面之后顯示對應數據詳情
3. 簡述模板的應用與使用場景
    要求:簡述模板的應用與使用場景
4. 微信小程序在存在AppId的情況下,網絡請求都有哪些要求,如何配置?
    要求:微信小程序在存在AppId的情況下,網絡請求都有哪些要求,如何配置?
5. 微信小程序實現音樂列表數據的上拉加載和下拉刷新
    要求:上拉加載和下拉刷新的實現
6. 使用微信小程序實現建議音樂播放器
    要求:
    a) 音樂接口地址:http://www.wwtliu.com/blog/?p=271
    b) 可以循環列表播放,自動下一曲
    c) 歌曲分類別展示
    d) 實現歌詞同步展示效果
    e) 上傳審核

分享:0

推薦閱讀

  • 北京校區
  • 山西校區
  • 鄭州校區
  • 武漢校區
  • 四川校區
  • 長沙校區
  • 深圳校區
  • 上海校區
  • 廣州校區
  • 保定招生辦

北京京南校區:北京亦莊經濟開發區科創十四街6號院1號樓 賽蒂國際工業園
北京海淀區校區:北京市海淀區西三旗街道建材城西路中騰建華商務大廈東側二層尚學堂
咨詢電話:400-009-1906 / 010-56233821
面授課程:?JavaEE+微服務+大數據? ???大數據+機器學習+平臺架構?????Python+數據分析+機器學習??人工智能+模式識別+強化學習???WEB前端+移動端+服務端渲染

 

山西學區地址:山西省晉中市榆次區大學城大學生活廣場萬科商業A1座702

鄭州學區地址:河南電子商務產業園6號樓4層407
咨詢電話:0371-55177956

武漢學區地址:武漢市東湖高新區光谷金融港B22棟11樓
咨詢電話:027-87989193

四川學區地址:成都市高新區錦暉西一街99號布魯明頓大廈2棟1003室
咨詢電話:028-65176856 / 13880900114

網址:http://www.cssxt.com/
咨詢電話:0731-83072091

深圳校區地址:深圳市寶安區航城街道航城大道航城創新創業園A4棟210(固戍地鐵站C出口)
咨詢電話:0755-23061965 / 18898413781

上海尚學堂校區地址:上海市浦東新區城豐路650號
咨詢電話:021-67690939

廣州校區地址:廣州市天河區元崗橫路31號慧通產業廣場B區B1棟6樓尚學堂(地鐵3號線或6號線到“天河客運站”D出口,右拐直走約800米)
咨詢電話:020-2989 6995

保定招生辦公室

地址:河北省保定市競秀區朝陽南大街777號鴻悅國際1101室

電話:15132423123

Copyright 2006-2019 北京尚學堂科技有限公司  京ICP備13018289號-19  京公網安備11010802015183  
媒體聯系:18610174079 閆老師  
广东36选7福利彩