當前位置:首頁 » 網頁前端 » 前端雙語化
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端雙語化

發布時間: 2023-05-10 15:55:07

Ⅰ 如何實現html頁面的雙語切換

目的:前端(只改御喚採用thymeleaf模板+jquery) 實現國際化

由:前端沒有採用流行的vue.js angular 等框架,純html不可以引用js中定義的常量
採用jquery賦值(維護2個模板(中,英)界面) 直接out

方案:採用https://github.com/coderifous/jquery-localize/一個本地化插件
a jQuery plugin that makes it easy to internationalize your web site

步驟:

1 html

<!DOCTYPE>
<htmllang="en">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>Language</title>
<!--引用三個js文件language_cookie.js實現記憶功能下一次用戶刷新界面之後記得之前用戶使用了那個語種-->
<scriptsrc="jquery.js"type="text/javascript"charset="utf-8"></script>
<scriptsrc="jquery.localize.js"type="text/javascript"charset="utf-8"></script>
<scriptsrc="language_cookie.js"type="text/javascript"charset="utf-8"></script>
</head>
<body>
<divclass="top_lan">
<selectid="ddlSomoveLanguage"onchange="chgLang();">
<optionvalue="">LAGUAGE</option>
核凱<optionvalue="ja">日本</option>
<optionvalue="en">ENGLISH</option>
</select>
</div>
<divid="prod_navright">
<ul><!--data-localize="hpt.management"固定寫法對應語言包文件中的key-->
<li><adata-localize="hpt.management"href="hospitality_management_ja.html">MANAGEMENT</a></li>
<li><adata-localize="hpt.support"href="hospitality_support_ja.html">SUPPORT</a></li>
<li><adata-localize="hpt.tutorial"href="hospitality_tutorial_ja.html">TUTORIAL</a></li>
<li><adata-localize="hpt.features"href="hospitality_features_ja.html">FEATURES</a></li>
</ul>
</div>
</body>
</html>

2 語言包文件

text-en.json

{

"hpt":{

"features": "FEATURES",

"tutorial": "TUTORIAL",

"support": "SUPPORT",

"management": "MANAGEMENT"

}

}

text-ja.json
·······

3 language_cookie.js 需要在伺服器上執行 本機執行無法獲取需要的json文件主要的代碼標記處的代碼底層可能使用的是xmlHttpRequest實現獲取.json語言包文件

varname="拆侍somoveLanguage";
functionchgLang(){
varvalue=$("#ddlSomoveLanguage").children('option:selected').val();
SetCookie(name,value);
console.log("comeinchgLang"+name+value);
location.reload();
}
functionSetCookie(name,value){
varDays=30;//此cookie將被保存30天
varexp=newDate();//newDate("December31,9998");
exp.setTime(exp.getTime()+Days*24*60*60*1000);
document.cookie=name+"="+escape(value)+";expires="+exp.toGMTString();
}
functiongetCookie(name){//取cookies函數
vararr=document.cookie.match(newRegExp("(^|)"+name+"=([^;]*)(;|$)"));
if(arr!=null)returnunescape(arr[2]);
returnnull
}
$(function(){
varuulanguage=(navigator.language||navigator.browserLanguage).toLowerCase();
console.log("comeinreadly"+uulanguage);

if(uulanguage.indexOf("en")>-1){
$("[data-localize]").localize("text",{//**主要的代碼**jquery.localize.js底層實現切換邏輯
pathPrefix:"lang",
language:"en"
});
console.log("comeinen");
}elseif(uulanguage.indexOf("ja")>-1){
$("[data-localize]").localize("text",{
pathPrefix:"lang",
language:"ja"
});
console.log("comeinja");
}else{
$("[data-localize]").localize("text",{
pathPrefix:"lang",
language:"en"
});
console.log("comeinmorenen");
};
//根據cookie選擇語言
if(getCookie(name)!=""){
if(getCookie(name)=="ja"){
$("[data-localize]").localize("text",{
pathPrefix:"lang",
language:"ja"
});
console.log("comeincookieja");
}
if(getCookie(name)=="en"){
$("[data-localize]").localize("text",{
pathPrefix:"lang",
language:"en"
});
console.log("comeincookieen");
}
}
});

Ⅱ 前端開發該從哪裡學起

無論是學什麼,都需要從基礎開始。前端的話,主要是下面幾個方面:

1.首先是了解瀏覽器的基礎知識,對頁面的認知,

2.html+css和html5和css3,這部分建議,邊學邊練。之後可以模仿一些網站做些頁面。理解寬配css每個元素的屬性,樣式的實現不一定只有一種寫法,多想一想還有沒有什麼需要改進的地方。

3.JavaScript。不是所有的網頁都必須有js,但是要想實現一些超酷的功能和界面的時候,就需要涉及到js。(主要涉及數據類型,循環,函數的運用,這一塊比較重要)

4.MVVM框架(angular,vue,react),至少要精通一種。

5.jQuery經典特效交互開發、HTTP協議念巧源,Ajxa進階與後端開發、前端工程化與模塊化應用。

6.移動端webAPP開發,微信小程序。

7.面向對象,javascript閉包、范圍鏈、原型仔態鏈等高級功能。(js的進階)

作為零基礎轉行前端,下面分享一份千鋒的web前端課程體系,可以看下。

想了解更多的前端學習知識,視頻教程,項目,筆記等等,可以及時聯系我。

Ⅲ 學前端前段需要學習那些語言

前端必須要掌握HTML、CSS、HTML5、css3、JavaScript、jQuery等技術,還要必須掌握

Vue、React、Angular這三大框架。分享一份千鋒的前端學習路線,可以參考下。

1、前端頁面重構。主要內容為PC端網站布局、HTML5+CSS3基礎、WebApp頁面布局。學習目標是完成PC端網站布局,WebApp頁面布局,還要可以通過HTML5+CSS3的2D、3D等屬性實現一些精美的動畫效果。

2、JavaScript高級課程、PC端全棧項目開發。主要內容為原生JavaScript、面向對象進階與ES5/ES6應用、JavaScript工具庫自主研發、JQuery經典交互特效開發、HTTP協議、Ajax進階與後端開發、前端工程化與模塊化應用以及AngularJS等。學習目標是可以通過原生JavaScript開發交互功能,實現網站上的交互效果,以及模塊化應用等,實現完整的前端工程。

3、Web前端框架、混合開發(Hybrid,RN)、大數據可視化。主要內容為Node.js後端開發、Vue.js前端框架、React前端框架、混合開發(Hybrid,RN)、Angular前端框架、大數據可視化等。學習目標是可以獨立完成相應的項目,如場景,應用Vue.js/Ionic/React.js等框架開發WebApp,小程序項目開發,以及各類混合應用項目開發等。

Ⅳ 前端技術棧有哪些

前端技術棧包括:1.vuejs 2.react.js 3.node.js 4.微信公眾號 5.前端安全 6.react-native 7.工程化 8.小程序 9.自動化測試等。

react的一些相關技術棧

React:用於構建用戶界面的 JavaScript 庫。

React Native:基於 React 的移動端跨平台 UI

Ant Design: React 封裝了一套 Ant Design 的組件庫。

Zarm React:移動端 React 組件庫

Taro:Taro 是一個開放式跨端跨框架解決方案,支持使用 React/Vue/Nerv 等框架來開發 微信 / 京東 / 網路 / 支付寶 / 位元組跳動 / QQ 小程序 / H5 等應用。

Ⅳ 小白准備轉行學習前端,有大神可以提一些建議嗎

學習是以興趣為前提的,你要對你所要學碰配的內容產生興趣,這樣你才會花心思去學習。這和是不是小白沒關系的,對於小白而言,在學習過程中就需要更努力,多花時間和心思沒有什麼是學不會的。

自學方法:

1、作為一個初學者笑廳指,你必須明確系統的學習伏陵方案,我建議一定有一個指導的人,全靠自己學,放棄的幾率非常大,在你對於web前端還沒有任何概念的時候,需要一個人領進門,之後就都靠自己鑽研,第一步就是確定web前端都需要哪些內容,並且在多少時間內學完,建議時間6個月保底。

2、視頻為主,書為輔。很多初學者在學習前端的時候非常喜歡去買書,但是最後的結果是什麼?看來看去什麼都不會寫,所以在這里給大家提醒,書可以看,但是是在建立於你已經對於某個知識點有了具體操作的執行後,在用書去鞏固概念,這樣更加利於你對於知識的理解。

3、對於學習技術來講,掌握一個學習方法是非常重要的,其實對於學習web前端來講,學習方法確實很多都是相通的,一旦學習方法不對,可能就會造成「方法不對,努力白費」。其實關於這方面還是很多的,我就簡單說個例子,有的人邊聽課邊跟著敲代碼,這樣就不對,聽課的時候就專心聽,做題的時候就專心做題,這都是過來人的經驗,一定要聽。根據每個人的不同,可能學習方法也會有所出路,找到適合你自己的學習法方法是學習的前提。

