VSCode 快捷鍵變更修改檔案格式語言模式方法
Visual Studio Code 三種簡單方法，讓你輕鬆變更檔案格式 Change Language Mode 變更語言模式 Visual Studio Code VSCode 是一款功能強大的文字編輯器，它支援多種程式語言和檔案格式。如果我們想要 更改檔案的語言模式 ，可以…
閱讀文章
UCAMC Category
JavaScript
這裡彙整 UCAMC 以「JavaScript」分類標註的文章，方便讀者依主題追蹤技術筆記與數位工作流。
39 篇文章 · 依日期由新到舊排序React插入原始的 HTML如何使用dangerouslySetInnerHTML 屬性
什麼是 dangerouslySetInnerHTML 屬性？ dangerouslySetInnerHTML 屬性是 React 提供的一個屬性，允許我們在 React 組件中插入原始的 HTML 字串 。這在某些情況下可能很有用，例如，當我們需要在組件中顯示一個來自外部來源的…
閱讀文章自動輪播的jQuery Tab選項卡滑動器帶有導航功能
在這篇文章中，我們將介紹一段使用jQuery編寫的自動輪播選項卡滑動器，並帶有導航功能。這個滑動器可以讓您在不同的內容選項卡之間切換，同時也支援自動輪播功能，讓選項卡自動在指定的時間間隔內切換。 HTML結構 首先，我們來看一下HTML結構。這個選項卡滑動器包含兩個主要的部分：選…
閱讀文章提升用戶體驗： jQuery 創建流暢滑動導航選單線條效果
在這篇教學文章中，我們將學習如何使用 jQuery 創建一個具有動態滑動線條效果的導航選單 。可以為網站的導航菜單增添視覺吸引力，並在用戶懸停在菜單項目上時突出顯示當前選中的項目。 以下是我們實作後的完成的展示效果，通過這個教學，我們將學會了如何使用 jQuery 搭配 CSS動…
閱讀文章手機版網頁自適應slider：bxSlider圖片輪播插件
做網頁時，設計師常常需要使用 slider 來呈現多張圖片或內容，有時桌機版是一般排版呈現，但到了手機版，設計師可能因為版面呈現美觀與較符合使用者設計需求關係， 手機版的網頁呈 現方式會採用slider的顯示，這對於 網頁前端設計切版 的設計師們來說可就是一個很頭痛的問題，相同的…
閱讀文章jQuery + CSS 動畫背景擴展效果按鈕animation @keyframes
使用jQuery + CSS animation 關鍵影格@keyframes，定義設定動畫漸變，達到按鈕 hover 後背景從中間展開，擴展到填充整個背景按鈕效果。 開始前先將HTML <button 先寫好，class為 elementor button ，並再多加入四個同樣…
閱讀文章jQuery validate.js 台灣手機格式號碼表單驗證
jQuery validate.js 是一個方便用於表單驗證的jQuery plugin，透過它你可以簡單且完整的處理表單驗證的問題，但在電話號碼處理上，他並沒有提供太完整的過濾函數，在官方網站只有說明提供了phoneUS –驗證有效的美國電話號碼，但其他國家號碼沒有相對的函數提…
閱讀文章JavaScript分割split()方法逗號分隔修剪多餘的空格
如下需要拆分一個關鍵字字符串並將其轉換為逗號分隔，但是要如何去除多餘的空格使用逗號分隔。 var keywordString = "ford tempo, with,,, sunroof"; 輸出 ford,tempo,with,sunroof split 方法 在ES6中可以應…
閱讀文章jQuery在click()和on()之間有什麼區別
click 事件僅在元素被渲染時起作用，並且僅在DOM準備就緒時才附加到加載的元素上。 on 事件是 動態附加到DOM元素 的，這對將事件附加到在ajax請求，或其他情況下 呈現的DOM元素（在DOM準備就緒後）很有用 。 DEMO GET按鈕動態載入了 <li 元素，在這樣比較…
閱讀文章JavaScript中的正數轉換成負數？
使用abs 總是正數 abs 函數返回一個數的絕對值。返回參數x的絕對值。如果參數x是float，則返回的類型也是float，否則返回integer（因為float通常比integer有更大的取值範圍）。 Math.abs num abs 的反向總是負數 Math.abs num…
閱讀文章jQuery Bootstrap tabs分頁應用兩階層連結開啟指定tab
使用Bootstrap3 tabs網址轉跳後指定要開啟某個tabs，包含指定第二階的tabs。 指定連結到某個tab可使用一下網址參數做選取，tab1為第一階，tab2為第二階。 /index.html?tab1=2&tab2=3 程式碼 先在網址取得網址列參數後使用 :eq 1…
閱讀文章SheetJS js-xlsx如何獲取active sheet index工作表索引名稱？
解析 SheetJS js xlsx：在前端讀取並操作 Excel 表格 在前端應用中，SheetJS js xlsx 是一個功能豐富的 JavaScript 函式庫，專門用於處理 Excel 表格。這篇教學將引導您如何使用 js xlsx 來匯入和讀取 Excel 表單，並更進…
閱讀文章如何在jQuery中獲取checkbox value
要獲取Value屬性的值，您可以執行以下操作： $ "input type='checkbox' " .val ; 或者，如果您為其設置了class或id，則可以： $ ' check id' .val ; $ '.check class' .val ; 但是，無論是否選中，它都…
閱讀文章如何使用Javascript陣列與物件delete與splice
在 javascript 有分為物件與陣列，常見刪除的方法有 delete 與 splice。 陣列 var array= 'a', 'b', 'c', 'd' ; console.log a 0 ; // a 物件 var object={ 0: 'a', 1: 'b', 2:…
閱讀文章【教學】如何開始React網頁最簡單的方式
A JavaScript library for building user interfaces 用於構建用戶界面的 JavaScript 庫。 React 是 facebook 官方所維護的開放原始碼 JavaScript 函式庫，可以降低互動式網頁應用程式開發難度，自動處理…
閱讀文章jQuery簡單的應用YouTube IFrame Player API
當你網頁內嵌了一個 YouTube，通常的做法就是對那個影片點選分享 = 內嵌，就會跑出一條讓你複製貼上的 iframe，像是: <iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src=…
閱讀文章Javascript如何動態載入模組Dynamic import()
動態import 引入了一種新的類似功能的形式，import與靜態相比，可以解鎖新功能import。本文對這兩者進行了比較，並概述了新的內容。 靜態import（概述） 模塊./utils.mjs // Default export export default = { cons…
閱讀文章如何使用Node.js + express 建立一個網站
若提到使用Node.js來架設網站，基本上都會聯想到 Express 模組，以下即是簡單地說明如何使用Node.js + Express 在十分鐘內架設一個網站。 檔案架構: node modules view layout.ejs login.ejs index.ejs ser…
閱讀文章React上傳文件使用react-input-files讀取Excel js-xlsx
介紹 SheetJS js xlsx 是 一款能夠讀寫Excel的.xls、.xlsx格式表格的插件 ，瀏覽器支持良好，並且能在多個平台上使用，目前在github上有12602個star，在這邊的範例主要使用React，再加上SheetJS js xlsx及react input…
閱讀文章react-router 4 index路由始終處於active狀態
react router 4中NavLink可加入activeClassName=\\'active\\'屬性，使得選單在切換時class加入active，可對這個active class寫css style樣式，達到選單切換的效果。 設定成以下，to="/"表示index首頁，…
閱讀文章如何使用Javascript物件key對陣列array進行group分群組
通過物件key對array進行分組，然後根據分組創建一個新的物件陣列？例如以下，有一個car陣列物件，要對make這個key作為分組關鍵： var cars = { 'make': 'audi', 'model': 'r8', 'year': '2012' }, { 'make'…
閱讀文章如何使用JavaScript直接觸發開啟瀏覽器列印視窗print()
在網頁開發中，有時我們需要讓使用者能夠直接列印當前頁面的文本資料。使用print 函數可以輕鬆實現這一目的，並且能夠直接由瀏覽器內建的列印對話視窗開啟列印功能。 在HTML中，我們可以使用以下程式碼來建立一個按鈕，並綁定點擊事件： html <input name="print"…
閱讀文章如何使用Javascript檢查數字float浮點數還是int整數
isFloat and isInteger in javascript 解決的方法可以使用下列函數來檢查上isFloat和isInteger function isFloat n { return n === +n && n == n|0 ; } function isInteg…
閱讀文章如何使用Javascript 陣列Array前後加入元素
push 在陣列的末端加入一個以上的元素，並返回新的陣列長度。 var a = 1, 2 ; a.push 3 ; print a ; // 1,2,3 unshift 在陣列的開頭處加入一個以上的元素，並返回新的陣列長度。 var a1 = 1, 2, 3 ; a1.unshi…
閱讀文章React Router 4子路由使用Layout設定
再過去版本中可使用IndexRoute作為設定首頁進入點，但在React Router 4設定上有所改變，全都使用Route，而需要設定為首頁加入exact屬性。在Layout方面本來使用Route帶入元件，在React Router 4直接使用react元件，如下在Layout…
閱讀文章使用PHP Joomla Ajax進行文件資料表單上傳
在views/temp目錄下創建當php檔案如下分別鍵入html與Javascript jQuery Ajax部分。 建立views頁面 <?php <form action=<?php echo JUri::getInstance ; ?? id=adminForm name=…
閱讀文章如何使用HTML5 Canvas 實現刮刮樂遊戲效果
canvas實現刮刮卡 這個刮刮卡用HTML5 canvas繪製。刮刮卡主要由兩層canvas繪製，底層放置隨機數，頂層放置圖片，限制每天只能刮三次，主要利用globalCompositeOperation我們可以將新圖形繪製在舊圖形之下、遮蓋部分區域、清除畫布部分區域 不同於…
閱讀文章Javascript如何使用filter()移除陣列中重複值
Javascript filter函式，可以幫助我們過濾一個陣列中符合條件的元素，若不符合則刪除。不更改原陣列，而回傳新陣列。 filter 函式，接受一個 callback 函式，callback 可以有三個參數 element, index, array ， element：…
閱讀文章使用Javascript將HTML表格table轉換輸出Excel xlsx、xls、csv、txt電子檔
TableExport.js 簡單易用的Javascript插件，允許您只在一行代碼，會自動產生輸出Excel、txt、csv按鈕， 快速動態地將HTML表格轉換為Excel電子表格 .xls .xlsx，逗號分隔值.csv和純文本 .txt。 下載和設置 使用<script 標…
閱讀文章如何使用javascript、jQuery當點擊DIV區塊外部背景將其DIV隱藏
使用Javascript 最流行的答案是沒有jQuery的解決方案： 該Node.contains 方法返回一個Boolean值，該值指示節點是否是給定節點的後代，即節點本身，其直接子節點之一（childNodes），子節點直接子節點之一等等。 document.addEvent…
閱讀文章如何使用JavaScript連結轉跳網址方法
window.location.href轉跳連結 自己網域轉跳網址 window.location.href='sethost.php'; 轉跳到其他網域，加入網頁http:// window.location.href=' window.open連結另開頁面 window.op…
閱讀文章jQuery視差滑塊jQuery Parallax Slider image 圖片滑動
本教程中，我們將看看如何創建一個具有 視差動畫效果的jQuery滑塊 。在這個例子中，只用幾行代碼就實現了視差滑塊 少於40行和3kb 。jQuery庫中眾所周知和使用最廣泛的函數編寫了這個例子。很容易理解代碼流並根據您的需要進行定制。 在這個例子中，我使用 init 函數一個接…
閱讀文章JavaScript 控制流程if…esle 判斷式與switch
控制流程 任何一種程式語言程式碼都是由上而下逐一執行的，此外有時候必須程式判斷依照不同的數值給予不同的路徑輸出，稱之為控制流程。 區塊 block ES6 中新增了程式區塊是用大括號包起來的區域： js { statement 1 statement 2 ... statemen…
閱讀文章JavaScript 基礎介紹歷史與發展變數與常數
JavaScript 歷史與發展 各位先前可能聽過 ECMAScript 若不知道也沒關係，ES6的出現就他有關係，在1995年時 Netscape 網景 公司與 Sun 昇陽 公司合作 設計一個網頁程式語言名為 JavaScript 名稱屬 Sun 昇陽 公司擁有，後來被Ora…
閱讀文章一探究竟了解React-router 4簡易教學
React router和React router dom的選擇 很多剛使用react的同學，在接觸到react router的時候往往開始會比較無概念，都會很難進入狀況，什麼 react router 和 react router dom ？下面我們就來一探究竟。 React…
閱讀文章使用jQuery PHP AJAX來實現圖片上傳 Image Upload
PHP AJAX Image Upload 通過AJAX功能上傳圖片非常容易，並且易於在頁面中實現，在這個例子中，使用 AJAX進行PHP圖片上傳 ，無需重新加載頁面。 使用jQuery AJAX來實現圖片上傳 。有一個帶有文件輸入欄，和一個提交按鈕的表單。在這段代碼中，使用所選…
閱讀文章jQuery resize不斷取得遊覽器$(window).width()寬度-jQuery目前視窗寬度
jQuery .resize jQuery $ window .resize 視窗被調整過時，運行此函數，再使用 $ window .width 取得目前遊覽器視窗寬度。若要取得的是遊覽器高度可改用 $ window .height 。 $ document .ready fun…
閱讀文章CSS子選擇器大於符號 [>]使用方法、HTML 標籤屬性選擇
選擇器之間使用大於符號 選擇父元素的子元素，不包括子元素的子元素 css選擇器使用大於符號可以選擇不含元素內的其他相同子元素，這個語法簡單的使用符號大於 在選擇器之間。 以下範例可以看出在CSS語法 .div1 p 字體顏色為紅色 ， .div1 裡面的子元素 <p div1 P…
閱讀文章Javascript物件導向基礎概念 | 物件、屬性和方法
使用建構函數建構物件 "建構函數" caonstructor Function ，能夠定義物件屬性和方法，可以將它視為一個物件宣告 但他並非類別 如下所示： function NameCard name,age,phone,email { this.name=name; this…
閱讀文章