2017年6月29日 星期四

[JS]網頁學習 第五章 DOM Events, DOM Events Listener 小節 心得小記

Events 這節教一個實作法:

document.getElementById("myBtn").onclick = displayDate;

看似很方便,但會導致程式 runtime 變長吧?
----

實作範例錯誤集:

<button onclick=myFunction>Click Me</button>

<span onMoveover="this.style.color='red'">Mouse over me!</span>

還有疑似錯誤(因結果跑得出來,但程式碼與正解不同):

document.getElementById("myBtn").onclick = displayDate;
----

解答:

<button onclick="myFunction()">Click Me</button>

<span onmouseover="this.style.color='red'">Mouse over me!</span>

document.getElementById("myBtn").onclick =
function(){displayDate()};

----

Events Listener 小節有個酷炫的範例,
隨著視窗被調整改變顯示的文字:

<p id="demo"></p>

<script>
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = Math.random();
});

</script>


[JS]網頁學習 第五章 DOM Elements, DOM CSS 小節 心得小記

在範例練習中,寫錯成;

<p>Use the DOM to change my text!</p>

<script>
document.getElementsByTaName("p").innerHTML = "Change"
</script>
----

  <head>
    <title>W3Schools Demo</title>
  </head>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"The title of this document is: " +
document.getElementByTagName("title")[0].innerHTML ;
----

<p id="demo">Hello World!</p>

<script>
document.getElementById("demo").style.backgroundcolor = yellow;
</script>

在此紀錄犯過的錯誤,



正解為:

document.getElementsByTagName("p")[0].innerHTML = "Change"
----

document.getElementById("demo").innerHTML =
"The title of this document is: " +
document.title ;
----

document.getElementById("demo").style.backgroundColor = "yellow";

[JS]網頁學習 第四章 Function Closures小節 心得小記

本節先說明 local variable & global variable,
而後解釋 closure。

<button type="button" onclick="myFunction()">Count!</button>

<p id="demo">0</p>

<script>
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>

以下是網站解釋:

The variable add is assigned the return value of a self-invoking function.

The self-invoking function only runs once. It sets the counter to zero (0), and returns a function expression.

This way add becomes a function. The "wonderful" part is that it can access the counter in the parent scope.

This is called a JavaScript closure. It makes it possible for a function to have "private" variables.

The counter is protected by the scope of the anonymous function, and can only be changed using the add function.

紅字不懂啊!

2017年6月28日 星期三

[JS]網頁學習 第四章 Function Definitions, Function Parameters小節 心得小記

原來 Hoisting 也適用 function,
所以才會出現先有 function( ); 後面才宣告該 function 執行碼。

myFunction(5);

function myFunction(y) {
    return y * y;
}

但這樣是個好的寫法嗎?
----

以下認知待商榷:

未被呼叫的 function,其參數稱為 parameters;
被呼叫的 function,其參數稱為 arguments。

method 是長的像 function 的 property。


[JS]網頁學習 第三章 Object Methods, Object Prototypes小節 心得小記

總覺得這是一個很好的參考範例,使用到 this 及帶有參數的 function,
因此特別收錄,以便隨時參閱:

<script>
function person(firstName,lastName,age,eyeColor) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.eyeColor = eyeColor;
    this.changeName = function (name) {
        this.lastName = name;
    }
}
var myMother = new person("Sally","Rally",48,"green");
myMother.changeName("Doe");
document.getElementById("demo").innerHTML =
"My mother's last name is " + myMother.lastName;
</script>
----

講述 prototype 若要新增新的 property/ method 不可使用如下
(新增一般已存在物件的syntax):


Person.nationality = "English";

因 prototype 並非已存在物件,而是建構子;
若要新增,則要在定義 prototype 區塊寫入。

但是允許以下作法,使用 prototype property:

Person.prototype.nationality = "English";
Person.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};

2017年6月27日 星期二

[JS]網頁學習 第二章 JS Forms, Forms API 小節 心得小記

說明、舉例驗證 user input,避免無填入或範圍外的數值,
這裡提到經常使用在檢驗數字。

輸入錯誤可選擇顯示跳出視窗,或是在 input 附近提示。
驗證無填入、跳出視窗:

<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="/action_page_post.php"
onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>


</body>

以上畫紅字不懂:
1. 為何不可刪除 ["myForm"]?
2. 輸入 false 是為了停止繼續執行?
3. 可以使用 onclick 嗎?

試著將var x 改為常用的 getElementById("fname")、
onsubmit 改為 onclick 並移至 input type="submit" 中,
完全錯誤不驗證跳下一頁!why~

另外,document.forms[][] 好像是第一次出現,留意一下這個句型。

2017年6月26日 星期一

[JS]網頁學習 第一章 JS RegExp, JS Performance, JS JSON 小節 心得小記

使用 RegExp 來搜尋字串,
若 modifier 設 i ,則搜尋無大小寫之分。

----

接近第一章尾聲,
開始講解如何撰寫是較佳的句型,使程式更有效率,
是很實用也很貼心的數個小節,而非我原以為的行數越少越好:

Bad:
var i;
for (i = 0; i < arr.length; i++) {
Better Code:
var i;
var l = arr.length;
for (i = 0; i < l; i++) {

----

<h2>Create Object from JSON String</h2>

<p id="demo"></p>

<script>
var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

上例用 JSON 編寫,但又為何要多此一舉用 JSON 呢?
可能後面章節會說明,先在此紀錄問題。

2017年6月22日 星期四

[JS]網頁學習 第一章 JS Type Conversion, JS Bitwise 小節 心得小記

最喜歡樹狀圖 & 條列式了!
以下引用網頁內文,type們的彙整:

In JS there are 5 different data types that can contain values:

  •   string
  •   number
  •   boolean
  •   object
  •   function

There are 3 types of objects:

  • Object
  • Date
  • Array

And 2 data types that cannot contain values:

  • null
  • undefined
----

這個章節出現一個回傳並印出 "true" 的範例,在此練習解釋:

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>

在 id = "demo" 的標籤加入 isArray(fruits) method 的回傳值,
所以要解釋 isArray():
isArray(example) 回傳括弧中參數 example 的 constructor 為何種型別方法,
並將回傳結果顯示為字串 (string? array?),
indexOf使得若字串 (string? array?) 中有 "Array" 字串,則 indexOf 必大於等於0,
故 > -1 為 true.


以上除了 (string? array?),其他都較有把握解釋正確。
這邊將腳本碼改成下述也是回傳 true,意義應該相同:(待高人指點)

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = 
(fruits.constructor.toString().indexOf("Array") > -1);
</script>

網頁中還有更簡化的範例,使用到" === ",也不難該試著想想看。

----

Bitwise 的章節,以下範例有疑問:
Converting Decimal to Binary
Example

function dec2bin(dec){
    return (dec >>> 0).toString(2);
}

dec >>> 0 表示什麼?將參數補0右移0個位子?
toString(2) 的2表示2進位嗎?

2017年6月21日 星期三

[JS]書面學習 犀牛書 第一部第一至四章 心得小記

第一章

在 12頁時放上一個貸款計算的範例,

這時才知道, canvas 的功能發揮在此:

使用者填入資訊 (本金、利率、分期數),
canvas 汲取資訊繪出圖樣 (償貸交叉圖表)

因先前的書都是在程式碼中繪成的範例,
所以後知後覺發現是這樣厲害的功能!

----

第三章

型別「只有」兩種:primitive type, object type。
非 primitive type 則 object type,有非p則q的感覺。
primitive type : numbers, strings, Boolean, (null and undefined)

實務上對 null 使用 typeOf operator 會回傳 "object",
null 被看成自成一型別,它是這個型別的唯一成員。

對 undefined 使用 typeOf operator 會回傳 "undefined",
也是自成一型別的唯一成員。

物件導向語言的解釋
「JS是物件導向語言
粗略地說,代表型別它們自己可以定義 methods 來處理 values(運算值),
而非使用一個 global function 去處理各種型別的運算值。
例如:

   使用 a.sort() // invoke a 的 method,
   而不是使用 sort(a) // 把 a 傳給一個 sort() 函式。」--第30頁


型別分類除了基本型別與物件型別,
也可分為有方法與沒方法 (
null and undefined) 的型別;
還可分為可變與不可變的型別
primitive type 屬 immutable,
object type 則 mutable。

2017年6月20日 星期二

[JS]網頁學習 第一章 JS Array Sort 小節 進度紀錄

用網站學有點吃力,晚上看螢幕也覺得很刺眼,
試著改成網站 ( w3school JS ) + 書目 ( 犀牛書! ) 雙管齊下,所以時間要重新設定。

網站進度原訂 6/30,目前已落後 2日份量;

犀牛書大約 1000頁,與 HF 系列排版不同,字較密集,留白、圖片較少
加上工作關係,應該最快也要 15天才能讀完。

皆以扣除假日、工作時數計算:

改成 w3school 網站研讀量每日減半為 4p / d,日期拉長至 7/15,
犀牛書若要 15日看完,需在工作最鬆的情況,先估計 20日,7/11 ( 50p / d )。

若能維持至少 w3school 4p / d,則能在 7/11 與犀牛書同步完成。

2017年6月19日 星期一

[JS]網頁學習 第一章 JS Array Sort 小節 問題

以下引用 w3school 網站內文

The Compare Function
The purpose of the compare function is to define an alternative sort order.

The compare function should return a negative, zero, or positive value, depending on the arguments:

function(a, b){return a-b}

唸到這邊非常卡:

1. a, b 是什麼?
並無宣告 var a, b,所以是預設 Arrays 中的每個 element 嗎?

2. 為何 a - b < 0 則 a 就排序在 b 前面,也是預設嗎?
return 結果可為負數、0、正數,分別如何影響排序?

3. 為何改為 return b - a 就是從大到小排序?

4. 為何改為 return 0.5 - Math.random() 就是亂數?不需要用到 a, b了嗎?


----

var points = [40, 100, 1, 5, 25, 10];

document.getElementById("demo").innerHTML = myArrayMax(points);

function myArrayMax(arr) {
    return Math.max.apply(null, arr);

}

null 的作用是? 為何將 Math.max.apply() 參數去掉或打錯就變 -Infinite?

----

<h2>JavaScript Array Sort</h2>

<p>Click the buttons to sort car objects on age.</p>

<button onclick="myFunction()">Sort</button>

<p id="demo"></p>

<script>
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}]

displayCars();

function myFunction() {
    cars.sort(function(a, b){return a.year - b.year});
    displayCars();
}

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}

</script>

上述是依照年份排列,改成依 type 字母排序,
想取出各 element 的 type 再以 charAt(0) 比較,
  cars.sort(this.type.charAt(0));
測試結果無法將 type 依序排列,why ?

2017年6月16日 星期五

[JS]網頁學習 第一章 JS String Methods 小節 進度紀錄

用網頁學習省錢但無法好好筆記、快速翻閱,
相較容易分心,但能跟著實作,是相當重要的優點。

十個章節 全113小節 (113頁網頁),
距離上次紀錄是 6/14 大約 00:00起至今 6/17 02:20,
經過 3天,其中 6/16 穿插了一份外地工作,
讀完 18頁,估算成 7p / d 好像有點慢,雖全英但前面章節較簡單,應更凝聚專注。

透過中文學習,可以讓你快速入門;
透過英文學習,才能讓你真正理解。
-
Will 保哥

若去除假日、工作日 (工作日估一週一天,會念比較少的量),
且考慮難度遞增,(113-18)/7=13.6 d
那就暫定 6/30 共14d(含工作日、假日) 第一次閱畢,快快趕工了!
還有 bootstrap 跟今天入手的 HF jQ ...一大堆在排隊,
專注專注!


https://www.w3schools.com/js/default.asp

第一章 JS Tutorial         49小節
第二章 JS Forms           2小節
第三章 JS Objects         4小節
第四章 JS Functions      6小節
第五章 JS HTML DOM    13小節

第六章 JS Browser BOM  8小節
第七章 JS AJAX              10小節
第八章 JS JSON              11小節
第九章 JS Examples        8小節
第十章 JS References      2小節

2017年6月13日 星期二

[HTML/CSS]別再說你不懂HTML5 第一次閱畢

趕在 6/13 23:48 讀完。

又一本後半部章節使人節節敗退的書,
從中後半的 canvas 章節開始以雜誌翻閱方式看,
很多部分沒有細講,在單元開始的引文也寫
「內容會有不少困難主題,請努力理解它們。」

看來趕快把 JS 功力打起來治百病,
沒有 JS 底,真是越唸越覺得心虛,對不起付出的時間。

接下來, JS 學習天數先以10天為目標。
以免費線上課程為主,但書錢該噴還是要噴。
都要吃土了,還是好想買 Taker 網頁基礎15天的課程啊

2017年6月12日 星期一

[HTML/CSS]第三章 UNIT 37 下載字形:進度紀錄 & 心得小記

趕在 6/12前唸完的計畫大失敗,
中間有看 Taker 的切版技巧,但遇到六日即可能會因約會打斷計畫,
已控制在兩周一次、一天半的約會還是會嚴重耽誤,
看來要把假日的時間預先抓出,不能放在計畫內。

這兩天沒有工作,公、私約會也較少,進度應可大躍進,
6/13 可以唸完剩餘一百頁的《別再說你不懂HTML5》。

