第25個冬天

發表文章

目前顯示的是有「Javascript」標籤的文章

使用onblur註冊js事件當中alert和focus使用導致死循環問題排除

- 2月 14, 2022

在網頁上表單某個元素若失焦時候就會觸發OnBlur事件失焦的意思指的是失去焦點，瀏覽器是根據滑鼠游標聚焦至其他元素時，認定原本的元素失焦。 onblur="將觸發的 javascript function" 一個alert死循環的發生原來是因為onblur後續再做focus的寫法沒有立即執行因為alert會讓本身網頁原先停駐元素失焦這裡我們可以於原先focus外層包一個setTimeout 強制讓其恢復具焦 setTimeout() 的作用是在延遲了某段時間 (單位為毫秒) 之後才去執行「一次」指定的程式碼所以建議不要在onblur 去使用到alert Ref: Javascript alert messages in infinite loop https://stackoverflow.com/questions/6356341/javascript-alert-messages-in-infinite-loop 使用onblur+alert+focus导致的死循环解决 http://jianboge.com/d321029

閱讀完整內容

alert換行\n沒用要\\n

- 11月 05, 2021

透過C#(asp.net)後端註冊javascript時候有時要alert警示跳窗內容需要換行此時後端加上換行要記得用 \\n (要兩反斜線) Ref: Ｃ#換行 http://kingofamani.blogspot.com/2015/01/javascript-alert.html Javascript "Alert" From Code Behind https://www.dreamincode.net/forums/topic/85980-javascript-alert-from-code-behind/ New line in JavaScript alert box https://stackoverflow.com/questions/1841452/new-line-in-javascript-alert-box?rq=1 New line in text in javascript alert(\n is not working also <br />) https://forums.asp.net/t/1534698.aspx?New+line+in+text+in+javascript+alert+n+is+not+working+also+br+

閱讀完整內容

Javascript基礎語法學習介紹6_es6_promise的使用筆記

- 2月 16, 2021

Promise 代表一個async操作，主要是用來解決call-back函數地獄式嵌套問題(call back hell) 主要有三種狀態:pending(進行中) , resolved(已經成功) 和 rejected(已失敗) 一旦狀態改變就不會再變，任何時候都能獲取這結果。 Promise 本身就是一種object，因此我們可以直接去new它。 Promise物件的狀態改變只會有兩種結果從pending變為resolved和從pending變為rejected -> 成功(resolve)/失敗(reject) -> 成功就決定去做這件事情 -> 失敗就放棄去做這件事情 //簡單寫法-直接new .ver1 new Promise(function(resolve,reject){ //resolve();//成功就決定去做這件事情,return 1 reject();//失敗就放棄去做這件事情,return 2 }).then(function(){ alert(1); },function(){ alert(2); }); //簡單寫法-直接new.ver2 ... catch new Promise(function(resolve,reject){ //resolve();//成功就決定去做這件事情,return 1 reject();//失敗就放棄去做這件事情,return 2 }).then(function(){ alert(1); }).catch(function(){ alert(2); }) 複雜寫法-實體化後用變數存.ver1 let promise = new Promise((resolve,reject) => { .... }) promise.then(res => { console.log('res => ' , res); },err => { console.log('err => ' , err); }) 複雜寫法-實體化後用變數存.ver2 let promise = new Promise((resolve,reject) => { .... }) promis...

閱讀完整內容

Javascript基礎語法學習介紹5_navigator Object使用

- 12月 22, 2020

Javascript基礎語法學習介紹1(輸出/變數/判斷式/函數/陣列/迴圈) Javascript基礎語法學習介紹2_Object Javascript基礎語法學習介紹3_Javascript背後運行原理(js引擎)_ExecutionStack Javascript基礎語法學習介紹4_Function運行原理_Hosting、Scope與 ScopeChain觀念在網頁開發上有時候會有需要判斷Client端用捨麼瀏覽器和相應資訊甚至去得知是在捨麼作業系統發出瀏覽目前網頁的請求黃色標註起來代表實務上較常用 navigator.platform 獲取哪個作業系統資訊 Windows OS 就是Win前綴(Ex: Win32、Win16) Mac OS 就是Mac前綴(Ex:MacIntel、Macintosh、MacPPC、Mac68K) Unix或Linux 就可能有HP-UX、SunOS、Linux i686、Linux armv7l.... navigator.product 瀏覽器的引擎名稱 Gecko,webkit,trident 現在好像無論Chrome、IE、EDGE、Firefox、Opera印出來都會是Gecko了 navigator.cookieEnabled 可用於檢查瀏覽器的cookie機制有沒有開啟 navigator.appCodeName 獲取瀏覽器的代碼名稱例如Mozilla 現在好像無論Chrome、IE、EDGE、Firefox、Opera印出來都會是Mozilla了 navigator.appName 例如Netscape 現在好像無論Chrome、IE、EDGE、Firefox、Opera印出來都會是Netscape了 navigator.userAgent 獲取瀏覽器完整的版本資訊 Chrome: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36 Edge: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrom...

