{"__v":3,"_id":"55bb46afa8400c2d00873de6","category":{"__v":7,"_id":"55bb441b54f9640d006e6cf2","pages":["55bb4450a8400c2d00873dd9","55bb46afa8400c2d00873de6","55bb46cca8400c2d00873dea","55bb4704a8400c2d00873ded","55bb47477313650d00c46e1e","568166af30018c0d006bf7fd","5685143fd96a760d00545d71"],"project":"559a61d2dbcfd20d00710b39","version":"559a61d2dbcfd20d00710b3c","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-07-31T09:47:07.862Z","from_sync":false,"order":6,"slug":"cordova-phonegap","title":"Cordova / PhoneGap SDK"},"parentDoc":null,"project":"559a61d2dbcfd20d00710b39","user":"559a618bdbcfd20d00710b38","version":{"__v":23,"_id":"559a61d2dbcfd20d00710b3c","project":"559a61d2dbcfd20d00710b39","createdAt":"2015-07-06T11:09:06.510Z","releaseDate":"2015-07-06T11:09:06.510Z","categories":["559a61d3dbcfd20d00710b3d","55a589ddaaf9cf1900114dd0","55a589e30f354f0d00fd0312","55a589ea80c8a30d00b323cc","55a589f6aaf9cf1900114dd1","55a58d4e80c8a30d00b323e6","55a8e7a227a17d21005251a2","55a93098cf45e1390093f351","55afb085f202b12100cd9e83","55afb22e902fd51700f5f8bf","55afb260902fd51700f5f8c2","55afb28ec8a85321007a5462","55afb294f202b12100cd9e95","55afb29b902fd51700f5f8c5","55afb2a1c8a85321007a5463","55afb2a7902fd51700f5f8c7","55afb2ad902fd51700f5f8c8","55afb2b5902fd51700f5f8ca","55b74b2131bccb190081bedc","55bb441b54f9640d006e6cf2","565711085cb2420d00d70071","5681681330018c0d006bf7ff","588f38b5923d610f00c72dad"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-07-31T09:58:07.927Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"The JavaScript API follows an asynchronous callback approach with hooks for events such as Enter Beacon Range, Enter Place or Display Notification Alert event. Below is a brief example of this API in use:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"/*\\n * Licensed to the Apache Software Foundation (ASF) under one\\n * or more contributor license agreements.  See the NOTICE file\\n * distributed with this work for additional information\\n * regarding copyright ownership.  The ASF licenses this file\\n * to you under the Apache License, Version 2.0 (the\\n * \\\"License\\\"); you may not use this file except in compliance\\n * with the License.  You may obtain a copy of the License at\\n *\\n * http://www.apache.org/licenses/LICENSE-2.0\\n *\\n * Unless required by applicable law or agreed to in writing,\\n * software distributed under the License is distributed on an\\n * \\\"AS IS\\\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\\n * KIND, either express or implied.  See the License for the\\n * specific language governing permissions and limitations\\n * under the License.\\n */\\n\\nconsole.log(\\\"App is on! Initializing stuff...\\\");\\nvar app = {\\n    // Application Constructor\\n    initialize: function () {\\n        this.bindEvents();\\n    },\\n    // Bind Event Listeners\\n    //\\n    // Bind any events that are required on startup. Common events are:\\n    // 'load', 'deviceready', 'offline', and 'online'.\\n\\n    bindEvents: function () {\\n        document.addEventListener('deviceready', this.onDeviceReady, false);\\n    },\\n    // deviceready Event Handler\\n    //\\n    // The scope of 'this' is the event. In order to call the 'receivedEvent'\\n    // function, we must explicitly call 'app.receivedEvent(...);'\\n    onDeviceReady: function () {\\n        app.receivedEvent('deviceready');\\n        MOCA.addEnterBeaconListener(onEnterBeacon);\\n        MOCA.addExitBeaconListener(onExitBeacon);\\n        MOCA.addBeaconProximityChangeListener(onBeaconProximityChange);\\n        MOCA.addEnterPlaceListener(onEnterPlace);\\n        MOCA.addExitPlaceListener(onExitPlace);\\n        MOCA.addEnterZoneListener(onEnterZone);\\n        MOCA.addExitZoneListener(onExitZone);\\n\\n        MOCA.addDisplayAlertListener(false, displayAlert);\\n        MOCA.addOpenUrlListener(false, openUrl);\\n        MOCA.addShowEmbeddedHtmlListener(false, showEmbeddedHtml);\\n        MOCA.addPlayVideoListener(false, playVideo);\\n        MOCA.addShowImageListener(false, showImage);\\n        MOCA.addAddPassbookListener(false, addPassbook);\\n        MOCA.addAddTagListener(addTag);\\n        MOCA.addPlaySoundListener(false, playSound);\\n        MOCA.addCustomActionListener(performCustomAction);\\n        MOCA.addDataReadyListener(didLoadedBeaconsData);\\n\\n\\n        getMOCAValues();\\n    },\\n    // Update DOM on a Received Event\\n    receivedEvent: function (id) {\\n        var parentElement = document.getElementById(id);\\n        var listeningElement = parentElement.querySelector('.listening');\\n        var receivedElement = parentElement.querySelector('.received');\\n\\n        listeningElement.setAttribute('style', 'display:none;');\\n        receivedElement.setAttribute('style', 'display:block;');\\n\\n        console.log('Received Event: ' + id);\\n    }\\n};\\n\\nvar getMOCAValues = function(){\\n    MOCA.placesInside(placesInside);\\n    var ver = document.getElementById(\\\"ver\\\");\\n    var appKey = document.getElementById(\\\"appKey\\\");\\n    var appSecret = document.getElementById(\\\"appSecret\\\");\\n    var logLevel = document.getElementById(\\\"logLevel\\\");\\n    MOCA.version(function(e){ ver.innerHTML = \\\"Native SDK version: <b>\\\" + e +\\\"</b>\\\"});\\n    MOCA.appKey(function(e){ appKey.innerHTML = \\\"appKey: <b>\\\" + e + \\\"</b>\\\"});\\n    MOCA.appSecret(function(e){ appSecret.innerHTML = \\\"appSecret: <b>\\\" + e + \\\"</b>\\\"});\\n    MOCA.logLevel(function(e){ logLevel.innerHTML = \\\"logLevel: <b>\\\" + e + \\\"</b>\\\"});\\n}\\n\\n//console.log = function(message) {\\n//    var logger = document.getElementById(\\\"logger\\\");\\n//    logger.innerHTML = logger.innerHTML + \\\"<li>\\\" + message + \\\"</li>\\\";\\n//};\\n\\nvar onEnterBeacon= function (e) {\\n    console.log(\\\"MOCA On Enter beacon\\\");\\n    console.log(e.detail);\\n};\\nvar onExitBeacon= function (e) {\\n    console.log(\\\"Event On exit beacon with detail \\\");\\n    console.log(e.detail);\\n};\\nvar onEnterZone = function (e) {\\n    console.log(\\\"Event On Enter Zone\\\");\\n    console.log(e.detail);\\n};\\nvar onExitZone = function (e) {\\n    console.log(\\\"Event On Exit Zone\\\");\\n    console.log(e.detail);\\n};\\nvar onBeaconProximityChange= function (e) {\\n    console.log(e);\\n    console.log(\\\"Event On Proximity change with detail \\\");\\n    console.log(e.detail);\\n};\\nvar onEnterPlace= function (e) {\\n    console.log(e);\\n    console.log(\\\"Event On enter place with detail \\\");\\n    console.log(e.detail);\\n\\n};\\nvar onExitPlace= function (e) {\\n    console.log(e);\\n    console.log(\\\"Event On exit place with detail \\\");\\n    console.log(e.detail);\\n};\\nvar performCustomAction= function (e) {\\n    console.log(\\\"Callback Perform custom action on JS \\\");\\n    console.log(e.detail);\\n};\\nvar displayAlert= function (e) {\\n    console.log(\\\"Callback display alert \\\");\\n    console.log(e.detail);\\n};\\nvar openUrl= function (e) {\\n    console.log(\\\"Callback open URL\\\");\\n    console.log(e.detail);\\n};\\nvar showEmbeddedHtml= function (e) {\\n    console.log(\\\"Callback showEmbeddedHtml\\\");\\n    console.log(e.detail);\\n};\\nvar playVideo= function (e) {\\n    console.log(\\\"callback playVideo\\\");\\n    console.log(e.detail);\\n};\\nvar showImage= function (e) {\\n    console.log(\\\"callback showImage\\\");\\n    console.log(e.detail);\\n};\\nvar addPassbook= function (e) {\\n    console.log(\\\"callback addPassbook\\\");\\n    console.log(e.detail);\\n};\\nvar addTag= function (e) {\\n    console.log(\\\"Tag Added\\\");\\n};\\nvar playSound= function (e) {\\n    console.log(\\\"callback playSound\\\");\\n    console.log(e.detail);\\n};\\n\\nvar didLoadedBeaconsData = function (e){\\n    console.log(\\\"MOCA data loaded\\\");\\n    console.log(e.detail);\\n};\\n\\nvar placesInside = function (e) {\\n    console.log(\\\"places inside: \\\");\\n    console.log(e);\\n};\\n\\napp.initialize();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"basic-examples","type":"basic","title":"Basic examples"}
The JavaScript API follows an asynchronous callback approach with hooks for events such as Enter Beacon Range, Enter Place or Display Notification Alert event. Below is a brief example of this API in use: [block:code] { "codes": [ { "code": "/*\n * Licensed to the Apache Software Foundation (ASF) under one\n * or more contributor license agreements. See the NOTICE file\n * distributed with this work for additional information\n * regarding copyright ownership. The ASF licenses this file\n * to you under the Apache License, Version 2.0 (the\n * \"License\"); you may not use this file except in compliance\n * with the License. You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nconsole.log(\"App is on! Initializing stuff...\");\nvar app = {\n // Application Constructor\n initialize: function () {\n this.bindEvents();\n },\n // Bind Event Listeners\n //\n // Bind any events that are required on startup. Common events are:\n // 'load', 'deviceready', 'offline', and 'online'.\n\n bindEvents: function () {\n document.addEventListener('deviceready', this.onDeviceReady, false);\n },\n // deviceready Event Handler\n //\n // The scope of 'this' is the event. In order to call the 'receivedEvent'\n // function, we must explicitly call 'app.receivedEvent(...);'\n onDeviceReady: function () {\n app.receivedEvent('deviceready');\n MOCA.addEnterBeaconListener(onEnterBeacon);\n MOCA.addExitBeaconListener(onExitBeacon);\n MOCA.addBeaconProximityChangeListener(onBeaconProximityChange);\n MOCA.addEnterPlaceListener(onEnterPlace);\n MOCA.addExitPlaceListener(onExitPlace);\n MOCA.addEnterZoneListener(onEnterZone);\n MOCA.addExitZoneListener(onExitZone);\n\n MOCA.addDisplayAlertListener(false, displayAlert);\n MOCA.addOpenUrlListener(false, openUrl);\n MOCA.addShowEmbeddedHtmlListener(false, showEmbeddedHtml);\n MOCA.addPlayVideoListener(false, playVideo);\n MOCA.addShowImageListener(false, showImage);\n MOCA.addAddPassbookListener(false, addPassbook);\n MOCA.addAddTagListener(addTag);\n MOCA.addPlaySoundListener(false, playSound);\n MOCA.addCustomActionListener(performCustomAction);\n MOCA.addDataReadyListener(didLoadedBeaconsData);\n\n\n getMOCAValues();\n },\n // Update DOM on a Received Event\n receivedEvent: function (id) {\n var parentElement = document.getElementById(id);\n var listeningElement = parentElement.querySelector('.listening');\n var receivedElement = parentElement.querySelector('.received');\n\n listeningElement.setAttribute('style', 'display:none;');\n receivedElement.setAttribute('style', 'display:block;');\n\n console.log('Received Event: ' + id);\n }\n};\n\nvar getMOCAValues = function(){\n MOCA.placesInside(placesInside);\n var ver = document.getElementById(\"ver\");\n var appKey = document.getElementById(\"appKey\");\n var appSecret = document.getElementById(\"appSecret\");\n var logLevel = document.getElementById(\"logLevel\");\n MOCA.version(function(e){ ver.innerHTML = \"Native SDK version: <b>\" + e +\"</b>\"});\n MOCA.appKey(function(e){ appKey.innerHTML = \"appKey: <b>\" + e + \"</b>\"});\n MOCA.appSecret(function(e){ appSecret.innerHTML = \"appSecret: <b>\" + e + \"</b>\"});\n MOCA.logLevel(function(e){ logLevel.innerHTML = \"logLevel: <b>\" + e + \"</b>\"});\n}\n\n//console.log = function(message) {\n// var logger = document.getElementById(\"logger\");\n// logger.innerHTML = logger.innerHTML + \"<li>\" + message + \"</li>\";\n//};\n\nvar onEnterBeacon= function (e) {\n console.log(\"MOCA On Enter beacon\");\n console.log(e.detail);\n};\nvar onExitBeacon= function (e) {\n console.log(\"Event On exit beacon with detail \");\n console.log(e.detail);\n};\nvar onEnterZone = function (e) {\n console.log(\"Event On Enter Zone\");\n console.log(e.detail);\n};\nvar onExitZone = function (e) {\n console.log(\"Event On Exit Zone\");\n console.log(e.detail);\n};\nvar onBeaconProximityChange= function (e) {\n console.log(e);\n console.log(\"Event On Proximity change with detail \");\n console.log(e.detail);\n};\nvar onEnterPlace= function (e) {\n console.log(e);\n console.log(\"Event On enter place with detail \");\n console.log(e.detail);\n\n};\nvar onExitPlace= function (e) {\n console.log(e);\n console.log(\"Event On exit place with detail \");\n console.log(e.detail);\n};\nvar performCustomAction= function (e) {\n console.log(\"Callback Perform custom action on JS \");\n console.log(e.detail);\n};\nvar displayAlert= function (e) {\n console.log(\"Callback display alert \");\n console.log(e.detail);\n};\nvar openUrl= function (e) {\n console.log(\"Callback open URL\");\n console.log(e.detail);\n};\nvar showEmbeddedHtml= function (e) {\n console.log(\"Callback showEmbeddedHtml\");\n console.log(e.detail);\n};\nvar playVideo= function (e) {\n console.log(\"callback playVideo\");\n console.log(e.detail);\n};\nvar showImage= function (e) {\n console.log(\"callback showImage\");\n console.log(e.detail);\n};\nvar addPassbook= function (e) {\n console.log(\"callback addPassbook\");\n console.log(e.detail);\n};\nvar addTag= function (e) {\n console.log(\"Tag Added\");\n};\nvar playSound= function (e) {\n console.log(\"callback playSound\");\n console.log(e.detail);\n};\n\nvar didLoadedBeaconsData = function (e){\n console.log(\"MOCA data loaded\");\n console.log(e.detail);\n};\n\nvar placesInside = function (e) {\n console.log(\"places inside: \");\n console.log(e);\n};\n\napp.initialize();", "language": "javascript" } ] } [/block]