作为一名全栈工程师，在日常的工作中，可能更侧重于后端开发，如：C#，Java，SQL ，Python等，对前端的知识则不太精通。在一些比较完善的公司或者项目中，一般会搭配前端工程师，UI工程师等，来弥补后端开发的一些前端经验技能上的不足。但并非所有的项目都会有专职前端工程师，在一些小型项目或者初创公司中，职能划分并不明确，往往要一个人前后端全都会做， 所以作为一名全栈工程师或者后端工程师，掌握必备的前端知识，也是必不可少的一项技能。今天就着重讲解一下，作为一名全栈工程师，前端JavaScript方面的必须要掌握的相关知识。

什么是JavaScript?

在前端Web开发中，共有3种语言是开发者必须要掌握的，这3种语言一起组成了Web开发的基石：

HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程

JavaScript作为一种函数式优先，解释执行，轻量级的编程语言，是目前最为流行的编程语言之一。JavaScript起于浏览器脚本编程，兴于Web开发，却不止于前端脚本语言。目前JavaScript也已经支持后端编程，面向对象等，如Node.js。当然本文讲解的内容，主要是侧重于Web前端脚本语言进行讲解。

创建JavaScript方式

在日常开发中，创建JavaScript脚本一共有2种方式：

内嵌式：在Html页面中，通过定义【<script type="text/javascript">//javascript代码</script>】标签，内嵌JavaScript脚本。这种内嵌式写法，适用于和当前页面强相关的业务逻辑内容。
外链式：在通常开发中，为了方便维护，便于移植，JavaScript代码通常写在独立的文件中【如：index.js】，然后在前端Html页面中进行引入。外链式也是目前普遍使用的一种方式。

关于两种创建形式，如下所示：

<!DOCTYPE html><html><head><metacharset="utf-8"><title></title></head><scripttype="text/javascript">//内嵌式javascript代码vara=10;
varb=2;
varc=a+b;
console.log('a+b='+c);
</script><scriptsrc="js/index.js"></script><body></body></html>

变量定义

变量在进行业务逻辑处理及数据运算中，主要用于存储数据，是承载数据的载体。主要通【var 变量名 = 变量值;】的形式进行定义。

构造变量名称（唯一标识符）的通用规则是：

名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
名称对大小写敏感（y 和 Y 是不同的变量）
保留字（比如 JavaScript 的关键词）无法用作变量名称

提示：JavaScript 标识符对大小写敏感。变量命名，建议具有明确的含义，这样会更加方便理解与维护。

数据类型

在JavaScript中，根据变量所存储的数据内容的类型不同，可以分为不同的数据类型，主要有以下几种：

数值类型number：用于表示数字，包括整数，单精度浮点数，双精度浮点数等，如： var num=10;//数值类型
文本类型string：用于表示字符串，如： var text=”文本”;//字符串类型
布尔类型boolean：用于表示逻辑上的真和假，只有两个值：true，false。如： var flag=true; //两个值，true,false表示真或假
空类型：用于表示空，如：var kong=null;//用于清空变量内容，表示空
未定义：表示此变量只是被声明，并未赋值。如： var aa;// undefined 默认值。
数组类型：用于存储多个相同类型的值。
对象类型object：用于表示复杂的结果体，可以存储多个不同类型的值。注意：空类型，数组类型，都属于对象类型。

如何查看数据类型？通过typeof(数量名)的形式获取数据类型，然后再通过console.log()在浏览器输出的形式查看，如下所示：

vararr=[1,2,3,4,5];
console.log(typeof(arr));//输出object

运算符

运算符主要用于在不同的变量之间进行相应的业务逻辑处理，如：加，减，乘，除等，运算符主要有以下几种：

算术运算符：用于对数字执行算数运算，如：加，减，乘，除：var sum=1+2-3*4/2;
字符串拼接，用于将多个字符串拼接成一个字符串，不同文本之间用加号进行拼接。
比较运算符：主要用于对不同变量之间进行比较，如：大于，小于，等于，大于等于，小于等于，恒等于，恒不等于，三元表达式等。
逻辑运算符：主要是与，或，非，等逻辑上的运算。
位运算符：主要是针对数字进行的一些位之间的运算，如：位与，位或，位非，异或，左移，右移等。

关于运算符之间的一些示例，如下所示：

vara=10;
varb=2.1;
varc=a+b;
console.log('a+b='+c);
vararr=[1,2,3,4,5];
console.log(typeof(arr));
varflag1=2>3;
varflag2=2<3;
varflag3=2==2;//类型一致的比较varflag4=2===’2’;//更准确，比较两个值是不是完全一致