進入HTML5的章節,講述很多新標籤,
看來還是得靠作品集邊做邊記才實為上策。
今天發現進度條 & 技能樹網站:

六角學院 - 邁向前端工程師之路
https://quip.com/D59vAxcgG8Qc

2017年6月7日 星期三

[jQuery]10天就懂!一定學會jQuery的36堂關鍵課程 第一次閱畢

6/7 PM 3:38 完成初次閱畢,是本錯字、錯誤內容不少的書。

後面章節利用 xampp,但已經是三年前的書,

該網站的內容已不相同,找不到security的位置在哪,
所以從 Lesson 27 到最後 Lesson 36 的範例都無法實作實現。

也不知道是因為台灣出版社的問題,還是本來著作就是如此,
後半章節講解錯字跟錯誤都較多,
感到虎頭蛇尾,有點失望,後面非常困難,
應該先讀 JS 再念 jQuery 才是。

批評完也說點好話,裡面教的動畫效果呈現,的確讓人振奮,
只是用到 this 的時候,思路要夠敏捷清楚,不然很容易錯亂。


接著是JS的線上學習,及另一本《別再說你不懂HTML5》研讀,
書籍的出版社與 10天jQuery 相同,希望不會再錯誤連連。

頁數 200,且在念 HF 系列前就是碰這本,
估計 3天結束,DL 是 6/12。

起始日延後至 6/10,因配合 6/10 UX 講座,得先看完手上相關書目。
雖然還是會偷唸一些。

線上學習目前沒實做過,時間估上還無法做估算,
總之持續進度記錄,再做統計推算。

2017年6月4日 星期日

[jQuery]第五章 Lesson21 徹底研究事件物件:進度紀錄

這本書屬於入門書,所以以極簡方式說明,
做到盡量讓初學者理解,但說要徹底理解還是需要靠其他書籍、網站輔助。

從第五章  Lesson16 物件處理開始難度開始直線上升,進度因此緩下來。
Lesson16 瞬間使用到 this ,也提到:

「各位讀者讀到這說不定會覺得,不如一開始就先在HTML或CSS設定就好,
    何必透過jQuery處理呢?」

忍不住在旁邊用力寫下「對呀!」
真是善解人意的一本入門書啊!
還請讀者忽略太艱澀的概念,先繼續學下去。

6/5 中午,進度 59%。
想在 6/6 結束還有 40%,可能很困難,
最慢要在 6/7 下午完成,拒絕拖延症。

2017年6月3日 星期六

[jQuery]第四章 Lesson15 元素之間穿梭:進度紀錄

jQuery第2天,進度達43%,
離預估的7天( 6/8前)應可順利提前至( 6/6)達成。
目前還沒感受到其威力,只覺得是不是「檢查html碼的人」在使用?

不然其實都可以在html就簡單解決,何必多加上script標籤。

html/css整本複習改為搭配作品集進行,時間增長為150天。

JS方面換個方式學習:以大Peter前輩提供的網站為參考,
感謝Mina熱心引薦,同一天認識兩位貴人!

且建議一開始可以從 landing page開始,
先不用想動態,純用 CSS與 html實踐的靜態切版。


w3cschool 免費教學網站
https://www.w3schools.com/

https://www.w3schools.com.cn/

codeschool 免費教學網站
https://www.codecademy.com/

CodePen 有很多創作者實作的小東西可以學習
https://codepen.io/

2017年6月2日 星期五

[HTML/CSS]深入淺出 HTML and CSS 第一次閱畢

趕在 6/2前閱畢,首次閱讀以blog紀錄來看花了 16天,
實際上因為在 5/17是先唸其他本書籍,所以應該更少,
暫時抓 13天,第二次整本複習因為也非只專門攻讀複習,
時間先抓7天,但可能是個大挑戰。

接著要唸的是 深入淺出JavaScript (2008/07初版),
同系列書籍,以厚度來估算(600/700)應該會較快讀完,
但同時有另外工作會占用時間,
還是要抓短不抓長,估計11天唸完,趕上6月中生作品集。

所以,6/15完成 HF系列 HTML and CSS複習第二次、JS已唸完。



出現了一些問題,從圖書館借來的HF JS在官網上的範例已不是舊版本,
新版本的檔案為HF JS Programming,待買新書再念。
先念jQuery 《10天就懂!一定學會jQuery的36堂關鍵課程》,
估計7天( 6/8前)唸完,至於JS用網路教學的資源來學習。