北大青鸟java培训：该如何学习web前端开发？

前端开发是很多朋友有关注的类型，那么北大青鸟java培训：该如何学习web前端开发？，我爱编程网为大家带来了相关文章，希望给大家提供参考。

本文目录一览：

• 1、北大青鸟java培训：该如何学习web前端开发？
• 2、web前端和java的联系与区别
• 3、web前端 和java？

北大青鸟java培训：该如何学习web前端开发？

对于初学web前端的人而言，不清楚详细的web前端学习路线，确实是一个让人头疼的问题，今天web前端培训的小编就为您解析web前端学习路线是什么?并告诉你我们该如何学习web前端开发?如今是一个信息大爆炸的时代，也是一个互联网+的平台，现在各行各业基本上都会牵扯一点web前端的知识，不管是什么样的企业都离不开前端，都需要一个自己的官方网站。
我们时下正处在互联网高速发展的时代，互联网方向的IT人才稀缺量也是比较大的，正是在这样的市场契机之下越来越多的人开始涌入web前端的行列中去。
在这些人中有转行的、也有受身边朋友熏陶的、也有自己感兴趣或者说自己想提升的，随着学习web前端的人员越来越多，问题也逐渐的显现出来，其中最为明显的两个问题分别是：问题一：web前端学习路线是什么?小编在这里首先要告诉大家web前端其实很适合零基础的学员学习的，整体来说他比安卓、Java要简单很多，其学习路线主要有以下几个阶段：阶段一：web页面制作基础，电脑培训建议掌握传统PC端网页布局和制作;阶段二：UI网站设计，掌握页面设计和原型图设计阶段三：编程基础技术，利用js完成一些常见网页的特效开发阶段四：后端开发技术，了解web服务器的工作原理，并可以简单搭建自己的应用程序服务器端;阶段五：移动互联网应用，掌握现在主流的页面制作技术，可以完成微网站的制作，并可以做到多设备兼容;阶段六：特效开发高级实战，通过实际项目开发，精通前端常用框架的实际应用及问题解决，以及常见特效开发、前后台交互开发等;阶段七：企业级应用开发，能够独立使用HTML5完成APP开发制作。
问题二：该如何学习web前端开发?学习web前端无非就两种方式一种是自学还有一种就是参加培训，但是无论是自学还是参加培训都离不开以下几种学习方法：方法一：学习态度一定要端正，不能三天打鱼两天晒网，学习一定要脚踏实地，遇到不会的不懂的问题一定要及时解决;方法二：根据web前端学习路线制订一份详细的学习计划，切忌这份学习计划不是一成不变的，一定要根据自己的实际学习情况，适时的做出调整;方法三：学习过程中一定要多动手、多动脑，因为web前端的学习会涉及很多的代码，所以课下一定要勤加练习，不要觉得上课看着老师做了，自己就懂了。
代码的学习，勤加练习才是王道。
经过以上的分析大家对于web前端的学习路线想必已经十分清楚了，而web前端的学习方法无非就是以下三点：学习态度、学习计划以及多动脑等。

web前端和java的联系与区别

Web前端灵活多变，能够直观看到成果，所以成就感更容易体现，学习起来也会相对轻松。Java被称为最稳定的语言，应用最为广泛，无论是一线城市还是二三线城市的岗位需求都比较大，容易找到工作，但入行门槛相对更难。 你也可从以下三个方面来作为参考：

工作方向：

Java开发Java作为编程语言中最热门的技术，可谓无处不在。无论是生活软件、游戏还是电脑软件，从你的每一次购物到每一笔支付的成功，都离不开Java，越来越多的企业也正采用Java语言开发网站，而在所有程序员中，Java开发工程师就占据了30%的比例。Java语言具有面向对象、跨平台、安全性、多线程等特点，这使得Java成为许多应用系统的理想开发语言。学完Java可以：

1.编写网站。Java可以用来编写网站，现在很多大型网站都用JSP写的，JSP全名JavaServerPages它是一种动态网页技术，比如我们熟悉的163，一些政府网站都是采用JSP编写的。所以学习Java的同学可以找开发网站方面的工作，而且现在找这方面的岗位比较多。比如：网站开发大多使用JSP、Servlet、JavaBean这些技术。

2.做Android。Android是一种基于Linux的自由及开放源代码的操作系统，其源代码是Java。所以市场上见到的手机系统例如MIUI ，阿里云，乐蛙等，都是修改源代码再发行的。Java做安卓不单单是指系统，还有APP，对于更多的开发人员来说，他们更多的时间是花在开发APP上面。

3.游戏开发。在以前诺基亚还很流行的时候，你玩的手机游戏有90%以上都是Java开发的。PC端也有Java开发的游戏，比如：《我的世界》(minecraft ，简称MC)，《英雄联盟》（简称LoL）等等。

4.大数据。都说现在是数据时代。各种大数据技术层出不穷。目前处理大数据的技术有python，Java，R等。虽然说Java没有绝对的优势，但同样也是一大霸主。

5.做企业软件。企业级应用开发大多使用Java语言，大到全国联网的系统，小到中小企业的应用解决方案，Java都占有极为重要的地位。

另外，Java在人工智能、科学计算等领域也有一定的应用。Java已成为当今市面上最受欢迎的编程语言了，可以说只要你使用手机、电脑等电子产品，你就会用到跟Java有关的东西。

Web前端

网站的“前端”是与用户直接交互的部分，包括你在浏览网页时接触的所有视觉内容--从字体到颜色，以及下拉菜单和侧边栏，这些视觉内容，都是由浏览器解析、处理、渲染后呈现而来。从狭义上讲，前端工程师使用HTML5、CSS、JavaScript等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。Web前端工程师在企业里主要负责以下三方面的工作：

1.网站设计；

2.网页界面开发；

3.前台数据绑定和前台逻辑的处理；

技术知识：

Java开发

1、Web前端技术 （HTML5、CSS、JS、jQuery、Ajax）

2、互联网架构（Nginx、Redis、MQ）

3、JavaEE三大核心框架（Spring，SpringMVC，MyBatis）

4、Web服务器端编程（Java基础、Servelt、SSH、SSM）

5、数据库技术（Orale、MySQL、JDBC、DAO）

Web前端

1、htmlcss。

2、JavaScript。

3、Photoshop、flash。 我爱编程网

4、html5和css3。

5、浏览器兼容。懂web标准,熟练手写xhtmlcss3并符合符合w3c标准。代码能兼容主流浏览器Firfox,Chrome、Safari、IE、Opera。6、熟悉一门后台编程语言asp、php、jsp等。

就业薪资：

Java开发

web前端

Java开发和Web前端现在都属于热门的方向，从薪资角度来说，Java的工资普遍比Web前端高；从难易度来说，Java要比Web前端难一些；从需求来说，Java的人才需求量要比Web前端多，但相应Java的人才竞争力比Web前端要大一些。 并且，二者之间并无高低之分，墙外的人总以为墙内的人是光鲜亮丽的，但是适合自己的才是最重要的。至于哪一个更好，仁者见仁，智者见智。

web前端 和java？

举个例子，对于广告系统的来说， 我们先不管一些job，CACHE，config ... 这些优化，些框架和分层可以是这样的，