注意：不同的运算符都有优先级，如果不同运算符进行组合运算，则需要注意优先级。

代码块Statement

代码块是JS中用于设置复杂程序的一种语法。几种常见的代码块，如下所示：

1. 条件代码块

条件代码块，主要用于判断根据不同条件，执行不同分支的语句，格式主要有以下3种：

//第一种，简单形if (条件运算) {
//满足条件时执行}
//第二种，两分支形if (条件运算) {
//条件满足时执行} else {
//条件不满足时执行}
//第三种，多分支形if (条件运算1) {
//条件1满足时执行} elseif (条件运算2) {
//条件2满足时执行} else {
//条件都不满足时执行}

2. 循环

循环主要用于多次执行相同的代码，且每次的执行参数不同。循环主要有以下几种：

for - 多次遍历代码块
for/in - 遍历对象属性
while - 当指定条件为 true 时循环一段代码块
do/while - 当指定条件为 true 时循环一段代码块

其中最常用的是for循环，格式如下所示：

for (语句1; 语句2; 语句3) {
要执行的代码块}

代码块示例，综合使用循环和条件判断的示例如下所示：

//求0到100之间的偶数的和varsum=0;
for (vari=0; i<100; i++) {
if (i%2==0) {
sum+=i;
  }
}

函数function

函数被设计为执行特殊功能的代码块，作为一个整体，可以被重复的调用。函数通过 function 关键词进行定义，格式如下所示：

functionname(参数1, 参数2, 参数3) {
要执行的代码}

如上述求和的功能，就可封装成函数，然后进行调用，如下所示：

functiongetSum(start, end) {
varsum=0;
for (vari=stasrt; i<end; i++) {
if (i%2==0) {
sum+=i;
    }
  }
returnsum;
//return后面的代码将不再执行。}
varsum1=getSum(0,100);//0,100之间的偶数和varsum2=getSum(100,200);//100,200之间的偶数和

上述函数封装以后，就可以方便的调用，以实现特定的功能，那么，如果想要根据不同的输入，实现不同的逻辑，如：某些情况下实现奇数逻辑，另些情况下实现偶数逻辑，要如何做呢？

在这种情况下，可以将特殊的逻辑提取出来，由调用方进行实现，即调用时输入的奇数求和的逻辑，就实现奇数求和；输入的是偶数求和的逻辑，就实现偶数的求和。或者其他的逻辑。具体如下所示：

//条件求和functiongetSumWithCondition(start, end, fn) {
varsum=0;
for (vari=stasrt; i<end; i++) {
if (fn(i)) {
sum+=i;
    }
  }
returnsum;
}
//通过函数和条件处理相结合，可以完成一些相对复杂的逻辑的处理varresult=getSumWithCondition(1, 100, function(n) {
if (n%2===0) {
returntrue;
  } else {
returnfalse;
  }
});

数组Array

数组主要用于存储相关格式的一组数据。格式为：var array-name = [item1, item2, ...]; 如：var arr=[1,2,3,4,5];

数组的一些属性及使用方法，如下所示：

vararr= [1, 2, 3, 4, 5];
//数组的属性：varlen=arr.length//数组的长度vara=arr[1]; //数组的索引arr.push(6) //往数组的末尾添加元素arr.unshift(-1) //往数组的开头添加元素。arr.forEach(funciton(item, index) {
console.log(item);
});

对象object

对象是一个整体，存储不同类型的数据。关于对象的使用方式，如下所示：

varobj= {
name: ’小六’,
age: 18};
obj.name//访问某个值for (varkinobj) {
console.log(k, obj[k])
}

DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。整个页面，就是一个可视化树状结构，如下所示：

通过JavaScript操作页面上的对应的标签及其属性，属于DOM范畴内的相关内容。主要包含以下几个方面：

1. 获取Html元素

通过JavaScript获取Html元素，主要有以下几种方式：

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

具体示例，如下所示：

varblock=document.getElementById(id);
block.textContent=’文本内容’;
varcontents=document.getElementsByName(name); //伪数组varcontents=document.querySelectorAll(‘p’); //标签选择器获取varcontents=document.querySelectorAll(‘#container p’); //id选择器varcontents=document.querySelectorAll(‘.text’); //类名varcontent=document.querySelector(‘.text’); //返回首个满足条件的标签content.previousElementSibling.textContext=’’; //上一个兄弟节点content.nextElementSibling.textContent=’’; //下一个兄弟节点varcontainer=content.parentNode; //父节点标签varitems=container.children;

2. 样式处理

通过JavaScript也可以为Html元素设置对应的样式属性。示例如下所示：

varblock=document.getElementById(id);
block.style.width=’80px’;
block.style.height=’80px’;
block.style.backgroundColor=’red’;
block.className=’’; //通过设置类名，也可以设置样式

注意：虽然CSS和JavaScript都可以设置样式，但是非特殊情况下，建议采用CSS设置样式

3. 文本处理

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=新的 HTML

4. 事件监听

当用户需要和系统进行交互时，可以通过点击Html元素触发对应的事件，如：单击事件，双击事件，以及选择事件，切换事件等。事件主要是告诉系统，需要做哪些操作。

事件监听主要有以下几种形式：

varblock=document.getElementById(id);
block.onclick=function(){
}
block.addEventListener(‘click’,function(){
});
//同一类型事件，可以添加多个而不会覆盖block.addEventListener(‘click’,function(){
});

综合应用【轮播图】

本示例主要综合应用了Html，JavaScript，CSS样式，实现轮播图功能。主要如下所示：

Html代码，如下所示：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title></head><linkhref="./css/index.css"type="text/css"rel="stylesheet"/><body><divclass="container"><ul><li><imgsrc="imgs/one.jpg"></li><li><imgsrc="imgs/two.jpg"></li><li><imgsrc="imgs/three.jpg"></li><li><imgsrc="imgs/four.jpg"></li><li><imgsrc="imgs/five.jpg"></li></ul><divclass="dot"><spanclass="circle"></span><spanclass="circle"></span><spanclass="circle"></span><spanclass="circle"></span><spanclass="circle"></span></div></div><divclass="bottom"><buttonid="prev">上一个</button><buttonid="next">下一个</button></div><scriptsrc="./js/index.js"type="text/javascript"></script></body></html>

CSS样式代码

html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.container {
width: 100%;
height: 50%;
text-align: center;
margin-bottom: 10px;
}
.containerul {
width: 50%;
height: 100%;
position: relative;
left: 25%;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
}
.containerulli {
width: 100%;
height: 100%;
list-style: none;
position: absolute;
}
.containerulliimg {
width: 100%;
height: 100%;
transition: all2s;
opacity: 0;
}
.containerulli.active {
opacity: 1;
}
.bottom {
text-align: center;
}
.container.dot {
width: 100%;
height: 15px;
position: relative;
margin-top: -40px;
z-index: 5;
opacity: 1;
}
.container.dot.circle {
width: 10px;
height: 10px;
border-radius: 5px;
border: 1pxsolidgreenyellow;
background-color: white;
display: inline-block;
opacity: 1;
}

JavaScript代码

console.log("----------begin-----------");
varprev=document.getElementById('prev');
varnext=document.getElementById('next');
varindex=-1;
prev.addEventListener('click', function() {
varimages=document.querySelectorAll('.container ul li img');
varcircles=document.querySelectorAll('.container .dot .circle');
varlen=images.length;
if (index<=0) {
index=len;
  }
images.forEach(function(item, index) {
item.className='';
  });
circles.forEach(function(item, index) {
item.style.backgroundColor='white';
  });
images[index-1].className='active';
circles[index-1].style.backgroundColor='red';
index=index-1;
});
next.addEventListener('click', function() {
varimages=document.querySelectorAll('.container ul li img');
varcircles=document.querySelectorAll('.container .dot .circle');
varlen=images.length;
if (index>=len-1) {
index=-1;
  }
images.forEach(function(item, index) {
item.className='';
  });
circles.forEach(function(item, index) {
item.style.backgroundColor='white';
  });
images[index+1].className='active';
circles[index+1].style.backgroundColor='red';
index=index+1;
});
setInterval(function() {
next.click();
}, 3000);
console.log("----------end-----------");

示例效果图，如下所示：

以上就是全栈工程师必须要掌握的前端JavaScript技能全部内容。希望可以抛砖引玉，一起学习，共同进步。

全栈工程师必须要掌握的前端JavaScript技能

什么是JavaScript?

创建JavaScript方式

变量定义

数据类型

运算符

代码块Statement

1. 条件代码块

2. 循环

函数function

数组Array

对象object

DOM（文档对象模型）

1. 获取Html元素

2. 样式处理

3. 文本处理

4. 事件监听

综合应用【轮播图】

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

全栈工程师必须要掌握的前端JavaScript技能

什么是JavaScript?

创建JavaScript方式

变量定义

数据类型

运算符

代码块Statement

1. 条件代码块

2. 循环

函数function

数组Array

对象object

DOM（文档对象模型）

1. 获取Html元素

2. 样式处理

3. 文本处理

4. 事件监听

综合应用【轮播图】

热门文章

最新文章

相关课程

相关电子书

相关实验场景