Javascript十分常见于网页设计语言,是一种用来呈现网页动态效果的程序语言,像是我们在电商网站进行购物时,把商品加入购物车时,购物车就会出现「商品已进入购物车」的信息提醒效果。有许多会将Javascript与Java搞混,认为他们是一样的语言,但是他们就跟狗和热狗一样,是完全不一样的东西。

Javascript是由前网景(Netscape)工程师Brendan Eich所发明,而听说当初仅仅花了10天就完成。Javascript设计出来目的就是要比Java还要更容易让人理解,让更多网页设计师能够上手,这就让Javascript设计是一种直译式(Interpreted language)、物件导向(Object-based)的程序语言,这是什么意思呢?简单来说,就是Javascript内建一些功能范本,只要通过下指令方式,就能够把功能范本叫出来协助运作。

但由于Javascript在很短的时间被开发,所以在刚推出的时候,有许多功能还没有完善,所以并没有被认为可以成为主流程序语言。但是随者版本的演进,功能越来越完善,还有许多像是JQuery、React.js架构的开发,让javascript已经变成21世纪网页设计师,在开发网站的时候必备的能力。由于Javascript容易理解的特性,史丹佛大学已经将Javascript取代Java,成为程序设计的入门教材。

非技术、营销人为什么要懂JavaScript?

现在许多网站分析都采用Javascript的方法,作为营销人员,了解Javascript就可以知道要如何追踪用户在网站上行为。假设老板今天想要知道哪一个网页是最吸引人,如果不懂Javascript,就无法告诉工程师想要追踪用户哪一种行为。所以你越了解Javascript,你就会知道哪些行为是可以被追踪,这样你就可以更具体地告诉工程师你想要分析的行为,例如:你可以告诉工程师,请他们在GTM设定全站滑鼠停留事件(onmouSEOver)追踪,纪录用户停留在特定网页时间长度。如果老板想知道哪一个商品是最热门的,你就可以请工程师设定商品的滑鼠点击事件(onclick),纪录商品被点击的次数,这样不仅可以大大减少与工程师的沟通成本,又可以顺利地完成老板交代的任务。

Javascript的使用方式

开始介绍Javascript之前,务必先了解网页html的基本概念,在写给营销人的HTML入门基础教学,学习SEO时的必备概念!,充分介绍了网页设计最重要的基本元素html,html就像是我们人的身体四肢,而Javascript就像是我们的行为举止,两者是密不可分,他们运作的方式比如像是老王博客上面搜索框,当你点击搜索图案,Javascript就会控制搜索框框出现,如果在点击搜寻框以外区域则是会消失。

傻瓜式Javascript介绍&基础教程,跟技术沟通零障碍

傻瓜式Javascript介绍&基础教程,跟技术沟通零障碍

html与Javascript的互动关系

而今天只要使用一般文字编辑器,例如记事本,就可以编辑撰写Javascript,只要将写好的档案,名命名成xxx.js即可,或者是直接写在html里面。或者可以下载前端开发神器sublime text,可以协助你更便利写出Javascript。一般来说,在html内的javascript撰写方式:

1、写在<head></head>:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        alert("Hello World")
    </script>
</head>

这样使用chrome浏览器打开,会出现提示信息框,信息文字为「Hello World」


2、也可以通过外部引入的方式,让js执行:

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>"js/mAIn.js"</script>
</head>

通过外部引入的方式,让js执行

Javascript基本功能介绍

运算、变数、函数

程式语言的好处就是在运算过程速度非常快,但是要让程式语言理解计算公式,则要透过运算。运算是一种运算符号,基本有赋值运算、算数运算、比较运算、逻辑运算,像是赋值运算就是以「=」符号来表示,可指定特定值到指定的变数里面,以下为各运算范例:

1.赋值运算( 等于= ) :

var name="Tom";

2.算数运算(加+ 减– 乘* 除/ )

var sum=1+3;

3.比较运算(大于> 小于<)

var age=23;
    var result=age>20;
    // result:true
    console.log(result);

4.逻辑运算(and &, OR |):

var a=true;
var b=true;
    var logic=a && b;
    // logic:true
    console.log(logic);

变量就是将指定值指定在特定空间,就好像在图馆内,将特定的书本放在指定书架上,同时可以任意命名变量的名称,像是前文赋值运算中的「name」就是一种变量命名,变量在Javascript中是有分为「全域变量」与「区域变量」,全域变量基本上在定义完,就可以在文件中任何一处使用,区域变量则是指在特定功能内定义后,范围就限定在该功能内,一旦出了这功能模组外,区域变量就不能使用。

既然Javascript可运算、也可以自定义变量,那将这些功能统整在一起使用的话,就可以发挥更好的效果,这样整合功能就叫做函数。函数(function)可以将一程式区块的功能,透过参数的传递,产出预期的结果,这在Javascript的程式设计中扮演非常重要的角色。

函数宣告通常包含三个部分:

1、函数名称,例如下图「sum」

2、参数(argument),位置在函数的()内,下图「a」、「b」则是参数

3、可重复执行的区块内,位置在函数的{}内

function sum(a,b) {
    result=a*b;
    return result;
}
sum(5,4)

函数会通过return的功能将值回传,因此下sum(5,4)指令时,就会得到数字20。

流程控制

Javascript在执行网页上的动画特效时,通过流程控制可以决定动画出现的先后顺序,让这些动画物件都可以按照写好的脚本出现。流程控制指令是通过条件式以及循环来执行的。

if else可以让Javascript在满足某个条件下时,执行特定功能,方式如下:

if (age<18){
    console.log("未满十八岁")
}
else{
    console.log("已满十八岁“)
}

由于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循环,可以重复执行大量的任务。

当你知道程式需要执行此数时,可用for循环,以下用循环跑出1~5的加总15:

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)等等

处理方法:当事件发生后,后续要使用的函数,也就是要触发什么样的条件。

以下为事件处理范例写法,当点击按钮跳出「恭喜中奖」的信息:

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

Javascript的应用

google Analytic追踪码

每一个人营销人都知道GOOGLE有提供GA的追踪码来追踪网站的流量变化,GA追踪码就是一种javascript的应用,在过去Google有推出analytics.js和ga.js版本的追踪,目前推出了第三代追踪码,gTAG.js追踪码:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="httPS://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
 
  gtag('config', 'GA_TRACKING_ID');
</script>

从Google提供的源代码可以看出,gtag.js一开始是外引一只外部的js文件,接着对于「arguments」参数当作传递数值的中继站,当程序执行到gtag(config,”GA_TRACKING_ID”) ,程序就会传送一次浏览量到Google服器内,并且传回资料到GA的后台上,往后,当每个使用者进入到网页,gtag.js就会不断地纪录网站的流量状况。

更进阶的Javascript应用

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

Javascript的学习

Javascript的学习资源

现在有非常多的的线上课程可以学习Javascript,这边提供4个学习资源供大家参考:

Codecademy:免费的线上学习资源,里面包含许多Javascript基础概念。

Plurasight:付费课程,从基础到进阶课程都有着详细的教学。

Codepen:有非常多通过Javascript完成的作品,可以在里找到许多精彩的作品,并且练习完成自己的小程序

Stackoverlfow:工程师的发问平台,如果有遇到任何Javascript的问题,在这里有机会可以获得解答。

善用以上的资源,未来无论你是营销、编辑或者是专案经理,更进一步深入了解Javascript,知道程序语言运作逻辑,与工程师沟通更加顺畅,也增强自己在数位营销中的竞争力。