MVC的技术选型：
V: FreeMarker vs JSP / Velocity
C: SpringMVC vs Struts / Webwork
M: SPRING/JPA/Hibernate vs iBatis
2 前端V的架构
前端开发刚兴起的阶段，前端开发人员的工作经常穿插在后端开发过程中担任辅助作用的，随着业务越来越复杂，前端必须有自己的开发框架和流程，使得后端专注于服务类的开发，前端专注于与用户交互类的开发。
WEB前端从概念上划分为三个层次：结构、表现、和行为。三层相对独立，互不影响。在物理上层面上分别对应HTML、CSS、JS三种不同的的文件格式。
HTML：负责定义网页的结构，内容
CSS：负责内容的展现方式
JS：负责网页关于动态的行为反应
好的层次划分对前端的开发也很关键。显示内容问题的唯一来源应该是html文件定义的，内容展示问题的唯一来源应该是CSS文件定义的，行为问题的唯一来源应该是javascript文件定义的，各司其职相互独立。但是他们是相关的，因为行为和样式无法与结构分离，必须写在同一个文件里。这种情况下，首先还是你要把行为和样式从html标签中分开，然后在html文件中引入。

前端开发的核心是HTML + CSS + JavaScript。本质上它们构成一个MVC框架，即HTML作为信息模型（Model），CSS控制样式（View），JavaScript负责调度数据和实现某种展现逻辑（Controller）。
1）结构层
在java领域，表现层技术主要有三种：jsp、freemarker、velocity。
(1) jsp(Java Server Pages)
它是在传统的网页HTML文件(.htm，.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，它实现Html语法中的java扩展（以 <%, %>形式）。从而形成JSP文件，后缀名为(.jsp)。因为java具有跨平台特点， 用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。JSP与Servlet一样，是在服务器端执行的，最终都要变.class文件，通常返回给客户端的就是一个HTML文本，因此客户端只要有浏览器就能浏览。
优点：
可以写java代码
支持jsp标签（jsp tag）
支持表达式语言（el）
官方标准，用户群广，丰富的第三方jsp标签库
性能良好，jsp编译成class文件执行，有很好的性能表现

缺点：
编写java代码，如使用不当容易破坏mvc结构。
(2) Freemarker
它生成静态页面，首先需要使用自己定义的模板页面，这个模板页面可以是最最普通的html，也可以是嵌套freemarker中的 取值表达式， 标签或者自定义标签等等，然后后台读取这个模板页面，解析其中的标签完成相对应的操作， 然后采用键值对的方式传递参数替换模板中的的取值表达式，做完之后 根据配置的路径生成一个新的html页面， 以达到静态化访问的目的。
模板+数据模型=输出，模板只负责数据在页面中的表现，不涉及任何的逻辑代码，而所有的逻辑都是由数据模型来处理的。用户最终看到的输出是模板和数据模型合并后创建的。
FreeMarker与Web容器无关，即在Web运行时，它并不知道Servlet或者其他。
优点：
可以彻底的分离表现层和业务逻辑，使用JSP 开发过程中在页面中大量的存在业务逻辑的代码，使得页面内容凌乱，在后期大量的修改维护过程中就变得非常困难。FreeMarker根本不支持Java代码。
可以提高开发效率，JSP在第一次执行的时候需要转换成Servlet类，开发阶段进行功能调适时，需要频繁的修改JSP，每次修改都要编译和转换 。FreeMarker模板技术不存在编译和转换的问题，开发过程中，后端不必在等待界面设计开发人员完成页面原形后，再来开发程序。
对jsp标签支持良好
内置大量常用功能，比如html过滤，日期金额格式化等等
使用表达式语言 (EL)
缺点：
不是官方标准
用户群体和第三方标签库没比jsp丰富
使用FreeMarker后，作为界面开发人员，只专心创建HTML文件、图像以及Web页面的其他可视化方面，不用理会数据；而程序开发人员则专注于系统实现，负责为页面准备要显示的数据。
还有一些像velocity这样较早出现的用于代替jsp的模板语言 ... ...
2) 表现层CSS
结构搭建之后，就是为他们添加样式表属性。它实现的是页面内容和现实样式分离，所有的CSS都是非必需的，就算无法应用CSS或CSS冲突，网页也能够正常访问。
为了管理的方便，可以将不同样式进行拆分，比如可以拆分为全局样式，结构布局样式，色彩样式，文字样式和重置样式。css在开发时代码采用了规范的形式，比如有注释，缩进等，这样，这些文件的大小比较大，为了减少网络流量，提高网页的下载速度，一般发布时需要对javascript和css进行压缩处理，我们将样式文件进行合并压缩，目的是减少与服务器交互的时间和次数。如 可以在线进行压缩。
样式混合使用选择：
有关整个网站统一的样式代码，放置在独立的样式文件中.css
某些样式不同的页面，除了链接外部样式文件，还需要自定义的样式
某张网页中，部分内容如果需要一种不同，采用内行样式
) 行为层 javaScript
常见的也是最有名的javascript 框架，其实准确来说应该是库：
（ _wangfx_jsframeworks/ ）
jQuery
jQuery 是目前用的最多的前端 JAVASCRIPT 类库，它是比较轻量级的类库，对 DOM 的操作也比较方便到位，支持的效果和控件也很多。同时，基于 jQuery 有很多扩展项目，包括 jQuery UI(jQuery 支持的一些控件和效果框架)、jQuery Mobile(移动端的 jQuery 框架)、QUnit(JavaScript 的测试框架)。这些补充使得 jQuery 框架更加完整，而且这些扩展与目前的框架基本都是兼容的，可以交叉使用，使得前端开发更加丰富。
Ext
相比 jQuery，Ext JS 更重量级，有几个兆的文件，使得 Ext 在开发中成为的弊端和累赘。但是，另一方面，在 Ext JS 庞大的文件背后是 Ext JS 强大的功能。Ext JS 的控件和功能可以说强大和华丽到的程度。图表、菜单、特效，Ext JS 的控件库非常丰富，同时它的交互也非常强大，独立靠 Ext JS 几乎就可以取代控制层完成于客户的交互。强大的功能，丰富的控件库，华丽的效果也使得 Ext JS 成为内网开发利器。
YUI
YUI 也有自己的 JavaScript 类库，DOM 操作和效果处理也还比较方便，功能和控件也很齐全，但是相比 jQuery 和 Ext JS 显得比较中庸一些。随着 Yahoo的没落，YUI 也渐渐的被淡化。

目前前端框架主要采用 JavaScript+CSS 模式。基于上面的几种javascript库，我们可以基于JQuery框架搭建起一个java web前端系统的框架。如丛林的前端就是COS-UI+jQuery搭建起来的，再利用插件ztree实现品类树在前端的展示。
jquery对javascript的封装
JQuery能大大简化Javascript程序的编写，主要表现：
定位元素

JS写法:
document.getElementById("abc")
jQuery写法:
$("#abc") 通过id定位
$(".abc") 通过class定位
$("div") 通过标签定位

改变元素的内容

JS写法：
abc.innerHTML = "TEST";
jQuery写法：
abc.html("TEST");

显示隐藏元素

JS 写法：
abc.style.DISPLAY = "none";
abc.style.DISPLAY = "BLOCK";
jQuery 写法：
abc.HIDE();
abc.SHOW();
abc.TOGGLE();

修改元素样式

JS写法：
abc.STYLE.fontSize=size;
jQuery写法：
abc.css('font-size', 20);

Ajax

JS
自己创建对象，自己处理浏览器兼容等乱七八糟的问题，略去不表
jQuery
$.get("abc.php?a=1&b=2", recall);
postvalue = "a=b&c=d&abc=123";
$.POST("abc.php", postvalue, recall);
FUNCTION recall(RESULT) {
ALERT(result);
//如果返回的是json，则如下处理
//result = eval('(' + result + ')');
//ALERT(result);
}

获得焦点
为表单赋值
获得表单的值
设置元素不可用
3) 浏览器的渲染
4）web前端开发流程

以上就是我爱编程网为大家带来的北大青鸟java培训：该如何学习web前端开发？，希望能帮助到大家，了解更多相关信息，敬请关注我爱编程网。