1. 前端知识体系(学习路线)
2.前端三要素
HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容。
CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。
JavaScript（行为）：是一种弱类型脚本语言，其源码不需经过编译，而是由浏览器解释运行，用于控制网页的行为
3.行为层 JavaScript
JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释运行。
JavaScript框架：
- JQuery：大家熟知的JavaScript库，优点就是简化了DOM操作，缺点就是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6，7，8；
- Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用了TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如1代–>2 代，除了名字，基本就是两个东西；截止发表博客时已推出了Angular6）；
- React：Facebook 出品，一款高性能的JS前端框架；特点是提出了新概念 【虚拟DOM】用于减少真实 DOM 操作，在内存中模拟 DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言；
- Vue：一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular（模块化）和React(虚拟 DOM) 的优点；
- Axios：前端通信框架；因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery 提供的AJAX 通信功能。
4.UI框架
UI框架：
- Ant-Design：阿里巴巴出品，基于React的UI框架；
- ElementUI、iview、ice：饿了么出品，基于Vue的UI框架；
- BootStrap：Teitter推出的一个用于前端开发的开源工具包；
- AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架。
5.JavaScript构建工具
- Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript。
- WebPack：模块打包器，主要作用就是打包、压缩、合并及按序加载。
6. JavaScript引入方式
- 内联: 在标签的事件属性中添加js代码,当事件触发时执行js代码
<input type="button" value="按钮" onclick="alert('按钮点击了!')">
- 内部: 在html页面的任意位置添加script标签,在标签内部写js代码,推荐写在
</body>的上面
<script type="text/javascript"> alert("内部引入成功!"); </script>
- 外部: 把代码写在单独的js文件中,通过script标签的src属性引入js文件
<script type="text/javascript" src="first.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 在按钮的点击事件中添加js代码 -->
<input type="button" value="按钮" onclick="alert('按钮点击了')">
<!-- 内部引入javascript -->
<script type="text/javascript"> alert("内部引入成功") </script>
<!-- 引入js文件 -->
<script type="text/javascript" src="first.js"></script>
</body>
</html>
alert("没想到吧")
7. JavaScript语法
- 数据类型 变量 运算符 语句 方法声明 面向对象
7.1数据类型:
js中只有对象类型
1.数值类型 ：number var x = 10
2.字符串类型：string var s = “abc”/‘abc’;
3.布尔类型：boolean var b = true/false;
4.未定义类型：undefined var u; 只声明不赋值就是未定义类型
5.自定义类型object
7.2 变量声明和赋值
- js语言属于弱类型的语言
- java:
int x = 10; x= "abc" 报错 - js
var x = 10; x="abc" 允许因为JS弱化了类型的概念
7.3运算符
+ - * / % > < >= <= = == !=
==和===, ==是先统一类型再比较值,===是先比较类型再比较值
"666"==666 true "666"===666 false
除法运算,会自动转换整数和小数
java: int x = 5; int y = 2; x/y=? 2
js: var x = 5; var y = 2; x/y=2.5
- 语句 if else while do while for switch case
- 和Java大体相同
- for循环中的 int i 改成 var i
for(var i=0;i<10;i++){
console.log(i);
}
7.4 方法声明
- java: public void 方法名(参数列表){方法体}
- js: function 方法名(参数列表){方法体}
- 声明常见的四种方法:
- 无参无返回值
- 无参有返回值
- 有参无返回值
- 有参有返回值
- JS中方法声明有三种方式:
- function 方法名(参数列表){方法体}
- var 方法名 = function(参数列表){方法体}
- var 方法名 = new Function(“参数1”,“参数2”,“方法体”);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" value="按钮"
onclick="fn1()">
<script type="text/javascript">
//无参无返回值
function fn1(){
//每行结束的; 可以省略
alert("fn1执行!");
}
//调用 和java一样调用
// fn1();
//有参无返回值
function fn2(name,age){
alert(name+":"+age);
}
//调用
// fn2("孙尚香",60);
//无参有返回值
function fn3(){
return "ABC";
}
//调用
//var s = fn3();
//alert(s);
//有参有返回值
function fn4(x,y){
return x*y;
}
//调用
//var result = fn4(3,8);
//alert(result);
//第二种声明方法的方式:
var fn5 = function(name,age){
alert(name+":"+age);
}
//调用
// fn5("刘备",20);
//第三种声明方法的方式:
var fn6 = new Function("name","age"
,"alert(name+':'+age)");
// fn6("吕布",18);
</script>
</body>
</html>
// todo
转载：https://blog.csdn.net/Blue_Pepsi_Cola/article/details/128533677
查看评论