JavaScript

  • 如何使用JavaScript連結轉跳網址方法

    window.location.href轉跳連結

    自己網域轉跳網址

    window.location.href='sethost.php';

    轉跳到其他網域,加入網頁http://

    window.location.href='http://www.google.com';

    window.open連結另開頁面

    window.open(' 新視窗的網址 ', '新視窗的名稱', config='height=高度,width=寬度');
  • 如何使用Javascript陣列與物件delete與splice

    在 javascript 有分為物件與陣列,常見刪除的方法有 delete 與 splice。

    陣列

    var array=[ 'a', 'b', 'c', 'd' ];
    console.log(a[0]); // a
  • 如何使用Node.js + express 建立一個網站

    若提到使用Node.js來架設網站,基本上都會聯想到 Express 模組,以下即是簡單地說明如何使用Node.js + Express 在十分鐘內架設一個網站。

    檔案架構:

    node_modules
    view
    --layout.ejs
    --login.ejs
    --index.ejs
    server.js
    package.json
  • 如何在hooks的元素使用useRef()數組多個multiple refs?

    react提出一種Refs概念,使用這個方法,我們就可以抓取到react裡面的DOM元素,那hooks該如何使用Refs呢?

    useRef

    語法

    const refContainer = useRef(initialValue);
  • 如何在jQuery中獲取checkbox value

    要獲取Value屬性的值,您可以執行以下操作:

    $("input[type='checkbox']").val();
  • 如何在react-router v4中將history.push傳遞參數params

    this.props.history.push

    在導航時,您可以將傳遞道具傳遞給歷史對象

    this.props.history.push({
        pathname: '/template',
        search: '?query=abc',
        state: { detail: response.data }
    })
  • 如何應用Javascript Exports & Imports (Modules)

    Exports & Imports (Modules)

    在撰寫 API 過程中你會將很多分支檔案拆開寫,一方面是減少過長的程式碼另一方面是日後好管理。你必須要先匯出分支檔(export)再經由主檔案中被引入(import),以下有個簡單例子,第一個分支檔 person.js 將函式 person 匯出,第二支分支檔將函式 clean 和變數 bastData 匯出 (另一種匯出寫法) ,最後再主檔案 index.js 引入被呼叫使用。

    分支檔 person.js、utility.js

    // person.js 分支檔1
    const person ={
      name:'Andy'
    } 
    
    export default person;
    // utility.js 分支檔2
    export const clean = () => {}
    export const bastData = 10;

    主檔 index.js

    // index.js
    //default export
    import person from './person.js';
    //named export
    import {baseData} from './utility.js';
    import {clean} from './utility.js';
    
    //named export (rename)
    import {clean as c} from './utility.js';
    import * as c from './utility.js';
    
  • 如何應用React + Redux + Thunk伺服器獲取資料範例ajax、axios

    簡單來說applyMiddleware是使action中能做更多的事情,如同去賦予執行action有能力在中間去多執行function,不同只是傳遞資料參數,thunk則在中間扮演著處理非同步問題。

    Thunk應用增加延遲2秒

    const { createStore, applyMiddleware } = Redux;
    const { Provider, connect } = ReactRedux
    const thunk = ReduxThunk.default
    const Increment = () =>{
      return function (dispatch){
        setTimeout(()=>{
          dispatch({type: 'INCREMENT'})
        },2000)
      }
      // return {
      //     type: 'INCREMENT'
      // }
    }
    class Counter extends React.Component {
      render() {
        console.log(this.props);
        return (
          <div>
            <h2>Counter</h2>
            <div>
              <button onClick={this.props.decrement}>-</button>
              <span>{this.props.count}</span>
              <button onClick={this.props.increment}>+</button>
            </div>
          </div>
        )
      }
    }
    const actionsCreators = (dispatch)=> {
      return{
        increment: () => {
          //store.dispatch({ type: 'INCREMENT' });
          dispatch(Increment())
        },
        decrement : () => {
          dispatch({ type: 'DECREMENT' });
        }
      }
    }
    function mapStateToProps(state) {
      console.log(state);
    
      return {
        count: state.count
      };
    }
    
    const Concounter = connect(mapStateToProps,actionsCreators)(Counter);
    
    const initialState = {
      count: 0
    };
    
    function reducer(state = initialState, action) {
      switch(action.type) {
        case 'INCREMENT':
          return {
            count: state.count + 1
          };
        case 'DECREMENT':
          return {
            count: state.count - 1
          };
        default:
          return state;
      }
    }
    
    const store = createStore(reducer,window.devToolsExtension ? window.devToolsExtension() : undefined ,applyMiddleware(thunk));
    
    const App = () => (
      <Provider store={store}>
        <Concounter/>
      </Provider>
    );
    
    ReactDOM.render(<App />, document.getElementById('root'));
  • 手機網頁設計:文字自動縮放、等比縮放、文字百分比

    手機眾多裝置的螢幕顯示大小不同,會因為排版時區塊及圖片可用百分比達到顯示等比縮放,但唯獨文字沒辦法設定依照顯示的百分比去做縮放。

    就因為這樣設計排版上,主要視覺區塊內的文字,大小設計剛好在區塊內,以不同顯示比例去看,區塊及圖片會因為設定成百分比而依照螢幕大小縮放,但文字確保持在您設定的大小,這就會產生區塊有自動縮放大小,文字卻沒有自動縮放大小,使得你設計的版面跑位或不是你所要呈現的設計樣子。

  • 瀏覽器中加載模塊type="module"使用import、export

    首先要使用Javascript modules需要一台伺服器,以便能夠通過導入進行獲取,因為它不適用於該協議。您可以用來啟動當前的伺服器,若沒有以下提供lite-server ,這個使用node npm安裝的輕量伺服器可使用。

    透過 lite-server 這個輕量的開發伺服器,就可以快速啟動網站進行測試:

  • 簡單使用Chart.js網頁上畫圖表範例集-Javascript 圖表、jQuery圖表繪製

    關於Chart.js

    Chart.js是一款彈性很高的圖表JavaScript library,支援八種常見的統計圖表類型,夠將圖表混合在一起使用,也支援動畫的效果,讓我們製作出來的圖表更加精美!

    範例一 格線顏色與多線條

    Chart.js

        var config = {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'My First dataset',
                    backgroundColor: window.chartColors.red,
                    borderColor: window.chartColors.red,
                    data: [10, 30, 39, 20, 25, 34, -10],
                    fill: false,
                }, {
                    label: 'My Second dataset',
                    fill: false,
                    backgroundColor: window.chartColors.blue,
                    borderColor: window.chartColors.blue,
                    data: [18, 33, 22, 19, 11, 39, 30],
                }]
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: 'Grid Line Settings'
                },
                scales: {
                    yAxes: [{
                        gridLines: {
                            drawBorder: false,
                            color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
                        },
                        ticks: {
                            min: 0,
                            max: 100,
                            stepSize: 10
                        }
                    }]
                }
            }
        };
    
        window.onload = function() {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myLine = new Chart(ctx, config);
        };
  • 網頁動畫效果WOW.js+animate.css頁面滾動更有趣

    Animate.css是個動畫CSS library,不過主要是專注在處理動畫的部分,並不負責在網頁上該什麼時機呈現動畫,加上WOW.js,如捲軸頁面在向下滾動的時候,有些元素會產生細小的動畫效果。雖然動畫比較小,但卻能吸引你的注意。如果你希望你的頁面也更加有趣,那麼你可以試試WOW.js。

    WOW.js依賴animate.css,所以它支持animate.css多達60多種的動畫效果,能滿足您的各種需求。

    瀏覽器兼容

    IE6、IE7 等老舊瀏覽器不支持CSS3 動畫,所以沒有效果;而wow.js 也使用了querySelectorAll 方法,IE 低版本會報錯。為了達到更好的兼容,最好加一個瀏覽器及版本判斷。

    開始使用WOW.js

    引入文件

    css

    <link rel="stylesheet" href="/ucamc/css/animate.min.css">

    js

    <script src="/ucamc/dist/wow.js"></script>
  • 網頁設計師一定要會的Swfobject.js 崁入Flash .SWF

    Swfobject.js 崁入Flash SWF

    相信很多人使用Dreamweaver內建的崁入.SWF方式,當你崁入時會自動在你的網站上產生許多程式碼,弄得你眼花撩亂。而現在有了簡潔又簡單的swfobject.js 輕鬆在網頁上加入Flash SWF,並且若其他人的遊覽器上沒有安裝Flash play則會顯示你崁入flash區塊內的內容,如請連接到flashplay網站下載安裝flashplay外掛才可觀看到動畫之類的話,或是有使用不支援Flash的iphone、ipad的使用者在觀看你的網頁時,一樣的他會顯示崁入Flash區塊內的內容,這時可以在此區塊放張製作成flash的靜態的圖,就不會因為不支援flash而此區塊卻看不見任何的畫面。

    Step1 下載swfobject

    請至此位址下載最新版的swfobject
    之後將swfobject.js放入你的網站資料夾

  • 解決非同步使用Javascript callback() 回調函數

    callback()

    回調函數是一個作為參數傳遞給另一個函數的函數,然後在外部函數中調用該函數來完成某種例程或動作。

    callback()簡單的例子:

    function greeting(name) {
      alert('Hello ' + name);
    }
    
    function processUserInput(callback) {
      var name = prompt('Please enter your name.');
      callback(name);
    }
    
    processUserInput(greeting);

    上面的例子是一個同步回調,因為它立即執行。