閱讀完整內容

ASP.NET_實踐透過POST方式來開啟另一webform_如何將C#或VB.NET的List透過Json.NET處裡完傳給js

- 1月 22, 2020

此時可能已經填塞了兩個List物件 lsColDataKeyCollection lsColDataValCollection 然後是透過Grid選取某列時做出傳送的【發送端】父頁面後端VB.NET Code 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Protected Sub Page_Load ( ByVal sender As Object, ByVal e As System . EventArgs ) Handles Me . Load Dim XC As New NameValueCollection ' ...... do something If Page.IsPostBack = False Then ' 頁面第一次載入只執行一次 ' ...... do something End If AddHandler GridShipContent.SelectedIndexChanging, AddressOf OnGridViewSelectedIndexChanging End Sub Private Sub OnGridViewSelectedIndexChanging(sender As Object, e As GridViewSelectEventArgs) If e.NewSelectedIndex < 0 Then Exit Sub ' ...... do something Me . Page . ClientScript . RegisterStartupScript ( Me . GetType (), "PostTest" , "DoPostOpen()" , True ) End Sub 前端Js部分 1 2 3 4 5 6 7 8 9 10 11 ...

閱讀完整內容

ASP.NET_搭配javascript 實踐表頭靜止而資料列滾動

- 1月 21, 2020

這次要分享的技巧是如何固定表頭只保留下方資料列(當資料量多會很多列時候) 避免讓使用者往下滾表頭不見操作起來不開心程式碼 Head部分的Js 跟body部分的GridView 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 <head runat= "server" > <meta http-equiv= "Content-Type" content= "text/html;charset=big5" /> <title></title> <script type= "text/javascript" > function DoAutoScrollAdujst () { var gv = document.getElementById( "<%= GvLeaveRecords.ClientID%>" ) ; var gvTmp = gv.cloneNode( true ) ; for (idx = gvTmp.rows.length - 1 ; idx > 0 ; idx -- ) { gvTmp.deleteRow(idx) ; } gv.deleteRow( 0 ) ; GvHeader.appendChild(gvTmp) ; } window.onload = DoAutoScrollAdujst ...

閱讀完整內容

Javascript基礎語法學習介紹4_Function運行原理_Hosting、Scope與 ScopeChain觀念

- 3月 03, 2018

我們於之前這篇有簡單介紹function語法使用但是那時還來不及詳細解說其中原理 Function運行原理 Function 之定義&調用示例 1 2 3 4 5 6 7 8 9 10 11 //沒有參數的function function myFunc(){ console.log( 'This is no parameter function' ); } myFunc(); //有參數的function function sum(a,b){ var c = a+b; console.log(c); } sum( 3 , 4 ); 每一個function於程式運行中途跑到該區function定義區域時會自動建立一塊Execution Context之後於function內部其實還會有兩階段過程運作【Function 建立階段】 =>Stage1-1.初始化一個空間(Scope Chain) =>Stage1-2.創建三種變數物件 VO (Variable Object) 第一種 function arguments object(參數物件) 第二種 function中的function之指標 object 第三種 function中的變數設值為undifined 1 2 3 4 function 函式名稱 ( 參數物件 ){ 掃描 function中的function - pointer 掃描 function中的variable - 設為 undifined } =>Stage1-3.決定 this variable 的值【Function 運行階段】 =>進行逐行運行 ====================================================================== 這邊來一個簡單範例 1 2 3 4 5 6 7 8 9 10 11 function myFunc(i){ var a = 'Hi' ; var b = function innerFunc(){ }; f...

閱讀完整內容

Javascript基礎語法學習介紹2_Object

- 3月 03, 2018

物件(Object) 1.物件屬性成員值之修改/值的獲取 2.物件之宣告 / 值之陳列打印 3.添加Array和Function到Object物件中 4.this關鍵字的意義及用途物件屬性成員值之修改/值的獲取用對應關鍵字去mapping 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 //---------------物件---------------- var EmployeeObj = { name : 'Sam' , lastName : 'Eric' , age : 28 , job : 'Engineer' } //物件中特定屬性之值修改 //寫法1. 物件名['屬性欄位'] EmployeeObj [ 'name' ] = 'Jimmy' ; console . log ( EmployeeObj [ 'name' ]); //寫法2.物件名.屬性欄位 EmployeeObj . age = 30 ; console . log ( EmployeeObj [ 'age' ]); PS: 物件是使用大括號來包覆，直到最後一個屬性欄位之前都需要用 ',' 隔開物件之宣告 / 值之陳列打印 1 2 3 4 5 6 7 //動態宣告物件 var jackey = new Object(); jackey . name = 'Jackey' ; jackey . lastName = 'Williams' ; jackey . age = 22 ; console . log ( jackey ); 添加Array和Function到Object物件中 1 2 3 4 5 6 7 8 9 10 11 12 13 14 //---------------物件---------------- var EmployeeObj = ...

閱讀完整內容