1. 零基礎開始學 Web 前端開發，有什麼建議嗎
一 · 前端零基礎入門
從前端基礎入門知識學起，掌握基本的HTML+CSS網頁布局，以及簡單的JS特效，最終可以獨立開發出前端PC網頁。
二 · 響應式開發與常用框架
使用H5+CSS3實現網頁動態特效，通過Bootstrap框架學習，從原生編碼過渡到框架使用，更高效的開發出適配各個設備的響應式網頁。
三 · 組件化思想開發電商網頁
學會H5進階內容：svg、canvas、H5存儲、拖拽上傳等，對JS、jQuery進行提升，學習企業開發模式——組件化開發,在企業項目團隊中協同合作，實現「高內聚、低耦合」的網頁搭建。
四 · 熱門框架Vue開發WebApp
學習JS的最新版本ES6，前端流行框架Vue.js， 結合最流行的打包工具Webpack，掌握一個項目上線前的所有開發流程，真正成為一個能夠滿足企業需求的前端工程師。
2. 如何使用騰訊雲函數搭載一個純HTML+CSS+JS的靜態網頁
用對象存儲加CDN就行了，你用函數計算不容易處理這種有額外CSS和js文件的
3. 用javascript編寫一個漂亮的函數計算器。 用HTML構造函數計算器界面，用eval函數實現計算功能。
<script language=javascript>
var yi=function(){bian.value+=yiyi.value}
var er=function(){bian.value+=erer.value}
var san=function(){bian.value+=sansan.value}
var si=function(){bian.value+=sisi.value}
var wu=function(){bian.value+=wuwu.value}
var liu=function(){bian.value+=liuliu.value}
var qi=function(){bian.value+=qiqi.value}
var ba=function(){bian.value+=baba.value}
var jiu=function(){bian.value+=jiujiu.value}
var ling=function(){bian.value+=lingling.value}
var jia=function(){bian.value+=jiajia.value}
var jian=function(){bian.value+=jianjian.value}
var cheng=function(){bian.value+=chengcheng.value}
var chu=function(){bian.value+=chuchu.value}
var qing=function(){bian.value=' '}
var deng=function(){var a=bian.value;var e=eval(a);bian.value=e}
</script>
<table border=2 background=1.jpg cellpadding=1 cellspacing=5>
<tr><td colspan=4> <input type=text size=14 id=bian>
<tr><td><input type=button value='1' id=yiyi onclick=yi()><td><input type=button
value='2' id=erer onclick=er()><td><input type=button value='3' id=sansan
onclick=san()><td><input type=button value='+' id=jiajia onclick=jia()>
<tr><td><input type=button value='4' id=sisi onclick=si()><td><input type=button
value='5' id=wuwu onclick=wu()><td><input type=button value='6' id=liuliu
onclick=liu()><td><input type=button value='-' id=jianjian onclick=jian()>
<tr><td><input type=button value='7' id=qiqi onclick=qi()><td><input type=button
value='8' id=baba onclick=ba()><td><input type=button value='9' id=jiujiu
onclick=jiu()><td><input type=button value='*' id=chengcheng onclick=cheng()>
<tr><td><input type=button value='c' id=qingqing onclick=qing()><td><input
type=button value='0' id=lingling onclick=ling()><td><input type=button value='='
id=dengdeng onclick=deng()><td><input type=button value='/' id=chuchu
onclick=chu()>
</table>
4. 如何用JS創建一個簡單的網頁計算器
<!doctypehtml>
<html>
<head>
<title>計算器</title>
<metacharset="utf-8"/>
<styletype="text/css">
.panel{
border:4pxsolid#ddd;
width:192px;
margin:100pxauto;
}
.panelp,.panelinput{
font-family:"微軟雅黑";
font-size:20px;
margin:4px;
float:left;
}
.panelp{
width:122px;
height:26px;
border:1pxsolid#ddd;
padding:6px;
overflow:hidden;
}
.panelinput{
width:40px;
height:40px;
border:1pxsolid#ddd;
}
</style>
<scripttype="text/javascript">
//參數e用來接收傳入的event對象
functioncal(e){
//1.獲取事件源，處理button的事件
varobj=e.srcElement||e.target;
if(obj.nodeName!="INPUT"){
return;
}
varvalue=obj.value;
varp=document.getElementById("screen");
if(value=="C"){
//2.如果是[C]，則清空p
p.innerText="";
}elseif(value=="="){
//3.如果是[=]，則運算
varexp=p.innerText;
try{
varresult=eval("("+exp+")");
//如果正確執行，將結果寫入p
p.innerText=result;
}catch(e){
//發生錯誤，給予錯誤提示
p.innerText="Error.";
}
}else{
//4.如果是其它按鈕，則將value追加到p中
p.innerText+=value;
}
}
</script>
</head>
<body>
<!--在最外層的div上注冊單擊事件，傳入event對象，然後在函數中通過event判斷出事件來源於哪一個button，
進而做出應有的處理。這樣的好處是，避免在button上大量的注冊事件。-->
<divclass="panel"onClick="cal(event);">
<div>
<pid="screen"></p>
<inputtype="button"value="C">
<divstyle="clear:both"></div>
</div>
<div>
<inputtype="button"value="7">
<inputtype="button"value="8">
<inputtype="button"value="9">
<inputtype="button"value="/">
<inputtype="button"value="4">
<inputtype="button"value="5">
<inputtype="button"value="6">
<inputtype="button"value="*">
<inputtype="button"value="1">
<inputtype="button"value="2">
<inputtype="button"value="3">
<inputtype="button"value="-">
<inputtype="button"value="0">
<inputtype="button"value=".">
<inputtype="button"value="=">
<inputtype="button"value="+">
<divstyle="clear:both"></div>
</div>
</body>
</html>
這是我自學時候寫的計算器
5. 如何設計大型網站的前端 JavaScript 框架
相對大型的項目在前端 JS 方面有幾個需要達成的目標：
代碼邏輯分層
便於多人協作開發
各部分代碼模塊化，可以按需載入
保持全局變數的清潔
可進行單元測試
用 GoogleClosure 時對應如下:
1. 代碼由底層類庫（GoogleClosure）提供，項目代碼分為幾部分：
常量定義
Helper 方法
項目相關的 UI 組件，如 InPlaceEditor, VoteBar 等
按功能模塊劃分的 Mole，如 LoginPanel, AnswerList 等
程序入口 main 函數及各大模塊(以頁面或一組頁面劃分)入口，如 ProfilePage, HomePage
單元測試：針對UI模塊的測試和界面元素呈現測試，可批量執行
2 . 開發人員負責各自模塊的開發及測試編寫，界面和功能測試（如果涉及非同步請求，使用 Mock 對象）全部通過之後與後台聯調。
3. 使用 ClosureBuilder 跟據各模塊的依賴關系生成 dependency 文件，並分別進行 build（壓縮、混淆），每頁面根據所屬模塊引入一至二個 JS 文件
4. 使用 goog.provide() 方法劃定命名空間。
5. 使用 GoogleClosure 自帶的單元測試工具編寫測試用例並調試。
6. 如何給後端程序設計前端頁面
後端伺服器一般是指servlet容器，用於執行java源程序
常見的網頁有html，htm,shtml，asp，aspx，php，jsp等格式
前兩個常用於靜態網頁，後面幾個常用於動態網頁。
這里前端網頁以比較常見的 xx.html 和 xx.jsp 網頁作為介紹，其它類似
一、靜態頁面xx.html如何跟後台交互：
先來看一個最簡單的登陸界面源代碼
user: password: <input type="submit" value="Submit"/>
</form>12
這是一個表單，我們看到裡面都是純html內容，這是一個靜態頁面，當我們點擊submit按鈕時候，瀏覽器會提交表單內的數據到伺服器的loginServlet這個相對地址，我們看看瀏覽器的地址變成啥了：
這不就是我們的後台servlet的地址嘛，然後這個地址指向的是loginServlet這個servlet，然後在web.xml文件中找到這個servlet關聯的java類，從而執行了伺服器端的程序（第一次執行，那麼會實例化，然後執行裡面init()函數，然後執行service（）函數，如果是第二次調用，那麼不用實例化了，直接執行service（）函數），我們來看看伺服器端的源程序：
package com.atguigu.javaweb;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.Servlet;
import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
public class loginServlet extends MyGeneriServlet {
public void init(javax.servlet.ServletConfig config) throws ServletException{
super.init(config);
}
public void service(ServletRequest request, ServletResponse response)
throws ServletException, IOException {
//獲取請求方式是GET,POST方式？
HttpServletRequest httpServletRequest=(HttpServletRequest) request;
String method=httpServletRequest.getMethod();
System.out.println(method);
//1.獲取請求參數：username，password
String username=request.getParameter(「username」);
String password=request.getParameter(「password」);
//獲取請求參數
String initUser=getServletContext().getInitParameter(「user」);
String initpassword=getServletContext().getInitParameter(「password」);
PrintWriter out=response.getWriter();
//3.對比
if(initUser.equals(username)&&initpassword.equals(password)){
out.print("Hello"+username); // 生成html內容
}else{
out.print("Sorry"+username); // 生成html內容
}
}12345678
}
上面沒有判斷此時對servlet的請求是post還是get方法，不過沒關系，request這個傳進來的參數以及包含了這些信息，自己判斷一下執行相應的操作即可
由於頁面路徑已經跳轉到servlet了，但是servlet不是一個.html文件啊，那豈不是沒有內容供瀏覽器顯示了，不是的，我們看到返回的參數response中的對象PrintWriter out用於動態生成html內容的字元串"Hello"，所以這時候相當於servlet這個路徑也有了html內容了，瀏覽器的頁面就會顯示上述字元串了
二、jsp頁面如何跟後端伺服器交互：
jsp網頁文件就是html內容裡面插入java代碼，當我們訪問.jsp網頁文件時候，伺服器提前已經知道這個頁面內含有java代碼，那麼伺服器這邊就得先執行一下這些代碼（就跟執行servlet的java源代碼一樣），同時把執行的結果嵌入在當前這個.jsp頁面內，我們看看源代碼：
<%@page import=「java.util.Date」%> // 如果這個.jsp頁面中用到了一些java函數，就得導入庫，這就跟java源文件一樣的
<% out.println("Hello World！"); // 這里實際上是伺服器執行了結果，然後以文本返回給瀏覽器進行顯示 %>
上面紅色代碼就是java代碼，剛剛說過對象PrintWriter out用於動態生成html內容的字元串，所以伺服器執行完嵌入在裡面的java代碼後，就是動態生成了一串html代碼，然後一起傳給客戶端瀏覽器進行顯示
當然這種情況.jsp裡面沒有按鈕，表單這樣的控制項，現在再來看看有表單這種.jsp如何跟後端交互：
view.jsp
<%@page import=「day03_student.Student」%> // 還是得帶入java用到的庫文件
學生個人基本信息
<% Student s=(Student)request.getAttribute("students"); // %>
編號 學號 姓名 性別 年齡
<%=s.getId()%> <%=s.getStuno()%> <%=s.getName()%> <%=s.getGender()%> <%=s.getAge() %>
參考的原文：https://blog.csdn.net/myclass1312/article/details/80571867
這時候如果我們直接訪問這兒view.jsp文件，應該是沒有數據的，因為對象s無法從request對象獲取，必須得先給這個request對象賦值才行，即應該從如下servlet路徑跳轉來view.jsp文件路徑才行
public class viewservlet extends HttpServlet {
private StudentDao =new StudentDao();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String idstr = request.getParameter("id");
int id = Integer.parseInt(idstr);
//將數據放入request中，傳遞到頁面
Student student=.queryById(id);
request.setAttribute("students", student);
request.getRequestDispatcher("view.jsp").forward(request, response); // 這里是從當前頁面跳轉去哪個頁面，同時傳遞了request, response這兩個參數，這時候的request就是有內容的，接下來的view.jsp頁面就能獲取到內容而且動態生成html內容
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}123456789101112131415
}
總結：每個xx.html文件,xx.jsp文件，servlet響應程序…都是需要在客戶端瀏覽器通過URL來訪問的。
xx.jsp文件，servlet響應程序因為含有java源代碼，需要伺服器電腦先執行一下，.jsp文件中的java代碼一般會動態生成一些html內容嵌入在當前.jsp文件裡面一起給瀏覽器顯示出來；而servlet中的java代碼一般是數據處理功能的，可能會通過request.getRequestDispatcher(「view.jsp」).forward(request, response);
這樣的方式跳轉到其它有html內容的頁面的URL（同時傳遞處理好的數據過去） 來顯示結果
7. 零基礎怎麼學web前端
零基礎學習web前端，主要有自學和報班學習兩種方式。
web前端作為互聯網相關的重要崗位，許多互聯網大廠（如阿里騰訊等）在招聘時會作出要求。學好web前端對於將來掌握前端後端開發、成為全棧架構師的學習很有幫助。
想學習web前端需要掌握的內容也是不少的，對於自學的同學來說會有一些難度，不推薦自學能力差的人。我們在學習的時候需要分階段進行，做到有計劃的學習與訓練，具體的學習順序如下：
web前端學習順序：
①計算機基礎以及PS基礎
②前端開發基礎（HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架）
③移動開發
④前端高級開發（ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等）
⑤小程序開發
⑥全棧開發（MySQL資料庫、Python編程語言、Django框架等）
⑦就業拓展（網站SEO與前端安全技術）
想要系統學習，你可以考察對比一下開設有IT專業的熱門學校，好的學校擁有根據當下企業需求自主研發課程的能力，建議實地考察對比一下。
祝你學有所成，望採納。