前端开发专业实习报告

这篇具有很好参考价值的文章主要介绍了前端开发专业实习报告。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        专业实习开始于6月13日,结束于7月1日,短暂而充实的三周,就这样结束了。重新回顾HTML、CSS、JS和vue的知识点的时候,我觉有时候学习的知识再去回顾的时候有一些不同的理解,就像是有一句俗话所说“书读百遍其义自见”,老师又通过做相关项目,让我们运用到了实践中去,收获满满。
        首先,老师介绍了web前端行业的应用领域、前景以及发展方向。web前端就是网站前台部分,运行在PC端,移动端等浏览器上展现给用户所浏览的网页。前端主要需要掌握到三大技术,HTML,CSS及JavaScript。同时,告诉我们想要学好并从事web前端行业,在思路要清晰的前提下,就必须要反反复复加强练习,多敲代码,找到错误并去解决问题,再此多发现问题,并总结问题,推荐通过发博客,来记录,这样可以永远保存,其他人刷到之后,还可以通过评论,来点评去发现问题。
        接下来,老师通过web前端静态页面还原,讲解了HTML和CSS相关知识点,这也是初次跟老师做的一个完完整整的页面,以前的练习都是针对某些样式所做的小案例。HTML是网页基础骨架,我们应该熟悉掌握常用的HTML标签,清楚对应的标签用法。CSS是网页样式的书写,我们应该熟悉掌握常用的样式属性,知道如何使用对应样式。在静态页面还原时,我们需要用到HTML+CSS+PHOTOSHOP,利用PHOTOSHOP工具,根据ui设计图还原对应的网页页面,来测量各个div之间的距离以及用切片工具把大的图片分割成自然连接的小图,然后保存为WEB所用格式,应用到css中去。拿到图片之后,做好准备工作,然后整理思路,首先把页面分成头(网站logo、导航栏、广告以及网站介绍区域)、体(网站的主题内容)和尾部(网站的基本信息、合作厂商以及作者)三部分,并编写三个大模块对应的结构代码,再把每个大的div分成若干个小的div。在写结构时,应注意以下几点知识点:当看到页面中相同元素的并列排序时,我们都是使用无序列表来做,并通过css中,text-decoration: none属性来设置无文本修饰;一般页面中logo图,都是用H1标签来完成;若网页中出现特殊图片(不在同一div划分范围内)一般用绝对定位(position: absolute;)去完成。
        通过页面还原项目讲解了HTML和CSS之后,下面,介绍了Javascript的起源、简介以及特点等并通过做小的项目让我们学会了如何去使用。JavaScript,一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。JavaScript程序是由若干语句组成的,语句是编写程序的指令。一个完整的JavaScript实现是由核心、文档对象模型、浏览器对象模型3个不同部分组成的。
        简单介绍完之后,通过图书管理系统、贪吃蛇、购物车页面三个项目,来把学到东西运到到实践中去。做项目时,我们不能急于去完成,一定要先分析项目,把项目中的逻辑搞清楚、搞懂在着手去做。图书管理系统需要完成以下7个功能:实现查看图书信息、实现新增图书信息、实现批量添加图书信息、实现删除图书信息、实现借出图书业务处理、实现归还图书业务处理以及实现搜索图书业务处理。在做项目时,我们应按以下三步去完成,第一步:利用js输出图书管理系统的菜单。第二步:创建一个数组用于保存图书。第三步:实现查看功能,调用对应函数。注意在创建多个对象时,应先创建类,通过类产生对应的对象。贪吃蛇小游戏逻辑思维非常强,通过分析需要按照以下思路去完成,第一步:绘制地图,利用js输出表格。第二步:产生蛇头和食物,使蛇头为红色,食物为蓝色。第三步,通过js动态产生元素。第四步,点击按钮时,让蛇头移动。第五步:按下键盘上下左右时,改变当前蛇头移动方向。其中,应注意一些细节问题,例如没有出界的死亡判定,身体要紧跟蛇头不能分开、防止出现蛇头反方向移动等。在这个项目中,使我掌握了定时器的使用setInterval();事件处理函数中,定义事件对象为event,使用event.keyCode键盘对应键值,根据按键,即可改变蛇头的方向;判断蛇头是否出界,需要判断在headNode.style.中,top<0 ||top>450 ||left<0||left>450是否在这个范围内,并清除定时器。购物车页面利用js实现以下相关功能:全选功能、四个分项按钮跟随状态的变化并给每一个按钮添加事件,使每个状态发生变化时,判断当前有多少个选中状态的功能、已选商品的件数以及合计多少钱的跟踪状态、当点击数量中的“+”或“-”按钮时,可控制数量以及小计的变化以及删除功能。应注意使其功能应在window.onload延时加载中去实现,等待结构加载完成,才能加载js。同时,在实现删除功能时,通过层级关系,发现要删除的元素,点击元素(this)的父级,在js中移除对应元素,首先找到被移除的父级,然后父级.removeChild(移除的元素)。以上为关于JavaScript相关项目、要实现的功能以及学到了知识。
        最后,讲解了前端框架Vue。Vue是一套用于构建用户界面的渐进式框架,代码简洁、上手容易并且市场上得到大量的应用。Vue的数据驱动是通过MVVM模式来实现的。通过vue做了点餐页面和去哪网项目,使我深刻感受到在大学里所学的知识与更多的实践结合在一齐,用实践来检验真理,这才是我们实习的真正目的。首先,拿到点餐页面,应把页面结构分成leftNav(左面导航栏)、order(命令栏)、oftergoods(常用商品栏)和typegoods(种类栏)四个部分并用HTML和CSS完成相关结构布局。分析点餐页面可以看到要实现以下功能:点击相关属性时,要实现商品的展示;商品的增加、删除、商品数量的增加、总数量以及总金额的计算等。将四部分用组件去完成,组件可以帮助我们提高开发效率以及提高项目的可维护性。同时,在做这个项目期间,我收获了以下几点:在css中,使用float浮动属性时,是不占位置空间的。因此,可以使用overflow: hidden;将浮动的隐藏;利用父组件给子组件传递数据,给子组件的template上的元素绑定相关事件,执行子组件的方法,子组件的方法中发射一个事件,传一个数据;无论我门实现页面中哪个功能,都必须要判断当前商品是否存在或count是否小于零,不要急于去写代码。接下来,做了关于去哪网相关的两个页面,拿到页面首先划分页面结构,再分析各个部分是用什么样的功能去实现的。主要完成页面以下几个功能:输入框以及点击秦皇岛实现跳转、实现轮播图的滑动、实现图片的分页展示、图片的滑动、景点的详情展示、搜索功能、展示从A-Z所有的国家以及展示A-Z字母。第一次接触通过vue做这么完整的项目,发现了自己很多不足,同时收获也是满满的。以下为通过这个项目所收获的几点:当点击搜索框输入城市时,会跳转到另外页面,所以,这个输入框用的不是input,而是用的div利用css:display: flex; align-items: center;交叉轴对齐方式去完成;当改第三方组件的样式时,而又不想去除scoped属性造成组件之间样式时,用穿透语法,直接将样式进行穿透;轮播图利用swiper插件去完成,在swiper相关文档中,查找相关属性并将小圆点封装到一个槽里面,图片利用v-for实现页面列表的渲染;页面拖拽是使用better-scroll仿原生app拖拽的插件去实现的。以上为关于vue相关项目、要实现的功能以及学到了知识。
         其中,使我领悟到了,原来我们只是单纯的学习书本上的知识,没有实践,无法把知识融会贯通,但通过这次的实训,我们把知识真正的运用上了,更深刻的理解和掌握了关于HTML、CSS、JavaScript和vue的相关知识。
        利用此次实训的机会使我巩固了以前所学的知识,积累了web前端开发的经验。同时,我明白了学习是一个长时间积累的过程,应该不断的去学习去巩固以前所学知识。文章来源地址https://www.toymoban.com/news/detail-562566.html

