北京 切换校区

全国24小时免费热线

400-009-1906

WEB前端实操

时间:   来源:尚学堂   阅读:1,349

第一阶段
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 闫老师