Categories > Coding
Wei-Lun Liang is a computer engineer who has programming experience in C#, C, Python, PHP.
Web Page:
HTML, JavaScript, CSS
❆ 瑋倫自製簡單index.html測試網頁
❆ 調整物件上下or左右的位置
❆ 多種Table款式
❆ 於html中將CSS建立於 內部：1.寫在head，再由body呼叫 2.直接寫在body內
❆ 於html中將JS建立於html內部：寫在head裡面
❆ 於html中將JS建立於html內部：寫在body底部
❆將單檔圖片嵌入並呈現於網頁 [嵌入SVG圖片] 呈現SVG圖片於網頁上的操作方式： 1.製作出SVG圖片，並下載: https://www.runoob.com/svg/svg-inhtml.html 2.直接用notepad開SVG檔案，填寫fill的顏色
❆分離.css.js為單檔 呼叫外部單一CSS & 單一JS之主程式碼(alert彈跳視窗)
❆分離.css.js為多個檔 呼叫外部多個CSS(文字顏色) & 多個JS(alert彈跳視窗+網頁最後修改時間)之主程式碼
❆呼叫外部.css按鈕點擊 滑鼠游標放置於按鈕上，自動改變按鈕樣貌，點擊會變化按鈕圖案
❆呼叫外部.css按鈕點擊 滑鼠游標放置於深&淺色兩種按鈕上，自動改變按鈕樣貌，點擊會變化按鈕圖案
❆呼叫外部.css對話方框 對話方框-僅單一靠右側
❆呼叫外部.css對話方框 對話方框-左右交談，含使用者圖片。 可調整css之1.padding跟2.margin分別控制1.方框大小2.方框與方框間距
❆呼叫外部.css對話方框 [前後交疊CSS所創影像]給予對話方框三角形尖角，且將box賦予虛線外框可觀測padding, margin
❆呼叫外部.css對話方框 [前後交疊CSS所創影像]給予對話方框柔和彎鉤尖角
❆呼叫外部.css.js 監測滑鼠游標位置 滑鼠游標挪動到聯結上方，自動出現向下&向上彈跳視窗，彈跳視窗即時追隨滑鼠游標而移動，且無尖角
整包下載
❆呼叫外部.css.js 監測滑鼠游標位置 (只有寫出向下墜之彈跳視窗，且滑鼠由左往右移時，會先經過透明尖角，再跑回文字上重新觸發彈跳視窗，造成彈跳視窗重新向右偏移)滑鼠游標挪動到聯結上方，自動出現向下&向上彈跳視窗，彈跳視窗固定於跟名詞一樣垂直的高度(offsetTop呈現物件垂直座標，mouseover僅擷取初次碰到文字的座標)，且帶有一尖角
整包下載
❆呼叫外部.css.js 監測滑鼠游標位置 (同時寫出向上+向下墜之彈跳視窗，且滑鼠由左往右移時，"不"會經過透明尖角，因此彈跳視窗"不會"重新向右偏移) 滑鼠游標挪動到聯結上方，自動出現向下&向上彈跳視窗，彈跳視窗固定於跟名詞一樣垂直的高度(offsetTop呈現物件垂直座標，mouseover僅擷取初次碰到文字的座標)，且帶有一尖角
整包下載
❆呼叫外部.css.js 監測滑鼠游標位置 [較糟糕]因時常同時跑出向上&下兩個彈跳視窗.藉由javascript回傳程式碼寫法_此列乃靈活變動，當以下此列較靠近上邊，則呈現向下彈跳視窗、較靠近下方，則呈現向上彈跳視窗。 藉由若且為若判別式將程式碼藉由innerHTML帶回HTML碼中，來引出包含兩種不同CSS的JS
整包下載
❆呼叫外部.css.js 監測滑鼠游標位置 [USE ME]四種寫法：
1、2.[彈出方向固定版]彈跳視窗僅只會固定往上或下跳出，不會因著落於網頁瀏覽器中較上方而產生向下跳出的視窗、或因著落於網頁瀏覽器中較下方而產生向上跳出的視窗。
3、4.[靈活彈跳]法一、將欲呈現於彈跳視窗中的內容填於javascript中 ++++ 法二：將欲呈現於彈跳視窗中的內容填於HTML中。此乃靈活變動，當觸發文字較靠近上邊，則呈現向下彈跳視窗、較靠近下方，則呈現向上彈跳視窗。
整包下載
❆呼叫外部.css.js 指定三角形-向上(存在)+向右(存在)+向下(不存在)+向左(存在)，使得bottom三角形於不存在的情況下只呈現上半部(半邊)的三角形，應用於：滑鼠由左往右移時，"不"會經過透明尖角，因此彈跳視窗"不會"重新向右偏移
❆呼叫外部.css.js 碰到文字<---由A.js研判必須呼叫給B.js中的方程式進行運作
移開文字<---由A.js研判必須呼叫給C.js中的方程式進行運作
❆ 手動拖曳瀏覽器視窗大小，再按F5更新所顯示之Browser width與 height
❆呼叫外部.js 1.按F12，再點console
2.將滑鼠擺到文字上，觀察F12中console，碰到文字時：
****
差值太小-滑鼠游標接近瀏覽器底部，啟動：
由JS之A呼叫B
****
滑鼠游標接近瀏覽器[頂]部，啟動：
由JS之A呼叫C
❆呼叫外部.css.js 於javascript藉由若且為若判別式導入兩種不同CSS至內文中，請至zz_code_ifstatementchoosecss.js中更改mommy與daddy的數值來觀看結果的變化
20230727 ❆監測滑鼠游標位置.全集 onmousemove 、 onmousemove5最有價值 、 onmouseover最有價值 、 onmousedown 、 onmouseenter 、 onmouseup
❆呼叫外部.js [觸發同時啟動數個function]藉由onmouse當滑鼠觸碰文字時，一次同時觸發呼叫"數個"外部JS之程式碼中的function，按F12於Console中可見觸發後的程式執行結果
❆監測滑鼠游標位置 藉由onmouseover呈現第一時間之物件被觸碰到的位置，並與offsetTop物件垂直座標進行比較
❆監測滑鼠游標位置 藉由onmousemove無時無刻不間斷地呈現物件被觸碰到的位置，並與offsetTop物件垂直座標進行比較
❆分離.js為單檔 由body尾部執行script本體(詳細程式碼擺在body內)，呼叫上方function，由head跳到外部JS之程式碼、計算後回傳script本體，繼續向下執行。 遇見打印要求，向上找到文字回傳所需呈現的位置。[由上往下執行擺在body最後方的script本體(詳細程式碼擺在body內)，跳脫時則往上找所要跳到的地方]
❆分離.js為單檔 將多個子function藉由.點與{大括弧}歸納於主function底下，藉由多層次法呼叫子function(F12再按Console觀察多層function的導入結果)
❆分離.js為單檔 A.冒號方程式寫法中：內部的大括弧右邊禁止加分號，這就是造成瑋倫為什麼會有大括弧右邊禁止加分號的印象 B.被呼叫的方程式當中的代數符號必須相異，才不會於被呼叫時互相影響(F12見console)
❆分離.js為單檔 刻意將被呼叫的方程式當中的代數符號寫成相等，導致於被呼叫時互相影響、而無法獨立正常運作(F12見console)
❆分離.js為單檔 由body尾部執行script本體(詳細程式碼擺在外部)，呼叫上方function，由head跳到外部JS之程式碼、計算後回傳script本體，繼續向下執行。 遇見打印要求，向上找到文字回傳所需呈現的位置。[由上往下執行擺在body最後方的script本體(詳細程式碼擺在外部)，跳脫script本體時則往上找所要跳到的地方]
❆分離.js為單檔 呼叫外部 JS之主程式碼，再由JS回傳文字打印到網頁上呈現
❆分離.js為單檔 呼叫外部 JS之主程式碼，再由JS回傳不斷增長的數字+打印到網頁上呈現(請勿將PHP語法寫在.js檔裡面，否則網頁會呈現空白)
❆CSS選擇器 常用的CSS選擇器，包含：
1.類型選擇器、
2.X Y 類似X > Y，但X Y中間可參雜其他標籤，而X > Y中間無法參雜其他標籤
3.Class 選擇器[瑋倫推薦]寫在.html檔案中則將.css中之多個獨立的標籤組合在一塊兒
4.ID 選擇器[瑋倫推薦]
5.狀態選擇器，瑋倫自製範例： 點擊圖片得到連結、 滑鼠移到連結下方得到底線
6.星號*代表選擇所有元素
❆CSS選擇器 同一階-藉由蚯蚓~連繫出弟弟妹妹們都獲選： X 與 Y 兩者獨立且在同一階層、 X 於 Y 前方
❆CSS選擇器 同一階-CSS藉由加號+連繫出在其後的大弟或大妹才擁有套用樣式的資格：X 與 Y 兩者獨立且在同一階層、X 於 Y 正前方
❆CSS選擇器 藉由CSS描述checked狀態，可將被勾選文字變成紅色&加入底色
❆ [純html-script寫法：呼叫function法]藉由JavaScript進行變數運算，並回傳運算結果數值於螢幕當中
❆ [純html-script寫法：return法]藉由JavaScript進行變數運算，並回傳運算結果數值於螢幕當中
❆ [純html-script寫法：return法]將參數代入script之方程式計算後再回傳(代入13至方程式，進行平方運算再回傳)
❆ [呼叫方程式一次]純JavaScript，藉由window.addEventListener，僅只呼叫單一方程式，並將呼叫的結果呈現於螢幕當中
❆ [呼叫方程式一次]純JavaScript，直接打方程式的名稱來呼叫
❆ [呼叫方程式一次]純JavaScript，藉由setTimeout呼叫方程式(本範例無時間延遲)
❆ 藉由純JavaScript，呼叫多個方程式，並利用setTimeout將呼叫的結果隨時間逐一呈現於螢幕當中
❆自動增數字 [純html-script寫法.js定義初始變數值]藉由純JavaScript之setInterval，不斷迴圈累加數值並呈現於螢幕當中
❆自動增數字&同時顯現當下時刻 [純html-script寫法.js定義初始變數值]藉由純JavaScript之setInterval，不斷迴圈累加數值並呈現於螢幕當中、同時顯現當下時刻。
❆自動增數字&滿足if [純html-script寫法.js定義初始變數值]藉由純JavaScript之setInterval，不斷迴圈累加數值並呈現於螢幕當中。 當變數值滿足滿足若且為若if判別式，則可進入判別式中執行特別任務。
❆自動增數字 [純html-script寫法.php定義初始變數值]藉由JavaScript，不斷迴圈累加數值並呈現於螢幕當中(藉由php賦予初始值)
❆自動增數字 藉由純JavaScript之setInterval，不斷迴圈累加數值並呈現於螢幕當中不同的位置
❆ fun2在fun1裡面，fun3在fun2裡面，依此類推。 呼叫順序： fun1---->fun2---->fun3---->延遲一秒才呼叫fun4---->延遲一秒才呼叫fun5---->延遲一秒才呼叫fun6
❆ [純script、無php]先呼叫fun1方程式，於fun1內部再呼叫fun2，於fun2計算後再回傳結果至fun1，再將fun1結果回傳原外部呼叫之處
❆ [純script、無php](簡單版傳遞)先呼叫testwilly方程式，於testwilly內部再呼叫testsandy，於testsandy計算後再回傳結果至body網頁呈現
❆ [純script]輸入兩個數字計算，於螢幕呈現結果(超基本純script單方程式傳遞)
❆ [純html-script寫法]鍵入數字，自動進行運算，並將結果呈現於同一個網頁底下
❆由網址提供變數進行運算 [純html-script寫法] 抓取網址列中的變數(由?A=7&B=8提供)，進行自動運算，並將結果呈現於同一個網頁底下
❆手動輸入變數進行運算，並將變數值呈現於網址 [純html-script寫法] 於HTML鍵入變數，將所鍵入的變數呈現於網址列(網址列僅呈現變數值、無法由網址列輸入變數值來提供計算)，且進行自動運算，並將結果呈現於同一個網頁底下
❆次要-手動輸入or網址輸入皆可變數進行自動運算 [純html-script寫法] 將所鍵入的變數呈現於網址列最後方?AA=9，取得變數值並進行自動運算 or 將網址列中的變數傳到網頁中進行自動運算+呈現於方框之中 瑋倫自製操作影片
缺點： 於網頁內部的方框中輸入的數字btnpasswordwilly3若固定，則會不斷地由網址列抓取變數，進行平方運算後再藉由demosandy6傳回網頁上顯現。
❆主要-手動輸入or網址輸入皆可變數進行自動運算 [純html-script寫法] 將所鍵入的變數呈現於網址列最後方?AA=9，取得變數值並進行自動運算 or 將網址列中的變數傳到網頁中進行自動運算+呈現於方框之中 瑋倫自製操作影片
優點： 僅在頭一次進入網頁時，由網址抓參數進行平方後傳到demosandy6呈現回網頁。因此，將網頁中平方後的結果反白後，於下一個時間點並不會被取消反白。
❆若且唯若if statement [純html-script寫法]鍵入數字，自動進行if statement若且唯若判別，並將結果呈現於同一個網頁底下
❆若且唯若if statement [純html-script寫法]由網址列抓取變數，再轉成字元**.toString()自動進入if statement來判斷 註解：if statement建議勿採取parseInt(**)
❆若且唯若if statement [純html-script寫法](超精簡版)判別方框所鍵入的變數是否隨時間而變化，藉由比較前後時刻，於改變的瞬間呈現提示。可取此為編修範本
❆若且唯若if statement [純html-script寫法](精簡版)判別方框所鍵入的變數是否隨時間而變化，藉由比較前後時刻，於改變的瞬間呈現提示
❆若且唯若if statement [純html-script寫法](詳細版)判別方框所鍵入的變數是否隨時間而變化，藉由比較前後時刻，於改變的瞬間呈現提示。註：藉由[精簡版or超精簡版]即可運作，[詳細版]只是為了理解
❆ [純html-script寫法]藉由javascript傳遞變數值到方框裡
❆按鈕增數字 [純html-script寫法]點擊按鈕，不斷加1，並呈現於螢幕上。亦可按F12，再點console來看即時動態變數值。 按鈕呼叫script-function，在script中，將變數+1後回傳呈現於頁面。
❆按鈕增數字 [純html-script寫法]點擊第一個按鈕，不斷加1，並呈現於螢幕上。 再點擊第二個按鈕，將第一個按鈕的值進行平方，並呈現於螢幕上。 亦可按F12，再點console來看即時動態變數值
❆按鈕增數字 [比較html-script與PHP差異]驗證java script之var變數可於同一個網頁面中累積傳遞；然而PHP的變數僅為由上到下一次性傳遞，無法於同一頁面中記憶早期經歷來進行傳遞。 JS：點擊第一個按鈕，不斷加1，並呈現於螢幕上。 再點擊第二個按鈕，將第一個按鈕的值進行平方，並呈現於螢幕上。 亦可按F12，再點console來看即時動態變數值 PHP：點擊第一個按鈕，賦予$count變數頭一個值。 再點擊第二個按鈕，賦予$count變數第二個值。 再點第三個按鈕，卻只會呈現最鄰近之第二個值。(因為由上往下線性傳承，便承接最鄰近之第二個值)
❆按鈕增數字 [PHP定義變數、核心疊加由html-script]由PHP定義數值，傳遞給script作為變數。 藉由button點擊，不斷增加螢幕所呈現的數字
❆ 設定四秒鐘後跳轉頁面，且倒數計時呈現於螢幕中
❆ 點擊文字後，將跳到本頁面中指定的位置
❆ 點擊文字後，將跳到本頁面中指定的位置，再次點擊可跳回。
❆ 點擊文字後，將跳到另一(乙)頁面中指定的位置，再次點擊可跳回原本(甲)頁面中指定的位置。
❆ 強制讓h標籤tag不換行
PHP
❆php呼叫方程式 [PHP寫法]鍵入function的名稱來呼叫function，並將執行的結果呈現於function被呼叫處
❆php呼叫方程式 [PHP寫法]左方new引入class，藉由箭頭銜接右方，再呼叫class中的function
❆PHP5 & PHP7語法比較(比大小) [PHP5 & PHP7皆可運作] 使用if else判別式來呈現大於、小於、等於時的狀態。****缺點：使用基礎PHP寫法，語法冗長，效率低落。 ****優點：兼容性高，PHP5與PHP7皆可運作。
❆PHP5 & PHP7語法比較(比大小) [PHP5無法運作 & PHP7可運作] 使用特殊代號<=>來呈現大於(+1)、小於(-1)、等於(0)時的狀態。****優點：使用高級PHP寫法，語法簡短，效率高尚。 ****缺點：兼容性低，PHP5無法運作。
20240215 ❆ [PHP寫法]呈現存在本資料夾內之所有檔案+所有資料夾。 重點：藉由glob無法顯示隱藏加點的檔案(例如最前方有點的檔名： .willy )
❆ [PHP寫法](次佳:需額外補上路徑)呈現存在本資料夾內之所有檔案+所有資料夾。 重點：藉由scandir可顯示隱藏加點的檔案(例如最前方有點的檔名： .willy )
❆ [PHP寫法](最佳:可直接呈現完整檔名)呈現存在本資料夾內之所有檔案+所有資料夾。 重點：藉由isdot可顯示隱藏加點的檔案(例如最前方有點的檔名： .willy )
❆ [PHP寫法]檢查是否包含單引號
❆ 將HTML碼寫入PHP當中的方式：1.echo(" 雙引號前加反斜線 "); 2. printf(" 程式碼 ");
❆ [PHP寫法] echo單雙引號的搭配
❆傳遞參數 [PHP寫法] [保密優、效率低：POST+按鈕] 點擊按鈕，由A網頁跳至B網頁，過程中藉由POST傳遞多個參數，傳遞時資訊未呈現於網址。
❆傳遞參數 [PHP寫法] [無保密、效率高：GET+按鈕] 點擊按鈕，由A網頁跳至B網頁，過程中藉由GET傳遞多個參數，傳遞時資訊呈現於網址。
post的缺點：速度比get傳輸慢，get的效率更高
❆傳遞參數 [PHP寫法] 點擊連結，由A網頁跳至B網頁，過程中藉由GET傳遞多個參數，傳遞時資訊呈現於網址。
其中包含藉由 $_SERVER["REQUEST_URI"] 傳遞A網頁之網址至B網頁，可由B網頁接收A網頁網址後，點擊按鈕再回到A網頁。
❆按鈕圖片 [PHP寫法]點擊botton後，跑指定botton的方程式，並將結果直接呈現於本頁當中
(按鈕藉由PHP送出此按鈕所具有的獨特字串至本頁之中，if判別式承接到此特殊字串，而執行指定方程式)
(分別點選2個按鈕，呈現2個不同的文句+圖片)
❆按鈕圖片 [PHP寫法]點擊botton後，跑指定botton的方程式，並將結果直接呈現於本頁當中
(按鈕藉由PHP送出此按鈕所具有的獨特字串至本頁之中，if判別式承接到此特殊字串，而執行指定方程式)
(分別點選四個按鈕，呈現四個不同的文句+圖片)
❆按鈕圖片 [PHP寫法]首先由四個點擊按鈕選擇食物，但此招是藉由點擊按鈕後於PHP程式碼中找對應if中的方程式(並非藉由script)，選項的結果會被存在input方框中。 接著再點擊另一按鈕，將input方框中選項的結果送出到另一頁面。PHP的缺陷就是一次只能處理兩組按鈕中一個按鈕的請求(但本範例只有一組按鈕，所以不受影響)。
❆按鈕圖片 [PHP寫法]首先由四個點擊按鈕選擇食物，但此招是藉由點擊按鈕後於PHP程式碼中找對應if中的方程式(並非藉由script)，選項的結果會被存在input方框中。 接著再點擊另一按鈕，將input方框中選項的結果送出到另一頁面。 PHP的缺點就是有兩組(各四個)選項的話，一次僅能執行(紀錄下)各別一組中的選項來傳輸(本範例有2組按鈕，可見影響)。
❆按鈕圖片 [JavaScript寫法]首先由四個點擊按鈕選擇食物，此招是藉由點擊按鈕後於script程式碼中找對應的方程式，選項的結果會被存在input方框中。 接著再點擊另一按鈕，將input方框中選項的結果送出到另一頁面
心得：使用script呼叫方程式的優點就是一次能同時處理兩組按鈕中，各別按鈕(兩個)的請求，倘若設置兩個按鈕(例如分別選擇1.四種食物2.四種物品<----共八個選項)、並對應兩個input方框， 那麼按了1.一種食物，則食物的input方框中會呈現選擇結果， 再次點選2.一種物品，則物品的input方框中會呈現選擇結果， 並且 食物、物品的input方框所選擇的結果會同時存留於input方框
JavaScript的優點就是一次能同時處理兩組按鈕中，獨立兩個按鈕的請求。
❆按鈕圖片 [JavaScript寫法] JavaScript的優點就是一次能同時處理兩組按鈕中，獨立兩個按鈕的請求。 (新增功能：必須進行選擇方可送交；若未選擇---->欄位為空、無法送交)
❆選單圖片 [PHP寫法](簡單版)僅一組form下拉式選單：由下拉式選單直接呼喚圖片於本網頁下方
❆選單圖片 [PHP寫法]兩組form下拉式選單：1.由下拉式選單直接呼喚圖片於本網頁下方，2.下拉式選單指定圖片再點擊botton後，才跑出圖片
❆選單文字 [PHP寫法]一組form下拉式選單：由下拉式選單選擇所欲呼喚的判別式，並呈現各選項所對應特殊的文字於網頁中
❆選單字型 [PHP寫法]一組form下拉式選單：由下拉式選單選擇所欲呼喚的判別式，給予[相同的文字]不同的字型(大小+顏色+字體)於網頁中
❆選單字型.網址嵌入 [PHP寫法]一組form下拉式選單：由下拉式選單選擇所欲呼喚的判別式，給予[相同的文字]不同的字型(大小+顏色+網址內嵌字體)於網頁中
❆ [PHP寫法]點擊botton後，跑指定botton的方程式，選擇加法or減法，並將計算結果直接呈現於同一個網頁的底下，而無須再跳到另一頁面
❆ [PHP寫法]於網頁輸入數字or將數字隱藏於程式碼中，接著按下按鈕，將數字傳輸到另一個網頁進行計算並呈現計算的結果
❆ 將form輸入數值給予變數，藉由javascript自動傳輸跳轉至另一PHP頁面計算並呈現結果，而無須手動按下按鈕button來傳遞數值
❆讀檔案呈現於屏幕(本處僅自動F5) [script自動F5更新] 藉由JS自動F5更新網頁並呈現即時時間顯示
將以下文字： 『請在此處更改文字並Ctrl+S存檔』 改成 『請在此處更改文字並Ctrl+S存檔ABCD』 按下Ctrl+S 可見網頁瞬間變化： 瑋倫自製操作影片
❆讀檔案呈現於屏幕 [script讀檔自動更新、非F5] 於同一層資料夾內新增檔案test3.txt 藉由讀取test3.txt，並呈現於螢幕上。本程式藉由JS自動更新，非藉由F5來進行更新 由HTML語法自動讀取檔案時，更改test3.txt，可即時呈現更改結果於螢幕上。(但久遠有時改完test3.txt，會無法自動更新) 由PHP語法自動讀取檔案時，更改test3.txt，無法更改結果於螢幕上。
❆讀檔案呈現於屏幕 [PHP讀檔、自動F5更新.建議用此] 於同一層資料夾內新增檔案zz_code_autoF5freshPHP_beread.txt， 藉由讀取zz_code_autoF5freshPHP_beread.txt，並呈現於螢幕上。本程式藉由PHP讀取文字，並自動F5更新。
❆讀檔案呈現於屏幕 [html-object讀檔] 藉由於同一層資料夾內新增檔案zz_code_objectdisplay_readme.txt，讀取檔案中的內容，並呈現於屏幕上(藉由html語法，非PHP語法)
❆讀檔案呈現於屏幕[最佳!] [使用ajax讀PHP檔] 使用ajax語法呼叫php檔案，並藉由setInterval即時運作
****鍵入文字，將文字傳輸到另一個php程式碼，再與該程式碼中的文字結合後回傳
****藉由html，將新增的文字列在舊文字的下方，舊文字被反白時會自動取消反白
❆讀檔案呈現於屏幕[最佳2!] [使用ajax讀TXT檔] 使用ajax語法呼叫txt檔案，並藉由setInterval即時運作將txt檔案中的文字回傳並呈現於網頁上
****註： 同一行文字刪除舊的，更新成新的： $("#result").html(msg2);
舊的文字保留，於新的一行新增更新的文字： $("#result").append(msg2);
❆讀檔案呈現於屏幕[最佳2!] [使用ajax讀TXT檔] 使用ajax語法呼叫txt檔案，並藉由setInterval即時運作將txt檔案中的文字回傳，再藉由parseInt()轉換成可被計算的number數字形式， 並使回傳的數字+1後呈現於網頁上
❆回到前一頁 重點：藉由PHP傳遞前一頁的網址到下一頁，由下一頁回到前一頁時，前一頁會被自動F5刷新
1.頭一個網頁呈現前一層資料夾中的所有檔案、並自動呈現由零開始增生的數字
2.點擊頭一個網頁中的按鈕，即可將本頁(頭一個網頁)網址傳遞至另一頁面
3.於另一個網頁(第二個網頁)，接收前一網頁的網址。點擊第二個網頁的按鈕後，可回到前一個(頭一個)網頁，且前一個網頁會即時被刷新、自動增生的數字會由零重新開始。 瑋倫自製操作影片
❆回到前一頁 重點：[純JavaScript]點選回到前一頁的按鈕、回到前一頁時，必須藉由手動F5進行刷新
1.頭一個網頁呈現前一層資料夾中的所有檔案、並自動呈現由零開始增生的數字
2.點擊頭一個網頁中的按鈕，即可跳至另一頁面
3.於另一個網頁(第二個網頁)，點擊第二個網頁的按鈕後，可回到前一個(頭一個)網頁，但前一個網頁會接續跳出前的數字繼續升值。若要歸零，必須手動按F5刷新。 瑋倫自製操作影片
❆回到前一頁 重點：[純JavaScript]點選回到前一頁的按鈕、回到前一頁時，A.參考：無須B.主要：必須藉由手動F5進行刷新
1.頭一個網頁呈現前一層資料夾中的所有檔案、並自動呈現由零開始增生的數字
2.點擊頭一個網頁中的按鈕，即可跳至另一頁面
3.於另一個網頁(第二個網頁)，點擊第二個網頁的按鈕後，可回到前一個(頭一個)網頁，但前一個網頁會接續跳出前的數字繼續升值。若要歸零，A.參考：無須B.主要：必須 手動按F5刷新。 瑋倫自製操作影片
❆ 藉由textContent呈現每秒鐘所更新的文字，將其highlight反白後，下一秒並不會自動取消反白。
藉由innerHTML呈現每秒鐘所更新的文字，將其反白後，下一秒將會自動取消反白。
❆ 於原先的文字下方，不斷產生新的文字，而原本的文字依舊可被highlight反白。 社群平台新增留言文字時，原先之文字依舊可被反白。 倘若採取傳統整個版面更新的辦法，則當文字被反白，setInterval隨即將反白給更新註消。
❆ 混合PHP & JavaScript 在php裡面參摻入JavaScript： 於本地資料夾秀出所有檔案的名稱 $filename (不斷由alert呈現)
❆ 混合PHP & JavaScript 在JavaScript裡面參摻入php： 由PHP定義變數值，再將值給予JS，按下F12，見console變數。於setInterval中，每按一下就不斷提升1 並非使用ajax呼叫PHP，而是使用php echo數值給予JavaScript的變數<---- var B=<?php echo $count; ?>;
❆ 強制原封不動地輸出文字，可用於原封不動地打印出PHP程式碼作為介紹範例
❆ 單純藉由PHP呈現時間於屏幕 藉由PHP呈現本地時間(包含本地時區)，單純呈現時間於屏幕，並非將時間轉存於資料庫SQL，註:本程式需於自己電腦執行，否則會呈現找無setTimestamp()
❆ 單純藉由PHP呈現時間於屏幕 方式1. 方式2. 藉由PHP直接顯示時間以及呈現[當地GMT要加多少]，本法必須手動指定時區。可藉此於對話視窗中被ajax索引時，直接藉由PHP呈現本部分+被CSS修改，註:本程式需於自己電腦執行，否則會呈現找無setTimestamp()
❆ [USE ME]單純藉由PHP呈現時間於屏幕 1.jquery自動取得終端機時間，再以ajax傳至PHP_2.時間戳可指定為 a.當前時間戳 或 b.由資料庫撈早期所存檔的舊時間戳 ，註:本程式需於自己電腦執行，否則ntu會呈現空白狀態
20221130A(此處往下有許多尚未整理) 不同種類的input type
❆ input type 的種類
❆checkbox [純html-script寫法]checkbox：物品打勾的結果藉由script呈現於相同頁面(須按按鈕才能送出、呈現結果)[藉由不同id呈現不同的value]
❆checkbox [純html-script寫法]checkbox：物品打勾的結果藉由script呈現於相同頁面(點選後，即可自動於網頁下方呈現結果)
❆checkbox [純html-script寫法]checkbox：物品打勾的結果藉由script呈現於相同頁面(須按按鈕才能送出、呈現結果)[藉由querySelectorAll收納相同name中的所有不同的value]
❆checkbox [純html-script寫法]checkbox：按下一個按鈕後，一次將所有項目打勾或取消勾選
❆checkbox [PHP寫法]checkbox：物品打勾的結果藉由php傳輸到另一頁面，一次可選多個項目。藉由{不同name}對應{不同value}來傳遞。(複選)
❆checkbox [PHP寫法]checkbox：物品打勾的結果藉由php傳輸到另一頁面，一次可選多個項目。藉由{不同value}彙整至{相同的name}，以array的形式來傳遞。(複選)
❆checkbox [PHP寫法]checkbox：物品打勾的結果藉由php傳輸到另一頁面，1.點擊第一個按鈕將多個項目全部勾選或註銷。2.藉由{不同value}彙整至{相同的name}，以array的形式來傳遞。(複選)
❆checkbox [PHP寫法]checkbox：物品打勾的結果藉由php傳輸到另一頁面，一次只能選一個項目(單選)
❆number [純html-script寫法]number(最佳)：於指定id方框填寫數字後，按下按鈕，藉由script中的querySelector抓取指定id方框內的數字，再回傳於同頁底下。
❆number [純script寫法]number(次佳)：點擊botton後，跑指定botton的方程式，選擇加乘法or減法，藉由指定name.value傳輸數值至script，並將計算結果直接呈現於同一個網頁的底下，而無須再跳到另一頁面
❆range [純script寫法]range：拖曳bar指標、改變數值，進而自動改變字體大小。因所要求變更之字體大小於function外，依舊可將字體大小變化過程中的文字反白。
❆參考：按鈕變化文字大小 [純script寫法]button：點擊按鈕，因只執行一次function，因此由function中傳文字到內文中，依舊可將文字反白。
❆color [純script寫法]color：拖曳color指標、改變數值，進而自動改變字體顏色。因所要求變更之顏色於function外，依舊可將變色過程中的文字反白。
❆參考-主要：按鈕變化文字顏色(及大小)-先反白再按按鈕可維持反白狀態 [純script寫法]button：點擊按鈕，因只執行一次function，因此由function中傳文字到內文中，依舊可將文字反白。各別採取getElementById以及querySelector做示範。
❆參考-主要：按鈕變化文字顏色+大小+字型-先反白再按按鈕可維持反白狀態 [純script寫法]button：點擊按鈕，因只執行一次function，因此由function中傳文字到內文中，依舊可將文字反白。各別採取getElementById以及querySelector做示範。
❆參考-主要：按鈕變化文字顏色+大小+字型(將字型利用網址嵌入網頁中)-先反白再按按鈕可維持反白狀態 [純script寫法]button：點擊按鈕，因只執行一次function，因此由function中傳文字到內文中，依舊可將文字反白。各別採取getElementById以及querySelector做示範。
❆參考-次要：按鈕變化文字顏色(及大小)-先反白再按按鈕會造成反白消失 [純script寫法]button：點擊按鈕，因只執行一次function，因此由function中傳文字到內文中，依舊可將文字反白。各別採取getElementById以及querySelector做示範。
❆date,datetime-local [PHP寫法]：選擇一個特定的時間，按下送出按鈕，將指定的日期時間傳送到另一個php頁面
❆date,datetime-local [純script寫法]選擇日期&時間。按下按鈕後，結果直接呈現於本網頁下方。
PHP+SQL
❆伺服器PHP+SQL安裝完後的測試程式碼 當伺服器架設完成時，伺服器不具備utf8mb4編碼防止亂碼設定，使用本專案程式碼進行測試時，依舊可正常呈現於phpMyAdmin、不會產生亂碼。
1.創造出名為teste2的DataBase(DB)
2.從已經存在、名為teste2的DataBase(DB)，創造出名為mommybornid的Table
3.從已經存在、名為teste2的DataBase(DB)， 已經存在、名為mommybornid的Table， 已經存在的五個column分別為： id(AI打勾+選PRIMARY)、sandy、tsair、alice、willy_reg_date 不斷於sandy、tsair、alice三個欄位填入資料，並呈現最終所生成之列的id編號
4.將[資料庫:teste2]、[資料表:mommybornid]、[欄位:id, sandy, tsair, alice, willy_reg_date]當中的資訊完整呈現於網頁中
❆伺服器PHP+SQL安裝完後的測試程式碼 於輸入資料至資料庫中之第3步程式碼中，並未設定utf8或utf8mb4編碼，因此需仰賴伺服器設定(例如：freebsd系統之my.cnf 或 windows系統之my.ini)，方可檢視到繁體中文。
1.創造出名為teste的DataBase(DB)
2.從已經存在、名為teste的DataBase(DB)，創造出名為mommybornid的Table
3.從已經存在、名為teste的DataBase(DB)， 已經存在、名為mommybornid的Table， 已經存在的五個column分別為： id(AI打勾+選PRIMARY)、sandy、tsair、alice、willy_reg_date 不斷於sandy、tsair、alice三個欄位填入資料，並呈現最終所生成之列的id編號
4.將[資料庫:teste]、[資料表:mommybornid]、[欄位:id, sandy, tsair, alice, willy_reg_date]當中的資訊完整呈現於網頁中
❆date,datetime-local [使用者操作頁面]藉由CSS提供最簡易對話方框，逐一框住由SQL所撈出之舊資料
❆date,datetime-local [使用者操作頁面]藉由CSS提供最簡易對話方框，左方格輸入：傳送者為6、接收方為7，右方格輸入：對話內容，按F5呈現CSS給予雙色逐一框住[傳送者.藍色]&[接收方.綠色]由SQL所撈出之舊資料
3d MAX:
❆ 立體模型設置NURBS
純C:
❆ 純C語言，從無到有:下載、安裝、編輯、實測(使用Code::Blocks)
❆ C & C++ 差異: C_typedef stru 以及 C++_struct
COMSOL:
❆ Fresnel lens (simulation results in COMSOL Multiphysics):
ZEMAX:
❆ 純非序列coating某個面設定coating
❆ 序列模式下將表面coating不同角度反射率
❆ 序列模式下將表面coating [不同角度+不同波長] 反射率2019July3瑋倫教學
❆ 以GBIA看 [不同角度有不同反射率]之coating效果 2019Aug5瑋倫教學
❆ 純序列(或序列.非序列混雜)情況下，想在coating情況下看到同時呈現穿透以及反射 2019Aug6瑋倫教學
❆ 三者結合即可產生layout局部效果2019Aug14
❆ 利用Pipe包圍在波導結構外圍，再針對材料做multiconfiguration設定2019Aug14
❆ Multi-configuration_NCOT針對不同物件有不同coating2019Aug14
❆ 利用布林將多個單透鏡個別優良部分裁切取出並結合
❆ 光學元件順序前後對調
❆ 非序列優化
❆ 嘗試將freeform Z接收光線調整正常
❆ VR設計原理
❆ VR設計理論公式探討
❆ 2020.04.12paper與公式討論
❆ [106-1光學系統設計Optical System Design] The lecture of Zemax OpticStudio 17_willy
Web Page:
❆ 瑋倫自製簡單index.html測試網頁
❆ 調整物件上下or左右的位置
❆ 多種Table款式
❆ 於html中將CSS建立於 內部：1.寫在head，再由body呼叫 2.直接寫在body內
❆ 於html中將JS建立於html內部：寫在head裡面
❆ 於html中將JS建立於html內部：寫在body底部
❆將單檔圖片嵌入並呈現於網頁 [嵌入SVG圖片] 呈現SVG圖片於網頁上的操作方式： 1.製作出SVG圖片，並下載: https://www.runoob.com/svg/svg-inhtml.html 2.直接用notepad開SVG檔案，填寫fill的顏色
❆分離.css.js為單檔 呼叫外部單一CSS & 單一JS之主程式碼(alert彈跳視窗)
❆分離.css.js為多個檔 呼叫外部多個CSS(文字顏色) & 多個JS(alert彈跳視窗+網頁最後修改時間)之主程式碼
❆呼叫外部.css按鈕點擊 滑鼠游標放置於按鈕上，自動改變按鈕樣貌，點擊會變化按鈕圖案
❆呼叫外部.css按鈕點擊 滑鼠游標放置於深&淺色兩種按鈕上，自動改變按鈕樣貌，點擊會變化按鈕圖案
❆呼叫外部.css對話方框 對話方框-僅單一靠右側
❆呼叫外部.css對話方框 對話方框-左右交談，含使用者圖片。 可調整css之1.padding跟2.margin分別控制1.方框大小2.方框與方框間距
❆呼叫外部.css對話方框 [前後交疊CSS所創影像]給予對話方框三角形尖角，且將box賦予虛線外框可觀測padding, margin
❆呼叫外部.css對話方框 [前後交疊CSS所創影像]給予對話方框柔和彎鉤尖角
❆呼叫外部.css.js 監測滑鼠游標位置 滑鼠游標挪動到聯結上方，自動出現向下&向上彈跳視窗，彈跳視窗即時追隨滑鼠游標而移動，且無尖角
整包下載
❆呼叫外部.css.js 監測滑鼠游標位置 (只有寫出向下墜之彈跳視窗，且滑鼠由左往右移時，會先經過透明尖角，再跑回文字上重新觸發彈跳視窗，造成彈跳視窗重新向右偏移)滑鼠游標挪動到聯結上方，自動出現向下&向上彈跳視窗，彈跳視窗固定於跟名詞一樣垂直的高度(offsetTop呈現物件垂直座標，mouseover僅擷取初次碰到文字的座標)，且帶有一尖角
整包下載
❆呼叫外部.css.js 監測滑鼠游標位置 (同時寫出向上+向下墜之彈跳視窗，且滑鼠由左往右移時，"不"會經過透明尖角，因此彈跳視窗"不會"重新向右偏移) 滑鼠游標挪動到聯結上方，自動出現向下&向上彈跳視窗，彈跳視窗固定於跟名詞一樣垂直的高度(offsetTop呈現物件垂直座標，mouseover僅擷取初次碰到文字的座標)，且帶有一尖角
整包下載
❆呼叫外部.css.js 監測滑鼠游標位置 [較糟糕]因時常同時跑出向上&下兩個彈跳視窗.藉由javascript回傳程式碼寫法_此列乃靈活變動，當以下此列較靠近上邊，則呈現向下彈跳視窗、較靠近下方，則呈現向上彈跳視窗。 藉由若且為若判別式將程式碼藉由innerHTML帶回HTML碼中，來引出包含兩種不同CSS的JS
整包下載
❆呼叫外部.css.js 監測滑鼠游標位置 [USE ME]四種寫法：
1、2.[彈出方向固定版]彈跳視窗僅只會固定往上或下跳出，不會因著落於網頁瀏覽器中較上方而產生向下跳出的視窗、或因著落於網頁瀏覽器中較下方而產生向上跳出的視窗。
3、4.[靈活彈跳]法一、將欲呈現於彈跳視窗中的內容填於javascript中 ++++ 法二：將欲呈現於彈跳視窗中的內容填於HTML中。此乃靈活變動，當觸發文字較靠近上邊，則呈現向下彈跳視窗、較靠近下方，則呈現向上彈跳視窗。
整包下載
❆呼叫外部.css.js 指定三角形-向上(存在)+向右(存在)+向下(不存在)+向左(存在)，使得bottom三角形於不存在的情況下只呈現上半部(半邊)的三角形，應用於：滑鼠由左往右移時，"不"會經過透明尖角，因此彈跳視窗"不會"重新向右偏移
❆呼叫外部.css.js 碰到文字<---由A.js研判必須呼叫給B.js中的方程式進行運作
移開文字<---由A.js研判必須呼叫給C.js中的方程式進行運作
❆ 手動拖曳瀏覽器視窗大小，再按F5更新所顯示之Browser width與 height
❆呼叫外部.js 1.按F12，再點console
2.將滑鼠擺到文字上，觀察F12中console，碰到文字時：
****
差值太小-滑鼠游標接近瀏覽器底部，啟動：
由JS之A呼叫B
****
滑鼠游標接近瀏覽器[頂]部，啟動：
由JS之A呼叫C
❆呼叫外部.css.js 於javascript藉由若且為若判別式導入兩種不同CSS至內文中，請至zz_code_ifstatementchoosecss.js中更改mommy與daddy的數值來觀看結果的變化
20230727 ❆監測滑鼠游標位置.全集 onmousemove 、 onmousemove5最有價值 、 onmouseover最有價值 、 onmousedown 、 onmouseenter 、 onmouseup
❆呼叫外部.js [觸發同時啟動數個function]藉由onmouse當滑鼠觸碰文字時，一次同時觸發呼叫"數個"外部JS之程式碼中的function，按F12於Console中可見觸發後的程式執行結果
❆監測滑鼠游標位置 藉由onmouseover呈現第一時間之物件被觸碰到的位置，並與offsetTop物件垂直座標進行比較
❆監測滑鼠游標位置 藉由onmousemove無時無刻不間斷地呈現物件被觸碰到的位置，並與offsetTop物件垂直座標進行比較
❆分離.js為單檔 由body尾部執行script本體(詳細程式碼擺在body內)，呼叫上方function，由head跳到外部JS之程式碼、計算後回傳script本體，繼續向下執行。 遇見打印要求，向上找到文字回傳所需呈現的位置。[由上往下執行擺在body最後方的script本體(詳細程式碼擺在body內)，跳脫時則往上找所要跳到的地方]
❆分離.js為單檔 將多個子function藉由.點與{大括弧}歸納於主function底下，藉由多層次法呼叫子function(F12再按Console觀察多層function的導入結果)
❆分離.js為單檔 A.冒號方程式寫法中：內部的大括弧右邊禁止加分號，這就是造成瑋倫為什麼會有大括弧右邊禁止加分號的印象 B.被呼叫的方程式當中的代數符號必須相異，才不會於被呼叫時互相影響(F12見console)
❆分離.js為單檔 刻意將被呼叫的方程式當中的代數符號寫成相等，導致於被呼叫時互相影響、而無法獨立正常運作(F12見console)
❆分離.js為單檔 由body尾部執行script本體(詳細程式碼擺在外部)，呼叫上方function，由head跳到外部JS之程式碼、計算後回傳script本體，繼續向下執行。 遇見打印要求，向上找到文字回傳所需呈現的位置。[由上往下執行擺在body最後方的script本體(詳細程式碼擺在外部)，跳脫script本體時則往上找所要跳到的地方]
❆分離.js為單檔 呼叫外部 JS之主程式碼，再由JS回傳文字打印到網頁上呈現
❆分離.js為單檔 呼叫外部 JS之主程式碼，再由JS回傳不斷增長的數字+打印到網頁上呈現(請勿將PHP語法寫在.js檔裡面，否則網頁會呈現空白)
❆CSS選擇器 常用的CSS選擇器，包含：
1.類型選擇器、
2.X Y 類似X > Y，但X Y中間可參雜其他標籤，而X > Y中間無法參雜其他標籤
3.Class 選擇器[瑋倫推薦]寫在.html檔案中則將.css中之多個獨立的標籤組合在一塊兒
4.ID 選擇器[瑋倫推薦]
5.狀態選擇器，瑋倫自製範例： 點擊圖片得到連結、 滑鼠移到連結下方得到底線
6.星號*代表選擇所有元素
❆CSS選擇器 同一階-藉由蚯蚓~連繫出弟弟妹妹們都獲選： X 與 Y 兩者獨立且在同一階層、 X 於 Y 前方
❆CSS選擇器 同一階-CSS藉由加號+連繫出在其後的大弟或大妹才擁有套用樣式的資格：X 與 Y 兩者獨立且在同一階層、X 於 Y 正前方
❆CSS選擇器 藉由CSS描述checked狀態，可將被勾選文字變成紅色&加入底色
❆ [純html-script寫法：呼叫function法]藉由JavaScript進行變數運算，並回傳運算結果數值於螢幕當中
❆ [純html-script寫法：return法]藉由JavaScript進行變數運算，並回傳運算結果數值於螢幕當中
❆ [純html-script寫法：return法]將參數代入script之方程式計算後再回傳(代入13至方程式，進行平方運算再回傳)
❆ [呼叫方程式一次]純JavaScript，藉由window.addEventListener，僅只呼叫單一方程式，並將呼叫的結果呈現於螢幕當中
❆ [呼叫方程式一次]純JavaScript，直接打方程式的名稱來呼叫
❆ [呼叫方程式一次]純JavaScript，藉由setTimeout呼叫方程式(本範例無時間延遲)
❆ 藉由純JavaScript，呼叫多個方程式，並利用setTimeout將呼叫的結果隨時間逐一呈現於螢幕當中
❆自動增數字 [純html-script寫法.js定義初始變數值]藉由純JavaScript之setInterval，不斷迴圈累加數值並呈現於螢幕當中
❆自動增數字&同時顯現當下時刻 [純html-script寫法.js定義初始變數值]藉由純JavaScript之setInterval，不斷迴圈累加數值並呈現於螢幕當中、同時顯現當下時刻。
❆自動增數字&滿足if [純html-script寫法.js定義初始變數值]藉由純JavaScript之setInterval，不斷迴圈累加數值並呈現於螢幕當中。 當變數值滿足滿足若且為若if判別式，則可進入判別式中執行特別任務。
❆自動增數字 [純html-script寫法.php定義初始變數值]藉由JavaScript，不斷迴圈累加數值並呈現於螢幕當中(藉由php賦予初始值)
❆自動增數字 藉由純JavaScript之setInterval，不斷迴圈累加數值並呈現於螢幕當中不同的位置
❆ fun2在fun1裡面，fun3在fun2裡面，依此類推。 呼叫順序： fun1---->fun2---->fun3---->延遲一秒才呼叫fun4---->延遲一秒才呼叫fun5---->延遲一秒才呼叫fun6
❆ [純script、無php]先呼叫fun1方程式，於fun1內部再呼叫fun2，於fun2計算後再回傳結果至fun1，再將fun1結果回傳原外部呼叫之處
❆ [純script、無php](簡單版傳遞)先呼叫testwilly方程式，於testwilly內部再呼叫testsandy，於testsandy計算後再回傳結果至body網頁呈現
❆ [純script]輸入兩個數字計算，於螢幕呈現結果(超基本純script單方程式傳遞)
❆ [純html-script寫法]鍵入數字，自動進行運算，並將結果呈現於同一個網頁底下
❆由網址提供變數進行運算 [純html-script寫法] 抓取網址列中的變數(由?A=7&B=8提供)，進行自動運算，並將結果呈現於同一個網頁底下
❆手動輸入變數進行運算，並將變數值呈現於網址 [純html-script寫法] 於HTML鍵入變數，將所鍵入的變數呈現於網址列(網址列僅呈現變數值、無法由網址列輸入變數值來提供計算)，且進行自動運算，並將結果呈現於同一個網頁底下
❆次要-手動輸入or網址輸入皆可變數進行自動運算 [純html-script寫法] 將所鍵入的變數呈現於網址列最後方?AA=9，取得變數值並進行自動運算 or 將網址列中的變數傳到網頁中進行自動運算+呈現於方框之中 瑋倫自製操作影片
缺點： 於網頁內部的方框中輸入的數字btnpasswordwilly3若固定，則會不斷地由網址列抓取變數，進行平方運算後再藉由demosandy6傳回網頁上顯現。
❆主要-手動輸入or網址輸入皆可變數進行自動運算 [純html-script寫法] 將所鍵入的變數呈現於網址列最後方?AA=9，取得變數值並進行自動運算 or 將網址列中的變數傳到網頁中進行自動運算+呈現於方框之中 瑋倫自製操作影片
優點： 僅在頭一次進入網頁時，由網址抓參數進行平方後傳到demosandy6呈現回網頁。因此，將網頁中平方後的結果反白後，於下一個時間點並不會被取消反白。
❆若且唯若if statement [純html-script寫法]鍵入數字，自動進行if statement若且唯若判別，並將結果呈現於同一個網頁底下
❆若且唯若if statement [純html-script寫法]由網址列抓取變數，再轉成字元**.toString()自動進入if statement來判斷 註解：if statement建議勿採取parseInt(**)
❆若且唯若if statement [純html-script寫法](超精簡版)判別方框所鍵入的變數是否隨時間而變化，藉由比較前後時刻，於改變的瞬間呈現提示。可取此為編修範本
❆若且唯若if statement [純html-script寫法](精簡版)判別方框所鍵入的變數是否隨時間而變化，藉由比較前後時刻，於改變的瞬間呈現提示
❆若且唯若if statement [純html-script寫法](詳細版)判別方框所鍵入的變數是否隨時間而變化，藉由比較前後時刻，於改變的瞬間呈現提示。註：藉由[精簡版or超精簡版]即可運作，[詳細版]只是為了理解
❆ [純html-script寫法]藉由javascript傳遞變數值到方框裡
❆按鈕增數字 [純html-script寫法]點擊按鈕，不斷加1，並呈現於螢幕上。亦可按F12，再點console來看即時動態變數值。 按鈕呼叫script-function，在script中，將變數+1後回傳呈現於頁面。
❆按鈕增數字 [純html-script寫法]點擊第一個按鈕，不斷加1，並呈現於螢幕上。 再點擊第二個按鈕，將第一個按鈕的值進行平方，並呈現於螢幕上。 亦可按F12，再點console來看即時動態變數值
❆按鈕增數字 [比較html-script與PHP差異]驗證java script之var變數可於同一個網頁面中累積傳遞；然而PHP的變數僅為由上到下一次性傳遞，無法於同一頁面中記憶早期經歷來進行傳遞。 JS：點擊第一個按鈕，不斷加1，並呈現於螢幕上。 再點擊第二個按鈕，將第一個按鈕的值進行平方，並呈現於螢幕上。 亦可按F12，再點console來看即時動態變數值 PHP：點擊第一個按鈕，賦予$count變數頭一個值。 再點擊第二個按鈕，賦予$count變數第二個值。 再點第三個按鈕，卻只會呈現最鄰近之第二個值。(因為由上往下線性傳承，便承接最鄰近之第二個值)
❆按鈕增數字 [PHP定義變數、核心疊加由html-script]由PHP定義數值，傳遞給script作為變數。 藉由button點擊，不斷增加螢幕所呈現的數字
❆ 設定四秒鐘後跳轉頁面，且倒數計時呈現於螢幕中
❆ 點擊文字後，將跳到本頁面中指定的位置
❆ 點擊文字後，將跳到本頁面中指定的位置，再次點擊可跳回。
❆ 點擊文字後，將跳到另一(乙)頁面中指定的位置，再次點擊可跳回原本(甲)頁面中指定的位置。
❆ 強制讓h標籤tag不換行
❆php呼叫方程式 [PHP寫法]鍵入function的名稱來呼叫function，並將執行的結果呈現於function被呼叫處
❆php呼叫方程式 [PHP寫法]左方new引入class，藉由箭頭銜接右方，再呼叫class中的function
❆PHP5 & PHP7語法比較(比大小) [PHP5 & PHP7皆可運作] 使用if else判別式來呈現大於、小於、等於時的狀態。****缺點：使用基礎PHP寫法，語法冗長，效率低落。 ****優點：兼容性高，PHP5與PHP7皆可運作。
❆PHP5 & PHP7語法比較(比大小) [PHP5無法運作 & PHP7可運作] 使用特殊代號<=>來呈現大於(+1)、小於(-1)、等於(0)時的狀態。****優點：使用高級PHP寫法，語法簡短，效率高尚。 ****缺點：兼容性低，PHP5無法運作。
20240215 ❆ [PHP寫法]呈現存在本資料夾內之所有檔案+所有資料夾。 重點：藉由glob無法顯示隱藏加點的檔案(例如最前方有點的檔名： .willy )
❆ [PHP寫法](次佳:需額外補上路徑)呈現存在本資料夾內之所有檔案+所有資料夾。 重點：藉由scandir可顯示隱藏加點的檔案(例如最前方有點的檔名： .willy )
❆ [PHP寫法](最佳:可直接呈現完整檔名)呈現存在本資料夾內之所有檔案+所有資料夾。 重點：藉由isdot可顯示隱藏加點的檔案(例如最前方有點的檔名： .willy )
❆ [PHP寫法]檢查是否包含單引號
❆ 將HTML碼寫入PHP當中的方式：1.echo(" 雙引號前加反斜線 "); 2. printf(" 程式碼 ");
❆ [PHP寫法] echo單雙引號的搭配
❆傳遞參數 [PHP寫法] [保密優、效率低：POST+按鈕] 點擊按鈕，由A網頁跳至B網頁，過程中藉由POST傳遞多個參數，傳遞時資訊未呈現於網址。
❆傳遞參數 [PHP寫法] [無保密、效率高：GET+按鈕] 點擊按鈕，由A網頁跳至B網頁，過程中藉由GET傳遞多個參數，傳遞時資訊呈現於網址。
post的缺點：速度比get傳輸慢，get的效率更高
❆傳遞參數 [PHP寫法] 點擊連結，由A網頁跳至B網頁，過程中藉由GET傳遞多個參數，傳遞時資訊呈現於網址。
其中包含藉由 $_SERVER["REQUEST_URI"] 傳遞A網頁之網址至B網頁，可由B網頁接收A網頁網址後，點擊按鈕再回到A網頁。
❆按鈕圖片 [PHP寫法]點擊botton後，跑指定botton的方程式，並將結果直接呈現於本頁當中
(按鈕藉由PHP送出此按鈕所具有的獨特字串至本頁之中，if判別式承接到此特殊字串，而執行指定方程式)
(分別點選2個按鈕，呈現2個不同的文句+圖片)
❆按鈕圖片 [PHP寫法]點擊botton後，跑指定botton的方程式，並將結果直接呈現於本頁當中
(按鈕藉由PHP送出此按鈕所具有的獨特字串至本頁之中，if判別式承接到此特殊字串，而執行指定方程式)
(分別點選四個按鈕，呈現四個不同的文句+圖片)
❆按鈕圖片 [PHP寫法]首先由四個點擊按鈕選擇食物，但此招是藉由點擊按鈕後於PHP程式碼中找對應if中的方程式(並非藉由script)，選項的結果會被存在input方框中。 接著再點擊另一按鈕，將input方框中選項的結果送出到另一頁面。PHP的缺陷就是一次只能處理兩組按鈕中一個按鈕的請求(但本範例只有一組按鈕，所以不受影響)。
❆按鈕圖片 [PHP寫法]首先由四個點擊按鈕選擇食物，但此招是藉由點擊按鈕後於PHP程式碼中找對應if中的方程式(並非藉由script)，選項的結果會被存在input方框中。 接著再點擊另一按鈕，將input方框中選項的結果送出到另一頁面。 PHP的缺點就是有兩組(各四個)選項的話，一次僅能執行(紀錄下)各別一組中的選項來傳輸(本範例有2組按鈕，可見影響)。
❆按鈕圖片 [JavaScript寫法]首先由四個點擊按鈕選擇食物，此招是藉由點擊按鈕後於script程式碼中找對應的方程式，選項的結果會被存在input方框中。 接著再點擊另一按鈕，將input方框中選項的結果送出到另一頁面
心得：使用script呼叫方程式的優點就是一次能同時處理兩組按鈕中，各別按鈕(兩個)的請求，倘若設置兩個按鈕(例如分別選擇1.四種食物2.四種物品<----共八個選項)、並對應兩個input方框， 那麼按了1.一種食物，則食物的input方框中會呈現選擇結果， 再次點選2.一種物品，則物品的input方框中會呈現選擇結果， 並且 食物、物品的input方框所選擇的結果會同時存留於input方框
JavaScript的優點就是一次能同時處理兩組按鈕中，獨立兩個按鈕的請求。
❆按鈕圖片 [JavaScript寫法] JavaScript的優點就是一次能同時處理兩組按鈕中，獨立兩個按鈕的請求。 (新增功能：必須進行選擇方可送交；若未選擇---->欄位為空、無法送交)
❆選單圖片 [PHP寫法](簡單版)僅一組form下拉式選單：由下拉式選單直接呼喚圖片於本網頁下方
❆選單圖片 [PHP寫法]兩組form下拉式選單：1.由下拉式選單直接呼喚圖片於本網頁下方，2.下拉式選單指定圖片再點擊botton後，才跑出圖片
❆選單文字 [PHP寫法]一組form下拉式選單：由下拉式選單選擇所欲呼喚的判別式，並呈現各選項所對應特殊的文字於網頁中
❆選單字型 [PHP寫法]一組form下拉式選單：由下拉式選單選擇所欲呼喚的判別式，給予[相同的文字]不同的字型(大小+顏色+字體)於網頁中
❆選單字型.網址嵌入 [PHP寫法]一組form下拉式選單：由下拉式選單選擇所欲呼喚的判別式，給予[相同的文字]不同的字型(大小+顏色+網址內嵌字體)於網頁中
❆ [PHP寫法]點擊botton後，跑指定botton的方程式，選擇加法or減法，並將計算結果直接呈現於同一個網頁的底下，而無須再跳到另一頁面
❆ [PHP寫法]於網頁輸入數字or將數字隱藏於程式碼中，接著按下按鈕，將數字傳輸到另一個網頁進行計算並呈現計算的結果
❆ 將form輸入數值給予變數，藉由javascript自動傳輸跳轉至另一PHP頁面計算並呈現結果，而無須手動按下按鈕button來傳遞數值
❆讀檔案呈現於屏幕(本處僅自動F5) [script自動F5更新] 藉由JS自動F5更新網頁並呈現即時時間顯示
將以下文字： 『請在此處更改文字並Ctrl+S存檔』 改成 『請在此處更改文字並Ctrl+S存檔ABCD』 按下Ctrl+S 可見網頁瞬間變化： 瑋倫自製操作影片
❆讀檔案呈現於屏幕 [script讀檔自動更新、非F5] 於同一層資料夾內新增檔案test3.txt 藉由讀取test3.txt，並呈現於螢幕上。本程式藉由JS自動更新，非藉由F5來進行更新 由HTML語法自動讀取檔案時，更改test3.txt，可即時呈現更改結果於螢幕上。(但久遠有時改完test3.txt，會無法自動更新) 由PHP語法自動讀取檔案時，更改test3.txt，無法更改結果於螢幕上。
❆讀檔案呈現於屏幕 [PHP讀檔、自動F5更新.建議用此] 於同一層資料夾內新增檔案zz_code_autoF5freshPHP_beread.txt， 藉由讀取zz_code_autoF5freshPHP_beread.txt，並呈現於螢幕上。本程式藉由PHP讀取文字，並自動F5更新。
❆讀檔案呈現於屏幕 [html-object讀檔] 藉由於同一層資料夾內新增檔案zz_code_objectdisplay_readme.txt，讀取檔案中的內容，並呈現於屏幕上(藉由html語法，非PHP語法)
❆讀檔案呈現於屏幕[最佳!] [使用ajax讀PHP檔] 使用ajax語法呼叫php檔案，並藉由setInterval即時運作
****鍵入文字，將文字傳輸到另一個php程式碼，再與該程式碼中的文字結合後回傳
****藉由html，將新增的文字列在舊文字的下方，舊文字被反白時會自動取消反白
❆讀檔案呈現於屏幕[最佳2!] [使用ajax讀TXT檔] 使用ajax語法呼叫txt檔案，並藉由setInterval即時運作將txt檔案中的文字回傳並呈現於網頁上
****註： 同一行文字刪除舊的，更新成新的： $("#result").html(msg2);
舊的文字保留，於新的一行新增更新的文字： $("#result").append(msg2);
❆讀檔案呈現於屏幕[最佳2!] [使用ajax讀TXT檔] 使用ajax語法呼叫txt檔案，並藉由setInterval即時運作將txt檔案中的文字回傳，再藉由parseInt()轉換成可被計算的number數字形式， 並使回傳的數字+1後呈現於網頁上
❆回到前一頁 重點：藉由PHP傳遞前一頁的網址到下一頁，由下一頁回到前一頁時，前一頁會被自動F5刷新
1.頭一個網頁呈現前一層資料夾中的所有檔案、並自動呈現由零開始增生的數字
2.點擊頭一個網頁中的按鈕，即可將本頁(頭一個網頁)網址傳遞至另一頁面
3.於另一個網頁(第二個網頁)，接收前一網頁的網址。點擊第二個網頁的按鈕後，可回到前一個(頭一個)網頁，且前一個網頁會即時被刷新、自動增生的數字會由零重新開始。 瑋倫自製操作影片
❆回到前一頁 重點：[純JavaScript]點選回到前一頁的按鈕、回到前一頁時，必須藉由手動F5進行刷新
1.頭一個網頁呈現前一層資料夾中的所有檔案、並自動呈現由零開始增生的數字
2.點擊頭一個網頁中的按鈕，即可跳至另一頁面
3.於另一個網頁(第二個網頁)，點擊第二個網頁的按鈕後，可回到前一個(頭一個)網頁，但前一個網頁會接續跳出前的數字繼續升值。若要歸零，必須手動按F5刷新。 瑋倫自製操作影片
❆回到前一頁 重點：[純JavaScript]點選回到前一頁的按鈕、回到前一頁時，A.參考：無須B.主要：必須藉由手動F5進行刷新
1.頭一個網頁呈現前一層資料夾中的所有檔案、並自動呈現由零開始增生的數字
2.點擊頭一個網頁中的按鈕，即可跳至另一頁面
3.於另一個網頁(第二個網頁)，點擊第二個網頁的按鈕後，可回到前一個(頭一個)網頁，但前一個網頁會接續跳出前的數字繼續升值。若要歸零，A.參考：無須B.主要：必須 手動按F5刷新。 瑋倫自製操作影片
❆ 藉由textContent呈現每秒鐘所更新的文字，將其highlight反白後，下一秒並不會自動取消反白。
藉由innerHTML呈現每秒鐘所更新的文字，將其反白後，下一秒將會自動取消反白。
❆ 於原先的文字下方，不斷產生新的文字，而原本的文字依舊可被highlight反白。 社群平台新增留言文字時，原先之文字依舊可被反白。 倘若採取傳統整個版面更新的辦法，則當文字被反白，setInterval隨即將反白給更新註消。
❆ 混合PHP & JavaScript 在php裡面參摻入JavaScript： 於本地資料夾秀出所有檔案的名稱 $filename (不斷由alert呈現)
❆ 混合PHP & JavaScript 在JavaScript裡面參摻入php： 由PHP定義變數值，再將值給予JS，按下F12，見console變數。於setInterval中，每按一下就不斷提升1 並非使用ajax呼叫PHP，而是使用php echo數值給予JavaScript的變數<---- var B=<?php echo $count; ?>;
❆ 強制原封不動地輸出文字，可用於原封不動地打印出PHP程式碼作為介紹範例
❆ 單純藉由PHP呈現時間於屏幕 藉由PHP呈現本地時間(包含本地時區)，單純呈現時間於屏幕，並非將時間轉存於資料庫SQL，註:本程式需於自己電腦執行，否則會呈現找無setTimestamp()
❆ 單純藉由PHP呈現時間於屏幕 方式1. 方式2. 藉由PHP直接顯示時間以及呈現[當地GMT要加多少]，本法必須手動指定時區。可藉此於對話視窗中被ajax索引時，直接藉由PHP呈現本部分+被CSS修改，註:本程式需於自己電腦執行，否則會呈現找無setTimestamp()
❆ [USE ME]單純藉由PHP呈現時間於屏幕 1.jquery自動取得終端機時間，再以ajax傳至PHP_2.時間戳可指定為 a.當前時間戳 或 b.由資料庫撈早期所存檔的舊時間戳 ，註:本程式需於自己電腦執行，否則ntu會呈現空白狀態
20221130A(此處往下有許多尚未整理) 不同種類的input type
❆ input type 的種類
❆checkbox [純html-script寫法]checkbox：物品打勾的結果藉由script呈現於相同頁面(須按按鈕才能送出、呈現結果)[藉由不同id呈現不同的value]
❆checkbox [純html-script寫法]checkbox：物品打勾的結果藉由script呈現於相同頁面(點選後，即可自動於網頁下方呈現結果)
❆checkbox [純html-script寫法]checkbox：物品打勾的結果藉由script呈現於相同頁面(須按按鈕才能送出、呈現結果)[藉由querySelectorAll收納相同name中的所有不同的value]
❆checkbox [純html-script寫法]checkbox：按下一個按鈕後，一次將所有項目打勾或取消勾選
❆checkbox [PHP寫法]checkbox：物品打勾的結果藉由php傳輸到另一頁面，一次可選多個項目。藉由{不同name}對應{不同value}來傳遞。(複選)
❆checkbox [PHP寫法]checkbox：物品打勾的結果藉由php傳輸到另一頁面，一次可選多個項目。藉由{不同value}彙整至{相同的name}，以array的形式來傳遞。(複選)
❆checkbox [PHP寫法]checkbox：物品打勾的結果藉由php傳輸到另一頁面，1.點擊第一個按鈕將多個項目全部勾選或註銷。2.藉由{不同value}彙整至{相同的name}，以array的形式來傳遞。(複選)
❆checkbox [PHP寫法]checkbox：物品打勾的結果藉由php傳輸到另一頁面，一次只能選一個項目(單選)
❆number [純html-script寫法]number(最佳)：於指定id方框填寫數字後，按下按鈕，藉由script中的querySelector抓取指定id方框內的數字，再回傳於同頁底下。
❆number [純script寫法]number(次佳)：點擊botton後，跑指定botton的方程式，選擇加乘法or減法，藉由指定name.value傳輸數值至script，並將計算結果直接呈現於同一個網頁的底下，而無須再跳到另一頁面
❆range [純script寫法]range：拖曳bar指標、改變數值，進而自動改變字體大小。因所要求變更之字體大小於function外，依舊可將字體大小變化過程中的文字反白。
❆參考：按鈕變化文字大小 [純script寫法]button：點擊按鈕，因只執行一次function，因此由function中傳文字到內文中，依舊可將文字反白。
❆color [純script寫法]color：拖曳color指標、改變數值，進而自動改變字體顏色。因所要求變更之顏色於function外，依舊可將變色過程中的文字反白。
❆參考-主要：按鈕變化文字顏色(及大小)-先反白再按按鈕可維持反白狀態 [純script寫法]button：點擊按鈕，因只執行一次function，因此由function中傳文字到內文中，依舊可將文字反白。各別採取getElementById以及querySelector做示範。
❆參考-主要：按鈕變化文字顏色+大小+字型-先反白再按按鈕可維持反白狀態 [純script寫法]button：點擊按鈕，因只執行一次function，因此由function中傳文字到內文中，依舊可將文字反白。各別採取getElementById以及querySelector做示範。
❆參考-主要：按鈕變化文字顏色+大小+字型(將字型利用網址嵌入網頁中)-先反白再按按鈕可維持反白狀態 [純script寫法]button：點擊按鈕，因只執行一次function，因此由function中傳文字到內文中，依舊可將文字反白。各別採取getElementById以及querySelector做示範。
❆參考-次要：按鈕變化文字顏色(及大小)-先反白再按按鈕會造成反白消失 [純script寫法]button：點擊按鈕，因只執行一次function，因此由function中傳文字到內文中，依舊可將文字反白。各別採取getElementById以及querySelector做示範。
❆date,datetime-local [PHP寫法]：選擇一個特定的時間，按下送出按鈕，將指定的日期時間傳送到另一個php頁面
❆date,datetime-local [純script寫法]選擇日期&時間。按下按鈕後，結果直接呈現於本網頁下方。
❆伺服器PHP+SQL安裝完後的測試程式碼 當伺服器架設完成時，伺服器不具備utf8mb4編碼防止亂碼設定，使用本專案程式碼進行測試時，依舊可正常呈現於phpMyAdmin、不會產生亂碼。
1.創造出名為teste2的DataBase(DB)
2.從已經存在、名為teste2的DataBase(DB)，創造出名為mommybornid的Table
3.從已經存在、名為teste2的DataBase(DB)， 已經存在、名為mommybornid的Table， 已經存在的五個column分別為： id(AI打勾+選PRIMARY)、sandy、tsair、alice、willy_reg_date 不斷於sandy、tsair、alice三個欄位填入資料，並呈現最終所生成之列的id編號
4.將[資料庫:teste2]、[資料表:mommybornid]、[欄位:id, sandy, tsair, alice, willy_reg_date]當中的資訊完整呈現於網頁中
❆伺服器PHP+SQL安裝完後的測試程式碼 於輸入資料至資料庫中之第3步程式碼中，並未設定utf8或utf8mb4編碼，因此需仰賴伺服器設定(例如：freebsd系統之my.cnf 或 windows系統之my.ini)，方可檢視到繁體中文。
1.創造出名為teste的DataBase(DB)
2.從已經存在、名為teste的DataBase(DB)，創造出名為mommybornid的Table
3.從已經存在、名為teste的DataBase(DB)， 已經存在、名為mommybornid的Table， 已經存在的五個column分別為： id(AI打勾+選PRIMARY)、sandy、tsair、alice、willy_reg_date 不斷於sandy、tsair、alice三個欄位填入資料，並呈現最終所生成之列的id編號
4.將[資料庫:teste]、[資料表:mommybornid]、[欄位:id, sandy, tsair, alice, willy_reg_date]當中的資訊完整呈現於網頁中
❆date,datetime-local [使用者操作頁面]藉由CSS提供最簡易對話方框，逐一框住由SQL所撈出之舊資料
❆date,datetime-local [使用者操作頁面]藉由CSS提供最簡易對話方框，左方格輸入：傳送者為6、接收方為7，右方格輸入：對話內容，按F5呈現CSS給予雙色逐一框住[傳送者.藍色]&[接收方.綠色]由SQL所撈出之舊資料
3d MAX:
❆ 立體模型設置NURBS
純C:
❆ 純C語言，從無到有:下載、安裝、編輯、實測(使用Code::Blocks)
❆ C & C++ 差異: C_typedef stru 以及 C++_struct
COMSOL:
❆ Fresnel lens (simulation results in COMSOL Multiphysics):
ZEMAX:
❆ 純非序列coating某個面設定coating
❆ 序列模式下將表面coating不同角度反射率
❆ 序列模式下將表面coating [不同角度+不同波長] 反射率2019July3瑋倫教學
❆ 以GBIA看 [不同角度有不同反射率]之coating效果 2019Aug5瑋倫教學
❆ 純序列(或序列.非序列混雜)情況下，想在coating情況下看到同時呈現穿透以及反射 2019Aug6瑋倫教學
❆ 三者結合即可產生layout局部效果2019Aug14
❆ 利用Pipe包圍在波導結構外圍，再針對材料做multiconfiguration設定2019Aug14
❆ Multi-configuration_NCOT針對不同物件有不同coating2019Aug14
❆ 利用布林將多個單透鏡個別優良部分裁切取出並結合
❆ 光學元件順序前後對調
❆ 非序列優化
❆ 嘗試將freeform Z接收光線調整正常
❆ VR設計原理
❆ VR設計理論公式探討
❆ 2020.04.12paper與公式討論
❆ [106-1光學系統設計Optical System Design] The lecture of Zemax OpticStudio 17_willy