我所认识的前端
- 前言
- 前端语言/库/组件/框架
- HTML
- 什么是HTML？
- HTML文档的基本结构
- 附: 统一的web标准：W3C
- JavaScript
- JS能做什么？我们重点学习什么？
- JS的组成结构
- JS的组成结构解释
- JS的运行原理（见图）
- JS的使用：内嵌、外部、缩写
- JS的基本语法
- JS核心语法
- 其他问题
- jQuery
- 简单介绍
- jQuery数据交互
- EasyUI
- 简单介绍
- Easyui 常用的组件：
- JSP
- 前提：
- 使用概要：
- 附：URL的组成
- BootStrap
- 简单介绍
- ElementUI
- 简单介绍
- VUE
- 简单介绍
- 附：库和框架的区别
前言
本人不是主要开发前端方面的，但是作为一个菜鸟开发工程师，个人还是觉得有必须去了解一些前端方面的知识，那么在和前端开发进行交流的时候，可以避免自己被坑哈哈哈哈哈,同时也想明白关于前后端是如何进行联系的，以下的话是个人目前用实际接触用到过的一些前端
前端语言/库/组件/框架
HTML
什么是HTML？
HTML： Hyper Text Markup Language 超文本标签语言或者说网页的“源码”
浏览器：“解释和执行”HTML源码的工具
个人理解：如果没有其他加入，那么就是属于静态网页结构那种
HTML文档的基本结构
附: 统一的web标准：W3C
W3C：World Wide Web Consortium，万维网联盟
W3C的职能：负责制定和维护web行业标准
JavaScript
JS能做什么？我们重点学习什么？
JavaScript是作为脚本语言存在的，所以基本上它只是调用现有的底层API，也就是用其他低级语言所编写的模块，而JavaScript任务就是调用这些API去处理实际的问题。
JavaScript学习重点：表单验证
表单验证：
在向服务器提交前，先做判断输入的信息是否符合要求；
不符合的立即提示用户，符合的就把数据往服务器发送。
举例：中国----太平洋----美国
个人理解：JavaScript是动态美化网页（漂浮广告）、表单的输入验证（必须输入密码！）
JS的组成结构
JS的组成结构解释
（1）ECMAScript: 是一种语法标准（包含着语法，变量和数据类型，运算符，逻辑控制语句，关键字，保留字，对象）
（2）DOM： 浏览器对象模型
（3）DOM： 文档对象模型
JS的运行原理（见图）
JS的使用：内嵌、外部、缩写
JS的基本语法
脚本：平时写的代码。
1.内置JS代码
<script type="text/javascript"><!--javascript语句; --></script>
2.document.write("");
//输出一个字符串document.write("hello world"); //显示一行字符串document.write(1234); //显示一行数字document.write(sname); //显示变量的值
注意：
js区分大小写
js语句结尾尽量写分号
大部分语法与java相同
js中注释与java相同
3.声明变量
3.1 var 变量名=值;
3.2 变量名=值;
注意：
变量的数据类型由存入的数据来决定
在js中不明显区分单双引号。
var i=100; //i是数值型numbervar a='aabb'; //a是字符串型stringvar b="aabb"; //b是字符串型string
JS核心语法
变量、数据类型typeof()、输入输出、运算符号、控制语句、注释、语法约定
其他问题
Java与Javascript比较：
Java代码需要编译才能执行，而JS代码不需要编译就能执行；
Java是基于服务端的语言，JS是基于客户端的语言。
附：什么叫基于服务端和基于客户端？
简单理解，就是需要在服务端执行的或需要在客户端执行的。
提升前端用户体验、交互：
三大基友：html+css+js
使用概要
jQuery
简单介绍
jQuery数据交互
什么是ajax(Javascript And XML)?
Ajax 它是与服务器交换数据的技术，在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求)
特点：
A.异步
异步和同步的区别:
同步是请求发过去,要等着回应;
异步不需要等回应,可以进行其他操作
B.局部刷新
什么是Json(JavaScript Object Notation)?
是一种基于 JavaScript 语法子集的开放标准数据交换格式。JSON 是基于文本的，轻量级的，通常被认为易于读/写。
异步的JavaScript和xml,跟后台交互,都用json
JQuery数据交互图
EasyUI
简单介绍
jQuery EasyUI是一组基于jQuery的UI插件集合体，就是一个组件库。而jQueryEasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。
开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
个人理解：
Jquery EasyUI是第三方基于Jquery框架开发的一款轻量级的，侧重于页面显示部分的框架，也可以称为插件。
一般在工作中的用法分为上，中，下，左，右面板 一般在工作中使用上（企业logo,登录,退出） 左（菜单）中（展示数据）
Easyui 常用的组件：
JSP
前提：
会JSP前需要掌握的技术有JavaScript、jQuery
使用概要：
附：URL的组成
第一部分：协议
第二部分：主机IP地址（有时包含端口号）
第三部分：项目资源的地址，如目录和文件夹名等
BootStrap
简单介绍
Bootstrap是一种前端开发框架，它由规范的css，javascript插件构成，其最大的优势是响应式布局，使得开发者可以方便的让网页无论在台式机、平板设备、手机上都获得最佳的体验.
官方文档：https://www.bootcss.com/.
ElementUI
简单介绍
推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件(用途)
ElementUI官网：http://element-cn.eleme.io/#/zh-CN.
VUE
简单介绍
是一个轻巧、高性能、可组件化的 MVVM 库，同时拥有非常容易上手的 API；
是一个构建数据驱动的 Web 界面的库。
是一个构建用户界面（UI）的“渐进式”JavaScript框架
Vue官网：https://cn.vuejs.org/.
附：库和框架的区别
库(Library)， 本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者
代表：jQuery
jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作
框架(Framework)， 是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码
代表：vue
框架规定了自己的编程方式，是一套完整的解决方案
使用框架的时候，由框架控制一切，我们只需要按照规则写代码
框架的侵入性很高(从头到尾)
1
编写不易，如果有帮助到的话，可以关注，点赞和收藏哦~ ↩︎