JavaScript

  • js

    設置日期時間方法

    setFullYear()、setMonth()、setDate()方法用於設置年份、月、日,返回值返回調整過的日期的毫秒表示。

    時期返回數字年月日函數

    getFullYear() 方法可返回一個表示年份的4 位數字

    getMonth() 方法可返回表示月份的數字。返回值是0(一月) 到11(十二月) 之間的一個整數。

    getDate() 方法可返回月份的某一天。返回值是1 ~ 31 之間的一個整數。

  • @use JSDoc

    javascript jsdoc

    入門

    JSDoc 3是JavaScript的API文檔生成器,類似於JavadocphpDocumentor。您直接將文檔註釋添加到您的源代碼中,與代碼本身一起。JSDoc工具將掃描您的源代碼並為您生成HTML文檔網站。

  • 使用建構函數建構物件

    "建構函數"(caonstructor Function),能夠定義物件屬性和方法,可以將它視為一個物件宣告(但他並非類別)如下所示:

  • 擁抱Reduce、ForEach、Filter、Map

    js

    這些函式怎麼協助我替代 for 迴圈?
    先把每個函式清楚說一遍,這樣你知道哪些函式可以用來替代什麼時機的 for 迴圈了。

    • forEach:遍歷每個元素。
    • map:遍歷每個元素,回傳的值會替代原本陣列內的值。
    • filter:遍歷每個元素,回傳 true 時,目前的值會保留在陣列內,這會回傳一個新陣列,而不是修改原本的陣列。
    • reduce:遍歷每個元素,依序組合、加總,然後丟給下個元素,最終會回傳一個結果。 如果你還是不清楚的話,沒關係,下面都有範例,畢竟沒看到範例之前你可能還是不知道那個奇怪的 reduce 是什麼東西。
  • 邏輯運算子

    邏輯運算子 通常被用於布林(邏輯)值; 使用於 布林(邏輯)值時, 它們會回傳布林型態的值。 然而,&& 和 || 運算子實際上是回傳兩指定運算元之一,因此用於非布林型態值時,它可能會回傳一個非布林型態的值。 邏輯運算子將在下表中被詳細解釋。

    Logical operators

    Operator Usage Description
    邏輯 AND (&&) 運算式1 && 運算式2 假如 運算式1 可以被轉換成 false的話,回傳 運算式1; 否則,回傳 運算式2。 因此,&&只有在 兩個運算元都是True 時才會回傳 True,否則回傳 false
    邏輯 OR (||) 運算式1 || 運算式2 假如 運算式1 可以被轉換成 true的話,回傳 運算式1; 否則,回傳 運算式2。 因此,||在 兩個運算元有任一個是True 時就會回傳 True,否則回傳 false
    邏輯 NOT (!) !運算式 假如單一個運算元能被轉換成True時,回傳false , 不然回傳 true
  • 陣列元素順序重新排序 sort()

    排序函數 sort() 方法,預設為 ASCII 字符順序進行「升序排列」。

    陣列.sort()

    var Brand = ["Oldsmobile", "Pontiac", "Buick", "Cadillac", "Holden", "Saturn", "GMC"];
    Brand.sort()
    
    //輸出 Buick, Cadillac, GMC, Holden, Oldsmobile, Pontiac, Saturn

    陣列.reverse()順序反轉

    Brand.sort() //陣列重新排序
    Brand.reverse() //順序反轉(反轉元素的排列秩序)
    
    //輸出 Saturn, Pontiac, Oldsmobile, Holden, GMC, Cadillac, Buick
  • jQuery隱藏與顯示所要展現的區塊

    在網頁上常使用按下指定的按鈕(或區塊)後,jQuery隱藏與顯示所要展現的區塊,此方法可以使用jQuery click slideToggle 簡單的實現。

  • jQuery cookie應用方法

    jquery.cookie.js 一個輕量級的cookie 插件,可以讀取、寫入、刪除cookie。

    對cookies的操作在當訪問一個網站就無時無刻的都伴隨著我們,記錄著我們的一舉一動,並將不危害用戶隱私的信息,將以保存,這樣用戶就不用去從新再次操作重複的步驟,這樣大大方便了客戶,也增加了客戶對網站的回頭率。

    jquery.cookie.js 提供了jquery中非常簡單的操作cookie的方法。

    $.cookie('the_cookie'); // 獲得cookie
    $.cookie('the_cookie', 'the_value'); // 設定cookie
    $.cookie('the_cookie', 'the_value',{path:'/'}); // 設定cookie為整個網站有效
    $.cookie('the_cookie', 'the_value', { expires: 7 }); //設定cookie有效時間7天
    $.cookie('the_cookie', '', { expires: -1 }); // 删除
    $.cookie('the_cookie', null); // 删除 cookie
    $.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});//新建一個cookie 包括有效期 路徑 域名等
  • jQuery選取元素時,可以使用到parent(),選擇層級元素的上階層級,但往往需要在選取在上一階層,如父親的父親(阿公),如範例<li>的爸爸<ul><ul>的爸爸<nav>,要對<nav>做些事情時,要如何處理?

    這時候其實很簡單,只要在相同的parent()之後再接續一個parent(),就能找到你要的元素層級,如下範例展示對<nav>插入一個Hello文字。

  • jQuery .resize()

    jQuery $(window).resize視窗被調整過時,運行此函數,再使用$(window).width()取得目前遊覽器視窗寬度。若要取得的是遊覽器高度可改用$(window).height()。

    $(document).ready(function(){
        $(window).resize(function() {
            var wdth=$(window).width();
            $("span").text(wdth);
        });
    });
  • jQuery捲軸滑動區塊的判斷,網頁上常看到應用在廣告區塊上,讓使用者在滑下遊覽器捲軸時,到此區塊廣告的高度的後,並能夠將畫面上的廣告區塊能夠在此時畫面固定住,然而離開這個卷軸高度廣告區塊又能夠還原在原來區塊不固定。

  • jQuery .scroll()

    jQuery .scroll() 事件可用於滾動的元素和瀏覽器視窗物件 window。只需將函數綁定到指定元素的scroll事件,當瀏覽者滾動指定的元素時則會觸發捲動 scroll 事件運行指定的 function 函數。

    $(function(){
        $(window).scroll(function () {
            var scrollVal = $(this).scrollTop();
            $("span.qScrollTop").text(scrollVal);
        });
    });
  • <table>內容值存取至資料庫

    使用jquery將table資料存成物件格式,在整個丟給後端去存取,認為這是最為明智的方式。

    主要存取整個<table>需要做的就是,將<table>內的資訊記錄下來,好讓後端存取使用。如重要的欄位資訊主要的data-key。

  • 當你網頁內嵌了一個 YouTube,通常的做法就是對那個影片點選分享 => 內嵌,就會跑出一條讓你複製貼上的 iframe,像是:

    <iframe src="https://www.youtube.com/embed/PEr5agHOTcg" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
  • 許多程式語言都支援讀取或修改JSON資料函式庫,都因為JSON格式的優點相容性高、格式容易瞭解,閱讀及修改方便,支援許多資料格式 (number,string,booleans,nulls,array,associative array)。

    JSON Edit Online 編輯JSON資料

    在開發專案的過程中,有時候需要測試資料時,可能使用測試資料JOSN格式,或是想要自己產生一個簡單的JSON資料用於測試,手動用文字編輯器輸入又容易出錯,這時候可以使用線上編輯JOSN編輯器,會自動幫你檢查錯誤。

    JSON Edit Online : https://jsoneditoronline.org/

    左邊為文字編輯器,可以使用打字的方式輸入編輯

    online JSON edit

  • NPM 的安裝與使用

    NPM 全名為Node Package Manager,是附屬在 Node.js 中的套件管理工具,我們在安裝 Node.js 時,就可以順便將 NPM 安裝到電腦中,並且在命令列 / 終端機模式中使用。

    專案初始化

    利用 npm 指令,可以協助我們建立 Node.js 專案的描述檔,或稱為初始化專案,命令如下:

    //協助我們建立 Node.js 專案的描述檔
    npm init

    在打入 npm init 後,會被要求輸入幾個欄位

    package name: 你這個 Project 要叫什麼名字
    version: 你決定這個 Project 現在該是第幾版
    description: Project 基本介紹
    entry point: 進入點,如果要跑你的 Project 應該要執行哪個檔案
    author: 作者(自己)
    license: 你這個 Project 是採用什麼授權的
    test command: 這個不太重要,待會會說明

    基本上結束後,你可以看到這個資料夾底下,新增了一個 Package.json

  • 在這篇文章中,我們將揭開Redux 如何使用向後方法以及一個非常簡單的React + Redux示例的神秘面紗,我認為這將有助於您的理解。正如Redux發布的內容一樣,在解決術語之前,我將嘗試用簡單的術語解釋Redux。

    如果你還不確定Redux的用途或者為什麼要使用它,請閱讀Redux的這個解釋然後再回到這裡。

    第一:簡單的反應狀態

    我們將從一個簡單的舊React狀態的例子開始,然後逐個添加Redux。

  • 再過去版本中可使用IndexRoute作為設定首頁進入點,但在React Router 4設定上有所改變,全都使用Route,而需要設定為首頁加入exact屬性。在Layout方面本來使用Route帶入元件,在React Router 4直接使用react元件,如下在Layout元件中使用this.props.children顯示子路由。

  • react-router 4中NavLink可加入activeClassName='active'屬性,使得選單在切換時class加入active,可對這個active class寫css style樣式,達到選單切換的效果。

    設定成以下,to="/"表示index首頁,但是他都會一只處於active狀態,並不會因為像切換其他的選單而改變。

    <NavLink activeClassName='active' to="/">
       Home
    </NavLink>
  • React.js + <canvas>

    react+canvas

    我們有React,它可以幫助我們處理大量的可變DOM。

    但想描述一種使用React的方法,它可以幫助您處理“<canvas>元素?是的,這聽起來很奇怪。但它運作得很好。