Feeds:
文章
迴響

Archive for the ‘Javascript’ Category

開發環境

1. Windows 10

2. Android SDK

3. node 8.2.1

4. yarn 0.27.5

建立 Android App

md react-native
cd react-native
yarn init -y
yarn add react-native-cli
react-native init rn001
cd rn001
cd android\app
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
調整 android/app/build.gradle 的簽章配置
cd ..
SET ANDROID_HOME=D:\sdk\android\android-sdk-windows
gradlew assembleRelease

補充1:  build.gradle 調整

(1) 依據 keytool 配置調整

補充2: Android SDK 版本

(2) Android 的 API 和 Build 版本要吻合, 否則會出錯, 預設產生的是 23, 可啟動 %ANDROID_HOME%\tools\android.bat 啟動 SDK Manager 確認

補充3 package.json

測試 apk

  • /android/app/build/outputs/apk/app-release.apk

目錄結構

/android
│  build.gradle
│  gradle.properties
│  gradlew
│  gradlew.bat
│  settings.gradle
│  
├─app
│  │  BUCK
│  │  build.gradle
│  │  proguard-rules.pro
│  │  
│ ├─build
│ │ ├─outputs
│ │ │ │ 
│ │ │ ├─apk
│ │ │ │ app-release.apk
│  └─src
│      └─main
│          │  AndroidManifest.xml   ; Android 配置檔
│          │  
│          ├─java
│          │  └─com
│          │      └─rn001
│          │              MainActivity.java
│          │              MainApplication.java
│          │              
│          └─res
│              ├─mipmap-hdpi
│              │      ic_launcher.png
│              │      
│              ├─mipmap-mdpi
│              │      ic_launcher.png
│              │      
│              ├─mipmap-xhdpi
│              │      ic_launcher.png
│              │      
│              ├─mipmap-xxhdpi
│              │      ic_launcher.png
│              │      
│              └─values
│                      strings.xml
│                      styles.xml
│                      
├─gradle
│  └─wrapper
│          gradle-wrapper.jar
│          gradle-wrapper.properties
│          
└─keystores
        BUCK
        debug.keystore.properties
/ios
├─rn001
│  │  AppDelegate.h
│  │  AppDelegate.m
│  │  Info.plist
│  │  main.m
│  │  
│  ├─Base.lproj
│  │      LaunchScreen.xib
│  │      
│  └─Images.xcassets
│      └─AppIcon.appiconset
│              Contents.json
│              
├─rn001-tvOS
│      Info.plist
│      
├─rn001-tvOSTests
│      Info.plist
│      
├─rn001.xcodeproj
│  │  project.pbxproj
│  │  
│  └─xcshareddata
│      └─xcschemes
│              rn001-tvOS.xcscheme
│              rn001.xcscheme
│              
└─rn001Tests
        Info.plist
        rn001Tests.m
/node_modules
/__tests__
.babelrc
.buckconfig
.flowconfig
.watchmanconfig
app.json
index.android.js
index.ios.js
package.json

 

廣告

Read Full Post »

如何全螢幕顯示網頁

工作上的需要,找了一下全螢幕顯示的方法,其實沒有很複雜,只要設定 window.open 的第三個參數包含 fullscreen=1 即可。
如下
var win = window.open("http://www.google.com.tw",’content’,‘fullscreen=1’);

Read Full Post »

判斷各種不同的瀏覽器

 var agt=navigator.userAgent.toLowerCase();
 var is_major = parseInt(navigator.appVersion); 
 var is_nav = ((agt.indexOf(‘mozilla’)!=-1) && (agt.indexOf(‘spoofer’)==-1)
 && (agt.indexOf(‘compatible’) == -1) && (agt.indexOf(‘opera’)==-1)
 && (agt.indexOf(‘webtv’)==-1) && (agt.indexOf(‘hotjava’)==-1));
 var is_gecko = (agt.indexOf(‘gecko’) != -1); 
 var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
 var is_aol = (agt.indexOf("aol") != -1);
 var is_opera = (agt.indexOf("opera") != -1);
 var is_win = ( (agt.indexOf("win")!=-1) || (agt.indexOf("16bit")!=-1) );

IE3: parseInt(navigator.appVersion) < 4

IE4: parseInt(navigator.appVersion) == 4 && agt.indexOf("msie 5.0")   ==   -1

IE5: parseInt(navigator.appVersion) == 4 && agt.indexOf("msie 5.0")   !=   -1

IE55: parseInt(navigator.appVersion) == 4 && agt.indexOf("msie 5.5")   !=   -1

NS2: parseInt(navigator.appVersion) == 3

NS3: parseInt(navigator.appVersion) == 3

NS4B: parseInt(navigator.appVersion) == 4 && parseFloat(navigator.appVersion) <= 4.03

NS4: parseInt(navigator.appVersion) >= 4

NS6: parseInt(navigator.appVersion) >= 5

Read Full Post »

繼承機制測試

Read Full Post »

如何動態變更表格(table)

由於工作上發現專案上會用到許多的表格,所以,想將表格寫成一個元件來使用,我的構想是這個元件具有

