Day17 JavaScript基本教学(二)

流程控制

JavaScript在执行网页上的动画特效时，透过流程控制可以决定动画物件出现的先後顺序，让这些动画物件都可以按照写好的脚本出现。流程控制指令是透过条件式以及回圈来执行的。
if else可以让JavaScript在满足某个条件下时，执行特定功能

var age=18;
if (age<18){
    console.log("未满18岁"）
}
else{
    console.log("超过18岁")
}

由於age定义数值为18，在if else内，没有达到age小於18的条件，因此会执行else区块的指令，因此程序执行结果为「超过18岁」。除了if else指令外，还可以使用switch，当条件数量很多时，可以加以利用

var drink="milk"
switch(drink){
	case "milk":
	 	console.log("I want " + drink);
	 	break;
	 case "coffee":
	 	console.log("I want " + drink);
	 	break;
	 default:
	 	console.log("I want "+"black tea");
}

以上的指令，drink的值为「milk」，因此会显示出「I want milk」的结果。

另一个可用来进行流程控制的功能叫做回圈，回圈的指令有分为两种，一种 for 回圈，另一种为while回圈，可以重复执行大量的任务。

var result=0
for ( var i=1; i<=5; i++) {
	var result=result+i;
}
console.log(result);

如果不确定回圈跑的次数，则可以用while回圈：

var i=0
while(i<=5){
	var result=result+i;
	i++;
}
console.log(result);

事件处理

JavaScript是一个事件驱动的程序语言，他会根据使用者触发条件来反应出相对应的事件，像是使用者点击电商网页上「立即购买」的按钮，隔几秒钟後就产生已加入购物车的动画效果，又或者像是滑鼠滑过产品图上，产品放大的动画效果，这可以让网站有更多的互动。

事件处理分别事件类别+事件处理方法：
事件类别：说明事件发生的类别，像是使用者点击click(点击)、滑鼠滑过(mouseover)、滑鼠滑出(mouseout)等等
处理方法：当事件发生後，後续要使用的函式，也就是要触发什麽样的条件。

以下为事件处理范例写法：

document.getElementById("btn").addEventListener('click', function() {
	  alert('恭喜你中奖!');
});

更进阶的JavaScript应用

如果想要更深入理解JavaScript的话，可以应用JQuery的函式库，里面包含许多为JavaScript设计的扩充功能，更容易设计出与使用者互动功能，又或者是在与工程师沟通新的GA需求时，可以简单描述JavaScript的概念，能够让工程师更容易理解需求内容。

JavaScript的学习资源

1. Codecademy：免费的线上学习资源，里面包含许多JavaScript基础概念。
2. Plurasight：付费课程，从基础到进阶课程都有着详细的教学。
3. Codepen：有非常多透过JavaScript完成的作品，可以在里找到许多精彩的作品，并且练习完成自己的小程序。
4. Stackoverlfow：工程师的发问平台，如果有遇到任何JavaScript的问题，在这里有机会可以获得解答。