Posts Tagged With: javascript

[Web] JavaScript 迴圈隱式變數是全域變數


很少有機會在網頁裡面寫遞迴。最近剛好有個邏輯要用遞迴,結果寫下去就變無窮迴圈了…

所以我做了個簡單的測試範例後,用這個範例萬事問臉書。如下圖:

EnumData 為一個列舉資料的遞迴函數測試範例

當時我並沒有注意到右邊箭號的分區。

這張圖中,變數 ibd 是一個在迴圈內的隱式宣告,一般迴圈的範例都是這樣,所以我也照用了,而在遞迴呼叫中,被呼叫的 ibd 會被重置為 0 ,以至於上層的迴圈永遠無法跑到 2 ,永遠就在 0, 1 打轉。

黃忠成老師給個建議,改用:

for (let ibd=0; ibd<dbArray.length; ibd++){

果然可以。但是我的網頁需要相容 IE 舊版,經查 let 為 ES6 (ES2015) 的規範,所以在 IE 舊版並不支援。

就在苦無對策的時候,忽然發現,右側視窗中,ibd 在全域變數內?隱式宣告預設是全域變數不是區域變數?我一直以為隱式宣告是類似 using 之類的區塊變數,只在迴圈中有效。

既然知道是全域變數,就改成:

var ibd;
for (ibd=0; ibd<dbArray.length; ibd++){

則 ibd 變成函數層級的變數,其實變成函數層級變數就可以了,到不用勉強一定要區域變數,這樣遞迴的變數就不會互相干擾,搞定收工。

當然我也測過 Chrome ,不過截圖就用以 Chrome 為底的 Edge ,因為開發工具畫面是中文,比較親善:

迴圈變數的隱式宣告在 Chrome 也是全域變數

開發者要養成寫測試專案或測試例,這樣有助於縮小範圍鎖定問題,也容易跟其他人溝通。

謝謝黃忠成老師。

Categories: 工作點滴, 技術分享 | 標籤: | 發表留言

[Web] 前端 JavaScript 開發與除錯


前幾天,我針對一個 VBScript for IE 升級到 JavaScript 的網頁加入新功能除錯,由於網頁很亂,所以我考慮用 Visual Studio Code 的 console.log 來除錯,但不知道是不是因為我都用可攜版 (免安裝版) ,我的 JavaScript Runner 跑起來不正常,無法用來除錯,所以我就考慮用網頁來除錯器。

首先先搜尋了一些 OnLine 的 JavaScript ,包含 w3school ,但都不是十分滿意,所以決定自己來寫一個簡單除錯器:

JavaScript 執行器:http://www.tlcheng.tk/Tools/Runner/Runner.htm

IE11 預設執行畫面

畫面預設分幾個區塊,用一個 HelloScript 程式碼作為預設功能展示,點選 [執行] 按鈕,會跑 eval(程式碼 + 執行指令) 送到 輸出,執行指令有點像 IDE 的即時運算視窗。

所以當點選 [執行] 按鈕時,會跑藍色線,依據執行指令 HelloScript 呼叫原始碼 HelloScript ,這也表示原始碼可以有一些無關的程式碼在那,這樣有助於將 .js 檔案內容直接複製進來測試。

在原始碼 HelloScript 使用了常見三個輸出,訊息盒 (alert)、綠線是前端網頁 (使用 divOutput)、紅線是輸出 (函數回傳),輸出結果如下。

訊息盒輸出
網頁及回傳輸出

當 JavaScript 發生錯誤時,會把錯誤碼、錯誤訊息、堆疊訊息送到 [輸出],例如故意在 [執行命令] 把函數名寫錯。

常用的 console.log 可正常輸出到瀏覽器開發工具的主控台。

IE11 console.log 測試
IE11 開發工具輸出到主控台
新的 Edge console.log 測試
新的 Edge 開發工具輸出到主控台
Chrome console.log 測試
Chrome 開發工具輸出到主控台

把 StrTools.js 內容全部貼到 [程式碼],測試瀏覽器的開發工具是否能正常除錯。

貼入 js 檔案內容進行測試
IE11 開發工具可針對貼入程式碼除錯
新 Edge 開發工具可針對貼入程式碼除錯
Chrome 開發工具可針對貼入程式碼除錯

完成了除錯器開發後,我當然找到我的問題,但這是一個很悲傷的故事。

new Date(1899, 12, 30); // 回傳 1900/01/30

一般直覺以為,上面的物件是 1899/12/30 ,但是 JavaScript 是 1900/01/30 ,因為 Month 引數是 0 ~ 11 ,不是 1 ~ 12 啊~~~ 我回翻我所有的原始碼發現,我在 StrTools.js 這個公用函數中,2018 以前的版本都有在 Month 處 加減 1,不知道何時忘了,這個事件必須記錄下來,以警惕自身。

微軟 JavaScript 的線上手冊

Categories: 工作點滴, 技術分享 | 標籤: | 發表留言

[Chrome] 模擬行動裝置瀏覽器


話說,去年 10 月就在喊,Chrome 會在去年 12 月放出 低耗能 的正式版,終於在前兩天放出來了,紀念一下今天更新 Chrome ,就來看看工作利器,模擬行動裝置瀏覽器的操作步驟。

Chrome 57省電有一套,將背景分頁CPU使用率限制在1%內

選 Chrome 是因為夠直覺,但最重要一點是虛擬機沒法比的,就是 桌面版 Chrome 內建的開發工具,可以方便針對 javascript / css / html 語法除錯。

直接上 Chrome 57 的螢幕截圖:

從右上角 設定符號 展開選單,點選 [開發人員工具]

開發人員工具

開發人員工具

在開發工具 展開設定選單,點選 [Settings]

設定

設定

勾選需要模擬的內建裝置,或自己新增自訂裝置

新增自訂裝置

新增自訂裝置

開發工具在工具列點選 切換網頁為 裝置模擬畫面

切換網頁為裝置模擬畫面

切換網頁為裝置模擬畫面

選擇要模擬的行動裝置,這邊以 Microsoft Lumia 950 為例。

選擇模擬裝置

選擇模擬裝置

從工具列可以修改長、寬 (預設裝置),若已選定模擬裝置,只能選擇縮放比例跟轉向,部分裝置不提供轉向功能。

轉為橫向

轉為橫向

操作時,可看到一個大大的圓圈,是滑鼠模擬手指點選的中大圓形。

滑鼠模擬手點為中大圓形

滑鼠模擬手點為中大圓形

IE 11 雖然也有簡單的模擬功能,但是沒有這麼視覺化,Chrome 桌面版在桌面狀態下不支援 viewport 設定及 SVG 縮放,但是在行動裝置模擬狀態時則支援。

紀念一下 Chrome 節電 66%~

Categories: 電腦和網際網路, 行動裝置, 工作點滴 | 標籤: | 1 則迴響

[VSCode] 輕巧的程式碼編輯器


我一直在找一個類似 VBA 環境的 javascript 開發環境,最好是輕巧一點,大部分的環境都搞得很複雜,我只想簡單測試一個 function ,結果得搞到變成一個方案,並透過編譯或轉譯再由其他環境執行。

我自己有在公司的軟體中掛入 VBScript 支援功能,也就是直接呼叫 Script Control ,當然同一個引擎也可以跑 javascript ,理論上,自己寫個 WinForm 包 Script Control 就結束的,但是在編輯環境上會花很多時間,所以最好能找現成的。簡易型的我做成網頁跑:
http://www.tlcheng.tk/TLCheng/Basic/vbs/IDE/Runner.htm
支援 vbscript/javascript ,要用 IE 相容模式跑。

最近逛到 Code Runner 可以直接跑~
Code Runner: https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

看了一下,是 Visual Studio Code(VSCode) 外掛套件~
Visual Studio Code: https://code.visualstudio.com/

說實在的,已經有 Visual Studio 2015 Ent. 下,覺得不需要再裝 VSCode ,VSCode 支援 Windows/iOS/Linux ,本來以為是跨 OS 才會想要玩的,但是實在很想測 Code Runner ,又看到 VSCode 有免安裝版,50MB 下載解壓縮就能執行,心動之下就抓下來玩了:
https://code.visualstudio.com/docs/?dv=winzip

執行以後,安裝了兩個擴充套件,Code Runner 及 mssql 。

第一次開啟
第一次開啟

Code Runner 說經過設定,可以讓你在 VSCode 下直接跑以下語言:
C, C++, Java, JavaScript, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, C# Script, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, 及自訂命令

貼一段過去寫好的 javascript,依據 Code Runner 網頁的範例跑,可以直接測試 javascript:

執行 javascript
執行 javascript

再貼一段過去寫好的 vbscript,測試一下,也可以正常跑:

執行 vbscript
執行 vbscript

javascript 看起來應該是 VSCode 本身就支援,vbscript 則自動呼叫 cscript 編譯執行,結果畫面:

回傳 vbscript 執行結果
回傳 vbscript 執行結果

VSCode 的特色就是超快,自從 VS2013 起,外掛套件一多,開啟速度就慢到不行,安裝 VS2015 時,只裝不到 10 個套件,也是慢到不行,開機後第一次執行大概要 3 分鐘才能進到 VS2015 ,所以忽然發現,VSCode 可以當作平常簡易開發 html / javascript / asp.net 原始碼的環境,因為免安裝,還可以丟到 Embedded OS 內跑。玩玩 Code Runner 忽然發現,還可以連 SQL Server ,想到 SSMS 也越來越慢,簡直是測試 T-SQL 利器。 (需安裝 mssql)

在 VSCode 開啟 .sql 的檔案,會自動載入 mssql 套件環境:

自動載入 mssql 套件環境
自動載入 mssql 套件環境

滑鼠右鍵選執行查詢:

執行查詢
執行查詢

第一次使用須建立連線:

建立連線
建立連線

輸入 server 資訊:

server
server

輸入資料庫:

資料庫
資料庫

選擇驗證方式並輸入驗證資訊:

驗證方式
驗證方式

完成建立連線:

完成建立連線
完成建立連線

第二次使用 (指重開 VSCode) 直接選擇已建立的連線:

選擇已建立的連線
選擇已建立的連線

直接就可以顯示 查詢結果。

查詢結果
查詢結果

VSCode 免安裝真的很方便,速度又快,只是要看原始碼的話,或是簡單開發,完全可以參考使用阿~~~

Categories: 電腦和網際網路, 工作點滴, 技術分享 | 標籤: | 1 則迴響

[CSS] 修改共用樣式快速替換字型大小


其實這是一個自作孽的故事。

我以前都用 vbscript 寫網頁,一方面以前是 IE 的天下,一方面我立志成為 BASIC 的推廣者,所以對於 vbscript 的強迫中獎,不遺餘力。

我先前有網頁會偵測視窗大小,自動調整字型大小,但是受迫於大環境下,不得不 javascript 化。

對於一個已經製作完成的網頁,樣式通常都設定在裡面,所以改既存樣式是比較省事的方法,也能取得樣式變化的一致性。

在變更樣式的過程中,我寫了個函數,引數是 樣式ID,跟 Class 名:
GetStyleObject(cssIdName, styleName)

例如:
<link type="text/css" rel=’Stylesheet’ href="CssFile.css" id="cssIdName" />
<span class="styleName">樣式名</span>
而在 vbscript 的部分使用下面程式碼可正常縮放字型:
GetStyleObject(“cssStationText", “.DataTime").fontsize = 32 * scaleZoom & “pt"

在 javascript 的部分使用下面程式碼,則字型不會縮放:
GetStyleObject(“cssStationText", “.DataTime").fontsize = 32 * scaleZoom + “pt";

最後追蹤發現問題的原因是 vbscript 大小寫意義相同,而 javascript 大小寫意義不同,所以 fontSize 的 S 要大寫,沒有注意到…

所以這是一個自作孽的故事。

好,下面就用最簡單的範例來分別貼出 vbscript / javascript 的程式碼吧。


vbscript
   Function GetStyleObject(Byval cssIdName, Byval styleName)
      With document.styleSheets
         For i = 0 To .length - 1
            If .item(i).id = cssIdName Then
               Set objstyleSheet = .item(i)
               Exit For
            End If
         Next
      End With

      With objstyleSheet.rules
         For i = 0 To .length - 1
            If .item(i).selectorText = styleName Then
               Set GetStyleObject = .item(i).style
               Exit For
            End If
         Next
      End With
   End Function

   Sub window_onresize()
      scaleZoom = document.body.clientWidth / 1366
      GetStyleObject("cssStationText", ".DataTime").fontsize = 32 * scaleZoom & "pt"
   End sub
 

javascript
   function GetStyleObject(cssIdName, styleName) {
      var objStyle;
      var allStyles = document.styleSheets;
      for (i=0; i<allStyles.length; i++){
         if(allStyles[i].id == cssIdName) {
            objStyle = allStyles[i];
            break;
         }
      }

      for (i=0; i<objStyle.rules.length; i++){
         if (objStyle.rules[i].selectorText == styleName) {
            return (objStyle.rules[i].style);
         }
      }
   }

   function window_onresize(){
      var scaleZoom = document.body.clientWidth / 1366;
      GetStyleObject("cssStationText", ".DataTime").fontSize = 32 * scaleZoom + "pt";
   }
Categories: 工作點滴, 技術分享 | 標籤: | 發表留言

在WordPress.com寫網誌.

%d 位部落客按了讚: