jsandroidjson
‘壹’ android js 交互 能传json对象吗
最近几个项目的测试结果，Android无法主动通过调用
webview.loadUrl("javascript:"+callbackFunction+"('"+data+"')"); 这种方式将jsonobject类型的data传给js，因为js那边得到就是一个string的对象。
与此同时，js主动调用android的对象方式，android也无法返回给js一个jsonobject，需要js做一下转换，例如：
Android 代码：
[java] view plainprint?
WebView mWebView = (WebView) this.findViewById(R.id.webview);
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setPluginsEnabled(true);
settings.setAllowFileAccess(true);
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);//不加上，会显示白边
String url="file:///android_asset/t.html"; //js代码卸载t.html里
NavigationInstance navigation =new NavigationInstance(this);
mWebView.addJavascriptInterface(navigation, "Navigation");
NavigationInstance里的代码：
[java] view plainprint?
@Override
public JSONObject GetManeuverInfo() {
try{
JSONObject test=new JSONObject();
test.put("maomao", "value");
return test;
//return new JSONObject(bean.ManeuverInfo);
}catch(Exception e){
Log.e(TAG, "",e);
}
return null;
}
t.html里的代码：
[javascript] view plainprint?
function testAPI(el){
console.log("---------testAPI---------");
eval("var obj = "+Navigation.GetManeuverInfo());
alert('typeof:'+typeof(obj));
alert('maomao:'+obj.maomao);
alert('obj:'+obj);
}
如果直接写成 Navigation.GetManeuverInfo.maomao是会提示undefined，因为js那边只得到了一个string对象而已，它不知道maomao是个key。
通过eval将其转化成表达式就可以调用obj.maomao得到value。
在此ps一下ios，貌似人家支持webview很好，js可以直接获取到json对象.
‘贰’ jsbridge android 匹配无效 被断开什么原因
native向js的通信协议也需要制定，一个必不可少的元素就是返回值，这个返回值和js的参数做法一样，通过json对象进行传递，该json对象中有状态码code，提示信息msg，以及返回结果result，如果code为非0，则执行过程中发生了错误，错误信息在msg中，返回结果result为null，如果执行成功，返回的json对象在result中。下面是两个例子，一个成功调用，一个调用失败。
Java
{
"code":500,
"msg":"method is not exist",
"result":null
}
Java
{
"code":0,
"msg":"ok",
"result":{
"key1":"returnValue1",
"key2":"returnValue2",
"key3":{
"nestedKey":"nestedValue"
"nestedArray":["value1","value2"]
}
}
}
那么这个结果如何返回呢，native调用js暴露的方法即可，然后将js层传给native层的port一并带上，进行调用即可，调用的方式就是通过WebView.loadUrl方式来完成，如下。
Java
1
mWebView.loadUrl("javascript:JSBridge.onFinish(port,jsonObj);");
关于JsBridge.onFinish方法的实现，后面再叙述。前面所提到了native层的方法必须遵循某种规范，不然就非常不安全了。在native中，我们需要一个JSBridge统一管理这些暴露给js的类和方法，并且能实时添加，这时候就需要这么一个方法
Java
JSBridge.register("jsName",javaClass.class)
这个javaClass就是满足某种规范的类，该类中有满足规范的方法，我们规定这个类需要实现一个空接口，为什么呢?主要作用就混淆的时候不会发生错误，还有一个作用就是约束JSBridge.register方法第二个参数必须是该接口的实现类。那么我们定义这个接口
Java
publicinterfaceIBridge{
}
类规定好了，类中的方法我们还需要规定，为了调用方便，我们规定类中的方法必须是static的，这样直接根据类而不必新建对象进行调用了（还要是public的），然后该方法不具有返回值，因为返回值我们在回调中返回，既然有回调，参数列表就肯定有一个callback，除了callback，当然还有前文提到的js传来的方法调用所需的参数，是一个json对象，在java层中我们定义成JSONObject对象；方法的执行结果需要通过callback传递回去，而java执行js方法需要一个WebView对象，于是，满足某种规范的方法原型就出来了。
Java
publicstaticvoidmethodName(WebViewwebview,JSONObjectjsonObj,Callbackcallback){
}
js层除了上文说到的JSBridge.onFinish(port,jsonObj);方法用于回调，应该还有一个方法提供调用native方法的功能，该函数的原型如下
Java
JSBridge.call(className,methodName,params,callback)
在call方法中再将参数组合成形如下面这个格式的uri
Java
jsbridge://className:callbackAddress/methodName?jsonObj
然后调用window.prompt方法将uri传递过去，这时候java层就会收到这个uri，再进一步解析即可。
万事具备了，只欠如何编码了，别急，下面我们一步一步的来实现，先完成js的两个方法。新建一个文件，命名为JSBridge.js
Java
(function(win){
varhasOwnProperty=Object.prototype.hasOwnProperty;
varJSBridge=win.JSBridge||(win.JSBridge={});
varJSBRIDGE_PROTOCOL='JSBridge';
varInner={
callbacks:{},
call:function(obj,method,params,callback){
console.log(obj+" "+method+" "+params+" "+callback);
varport=Util.getPort();
console.log(port);
this.callbacks[port]=callback;
varuri=Util.getUri(obj,method,params,port);
console.log(uri);
window.prompt(uri,"");
},
onFinish:function(port,jsonObj){
varcallback=this.callbacks[port];
callback&callback(jsonObj);
deletethis.callbacks[port];
},
};
varUtil={
getPort:function(){
returnMath.floor(Math.random()*(130));
},
getUri:function(obj,method,params,port){
params=this.getParam(params);
varuri=JSBRIDGE_PROTOCOL+'://'+obj+':'+port+'/'+method+'?'+params;
returnuri;
},
getParam:function(obj){
if(obj&typeofobj==='object'){
returnJSON.stringify(obj);
}else{
returnobj||'';
}
}
};
for(varkeyinInner){
if(!hasOwnProperty.call(JSBridge,key)){
JSBridge[key]=Inner[key];
}
}
})(window);
java层有一个空接口来进行约束暴露给js的类和方法，同时也便于混淆
Java
publicinterfaceIBridge{
}
首先我们要将js传来的uri获取到，编写一个WebChromeClient子类。
Java
{
@Override
publicbooleanonJsPrompt(WebViewview,Stringurl,Stringmessage,StringdefaultValue,JsPromptResultresult){
result.confirm(JSBridge.callJava(view,message));
returntrue;
}
}
之后不要忘记了将该对象设置给WebView
Java
WebViewmWebView=(WebView)findViewById(R.id.webview);
WebSettingssettings=mWebView.getSettings();
settings.setJavaScriptEnabled(true);
mWebView.setWebChromeClient(newJSBridgeWebChromeClient());
mWebView.loadUrl("file:///android_asset/index.html");
核心的内容来了，就是JSBridgeWebChromeClient中调用的JSBridge类的实现。前文提到该类中有这么一个方法提供注册暴露给js的类和方法
Java
JSBridge.register("jsName",javaClass.class)
该方法的实现其实很简单，从一个Map中查找key是不是存在，不存在则反射拿到对应的Class中的所有方法，将方法是public static void 类型的，并且参数是三个参数，分别是Webview，JSONObject，Callback类型的，如果满足条件，则将所有满足条件的方法put进去，整个实现如下
Java
publicclassJSBridge{
privatestaticMap>exposedMethods=newHashMap();
publicstaticvoidregister(StringexposedName,ClassextendsIBridge>clazz){
if(!exposedMethods.containsKey(exposedName)){
try{
exposedMethods.put(exposedName,getAllMethod(clazz));
}catch(Exceptione){
e.printStackTrace();
}
}
}
(ClassinjectedCls)throwsException{
HashMapmMethodsMap=newHashMap();
Method[]methods=injectedCls.getDeclaredMethods();
for(Methodmethod:methods){
Stringname;
if(method.getModifiers()!=(Modifier.PUBLIC|Modifier.STATIC)||(name=method.getName())==null){
continue;
}
Class[]parameters=method.getParameterTypes();
if(null!=parameters¶meters.length==3){
if(parameters[0]==WebView.class&¶meters[1]==JSONObject.class&¶meters[2]==JSCallback.class){
mMethodsMap.put(name,method);
}
}
}
returnmMethodsMap;
}
}
publicstaticStringcallJava(WebViewwebView,StringuriString){
StringmethodName="";
StringclassName="";
Stringparam="{}";
Stringport="";
if(!TextUtils.isEmpty(uriString)&uriString.startsWith("JSBridge")){
Uriuri=Uri.parse(uriString);
className=uri.getHost();
param=uri.getQuery();
port=uri.getPort()+"";
Stringpath=uri.getPath();
if(!TextUtils.isEmpty(path)){
methodName=path.replace("/","");
}
}
if(exposedMethods.containsKey(className)){
HashMapString,Method>methodHashMap=exposedMethods.get(className);
if(methodHashMap!=null&methodHashMap.size()!=0&&methodHashMap.containsKey(methodName)){
Methodmethod=methodHashMap.get(methodName);
if(method!=null){
try{
method.invoke(null,webView,newJSONObject(param),newCallback(webView,port));
}catch(Exceptione){
e.printStackTrace();
}
}
}
}
returnnull;
}
publicclassCallback{
privatestaticHandlermHandler=newHandler(Looper.getMainLooper());
_JS_FORMAT="javascript:JSBridge.onFinish('%s', %s);";
privateStringmPort;
;
publicCallback(WebViewview,Stringport){
mWebViewRef=newWeakReference(view);
mPort=port;
}
publicvoidapply(JSONObjectjsonObject){
finalStringexecJs=String.format(CALLBACK_JS_FORMAT,mPort,String.valueOf(jsonObject));
if(mWebViewRef!=null&mWebViewRef.get()!=null){
mHandler.post(newRunnable(){
@Override
publicvoidrun(){
mWebViewRef.get().loadUrl(execJs);
}
});
}
}
}
{
publicstaticvoidshowToast(WebViewwebView,JSONObjectparam,finalCallbackcallback){
Stringmessage=param.optString("msg");
Toast.makeText(webView.getContext(),message,Toast.LENGTH_SHORT).show();
if(null!=callback){
try{
JSONObjectobject=newJSONObject();
object.put("key","value");
object.put("key1","value1");
callback.apply(getJSONObject(0,"ok",object));
}catch(Exceptione){
e.printStackTrace();
}
}
}
(intcode,Stringmsg,JSONObjectresult){
JSONObjectobject=newJSONObject();
try{
object.put("code",code);
object.put("msg",msg);
object.putOpt("result",result);
returnobject;
}catch(JSONExceptione){
e.printStackTrace();
}
returnnull;
}
}
你可以往该类中扔你需要的方法，但是必须是public static void且参数列表满足条件，这样才能找到该方法。
不要忘记将该类注册进去
Java
JSBridge.register("bridge",BridgeImpl.class);
进行一下简单的测试，将之前实现好的JSBridge.js文件扔到assets目录下，然后新建index.html，输入
html>
head>
metacharset="utf-8">
title>JSBridgetitle>
metaname="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1, user-scalable=no"/>
scriptsrc="file:///android_asset/JSBridge.js"type="text/javascript">script>
scripttype="text/javascript">
script>
style>
style>
head>
body>
div>
h3>JSBridge测试h3>
div>
ulclass="list">
li>
div>
buttononclick="JSBridge.call('bridge','showToast',{'msg':'Hello JSBridge'},function(res){alert(JSON.stringify(res))})">
测试showToast
button>
div>
li>
br/>
ul>
body>
html>
‘叁’ 如何用java编写android后台程序
使用J2EE技术或者叫Java Web技术开发一个Web服务器，服务器返回Json数据，android客户端解析json数据，使用http协议和服务器通信，android有相应模块和API。
首先楼主得懂Java后台也就是Java EE，用Servlet搭建Web服务，Serlvet映射一个URL，Android请求这个URL，Servlet处理请求，然后就是Java编程，Web分层、JDBC等技术。服务器返回标准的JSON轻量数据（就是纯文本），Android来解析。
具体技术：
（1）Java Servlet作为Web服务的处理入口；
（2）Java编程编写业务处理程序；
（3）JDBC访问数据库；
（4）Android端的HTTP模块，API；
（5）Android端解析JSON数据；
（6）Servlet或者Java端生成JSON数据；
等楼主技术强了，就可以接触各种框架、EJB技术了。Spring、Spring MVC、Struts、Hibernate，甚至NOSQL、分布式、负载、node.js、模板技术等等。
‘肆’ 在Android上怎样实现JAVA和JS交互
在Android的开发过程中、遇到一个新需求、那就是让Java代码和Javascript代码进行交互、在IOS中实现起来很麻烦、而在Android中相对来说容易、Android对这种交互进行很好的封装、其实可以很简单的用Java代码调用WebView中的js函数、也可以用WebView中的js来调用Android应用中的Java代码
一、网页的JS代码调用ANDROID中JAVA代码的方法
在网页中调用java代码、需要在webview控件中添加javascriptInterface
contentWebView = (WebView) findViewById(R.id.webview);
//启用javascript
contentWebView.getSettings().setJavaScriptEnabled(true);
contentWebView.addJavascriptInterface(this, "js对象名");
在Activity中定义一个要被js调用的方法、src为js传递过来的参数、如果没有不传也可以的。
public void jsFunction(final String str) {
Toast.makeText(this, str, Toast.LENGTH_SHORT).show();
runOnUiThread(new Runnable() {
@Override
public void run() {
//在里对Android应用的UI进行处理
}
});
}
在网页中、只需要像调用js方法一样、进行调用就可以
<a onClick="window.js对象名.jsFunction(´hello world´)" >
点击调用java代码并传递参数
</a>
二、ANDROID中JAVA代码调用网页的JS代码的方法
Java代码调用js并传参其实是通过WebView的loadUrl方法去调用的、只是参数url的写法不一样
// 无参数调用
contentWebView.loadUrl("javascript:javacalljs()");
// 传递参数调用
contentWebView.loadUrl("javascript:javacalljswithargs("
+ "´hello world´" + ")");
三、JAVA和JS交互注意事项
1、Java 调用 js 里面的函数、效率并不是很高、估计要200ms左右吧、做交互性很强的事情、这种速度很难让人接受、而js去调Java的方法、速度很快、50ms左右、所以尽量用js调用Java方法
2、Java 调用 js 的函数、没有返回值、调用就控制不到
3、Js 调用 Java 的方法、返回值如果是字符串、你会发现这个字符串是 native 的、转成 locale 的才能正常使用、使用 toLocaleString() 函数就可以、不过这个函数的速度并不快、转化的字符串如果很多、将会很耗费时间
4、网页中尽量不要使用jQuery、执行起来需要5-6秒、最好使用原生的js写业务脚本、以提升加载速度、改善用户体验
‘伍’ webview判断 js是否有 交互对象
android与js交互有两种方式，第一种是通过系统提供的@JavascriptInterface注解实现，第二种就是js注入。下面来详细讲解一下二者的使用方式，原理，区别。
一、@JavascriptInterface实现
实现步骤：
a.设置WebView支持js脚本
b.为提供给js调用的方法加上@JavascriptInterface注解c.给WebView添加js接口
[java] view plain
webView.getSettings().setJavaScriptEnabled(true);webView.addJavascriptInterface(new JSMethod(mContext), "lh");public class JSMethod {
private Context mContext;
public JSMethod(Context mContext) {
this.mContext = mContext;
}
@JavascriptInterface
public void toast(String msg) {
Toast.makeText(mContext, msg == null ? "" : msg, Toast.LENGTH_SHORT).show();}
}
js端调用android方法：
[javascript] view plain
lh.toast("Hello,China!");
android端执行js方法:
[java] view plain
webView.loadUrl("javascript:console(" + "'Hello,China!'" + ")"");二、js注入实现
先来说说原理吧，当js调用prompt()方法时，WebChromeClient.onJsPrompt()方法会被触发，当js触发Android提供的接口方法时，将该方法的方法名称、参数类型、参数值转成json，然后通过prompt方法传递给android端，android端解析json并通过反射执行对应的方法，同时也支持执行匿名回调。
整个流程比较复杂，看图：
为WebView绑定WebChormeClient监听，在Html加载进度25%时进行js注入(注入的js是根据android提供给js的对象类名动态生成);动态注入的js代码如下:
[javascript] view plain
javascript: (function(b) {
console.log("HostApp initialization begin");var a = {
queue: [],
callback: function() {
var d = Array.prototype.slice.call(arguments, 0);//获取该函数参数并转换为Array数组var c = d.shift();//取得数组第一个元素
var e = d.shift();
this.queue[c].apply(this, d);//新建一个对象 属性名称为取得的c，并将d数组作为他的值。然后将这个对象push到queue数组if(!e) {//e为空的时候，将queue数组属性名称为c的对象删除delete this.queue[c]
}
}
};
//各种赋值，最后都等于同一个函数
a.alert = a.alert = a.alert = a.delayJsCallBack = a.getIMSI = a.getOsSdk = a.goBack = a.overloadMethod = a.overloadMethod = a.passJson2Java = a.passLongType = a.retBackPassJson = a.retJavaObject = a.testLossTime = a.toast = a.toast = function() {var f = Array.prototype.slice.call(arguments, 0);if(f.length < 1) {
throw "HostApp call error, message:miss method name"}
var e = [];
//此段判断，然后赋值
for(var h = 1; h < f.length; h++) {
var c = f[h];
var j = typeof c;
e[e.length] = j;
if(j == "function") {
var d = a.queue.length;
a.queue[d] = c;
f[h] = d
}
}
//将匿名对象{method: f.shift(),types: e,args: f}转换成json字符串并用浏览器弹出确认可输入框，然后取得输入框的值json序列化为js对象var g = JSON.parse(prompt(JSON.stringify({method: f.shift(),
types: e,
args: f
})));
if(g.code != 200) {
throw "HostApp call error, code:" + g.code + ", message:" + g.result}
return g.result
};
//获取a的属性值，然后循环
Object.getOwnPropertyNames(a).forEach(function(d) {var c = a[d];
//判断赋值
if(typeof c === "function" && d !== "callback") {a[d] = function() {
//concat 连接两个数组
return c.apply(a, [d].concat(Array.prototype.slice.call(arguments, 0)))}
}
});
b.HostApp = a;
console.log("HostApp initialization end")})(window);//闭包函数默认执行，然后赋给window。这样window.b就可以执行了 b.HostApp就是执行a的内容，但是a具体处理逻辑不对外开放，避免外部污染a内部逻辑代码不难，可以自行理解，其中回调函数被封装在了a对象里面，确保android端可以通过webview.loadUrl()执行回调。
android端回调js代码如下：
[javascript] view plain
javascript:HostApp.callback(0, 0 ,"call back haha");android提供的每一个js方法都对应一个JsCallback对象，android就可以通过JsCallback对象来生成并执行回调js的代码。
三、优缺点
a.第一种方式不安全，不添加addJavascriptInterface,甚至默认false,在低于API17的WebView上默认添加"SearchBoxJavaBridge_"到mJavaScriptObjects中。这样就有可能通过用户信任的客户端获取SD卡的数据；b.第一种方式必须要API大于等于17才能使用
c.第一种方式当有js回调函数需要android端执行时，都需要将匿名回调函数赋值给全局函数才能供android端回调，增加了js和android端通信的封装层的低效代码量；而第二种方式则是通过动态注入js的方式则非常方便。
d.第二种方式也有一定限制，比如android提供的方法必须是static修饰的，且方法第一个参数必须为WebView,不过这不影响使用。
‘陆’ 在windows系统中，常见的文件类型主要由哪几种
常见的文件类型
1、文档文件
txt（所有文字处理软件或编辑器都可打开）、doc（word及wps等软件可打开）、hlp（adobe acrobat reader可打开）、wps（wps软件可打开）、rtf（word及wps等软件可打开）、html（各种浏览器可打开、用写字板打开可查看其源代码）、pdf（adobe acrobat reader 和各种电子阅读软件可打开）
2、压缩文件
rar（winrar可打开）、zip（winzip可打开）、arj（用arj解压缩后可打开）、gz（unix系统的压缩文件，用winzip可打开）、z（unix系统的压缩文件，用winzip可打开）
3、图形文件
bmp、gif、jpg、pic、png、tif（这些文件类型用常用图像处理软件可打开）
4、声音文件
wav（媒体播放器可打开）、aif（常用声音处理软件可打开）、au（常用声音处理软件可打开）、mp3（由winamp播放）、ram（由realplayer播放）、wma、mmf、amr、aac、flac
5、动画文件
avi（常用动画处理软件可播放）、mpg（由vmpeg播放）、mov（由activemovie播放）、swf（用flash自带的players程序可播放）
6、系统文件
int、sys、dll、adt
7、可执行文件
exe、com
8、语言文件
c、asm、for、lib、lst、msg、obj、pas、wki、bas
9、映像文件
map （其每一行都定义了一个图像区域以及当该区域被触发后应返回的url信息）
10、备份文件
bak（被自动或是通过命令创建的辅助文件，它包含某个文件的最近一个版本）
11、临时文件
tmp (word、excel等软件在操作时会产生此类文件）
12、模板文件
dot（通过word模板可以简化一些常用格式文档的创建工作）
13、批处理文件
bat、cmd（在ms-dos中，bat与cmd文件是可执行文件，由一系列命令构成，其中可以包含对其他程序的调用）
(6)jsandroidjson扩展阅读
用扩展名识别文件格式的方式最先在数字设备公司的CP/M操作系统被采用。而后又被DOS和Windows操作系统采用。扩展名是指文件名中，最后一个点（.）号后的字母序列。
例如，HTML文件通过.htm或.html扩展名识别；GIF图形文件用.gif扩展名识别。在早期的FAT文件系统中，扩展名限制只能是三个字符，因此尽管绝大多数的操作系统已不再有此限制，许多文件格式至今仍然采用三个字符作扩展名。
因为没有一个正式的扩展名命名标准，所以，有些文件格式可能会采用相同的扩展名，出现这样的情况就会使操作系统错误地识别文件格式，同时也给用户造成困惑。
扩展名方式的一个特点是，更改文件扩展名会导致系统误判文件格式。例如，将文件名.html简单改名为文件名.txt会使系统误将HTML文件识别为纯文本格式。
尽管一些熟练的用户可以利用这个特点，但普通用户很容易在改名时发生错误，而使得文件变得无法使用。因此，现代的有些操作系统管理程序，例如Windows Explorer加入了限制向用户显示文件扩展名的功能。
‘柒’ ajax请求 andriod正常，ios上
可能是因为请求的url问题。
如果在https的域名请求http的资源，ios会拦截请求，不能发送成功。
‘捌’ 如何系统地学习前端
目前入门前端的人群分类
1、计算机相关专业出身系统走过计算机的理论基础，比如计算机组成原理、操作系统原理、计算机网络、算法数据结构、设计模式，至少用过两门以上编程语言（强类型+弱类型）。
优点：理论、架构方面扎实，有整体计算机思维，内功不错，外功学起来比较快。
缺点：部分人，前端相关细节技术不扎实，不过花时间能很快搞定。
2、非计算机出身自学（也包括计算机专业没好好学的）理论基础薄弱，后来因个人兴趣或者职业需求，自学前端开发技能。
优点：自学能力比较强，能够根据自己的兴趣规划学习内容。
缺点：部分人对前端没有整体的学习框架 ，属于东一片，西一片，不成体系，部分人计算机没有整体思维，建议系统梳理下前端知识体系结构，该补的还是要补起来。
门前端时的一些困境
1、因一些基础算法、数据结构理论不扎实导致一些编程思维难于理解。比如 原型链，如果清楚 数据结构中链表结构，那么这个东西不难理解，再比如 哈希值，懂得数据结构中哈希表，哈希值也就迎刃而解。
2、计算机体系结构、操作系统理论、网络理论不扎实导致到后期一些东西难于理解。比如有同学从前端学习入手，后来学习node开发 ，在 I/O ,进程、线程、IPC 、线程锁方面有些概念就比较难于理解，而导致不能很好得使用node 的api 。
3、前端整体体系架构没有做过深入思考。
导致用会用，但不知道为什么用，用另外一个有什么区别。
4、学习环境中无高手。
没有高手能够指导自己进入下一个层次。
5、有意识但是没有行动我的网盘收集了一堆资料或者一堆视频，然后就没有然后了 。
如何系统学习前端
网站开发开发大致分为前端和后端，前端主要负责实现视觉和交互效果，以及与服务器通信，完成业务逻辑。其核心价值在于对用户体验的追求。如果你现在是零基础学员，大致可以按如下思路学习系统学习：
基础部分
1、HTML + CSS 这部分学习，可以模仿一些网站做些页面。在实践中积累了一些经验后，可以系统的读一两本书，推荐《Head First HTML 与 CSS 中文版》，这本书讲的太细了，我没能拿出耐心细读。你可以根据情况斟酌。
2、Java 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，建议马上看《Java语言精粹》，JS是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。
进阶部分
有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。
1、CSS。必看《精通CSS》，看完这本书你应该对：盒子模型，流动，Block，inline，层叠，样式优先级，等概念非常了解了。作为练习可以看下《CSS艺门之匠》这本书，它对标题，背景，圆角，导航条，table，表单等主题都有详细的介绍。
2、Java。上面提到内容还不足以让你胜任JS编程。在有了基础之后，进一步学习内容包括：
a） 框架。
推荐jQuery，简单易用，学习方法也很简单，照着产品文档做几个页面就行了，不用面面俱到，以后遇到问题查文档就行了。框架可以帮你屏蔽浏览器的差异性，让你能更专注与Web开发学习的精髓部分。补充：可以使用 Codecademy 学习 Java，jQuery，用户体验真的很好（感谢 TonyOuyang ）。
b） Java 语言范式 。这个名字可能并不恰当，只是我找不到可以描述“面向对象”，“函数式”这个两个概念的概念。Java不完全是一个面向对象的语言，它的很多设计理念都有函数编程语言的影子，甚至说如果你不用面向对象，完全可以把它理解成一门函数式编程语言。
Java的很多语言特性，都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要理解，维基网络，网络会是你的帮手，另外推荐《Object Oriented Java》，应该有中文版。对与函数式编程我了解的也不系统，不好多说，可以自己网络一下。
c） Java 语言内部机制。必须弄清如下概念：JS 中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式下，‘this’指向的是谁。这部分内容你会在《Java语言精粹》中详细了解。另外，你必须理解 json。
d） dom编程，这个Web前端工程师的核心技能之一。必读《Dom编程艺术》，另外《高性能 Java》这本书中关于dom编程的部分讲的也很好。
e） Ajax编程，这是另一核心技术。Ajax建议在网上查些资料，了解这个概念的来龙去脉，网络，维基网络上的内容就足够了。真正编程是很容易的，如今几乎所有框架都对Ajax有良好的封装，编程并不复杂。
f） 了解浏览器差异性。这部分包括CSS和js两部分，浏览器差异内容很多，建议在实践中多多积累。另外对于浏览器的渲染模式，DOCTYPE等内容应该系统学习。
3、HTML5和CSS3 。HTML5规范已经于2014年10月28日发布了，移动端HTML5和CSS3已经得到了非常广泛的使用，必知必会呀。
升级部分
有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：1）易维护，2）可测试，3）高性能，4）低流量（移动端）。
易维护。对于页面你该理解‘样式’，‘数据’，‘行为’三者分离，对应的当然就是CSS,HTML,js。对于js代码，你最好了解设计模式，重构，MVC等内容。
可测性。
高性能。必读《高性能Java》
低流量。移动端关注比较多。
额外补充部分
前端项目同样面临软件生命周期的各个环节，首先是代码管理，你必须学会使用Svn和Git。其次是代码的构建，如今前端代码构建已经不是简单的压缩一下了，需要进行依赖管理、模块合并、各种编译，比需要学会使用Grunt、Gulp等前端构建工具。
以上内容只是简单说了前端学习的顺序。对于前端开发，基本内容就这些了，可以根据自己的兴趣爱好选择性学习以下内容。
1、交互设计。大公司依然有专业人士搞这些，不过不懂交互的前端一定不是好前端。推荐《简约至上》。
2、后端。
应该说前端工程师必须至少了解一门后端语言，不过如果爱好也可深入学习，入手难度比较低的应该是PHP了。这部分由可分为基于页面，基于框架两种。大型项目都是基于框架开发的，建议至少了解一个MVC框架，比如PHP的Ci、Yii、Yaf 等，好还框架的设计思想都大同小异。如今NodeJs在大公司已经得到普遍的使用，推荐大家使用在Node上使用Express框架做一些后端服务的开发。
3、Android和IOS开发。
时至今日，前端的工作领域已经非常广泛，native的界面开发本质上也是前端开发，个大公司都面临着Native环境和web环境页面同时维护的问题，如果能够在技术上得到统一，将会有巨大的价值。
如何才能快速入门前端
1、学习东西，自学是一种途径，然而在自学的过程中，很多人处于不知道自己不知道的状态。
2、另一种是跟着高手，开阔视野，达到知道自己不知道的境界，从而有方向，在短时期内进入到一个新的境界，节约时间成本。