到了这里,关于前端开发专业实习报告的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于JAVA(springboot框架)实习管理系统 毕业设计开题报告

     博主介绍 :《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月05日
    浏览(49)
  • 【前端】javascript+html+css 家具销售网站(代码+报告)

    👉博__主👈:米码收割机 👉技__能👈:C++/Python语言 👉公众号👈:测试开发自动化【获取源码+商业合作】 👉荣__誉👈:阿里云博客专家博主、51CTO技术博主 👉专__注👈:专注主流机器人、人工智能等相关领域的开发、测试技术。 整个网页在头部部分,定义了字符编码、

    2024年02月14日
    浏览(50)
  • web前端期末大作业:基于HTML+CSS+JavaScript制作我的音乐网站(带设计报告)

    🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (

    2024年02月09日
    浏览(54)
  • [前端开发] 常见的 HTML CSS JavaScript 事件

    代码示例指路 常见的 HTML、CSS、JavaScript 事件代码示例 在 Web 开发中,事件是用户与网页交互的重要方式之一。通过事件,用户可以与页面元素进行交互,触发相应的功能或效果。本文将介绍常见的 HTML、CSS、JavaScript 事件,以及事件对象和事件代理的概念。 鼠标事件 鼠标事

    2024年02月19日
    浏览(56)
  • 建站系列(五)--- 前端开发语言之HTML、CSS、JavaScript

    建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— 网络协议 建站系列(四)— Web服务器之Apache、Nginx 建站系列(五)— 前端开发语言之HTML、CSS、JavaScript 建站系列(六)— 后端开发语言 建站系列(七)— 常用前后端框架

    2024年02月09日
    浏览(56)
  • [HTML]Web前端开发技术26(HTML5、CSS3、JavaScript )JavaScript基础——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 数据类型 数据类型-字符型 数据类型-数值型 数据类型-布尔型 数据类型-其它类型 变量 转义字符 运算

    2024年02月20日
    浏览(70)
  • [HTML]Web前端开发技术7(HTML5、CSS3、JavaScript )CSS的定位机制——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS的定位机制 文档流定位 元素类型   浮动定位 float的用处 float的特点 clear属性 层定位 position属性

    2024年02月05日
    浏览(72)
  • [HTML]Web前端开发技术9(HTML5、CSS3、JavaScript )——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS颜色与背景 颜色color属性 背景background属性 1. 背景颜色background-color 2. 背景图像background-image 3. 背景

    2024年02月03日
    浏览(75)
  • [HTML]Web前端开发技术12(HTML5、CSS3、JavaScript )——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 网页标题:三列自适应宽度 网页标题:多行三列自适应宽度 一级水平导航菜单:采用“无序列表+超

    2024年01月16日
    浏览(75)
  • python_web1(前端开发之HTML、CSS、Bootstap、Javascript、JQuery)

    知识总结: Python_web前端开发 python 安装Flask web框架 pip install flask 简介:templates用来返回html的页面,而非文本。 创建文件index.html 结构如下 index.xml内容如下: web1.py内容如下: 重新运行后: 固定格式:h/div/span/a/img/ul/li/table/input/form 通用的字符编码 meta charset=“UTF-8” div:一个

    2024年04月14日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包