1. 基本的欄位讀寫功能

    2. 排序功能
    3. 任意調換兩列或兩欄的資料
    4. 動態新增或刪除資料列或資料欄位


    相關的指令
    var tbl = document.getElementById(‘tbl’);
    alert( tbl.rows.length ); // 列數
    alert( tbl.rows[0].cell[0] ); // 第一行第一個欄位資料
    var row = tbl.insertRow();   // 插入一列
    var cell = row.insertCell();   // 新增一個欄位
    cell.innerText = ‘a’;

    Read Full Post »

    最近想要讓網頁的介面設計的更加人性化,一直想要將 HTML
    的元件包成一個個類別來使用,這篇文章主要是將事件委託(delegate)給個別物件的事件處理函式處理的設計方式,這個只是一個雛形,未來可能有更好
    的設計方法。下面就是以 Onclick 事件作為示範的程式碼

    <form id = ‘StatusBar‘ style = ‘position: absolute; left:0; top: 400’>
        <input type = ‘text’ id = ‘txtMessage’ style = ‘border: 1 double; width: 100%’ value = ‘StatusBar’/>
    </form>
    // ——————————————————————————-
    // 將 HTML 元素事件委託給個別物件的處理函式
    //
    //
        // 移除指定的元素
        Array.prototype.remove = function(obj){
            for ( var i=0 ; i < this.length ; ++i )    {
                if ( this[i] == obj ){
                    if ( i > this.length/2 ){
               
            for ( var j=i ; j <
    this.length-1 ; ++j ){
               
                this[j] =
    this[j+1];
                        }
                        this.pop();
                    }else{
                        for ( var j=i ; j > 0 ; –j ){
               
                this[j] =
    this[j-1];
                        }
                        this.shift();
                    }   
                    break;
                }
            }
        };

        CA = function (ui){
            var _ui = document.getElementById(ui);
           
            this.getUI = function () {
                return _ui;
            };

            // 攔截事件
            _ui.onclick = function(){
               
    try{           
       
                    if ( this.EventHandler != null ){
                        // 將事件重導到個別物件的事件處理函式
               
            for(var i=0;
    i<this.EventHandler.length; ++i){
               
                var func =
    this.EventHandler[i];
                            func(i); // Delegate
                        }
                    }
                }catch(e){
                    alert(e);
                }
            };

            // 儲存物件的事件處理函式
            _ui.addEventHandler = function(callback){
                try{
                    if (callback !== null){
                        if (this.EventHandler == null){
               
                //alert(‘ya,
    its null’);
               
               
    this.EventHandler = new Array();
                        }

                        // 找尋是否有相同的事件
               
            //for(var i = 0; i<
    this.EventHandler.length; ++i){
               
            //    if (callback
    == this.EventHandler[i]){
               
               
        //alert(‘equal:’ + callback);
               
            //   
        return;
                        //    }
                        //}
                       
                        this.EventHandler.push(callback);
               
            //alert(this.EventHandler.length);
                    }
                }catch(e){
                    alert(e);
                }
            };

            // 儲存物件的事件處理函式
            _ui.removeEventHandler = function(callback){
                //try{
                    if (callback !== null){
                        if (this.EventHandler == null){
               
                //alert(‘ya,
    its null’);
                            return;
                        }

                        // 找尋是否有相同的事件
               
           
    this.EventHandler.remove(callback);
                    }
                //}catch(e){
                //    alert(e);
                //}
            };

        // Event Handler:
            this.addOnClick = function (callback){
                this.getUI().addEventHandler(callback);
            };
            this.removeOnClick = function (callback){
                this.getUI().removeEventHandler(callback);
            };

        };

    function func1(v){
        alert(‘func1: ‘+v);
    }

    function func2(v){
        alert(‘func2: ‘+v);
    }

    function func3(v){
        alert(‘func3: ‘+v);
    }
    var o1 = new CA(‘StatusBar’);
    o1.addOnClick(func1);

    var o2 = new CA(‘StatusBar’);
    o2.addOnClick(func1);
    o2.addOnClick(func2);
    o2.addOnClick(func2);
    o2.addOnClick(func3);
    o1.removeOnClick(func1);


    以上的設計概念參考 .Net 的事件處理,也就是說,可以新增多個事件處理函式,只是因為 Javascript 不支援運算子重載,我以 method 來模擬 .Net 裡面用 +/- 來新增事件/刪除事件。

    這個程式的關鍵點在於
    addEventHandler(…)
    removeEventHandler(…)
    如果沒有透過在 HTML 元件上新增這兩個函式,就沒有辦法把事件委託給其他函式處理,因為元件上的事件沒有辦法取得"物件(就是範例的CA)"的認合成員資料,所以,必須透過這兩個函式來新增移除事件。

    當委託的事件存放在 HTML 元件的上之後,還必須攔截事件(範例中的 onclick):
    _ui.onclick = function(){ … }

    並在其中將相關的參數委託給註冊的事件處理函式去處理。這就是整個的設計概念。

    至於其他的 method ,只是 set/get 資料用,沒有太大的用途。

    Read Full Post »

    支援 with 指令

    今天在搜尋其他文件的時候發現,原來 Javascript 也支援類似 VB 的 with 指令,他的使用方法如下:
    var arr = new Array();
    with (arr){
      push(1); // 前面不需要加 .
      push(2);
      push(3);
     alert( pop() );
    }

    Read Full Post »