[鼠年全马铁人挑战] Week07 - JavaScript基础学习心得 part1

在开始之前，我想先分享一下自己学习网页开发的过程。

我一开始是自学，而且学得乱七八糟，只知道网页前端三大元素为 Html、CSS、JavaScript，其余架构、DOM、网页载入流程等等一概不知，所有写法都是自己去估狗各种教学文乱拚乱凑出来的。
甚至我不是从JavaScript开始学习，而是从jQuery开始(因为古早的教学文大多是使用jQuery)，而且也没有去研究跑的过程，觉得程式能跑就好，结果就出现这种龙蛇杂处的写法

    var v_Name = document.getElementById('inputName').value;    var v_Icon = $('#inputIcon option:selected').text();    var v_Mark = document.getElementById('inputMark').value;    var v_Link = document.getElementById('inputLink').value;    var v_HotLink = $('[name="rg_hotlink"]:checked').val();    var v_IEopen = $('[name="rg_ieopen"]:checked').val();    var v_itemtype = $('[name="rg_itemtype"]:checked').val();    var v_Color = document.getElementById('inputColor').value;

现在回头看看会觉得当初自己写的Code怎么会这么的 白癡 有个性

如此这般，我打算从JavaScript基础开始打掉重练
希望未来的我如果忘了什么观念，回来看能够马上回忆起来
　

正题开始

测试及输出内容

在开发前端时，最常需要做的就是测试及输出各种需要的资料，包含变数、元件、从后端接回来的资料等等，可以查看这些资料的方法有两种

alert()
此方法会在网页上跳出警示视窗，不过我个人不是很喜欢这种方法，除了不好看之外，视窗跳出来还要去点掉也很麻烦(明明就自己懒)。
程式码範例如下，小括弧内填入想显示的资料

alert("Hello JavaScript!!");

console.log()
测试时我都使用此方法，不用担心介面呈现问题，且资料即时出现。
程式码範例如下，一样小括弧内填入想显示的资料

console.log('Hello JavaScript!!');

---

变数与资料型别

变数有点抽象，可以将其理解为「储存资料的容器」，变数是使用var作为开头来宣告，写法如下:

var aa;  // 宣告一个名称为aa的变数

变数命名上有几个注意事项:

开头不能用数字
例如: var 1abc;不能用-及.
例如: var a-b、var a.b不能使用关键字
关键字有哪些可参考w3schools
像是判断式if或是迴圈for，因JavaScript已经内定这些关键字的功能，故无法使用大小写有分变数需有语意化
此规则不强迫，但有使用的话在日后维护上会方便许多，可以马上联想到这个变数的用途
例如: 红茶的价格可宣告为blackTeaPrice、萤幕宽度可宣告为screenWidth

变数中可以存放的值分为几种资料型别，常见的有:

数字(number): 0、999、-54321字串(string): 'Hello JavaScript!!'、"~HexSchool~"布林(boolean): true、false
其他还有 null、undefined、object等

---

数字型别

数字型别顾名思义就是幼稚园小学时期学到的由±0~9排列组合成的数字
假设一杯红茶的价钱为30，则可用如下方式宣告:

var blackTeaPrice = 30;  // 宣告一个名称为blackTeaPrice的变数 值为30console.log(blackTeaPrice);  // 30

宣告变数是因为数值会变动(废话)，所以说
假设今天这杯红茶打8折或是折价5元，可以这样写:

var blackTeaPrice = 30;  // 宣告一个名称为blackTeaPrice的变数 值为30blackTeaPrice = blackTeaPrice*0.8;  // blackTeaPrice打8折console.log(blackTeaPrice);  // 24

var blackTeaPrice = 30;  // blackTeaPrice值为30blackTeaPrice = blackTeaPrice-5;  // blackTeaPrice减5元console.log(blackTeaPrice);  // 25

---

字串型别

字串型别会使用单引号'或是双引号"作为一个字串的开头及结尾，以单引号做开头就要以单引号做结尾，双引号也一样，写法如下:

var str = '我是字串';var str2 = "我也是字串";

以上面红茶价钱为例的话，用字串的写法会变成:

var blackTeaPrice = '30';  // 宣告一个名称为blackTeaPrice的变数 值为'30'console.log(blackTeaPrice);  // 30

字串也可以相加:

var hello = "Hello ";  // 宣告一个名称为hello的变数 值为"Hello "var js = "JavaScript!!";  // 宣告一个名称为js的变数 值为"JavaScript!!"var hellojs = hello+js;  // 将hello与js两字串相加console.log(hellojs);  // Hello JavaScript!!

比较有趣的是，字串内如果都是数字，字串相乘时会自动转型为数字型别，计算出的结果也会是数字型别，但相加就不会转型，而是维持原本字串的特性来做相加:

var num1 = "123";var num2 = "45";console.log(num1*num2);  // 5535console.log(num1+num2);  // 12345

---

布林型别

布林型别非常单纯，只有true或false，常用在判断式上

var mybool = true; // 宣告一个名称为mybool的变数 值为true

---

null及undefined

这里对我来说算是最重要的部分，因为之前一直搞不懂两者间的差异
例如宣告一个变数aa但不赋值，这时aa应该是null?还是undefined?

var aa; console.log(aa);  // undefined

答案是undefined，但对于学过其他语言的我来说，没赋予值的变数，则该变数值就会是null啊！！所以我搞不懂也是合情合理xD
但在javascript的世界不是这样设定的
只有在将变数赋予值为null时才会是null，例如:

var aa = null;console.log(aa);  // null

简而言之，
还没赋予过值，则变数会是undefined
有赋予过值，且赋予的值为是null时才是null

---

函式

函示(function)是一个非常方便的东西，他可以用在处理任何资料的运算上
可重複使用性很高，日后维护也方便许多
基本的函式写法如下，小括号内放参数，大括号内写要执行的动作:

/* myFunctionName: 自订函示名称 * arg01: 第一个参数 * arg02: 第二个参数 */function myFunctionName(arg01,arg02){  // 要做的事情}

函示究竟在什么情况下会使用到呢? 假设一个情境
A客人在饮料店买了两杯30元的红茶，还有一杯35元的奶茶，老闆要计算总共需要付多少钱，可以这样写:

var blackTeaPrice = 30;  // 宣告红茶价格为30元var milkTeaPrice = 35;  // 宣告奶茶价格为35元var totalPrice = blackTeaPrice*2 + milkTeaPrice*1;  // 计算总金额console.log(totalPrice);  // 95

但如果B客人点了三杯30元的红茶，还有两杯35元的奶茶，这时又要做一次上面的计算吗?
对于类似这种情况的重複性动作，可以使用函示来解决:

var blackTeaPrice = 30;  // 宣告红茶价格为30元var milkTeaPrice = 35;  // 宣告奶茶价格为35元/* 定义一个函式计算总金额并回传 * blackTeaNum: 红茶数量 * milkTeaNum: 奶茶数量 */function calTotalPrice(blackTeaNum,milkTeaNum){  var totalPrice = blackTeaPrice*blackTeaNum + milkTeaPrice*milkTeaNum;  console.log(totalPrice);}// 呼叫定义的函式去计算总金额calTotalPrice(2,1);  // A客人的总金额输出: 95calTotalPrice(3,2);  // B客人的总金额输出: 160

全域变数与区域变数

讲到函示就需要提到全域与区域变数
全域变数是指在最外层宣告的变数，宣告后在任何地方都能使用它
它会存在window中，可以用变数名称来呼叫，也能用window.变数名称来呼叫他
区域变数顾名思义是在一个区块内宣告的变数，只能在当下宣告的区块内才能使用
以上面的例子来说，红茶价格(blackTeaPrice)与奶茶价格(milkTeaPrice)归属于全域变数，总金额(totalPrice)归属于区域变数

我当初知道有这种分类时就产生了疑问，既然全域变数这么方便任何地方都能使用，为什么不全用全域变数就好了?
傻B，难道小时候被家人用乳名叫包包，长大之后还要被叫包包吗，乳名长大后就不能那么叫拉，不然多害羞~
区域变数就跟乳名一样，仅限当下呼叫使用，时效过了就不需要就丢了，如此也能将效能有效率的使用
试想如果所有资料都放在全域中，浏览器会变得多肥大

(注: 区块指的是用大括号包住的範围)

---

return

函示也能做双向互动，而双向互动就需要搭配return一起使用
以刚才的例子来说，可以将程式码改为:

var blackTeaPrice = 30;  // 宣告红茶价格为30元var milkTeaPrice = 35;  // 宣告奶茶价格为35元/* 定义一个函示计算总金额并回传 * blackTeaNum: 红茶数量 * milkTeaNum: 奶茶数量  * return: 回传值 */function calTotalPrice(blackTeaNum,milkTeaNum){  var totalPrice = blackTeaPrice*blackTeaNum + milkTeaPrice*milkTeaNum;  return totalPrice;}var customerA = calTotalPrice(2,1);  // 传入2杯红茶及1杯奶茶，回传值给customerA变数console.log(customerA);  // 95var vustomerB = calTotalPrice(3,2);  // 传入3杯红茶及2杯奶茶，回传值给customerB变数console.log(customerB);  // 160

---

part1先到这，在学习基础时，因为实在是很无趣，但又是需要去了解的知识，好几次都学到一半睡着，醒来之后又再重看一遍，就怕自己漏学了什么观念，不过也算是变相的加深印象吧！！
分享学习心得也是一样，就像小学国中时期抄写课文一样，抄多了抄久了就背起来了(现在还是忘了啊)

希望日后自己来回顾时可以看得懂当初自己写的笔记，哈哈哈~