Ⅰ 如何实现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开始学吧,这个是最简单基础的。