4、不建議自己一個人瞎學,在我了解學習編程的這些人來看,從零基礎開始學並且最後成功做這份工作的其實並沒有幾個,我覺得大部分原因就是因為他們都不了解web前端是干什麼的,學什麼的,就盲目的買書看,到處找視頻看,最後看著看著就放棄了,所以我建議初學者在沒有具體概念之前,還是找有經驗的人請教一下,聊過之後你就會知道web前端具體是干什麼的,該怎麼學,這是我個人的小建議,可以不採納。

自學路線:

第1階段:前端頁面重構(4周)

內容包含了:(PC端網站布局項目、HTML5+CSS3基礎項目、WebApp頁面布局項目)

第2階段:JavaScript高級程序設計(5周)

內容包含:(原生JavaScript交互功能開發項目、面向對象進階與ES5/ES6應用項目、JavaScript工具庫自主研發項目)

第3階段:PC端全棧項目開發(3周)

內容包含:(jQuery經典交互特效開發、HTTP協議、Ajax進階與PHP/JAVA開發項目、前端工程化與模塊化應用項目、PC端網站開發項目、PC端管理信息系統前端開發項目)

第4階段:移動端項目開發(6周)

內容包含:(Touch端項目、微信場景項目、應用Angular+Ionic開發WebApp項目、應用Vue.js開發WebApp項目、應用React.js開發WebApp項目)

第5階段:混合(Hybrid,ReactNative)開發(1周)

內容包含:(微信小程序開發、ReactNative、各類混合應用開發)

第6階段:NodeJS全棧開發(1周)

內容包括:(WebApp後端系統開發、一、NodeJS基礎與NodeJS核心模塊二、Express三、noSQL資料庫)

視頻教程:

網頁鏈接

網頁鏈接

如果你對於學習前端有任何不懂的可以隨時來問我,如果沒有比較好的教程,也可以問我要。

Ⅵ front-end是什麼意思,前端的,前端處理機,前端翻譯

front-end
英 [frʌnt end] 美 [frʌnt end]
adj.
前端檔兄唯的

雙語例句
1
The process can be divided into two parts, the front-end and the back-end.
此工藝分成二部分,前端和後端。

2
The format, order, and contents of the buffers are meaningful only to the front-end and back-end drivers.
緩沖區的格式、順序和內容僅對前端和後端驅行培動程塵中序有意義。

Ⅶ 如何一步步實現Web前端開發職業目標

說說自己的經歷吧!

先學HTML,然後是CSS,初學者建議看這方面的視頻,入門後,去W3C上面看基礎。其實HTML+CSS很簡單,入門時間:15天。(每天4小時)

上面的基礎打好了,你自然對編程有一點點的信心了,但上面所學的,不能算編程,因為太簡單了。簡單,但應用面很小,可以做一些靜態網站。

然後是javascript,想精通javascript幾乎不可能,因為他是核心。入門時間,大約30天。先視頻,後去W3C看基礎。javascript的基礎牢固了,你可以開發95%以上的頁面了。當然,這些頁面,只是在本地運行得很好,以後你深入,你就會發覺,很多糟糕的地方了。

不過,你入門javascript之後,你可以算是一個程序員了。

然後是jquery,jquery是專業於DOM操作的。你現在不懂DOM,是你沒接觸javascript,你接觸就明白了。jquery幫你解決了很多的游覽器兼容問題,讓DOM操作簡單很多。jquery其實很簡單,有了javascript基礎,入門不用一個星期。

學完jquery,你可以嘗試挑戰新的技術了,例如ES5、ES6、ES7,ES5其實你不用挑戰,你現在學的javascript用的就是ES5和ES5之前的ES,不過你要粗略看看,因為有很多很多的基礎。再然後是ES6、ES7,這兩個比較難,你用心的看就行,對以後很有幫助。學習這些,至少要30天,甚至更多。

當你了解ES5、ES6、ES7,你就可以學HTML5、CSS3了,當然HTML5和CSS3可以在學習ES之前學,但是我強烈建議沒有天分的人不要去接觸HTML5的canvas,超難的。HTML5想精通很難,但是必須學,至少要會用。CSS3的道理和HTML5差不多,至少要會用。CSS3和HTML5入門,大概20天。

當你學完這些,你接下來,學習移動端開發,裡面涉及很多內容,但不難。

然後是,bootstrap,在學bootstrap的時候,你應該會接觸less和sass,順便把它們學了,有了上面的基礎,bootstrap太簡單了。

再然後是,vueJS,全新的編程風格,對ES6依賴很高。但是vueJS不難,前提你有ES6基礎。

