[筆記][Node.js]開始前環境準備(Portable攜帶版本或整包轉移版本)

參考文章:

• 透過使用者環境變數 Path 安裝 VS Code、Portable Git 與 Node.js（封閉開發環境適用）
• [指南] Windows 上使用免安裝 Node.js + Git Bash
• nodejs下載zip檔版。
• https://nodejs.org/en/download/prebuilt-binaries
• 64-bit Git for Windows Portable.
• https://git-scm.com/download/wi

環境變數：以上git、nodejs等需要設定環境變數Path對應路徑。

• ex:

[筆記]幾個建議的修正polyfill、bootcss、bootcdn、staticfile

參考：

• 請儘速遠離 cdn.polyfill.io 之惡意程式碼淺析
• https://blog.huli.tw/2024/06/25/stop-using-polyfill-io/

收到google通知：Action Required: Security issue affecting your landing pages
搜尋並查詢一下相關建議：
 - `polyfill.io`
   - `bootcss.com`
   - `bootcdn.net`
   - `staticfile.org`
有引用這些網站相關的javscript 等檔案，建議移除或置換。

[筆記]javascript剪貼簿

https://jsfiddle.net/boc58L0j/3/
https://jsfiddle.net/boc58L0j/9/

<table>

<tr>

  <td>文字一</td>

  <td><input type="button" value="複製" onclick="copy('文字一');"/>

  </td>

</tr>

<tr>

  <td>文字二</td>

  <td><input type="button" value="複製" onclick="copy('文字二');"/>

  </td>

</tr>

</table>

function copy(strInpt) {

  //新增

    var textArea = document.createElement("textarea");

    textArea.value = strInpt;

    document.body.appendChild(textArea);

    textArea.select();

    document.execCommand("Copy");

    textArea.remove();  

    // Alert the copied text

    alert("Copied the text: " + strInpt);

}

function copy(strInpt) {

  //新增

    var copyText = document.createElement("textarea");

    copyText.value = strInpt;

    document.body.appendChild(copyText);

    copyText.select();    

  //copyText.setSelectionRange(0, 99999); // For mobile devices

    // Copy the text inside the text field

  navigator.clipboard.writeText(copyText.value);

    copyText.remove();  

    // Alert the copied text

    alert("Copied the text: " + strInpt);

}

[2022.LEARN.020][筆記]javacript UUID

 

crypto.randomUUID()

[2022.LEARN.010]切換(開關)正式區與測試區前端console.log

問題:前端測試環境會用到console.log，但正式區想把它關閉或不顯示。

參考：

https://stackoverflow.com/questions/1215392/how-to-quickly-and-conveniently-disable-all-console-log-statements-in-my-code

概念：重寫console.log的方法

如:console.log=function(){}
正式環境啟用此方法，就可以快速關閉(不呈現)console.log的結果。

[2022.LEARN.007][筆記]Javascript小數相乘誤差

問題：5.145*1300=6688.5 

看起來本應該是6688.5的結果，
javascript 相乘之後會變成 6688.4999999...
這會導致若是要四捨五入到整數，誤差就變成1。

解法：(value).tofixed(4)


參考：

• 保哥：前端工程研究：關於 JavaScript 中 Number 型別的常見地雷與建議作法

[筆記]網頁產生PDF相關

參考：

• [C#][iTextSharp] PDF 套版：
• https://ithelp.ithome.com.tw/articles/10190232
• Create HTML 5 charts export them to PDF for free：
• https://anthonygiretti.com/2015/12/20/create-html-5-charts-export-them-to-pdf-for-free
• https://gist.github.com/relyky/005f1a3397ee2de43d64a98d927079cc

筆記關鍵字： 

1. iTextSharp
2. html canvas to pdf

[筆記]javascript 時間轉換,safari上面的問題

• 參考:https://www.jianshu.com/p/dc83b45a9480

new Date('2018-11-11 00:00:00'.replace(/-/g, "/"))
new Date('2018-11-11 00:00:00'.replace(/ /g,"T"))

[筆記]javascript date 在iphone裝置上問題

最近遇到在iphone裝置上javascript new Date錯誤的問題。

• 原先寫
• new Date('2020-01-01');//失敗
• 改成：
• new Date('2020/01/01'); //是成功的
• 不過最後還是改成以下的寫法：
• new Date(parseInt(item.YEAR), parseInt(item.MONTH), parseInt(item.DAY))
• 然後 month:1月=0

可能有相關問題導致此錯誤，組數字字串錯誤之類，但先做個筆記。

[筆記]前端與後端人員開發配合

前端開發人員常常會發生前端程式需要呼叫後端的API或是方法。

這裡提供一個簡易作法，讓大家可以簡易分工。

－－

在設計階段，前端人員最常做的方式是寫假資料在要呈現的畫面上。

如<input value=’這是要binding的測試欄位UI’ />，

設計後，可能直接轉移工作項目，讓後端人員去套用此欄位。

或是等到後端人員把API或是規格定義好之後在轉交給前端人員套用。

然後前端人員又要重套用，或是可能需要調整的東西比較多（因為都是假資料）。

所以在撰寫的時候如果有配合binding物件的寫法template相關的framework或libaray，

個人的作法是寫個簡易的框來處理這件事情就可以。

當後端開發完成,只要替換掉相對應的連結與取回結果,變可以無痛替換,

也不太需要等待與(沒溝通好的)重新設計。

＊個人與本團隊之經驗，不一定適用其它人，但提供做法，並作個筆記。

[JavaScript]Browser Console 網頁主控台

JavaScript 的程式不太好Debug，所以我們配合Browser Console，
來檢視目前程式發生什麼錯誤或是執行到什麼階段（配合log）。

以Chrome為例，開啟【開發人員工具】。（或F12）

此時我們可以發現Console中可能會存在一些資料的log。

設計師在撰寫JavaScript時，會將一些資訊log下來，方便檢視與瀏覽。

如何使用：

• Console中可能會記錄資料未載入成功的相關訊息。
• 多半以紅字顯示相關錯誤訊息，以yahoo為例。
• 設計師撰寫JavasScript：
• <script>    console.log(‘這是log訊息’);//log</script>

結論：

當程式發生錯誤時，如何快速的讓開發人員了解發生了什麼事情。

除了擷取錯誤畫面之外，配合著Console Log也是一個好的方式。

[筆記]JSLINQ

• 讓javascript使用類似linq語法篩選json(array)物件。
• 有jQuery與Javascript版本。
• 參考網站：
• https://cdnjs.com/libraries/linq.js/
• http://linqjs.codeplex.com/
• CDN:
• https://cdnjs.cloudflare.com/ajax/libs/linq.js/2.2.0.2/jquery.linq.min.js
• https://cdnjs.cloudflare.com/ajax/libs/linq.js/2.2.0.2/linq.min.js
• 本範例使用:2.2.0.2版本。
• 新版3.X.X版本以上不適用。

Ex：
<script src="https://cdnjs.cloudflare.com/ajax/libs/linq.js/2.2.0.2/linq.min.js"></script>
<script>

console.log(GetList());
function GetList()
{
var arr = [{'Email':'a@gmail.com','Name':'a'},
{'Email':'a@gmail.com','Name':'a2'},
{'Email':'b@gmail.com','Name':'b'},
{'Email':'c@gmail.com','Name':'c'}];
arr = Enumerable.From(arr) .Distinct(
function (x) { return x.Email; }) .Select(function (a) { return a; }).ToArray();
return arr;
}
</script>