⑴ 怎麼把html頁面中的JS函數，提取封裝到一個JS中，直接在頁面調用JS文件就可以了
需要准備的材料分別有：電腦、html編輯器、瀏覽器。
1、首先，打開html編輯器，新建html文件，例如：index.html，填充問題基礎代碼。
⑵ C#定義的函數在asp.NET 的前端文件中如何調用
樓上兩位說的都不算錯，但是會造成前後台代碼混編的問題，代碼多了以後，維護很困難。
我建議樓主的方法是：用javascript給一個變數賦值，比如flag=1， 然後提交一個post。
在cs文件的page_load中，判斷flag是否為1，如果是1，則調用Method
⑶ 請問: 在編程中, 對函數進行封裝的目的和好處是什麼
一，安全性
二，面向對象
三，代碼的復用
四，程序的簡潔性和可讀性
五，其他
⑷ 零基礎怎麼系統學Web前端
網站開發開發大致分為前端和後端，前端主要負責實現視覺和交互效果，以及與伺服器通信，完成業務邏輯。其核心價值在於對用戶體驗的追求。可以按如下思路學習系統學習：
基礎知識：
1.html + css 這部分建議在 w3school 在線教程 上學習，邊學邊練，每章後還有小測試。 之後可以模仿一些網站做些頁面。
2. javascript 要學的內容實在很多，如果沒有其他編程語言的基礎的話，學起來可能要費些力，還是建議先在 w3school上學習。之後建議馬上看《javascript語言精粹》，js是一門很混亂的語言，這本書能夠幫助你區分哪些是語言的精華，哪些是糟粕，對於語言精華，應該深入學習。糟粕部分能看懂別人寫的代碼就行，自己就不用嘗試了。
對於習慣看視頻學習的同學，以上內容也可以在優就業網站上學習。
進階：
有了以上基礎，就可以進行一般的靜態網頁設計，不過對於復雜的頁面還需要進一步學習。
1.css。截至今日（2015.12.08），天貓、淘寶、支付寶都已停止對ie6,7的支持，未來相信大多數網站都會停止對ie6，7的支持，ie8的市場份額也不像兩年前那麼高了（天貓即將停止對IE8的支持，2016.12.13），webkit內核已成為市場主流。對於css的學習，我推薦分三塊：「基礎概念」，「css2.1規范」，「css3規范」。必看 精通CSS（第2版） (豆瓣)，看完這本書你應該對：盒子模型，流動，block，inline，層疊，樣式優先順序，等概念非常了解了。這本確實有些年頭了，但基礎概念部分講述非常清晰，可以稱之為經典。ie6，7相關的內容可以不看。css3的部分可以參考：CSS3實用指南 (豆瓣)。這本書同樣有些老，只是最新出版的書中沒發現有特別好的。
2. javascript。上面提到內容還不足以讓你勝任js編程。在有了基礎之後，進一步學習內容包括：
a) 框架。推薦 zepto，簡單易用，在w3school簡單學習js後，直接上手 zepto 即可完成一些簡單的項目。zepto 源碼簡單清晰，也適合新手閱讀。補充： 可以使用 codecademy 學習 javascript，zepto，用戶體驗真的很好（感謝 TonyOuyang ）。最近比較熱門的框架是React, VUE, Angular這些, 根據需要稍作了解即可。隨著ie瀏覽器市場份額的下降，以及移動端的發展，標准原生js已經可以在實際項目中使用（目前還需要藉助es5shim、babel等），重點還是ES5, ES6, ES7。
b) javascript 語言範式 。這個名字可能並不恰當，只是我找不到可以描述「面向對象」，「函數式」這個兩個概念的概念。javascript不完全是一個面向對象的語言，它的很多設計理念都有函數編程語言的影子，甚至說如果你不用面向對象，完全可以把它理解成一門函數式編程語言。javascript的很多語言特性，都是因為他具有函數式語言的特點才存在的。這部分推薦先學習面向對象的基本理論，對封裝，繼承，多態等概念要理解，維基網路，網路會是你的幫手，另外推薦《object oriented javascript》，應該有中文版。對與函數式編程可以參考這篇文章：JavaScript 中的函數式編程實踐
c) javascript 語言內部機制。必須弄清如下概念：js中變數的作用域，變數傳遞方式，函數的定義環境與執行環境，閉包，函數的四種調用方式（一般函數，對象的方法，apply，call），以及四種調用方式下，『this'指向的是誰。這部分內容你會在《javascript語言精粹》中詳細了解。
d) dom編程，這個web前端工程師的核心技能之一。必讀《dom編程藝術》，另外《高性能javascript》這本書中關於dom編程的部分講的也很好。
e) ajax編程，這是另一核心技術。ajax建議在網上查些資料，了解這個概念的來龍去脈，網路，維基網路上的內容就足夠了。真正編程是很容易的，如今幾乎所有框架都對ajax有良好的封裝，編程並不復雜。另外，ajax未來幾年會被 Fetch Standard 取代，也需要了解。另外關於xhr2，cors（跨站資源共享），formData文件上傳，也需要了解。
f) es5, es6。現在開發js大部分基於es5的，ie8以下通過es5-shim。但利用一些工具，現在已經可以直接寫es6代碼了，尤其在reactjs，nodejs類型的項目中。對於從es5，es6每個階段js發生了哪些變化都需要系統學習，學習順序建議是 JavaScript基礎 -> es5 -> es6，越靠前的越重要。一些參考鏈接：ECMAScript 5 compatibility tableECMAScript 6入門ES5 « 張鑫旭
3. html5。需要了解html都提供了哪些api，然後項目中用起來。這部分沒有什麼難理解的，關鍵在於能用html5解決業務問題，以及不支持html5的瀏覽器的降級方案。這部分體現了前端的一個思想：面向未來編程，盡早將新技術引入業務中來，而不是過分考慮兼容性問題，進而導致面向過去編程。
再進一階 · 代碼層面：
有了以上知識，對於大多數小型網站，你應該已經可以寫出能夠工作的代碼了。但要想成為更專業的前端，你還需繼續努力。更高的要求大概還有四方面：1易維護，2可測試，3高性能，4低流量（移動端）。
1.易維護。對於頁面你該理解『樣式』，『數據』，『行為』三者分離，對應的當然就是css,html,js。對於js代碼，你最好了解設計模式，重構，MVC等內容。
2. 可測性。就是保證你的代碼能溝通單元測試100%覆蓋到所有分支
3. 高性能。必讀《高性能javascript》
4. 低流量。移動端關注比較多，PC端現在可以不用太關注了
再進一階 · 工程層面：
前端項目同樣面臨軟體生命周期的各個環節，首先是代碼管理，你必須學會使用svn和git。其次是代碼的構建，如今前端代碼構建已經不是簡單的壓縮一下了，需要進行依賴管理、模塊合並、各種編譯，必須要學會使用grunt、gulp、webpack、rollup等前端構建工具，以及前端模塊管理的方式，amd，cmd，es6 mole 等等。
然後呢？以上內容只是簡單說了前端學習的順序。前端工程師應該有的知識結構請參考這里：JacksonTian/fks · GitHub
補充：
對於前段開發，基本內容就這些了，可以根據自己的興趣愛好選擇性學習以下內容。
1. 交互設計。大公司依然有專業人士搞這些，不過不懂交互的前端一定不是好前端。推薦《簡約至上》。
2. 後端。應該說前段工程師必須至少了解一門後端語言，不過如果愛好也可深入學習，入手難度比較低的應該是php了。這部分由可分為基於頁面，基於框架兩種。大型項目都是基於框架開發的，建議至少了解一個MVC框架，比如php的ci, yii, yaf 等，好還框架的設計思想都大同小異。如今NodeJs在大公司已經得到普遍的使用，推薦大家使用在Node上使用Koa框架做一些後端服務的開發。
3. Android和ios開發。時至今日，前端的工作領域已經非常廣泛，native的界面開發本質上也是前端開發，個大公司都面臨著Native環境和web環境頁面同時維護的問題，如果能夠在技術上得到統一，將會有巨大的價值。對於學有餘力的同學，應該了解Native開發的基本流程，至少了解到界面構建的技術。
4. 如果你能夠認真看到這里，說明你對前端有真愛，最後說一個編程習慣的問題，絕對是保你工作平安，少出故障。代碼提交前必須做的三個事情：A. git diff（svn diff）,檢查所有變更；B. 跑一邊單元測試；C. 手動運行一遍所有demo.
⑸ 做前端的應該如何從頭學習 JavaScript
之後
a) 框架。推薦jQuery，簡單易用，我的第一web項目就是在w3school簡單學習後，直接上手jQuery完成的，真的很難簡單，很好用。jQuery適用環境有限，對於那些對性能要求很高的頁面無法勝任。推薦了解一下 YUI 或網路的 tangram ，都很好用，學習方法也很簡單，照著產品文檔做幾個頁面就行了，不用面面俱到，以後遇到問題查文檔就行了。框架可以幫你屏蔽瀏覽器的差異性，讓你能更專注與web開發學習的精髓部分。
b) javascript 語言範式。這個名字可能並不恰當，只是我找不到可以描述「面向對象」，「函數式」這個兩個概念的概念。javascript不完全是一個面向對象的語言，它的很多設計理念都有函數編程語言的影子，甚至說如果你不用面向對象，完全可以把它理解成一門函數式編程語言。javascript的很多語言特性，都是因為他具有函數是語言的特點才存在的。這部分推薦先學習面向對象的基本理論，對封裝，繼承，多態等概念要理解，維基網路，網路會是你的幫手，另外推薦《object oriented javascript》，應該有中文版。對與函數式編程我了解的也不系統，不好多說，可以自己網路一下。
c) javascript 語言內部機制。必須弄清如下概念：js中變數的作用域，變數傳遞方式，函數的定義環境與執行環境，閉包，函數的四種調用方式（一般函數，對象的方法，apply，call），以及四種調用方式下，『this'指向的是誰。這部分內容你會在《javascript語言精粹》中詳細了解。另外，你必須理解json。
d) dom編程，這個web前端工程師的核心技能之一。必讀《dom編程藝術》，另外《高性能javascript》這本書中關於dom編程的部分講的也很好。
e) ajax編程，這是另一核心技術。ajax建議在網上查些資料，了解這個概念的來龍去脈，網路，維基網路上的內容就足夠了。真正編程是很容易的，如今幾乎所有框架都對ajax有良好的封裝，編程並不復雜。
f) 了解瀏覽器差異性。這部分包括css和js兩部分，瀏覽器差異內容很多，建議在實踐中多多積累。
⑹ 如何理解JavaScript中的caller，callee，call，apply 前端設計
在提到上述的概念之前，首先想說說javascript中函數的隱含參數：arguments
Arguments —— 該對象代表正在執行的函數和調用它的函數的參數。
[function.]arguments[n]
參數
function ：選項。當前正在執行的 Function 對象的名字。
n ：選項。要傳遞給 Function 對象的從0開始的參數值索引。
說明
Arguments是進行函數調用時，除了指定的參數外，還另外創建的一個隱藏對象。Arguments是一個類似數組但不是數組的對象，說它類似數組是因為其具有數組一樣的訪問性質及方式，可以由arguments[n]來訪問對應的單個參數的值，並擁有數組長度屬性length。
還有就是arguments對象存儲的是實際傳遞給函數的參數，而不局限於函數聲明所定義的參數列表，而且不能顯式創建 arguments 對象。
arguments 對象只有函數開始時才可用。
下邊例子詳細說明了這些性質:
//arguments 對象的用法。
function ArgTest(a, b){
var i, s = "The ArgTest function expected ";
var numargs = arguments.length; // 獲取被傳遞參數的數值。
var expargs = ArgTest.length; // 獲取期望參數的數值。
if (expargs < 2)
s += expargs + " argument. ";
else
s += expargs + " arguments. ";
if (numargs < 2)
s += numargs + " was passed.";
else
s += numargs + " were passed.";
s += "\n\n"
for (i =0 ; i < numargs; i++){ // 獲取參數內容。
s += " Arg " + i + " = " + arguments[i] + "\n";
}
return(s); // 返回參數列表。
}
在此添加了一個說明arguments不是數組(Array類)的代碼:
Array.prototype.selfvalue = 1;
alert(new Array().selfvalue);
function testAguments(){
alert(arguments.selfvalue);
}
運行代碼你會發現第一個alert顯示1，這表示數組對象擁有selfvalue屬性，值為1，而當你調用函數testAguments時，你會發現顯示的是「undefined」，說明了不是arguments的屬性，即arguments並不是一個數組對象。
現在開始caller，callee，call，apply：
caller：返回一個對函數的引用，該函數調用了當前函數。
functionName.caller functionName 對象是所執行函數的名稱。
說明
對於函數來說，caller屬性只有在函數執行時才有定義。如果函數是由頂層調用的，那麼 caller 包含的就是 null 。
如果在字元串上下文中使用 caller 屬性，那麼結果和functionName.toString 一樣，也就是說，顯示的是函數的反編譯文本。
下面的例子說明了 caller 屬性的用法：
// caller demo {
function callerDemo() {
if (callerDemo.caller) {
var a= callerDemo.caller.toString();
alert(a);
} else {
alert("this is a top function");
}
}
function handleCaller() {
callerDemo();
}
//輸出結果：
function handleCaller() {
callerDemo();
}
callee —— 返回正被執行的 Function 對象，也就是所指定的 Function 對象的正文。
[function.]arguments.callee
可選項 function 參數是當前正在執行的 Function對象的名稱。
說明
callee屬性的初始值就是正被執行的 Function 對象。
callee屬性是 arguments 對象的一個成員，它表示對函數對象本身的引用，這有利於匿名
函數的遞歸或者保證函數的封裝性，例如下邊示例的遞歸計算1到n的自然數之和。而該屬性
僅當相關函數正在執行時才可用。還有需要注意的是callee擁有length屬性，這個屬性有時候
用於驗證還是比較好的。arguments.length是實參長度，arguments.callee.length是
形參長度，由此可以判斷調用時形參長度是否和實參長度一致。
示例
//callee可以列印其本身
function calleeDemo() {
alert(arguments.callee);
}
//用於驗證參數
function calleeLengthDemo(arg1, arg2) {
if (arguments.length==arguments.callee.length) {
window.alert("驗證形參和實參長度正確！");
return;
} else {
alert("實參長度：" +arguments.length);
alert("形參長度： " +arguments.callee.length);
}
}
//遞歸計算
var sum = function(n){
if (n <= 0)
return 1;
else
return n ＋arguments.callee(n - 1)
}
比較一般的遞歸函數：
var sum = function(n){
if (1==n) return 1;
elsereturn n + sum (n-1);
調用時：alert(sum(100));
其中函數內部包含了對sum自身的引用，函數名僅僅是一個變數名，在函數內部調用sum即相當於調用一個全局變數，不能很好的體現出是調用自身，這時使用callee會是一個比較好的方法。
apply and call：它們的作用都是將函數綁定到另外一個對象上去運行，兩者僅在定義參數方式有所區別：
apply(thisArg,argArray);
call(thisArg[,arg1,arg2…] ]);
即所有函數內部的this指針都會被賦值為thisArg，這可實現將函數作為另外一個對象的方法運行的目的
apply的說明：
如果 argArray 不是一個有效的數組或者不是 arguments 對象，那麼將導致一個 TypeError。
如果沒有提供 argArray 和 thisArg任何一個參數，那麼 Global 對象將被用作 thisArg，
並且無法被傳遞任何參數。
call的說明：
call方法可將一個函數的對象上下文從初始的上下文改變為由 thisArg指定的新對象。
如果沒有提供 thisArg參數，那麼 Global 對象被用作 thisArg
相關技巧：
應用call和apply還有一個技巧在裡面，就是用call和apply應用另一個函數（類）以後，當前的函數（類）就具備了另一個函數（類）的方法或者是屬性，這也可以稱之為「繼承」。
看下面示例:
// 繼承的演示
function base() {
this.member = " dnnsun_Member";
this.method = function() {
window.alert(this.member);
}
}
function extend() {
base.call(this);
window.alert(member);
window.alert(this.method);
}
上面的例子可以看出，通過call之後，extend可以繼承到base的方法和屬性。
順便提一下，在javascript框架prototype里就使用apply來創建一個定義類的模式，
其實現代碼如下：
var Class = {
create: function() {
returnfunction() {
this.initialize.apply(this, arguments);
}
}
}
解析：從代碼看,該對象僅包含一個方法：Create，其返回一個函數，即類。但這也同時是類的
構造函數，其中調用initialize，而這個方法是在類創建時定義的初始化函數。通過如此途徑，
就可以實現prototype中的類創建模式
示例：
var vehicle=Class.create();
vehicle.prototype.initialize= function(type)
{
this.type=type;
}
vehicle.prototype.showSelf= function()
{
alert("this vehicle is "+ this.type);
}
var moto=new vehicle("Moto");
moto.showSelf();
你自己看看吧，此文章轉自：http://www.cnblogs.com/ghost-draw-sign/articles/1530108.html
⑺ 如何封裝Node.js和前端通用的模塊
在Node.js中對模塊載入和執行進行了包裝，使得模塊文件中的變數在一個閉包中，不會污染全局變數，和他人沖突。
前端模塊通常是我們開發人員為了避免和他人沖突才把模塊代碼放置在一個閉包中。
如何封裝Node.js和前端通用的模塊，我們可以參考Underscore.js 實現，他就是一個Node.js和前端通用的功能函數模塊，查看代碼：
// Create a safe reference to the Underscore object for use below.
var _ = function(obj) {
if (obj instanceof _) return obj;
if (!(this instanceof _)) return new _(obj);
this._wrapped = obj;
};
// Export the Underscore object for **Node.js**, with
// backwards-compatibility for the old `require()` API. If we're in
// the browser, add `_` as a global object via a string identifier,
// for Closure Compiler "advanced" mode.
if (typeof exports !== 'undefined') {
if (typeof mole !== 'undefined' && mole.exports) {
exports = mole.exports = _;
}
exports._ = _;
} else {
root._ = _;
}
通過判斷exports是否存在來決定將局部變數 _ 賦值給exports，向後兼容舊的require() API，如果在瀏覽器中，通過一個字元串標識符「_」作為一個全局對象；完整的閉包如下：
(function() {
// Baseline setup
// --------------
// Establish the root object, `window` in the browser, or `exports` on the server.
var root = this;
// Create a safe reference to the Underscore object for use below.
var _ = function(obj) {
if (obj instanceof _) return obj;
if (!(this instanceof _)) return new _(obj);
this._wrapped = obj;
};
// Export the Underscore object for **Node.js**, with
// backwards-compatibility for the old `require()` API. If we're in
// the browser, add `_` as a global object via a string identifier,
// for Closure Compiler "advanced" mode.
if (typeof exports !== 'undefined') {
if (typeof mole !== 'undefined' && mole.exports) {
exports = mole.exports = _;
}
exports._ = _;
} else {
root._ = _;
}
}).call(this);
通過function定義構建了一個閉包，call(this)是將function在this對象下調用，以避免內部變數污染到全局作用域。瀏覽器中，this指向的是全局對象（window對象），將「_」變數賦在全局對象上「root._」，以供外部調用。
和Underscore.js 類似的Lo-Dash，也是使用了類似的方案，只是兼容了AMD模塊載入的兼容：
;(function() {
/** Used as a safe reference for `undefined` in pre ES5 environments */
var undefined;
/** Used to determine if values are of the language type Object */
var objectTypes = {
'boolean': false,
'function': true,
'object': true,
'number': false,
'string': false,
'undefined': false
};
/** Used as a reference to the global object */
var root = (objectTypes[typeof window] && window) || this;
/** Detect free variable `exports` */
var freeExports = objectTypes[typeof exports] && exports && !exports.nodeType && exports;
/** Detect free variable `mole` */
var freeMole = objectTypes[typeof mole] && mole && !mole.nodeType && mole;
/** Detect the popular CommonJS extension `mole.exports` */
var moleExports = freeMole && freeMole.exports === freeExports && freeExports;
/*--------------------------------------------------------------------------*/
// expose Lo-Dash
var _ = runInContext();
// some AMD build optimizers, like r.js, check for condition patterns like the following:
if (typeof define == 'function' && typeof define.amd == 'object' && define.amd) {
// Expose Lo-Dash to the global object even when an AMD loader is present in
// case Lo-Dash was injected by a third-party script and not intended to be
// loaded as a mole. The global assignment can be reverted in the Lo-Dash
// mole by its `noConflict()` method.
root._ = _;
// define as an anonymous mole so, through path mapping, it can be
// referenced as the "underscore" mole
define(function() {
return _;
});
}
// check for `exports` after `define` in case a build optimizer adds an `exports` object
else if (freeExports && freeMole) {
// in Node.js or RingoJS
if (moleExports) {
(freeMole.exports = _)._ = _;
}
// in Narwhal or Rhino -require
else {
freeExports._ = _;
}
}
else {
// in a browser or Rhino
root._ = _;
}
}.call(this));
再來看看Moment.js的封裝閉包主要代碼：
(function (undefined) {
var moment；
// check for nodeJS
var hasMole = (typeof mole !== 'undefined' && mole.exports)；
/************************************
Exposing Moment
************************************/
function makeGlobal(deprecate) {
var warned = false, local_moment = moment;
/*global ender:false */
if (typeof ender !== 'undefined') {
return;
}
// here, `this` means `window` in the browser, or `global` on the server
// add `moment` as a global object via a string identifier,
// for Closure Compiler "advanced" mode
if (deprecate) {
this.moment = function () {
if (!warned && console && console.warn) {
warned = true;
console.warn(
"Accessing Moment through the global scope is " +
"deprecated, and will be removed in an upcoming " +
"release.");
}
return local_moment.apply(null, arguments);
};
} else {
this['moment'] = moment;
}
}
// CommonJS mole is defined
if (hasMole) {
mole.exports = moment;
makeGlobal(true);
} else if (typeof define === "function" && define.amd) {
define("moment", function (require, exports, mole) {
if (mole.config().noGlobal !== true) {
// If user provided noGlobal, he is aware of global
makeGlobal(mole.config().noGlobal === undefined);
}
return moment;
});
} else {
makeGlobal();
}
}).call(this);
從上面的幾個例子可以看出，在封裝Node.js和前端通用的模塊時，可以使用以下邏輯：
if (typeof exports !== "undefined") {
exports.** = **;
} else {
this.** = **;
}
即，如果exports對象存在，則將局部變數裝載在exports對象上，如果不存在，則裝載在全局對象上。如果加上ADM規范的兼容性，那麼多加一句判斷：
if (typeof define === "function" && define.amd){}
⑻ asp.net 後台調用前端函數 方法
你這段後台調用前台的代碼沒問題。
推薦你先在前台方法中alert(123)，然後運行後台，看是否成功調用方法。我覺得應該是成功調用了前台方法。
⑼ 如何系統地學習前端
目前入門前端的人群分類
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、另一種是跟著高手，開闊視野，達到知道自己不知道的境界，從而有方向，在短時期內進入到一個新的境界，節約時間成本。
⑽ 如何封裝ajax函數
用ajax的局部刷新來給網站提升用戶體驗我們已經用過很多了，ajax已然成為了前端開發最重要的「工具」之一。
但是，我想應該會有不少人在使用ajax的時候都在依賴於jQuery或者prototype或者其他js庫。但現實是，假設某一天一個項目不能引入任何一個js庫，只能用原生js寫代碼，那你怎麼辦？又或者是一個非常簡單的頁面，但是要用到ajax，難道就為了下這么一個ajax請求要引用一個jq這么大的js庫？我想這是不值得的，所以我們應該學會用原生的js來寫ajax，並且把它封裝好以便於以後使用。
由於之前使用過jq的ajax而且覺得他使用起來挺舒服的，所以我在封裝ajax的時候一方面捨去了很多不常用的參數只留下了最常用的幾個功能，另一方面盡量保持它原有的使用風格。
我一共只留了五個參數，他們分別是發送方式（type）、發請求的url（url）、是否為非同步請求（async）、發送的參數（data）、傳輸成功的回調函數（success），函數代碼如下:
/* 封裝ajax函數
* @param {string}opt.type http連接的方式，包括POST和GET兩種方式，默認使用GET
* @param {string}opt.url 發送請求的url
* @param {boolean}opt.async 是否為非同步請求，true為非同步的，false為同步的
* @param {object}opt.data 發送的參數，格式為對象類型
* @param {function}opt.success ajax發送並接收成功調用的回調函數 */
function ajax(opt) {
opt = opt || {};
var type = opt.type || 'GET';
type = type.toUpperCase() || 'GET';
var url = opt.url || '';
var async = opt.async || true;
var data = opt.data || null;
var success = opt.success || function () {};
var xmlHttp = null;
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
var params = [];
for (var key in data){
params.push(key + '=' + data[key]);
}
var dataStr = params.join('&');
if (type === 'POST') {
xmlHttp.open(type, url, async);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
xmlHttp.send(dataStr);
}
else {
xmlHttp.open(type, url + '?' + dataStr, async);
xmlHttp.send(null);
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
success(xmlHttp.responseText);
}
};
}
以對象的形式做函數的參數還是比較靈活的，不用拘泥於參數個數的問題。但這容易出現一個問題，就是使用參數的時候很有可能參數沒給卻在函數內部使用了，比如在調用函數時忘了寫success回調函數，而定義的時候卻用到了他，這就會報錯了，因為success是undefined了。所以為了避免這種情況我覺得最好在封裝函數的時候盡量給每一個參數一個默認值，如果調用的時候未給出某個參數那麼他就使用默認值代替，這樣就不會出現上述情況了。
接下來下面是創建XMLHttpRequest對象，寫了兩種創建方式是為了兼容IE才有的寫法，舊版本的IE瀏覽器不支持XMLHttpRequest構造函數，IE有他自己獨特的構造函數來支持ajax那就是ActiveXObject構造函數。
創建好了XMLHttpRequest對象，接下來寫的是對發送參數data的轉換，在使用ajax函數的時候data也用json的數據格式會有一種親切感，因為大部分ajax傳輸的時候返回數據都使用json格式，所以發送的時候也使用json格式顯得很友好。這里需要將{a: b, c: d}的格式轉換為a=b&c=d的格式。
然後是對"POST"和"GET"兩種不同的發送方式做處理。GET方法比較簡單，直接把整理好的數據接在open方法的url參數的後面就行了（要記得在url後面加上"?"），send方法也不用帶參數了，因為參數已經在url後面帶著發過去了，所以send方法的參數直接給個null；POST方法這里有個坑，如果不注意可能會很煩惱為什麼會得不到想要的結果，那就是需要設定Content-Type頭信息，模擬HTTP的POST方法發送一個表單，這樣伺服器才會知道如何處理上傳的內容。send方法中參數的提交格式和GET方法中url的寫法一樣，也是a=b&c=d格式。注意open方法必須放在設定頭信息的前面，否則也會報錯。async參數可以是true也可以是false，true代表使用非同步方式調用，false代表使用同步方式調用，理所當然使用ajax是一定用非同步的，這里只是提供一個選擇，而且他的默認值也是true。
最後需要注冊一個onreadystatechange事件，當XMLHttpRequest對象的readyState屬性等於4了（代表收到完整的伺服器響應了），同時status屬性等於200（代表伺服器響應的狀態值為OK，狀態正常）就可以判定這次ajax從發送過程到響應過程全程傳輸成功了，我們可以對返回的數據做一些處理，把要處理的代碼寫在success函數中，ajax成功就會調用之。
// 使用示例
ajax({
method: 'POST',
url: 'test.php',
data: {
name1: 'value1',
name2: 'value2'
},
success: function (response) {
// codes here
}
});
這個ajax函數很簡單代碼量也很少，已經基本滿足我的日常使用需求了，以後使用也不用依賴js庫或者每次寫一遍了。如果以後還有更多其他功能要使用，再往裡面加。