Posts Tagged With: javascript

[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://tlcheng.twbbs.org/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: 電腦和網際網路, 工作點滴, 技術分享 | 標籤: | 發表留言

[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 位部落客按了讚: