前端开发的意义在开发日趋复杂的今天,意义也在不停地变更。我认为在web开发中前端就是数据的容器展现、修饰的框架。首先传统pc前端基础web开发三剑客,html,css,js。
移动互联网大潮,pc端网页纷纷自适应,就缺少不了flex布局,移动自适应布局。自然最主要的还有app,在前后端分离的开发的趋势下,诞生了vue.js,react等前端进阶的强大框架。
还有因为js破碎的语法(我的认为)诞生了一些js的衍生语言,ES6,Typescript等~
掌握前端基础的一些基本框架:
下面是js的基础前端知识:
变量 数据类型
1
1+1
var x =1
var x = 2
x+y
>>3
var name = "will"
alert(name)
prompt()
js对象
//创建直接的实例
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
//使用对象构造器
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
创建 JavaScript 对象实例
var myFather=new person("Bill","Gates",56,"blue");
var myMother=new person("Steve","Jobs",48,"green");
分支
if (...){
...;
}
if(...){
....;
}else{
...;
}
函数
function(name,go){
alert(name);
alert(go);
}
//return ..
//undefine 没定义 没赋值
数组
var mylist = ['c','c++','java']
mylist[0]
遍历
mylist.forEach(function(value,index));
循环
while(){
}
do while
for(var i= 0;i<10;i++){
}
dom操作
var x=document.getElementById("intro");
var y=x.getElementsByTagName("p");
var y=x.getElementsByClassName("p");
改变HTML内容 document.getElementById(id).innerHTML=new HTML
改变HTML属性 document.getElementById("image").src="landscape.jpg";
改变HTML样式 document.getElementById("p2").style.color="blue";
//事件监听:
// 获取超链接的jQuery对象:
var a = $('#test-link');
a.on('click', function () {
alert('Hello!');
});
a.click(function () {
alert('Hello!');
});
ES6 约等于 js
let 和 const
- 不能重复声明
- 都是块级作用域, { } 块内声明的,块外无效
- let 是变量,可以修改
- const 是常量,不能修改
块级作用域举例
原来用 var 的方式,结果弹出的都是 3
或者将变量 封装到函数里,限制作用域,但比较麻烦
用 let 最简单,直接 var 改 let,解决作用域问题
for (let i = 0; i < aBtn.length; i++) {
aBtn[i].onclick = function () {
alert(i)
}
}
解构赋值
let [a, b, c] = [1, 2, 3]
- 如果只有一个参数,() 可以省
- 如果只有一个return,{}可以省
// 普通函数
function name() {
}
// 箭头函数,去掉 function, 加上 =>
() => {
}