然後看你的情況了,有了上面的基礎,你可以去面試工作了。

工作之後,你可以繼續學習,reactJS,angularJS,nodeJS,關於圖形的JS.....其實你學完前面的,你自己就有心得了,沒必要100%和別人一樣,在工作中夠用就好了。按自己所需,我所說的僅供參考。

最後,我想提醒,你應該關注一下前端的變化,特別是那些庫,變化得很大,以前JQ的UI很流行的,現在越來越不流行了,互聯網變化很大,現在熱門的,以後不一定熱門。下面的鏈接,僅供參考,對你以後有幫助網頁鏈接

Ⅷ web前端開發需要學習什麼知識

首先對於Web前端初學者而言,HTML和CSS是需要掌握的內容。

HTML稱為超文本標記語言,是一種標識性的語言。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字,圖形、動畫、聲音、表格、鏈接等。

CSS層疊樣式表是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。


(8)前端雙語化擴展閱讀:

例如,在網上商店中,用戶反復觀察和選擇商品,購買商品,瀏覽一系列網頁,收集所需信息,支付相應費用,最後下訂單,也可以是「軟體升級向導」,指導用戶完成下載和安裝新軟體的過程,也可以是基於Intranet的報價或銷售報告生成工具。

所有這些均不同於「標准」的Web網站。 常規網站使用一系列菜單或導航欄在預定路徑中漫遊該網站。 但是,成為Web應用程序不僅僅是下級控制的導航器。 在網站上自由漫遊時,可以進行無狀態和匿名訪問,但是通常不接受Web應用程序。

Ⅸ 做前端開發主要學些什麼

要學前端開發,首先要熟悉幾種最基礎的程序語言。前端需要用到的是:HTML、CSS,JavaScript,在頁面的布局時, HTML將元素進行定義,CSS對展示的元素進行定位,再通過JavaScript實現相應的效果和交互。這些基礎語言,必須在熟練掌握之後,結合不同的開發工具,開發出高質量的頁面。

最開始用到的開發工具主要有如下幾個:

1,Dreamweaver:,集網頁製作和管理網站於一身的所見即所得網頁代碼編輯器。

2,Sublime,全稱Sublime Text ,是一個主要功能包括拼寫檢查,書簽,完整的 Python API , Goto 功能,即時項目切換,多選擇,多窗口的代碼編輯器

3,HBuilder:是DCloud,推出的一款支持HTML5的Web開發IDE。

當然,並不局限於這些工具,如果要開發出更好的作品,要用到的肯定是更廣泛的工具,工作中不同工具的靈活運用也是一種能力的體現,比如可以將圖標 web 字體放到自己的項目中的FontelloFontello、能夠自動實施安全相關的 header 規則的Secureheaders、針對於編寫現代 web 和雲應用的跨平台編輯器的Visual Studio CodeVisual Studio Code。

前端開發要學習的知識很廣泛,不過最重要的,就是要打好基礎,熟練掌握三種基礎技能,無論什麼網頁的製作都不在話下。

Ⅹ 前端先學什麼再學什麼

學習順序就是第一先從html和css入手,這兩個是標簽和樣式的使用,不涉及邏輯語法,快的話兩三天就能明白、上手,可以先做點靜態頁面,頁面上都是寫死的,切換輪播都不需要的那種,當然有的效果做不出來。

第二步建議了解點瀏覽器的東西,javascript也可以了解點,了解什麼是dom操作,了解一些概念像瀏覽器請求載入,不用學太深了解概念為主。

第三步可以學習bootstrap,swiper這些框架的使用,說實話也挺好用的,你可以在官網上查看。他們的使用依賴於jquery調用。使用這些框架會讓你的頁面更好看,而且響應式布局可以省去很多煩惱,用戶體驗更好,省去了自己寫代碼的麻煩,開發效率高。

第四步,javascript建議深入學習下,理解概念,能夠使用原生的代碼操作,最簡單的寫個貪吃蛇,就很好了。

第五,ajax的使用和json數據結構,前後台進行數據交互就是ajax請求,了解它的發送和接受,一個是jquery的ajax使用,這個是寫好的結構可以直接使用,再者就是javascript原生的書寫。

第六,html5+css3這個是必須會的吧,html5新增了很多標簽,提升了開發性能,移動端開發更友好,css3讓頁面的活性更大,陰影、漸變等效果更好。localstorage和sessionstorage讓瀏覽器存儲數據,前端的功能越來越大了。使用他們的時候注意瀏覽器的兼容性。

我覺得以上就很全面了,你就先從Html、Css開始學吧,這個是最簡單基礎的。