javascript_usage.html
1 <!DOCTYPE html> 2 <html lang="en" dir="ltr"> 3 <head prefix="og: http://ogp.me/ns#"> 4 <meta charset="utf-8"> 5 <title>Using EmbarkJS | Embark</title> 6 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <!-- Canonical links --> 9 <link rel="canonical" href="https://framework.embarklabs.io/docs/javascript_usage.html"> 10 <!-- Alternative links --> 11 12 13 <!-- Icon --> 14 <meta name="msapplication-TileColor" content="#080E1A"> 15 <link rel="icon" type="image/png" href="/assets/images/favicon-16.png" sizes="16x16" /> 16 <link rel="icon" type="image/png" href="/assets/images/favicon-32.png" sizes="32x32" /> 17 18 <link rel="apple-touch-icon" sizes="76x76" href="/assets/images/apple-touch-icon-60x60-precomposed.png"> 19 <link rel="apple-touch-icon" sizes="76x76" href="/assets/images/apple-touch-icon-76x76-precomposed.png"> 20 <link rel="apple-touch-icon" sizes="120x120" href="/assets/images/apple-touch-icon-120x120-precomposed.png"> 21 <link rel="apple-touch-icon" sizes="152x152" href="/assets/images/apple-touch-icon-152x152-precomposed.png"> 22 <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon-precomposed.png"> 23 <link rel="apple-touch-icon" href="/assets/images/apple-touch-icon-precomposed.png"> 24 <!-- CSS --> 25 26 <link rel="stylesheet" href="/css/embark.css"> 27 28 <!-- endbuild --> 29 30 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 31 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" /> 32 33 <!-- RSS --> 34 <link rel="alternate" href="/atom.xml" title="Embark"> 35 <meta property="og:image" content="/img/share.png?v=0.0.5" /> 36 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.4/styles/dracula.min.css"> 37 38 <script async defer src="https://buttons.github.io/buttons.js"></script> 39 40 41 <script> 42 !function(root, factory) { 43 "function" == typeof define && define.amd ? // AMD. Register as an anonymous module unless amdModuleId is set 44 define([], function() { 45 return root.svg4everybody = factory(); 46 }) : "object" == typeof module && module.exports ? // Node. Does not work with strict CommonJS, but 47 // only CommonJS-like environments that support module.exports, 48 // like Node. 49 module.exports = factory() : root.svg4everybody = factory(); 50 }(this, function() { 51 /*! svg4everybody v2.1.9 | github.com/jonathantneal/svg4everybody */ 52 function embed(parent, svg, target) { 53 // if the target exists 54 if (target) { 55 // create a document fragment to hold the contents of the target 56 var fragment = document.createDocumentFragment(), viewBox = !svg.hasAttribute("viewBox") && target.getAttribute("viewBox"); 57 // conditionally set the viewBox on the svg 58 viewBox && svg.setAttribute("viewBox", viewBox); 59 // copy the contents of the clone into the fragment 60 for (// clone the target 61 var clone = target.cloneNode(!0); clone.childNodes.length; ) { 62 fragment.appendChild(clone.firstChild); 63 } 64 // append the fragment into the svg 65 parent.appendChild(fragment); 66 } 67 } 68 function loadreadystatechange(xhr) { 69 // listen to changes in the request 70 xhr.onreadystatechange = function() { 71 // if the request is ready 72 if (4 === xhr.readyState) { 73 // get the cached html document 74 var cachedDocument = xhr._cachedDocument; 75 // ensure the cached html document based on the xhr response 76 cachedDocument || (cachedDocument = xhr._cachedDocument = document.implementation.createHTMLDocument(""), 77 cachedDocument.body.innerHTML = xhr.responseText, xhr._cachedTarget = {}), // clear the xhr embeds list and embed each item 78 xhr._embeds.splice(0).map(function(item) { 79 // get the cached target 80 var target = xhr._cachedTarget[item.id]; 81 // ensure the cached target 82 target || (target = xhr._cachedTarget[item.id] = cachedDocument.getElementById(item.id)), 83 // embed the target into the svg 84 embed(item.parent, item.svg, target); 85 }); 86 } 87 }, // test the ready state change immediately 88 xhr.onreadystatechange(); 89 } 90 function svg4everybody(rawopts) { 91 function oninterval() { 92 // while the index exists in the live <use> collection 93 for (// get the cached <use> index 94 var index = 0; index < uses.length; ) { 95 // get the current <use> 96 var use = uses[index], parent = use.parentNode, svg = getSVGAncestor(parent), src = use.getAttribute("xlink:href") || use.getAttribute("href"); 97 if (!src && opts.attributeName && (src = use.getAttribute(opts.attributeName)), 98 svg && src) { 99 if (polyfill) { 100 if (!opts.validate || opts.validate(src, svg, use)) { 101 // remove the <use> element 102 parent.removeChild(use); 103 // parse the src and get the url and id 104 var srcSplit = src.split("#"), url = srcSplit.shift(), id = srcSplit.join("#"); 105 // if the link is external 106 if (url.length) { 107 // get the cached xhr request 108 var xhr = requests[url]; 109 // ensure the xhr request exists 110 xhr || (xhr = requests[url] = new XMLHttpRequest(), xhr.open("GET", url), xhr.send(), 111 xhr._embeds = []), // add the svg and id as an item to the xhr embeds list 112 xhr._embeds.push({ 113 parent: parent, 114 svg: svg, 115 id: id 116 }), // prepare the xhr ready state change event 117 loadreadystatechange(xhr); 118 } else { 119 // embed the local id into the svg 120 embed(parent, svg, document.getElementById(id)); 121 } 122 } else { 123 // increase the index when the previous value was not "valid" 124 ++index, ++numberOfSvgUseElementsToBypass; 125 } 126 } 127 } else { 128 // increase the index when the previous value was not "valid" 129 ++index; 130 } 131 } 132 // continue the interval 133 (!uses.length || uses.length - numberOfSvgUseElementsToBypass > 0) && requestAnimationFrame(oninterval, 67); 134 } 135 var polyfill, opts = Object(rawopts), newerIEUA = /\bTrident\/[567]\b|\bMSIE (?:9|10)\.0\b/, webkitUA = /\bAppleWebKit\/(\d+)\b/, olderEdgeUA = /\bEdge\/12\.(\d+)\b/, edgeUA = /\bEdge\/.(\d+)\b/, inIframe = window.top !== window.self; 136 polyfill = "polyfill" in opts ? opts.polyfill : newerIEUA.test(navigator.userAgent) || (navigator.userAgent.match(olderEdgeUA) || [])[1] < 10547 || (navigator.userAgent.match(webkitUA) || [])[1] < 537 || edgeUA.test(navigator.userAgent) && inIframe; 137 // create xhr requests object 138 var requests = {}, requestAnimationFrame = window.requestAnimationFrame || setTimeout, uses = document.getElementsByTagName("use"), numberOfSvgUseElementsToBypass = 0; 139 // conditionally start the interval if the polyfill is active 140 polyfill && oninterval(); 141 } 142 function getSVGAncestor(node) { 143 for (var svg = node; "svg" !== svg.nodeName.toLowerCase() && (svg = svg.parentNode); ) {} 144 return svg; 145 } 146 return svg4everybody; 147 }); 148 149 svg4everybody(); 150 </script> 151 </head> 152 153 <body> 154 <header role="banner" class="c-header c-header--compact"> 155 <span class="c-header__background"></span> 156 <div class="o-container c-header__content"> 157 <div class="c-header__top"> 158 <a href="/" title="Embark" class="c-logo c-logo--negative">Embark</a> 159 <nav role="navigation" class="c-navigation"> 160 <div class="c-navigation__header"> 161 <a href="/" title="Embark" class="c-logo">Embark</a> 162 <button class="c-navigation__close u-text-light" title="Close menu"> 163 <svg class="c-icon c-icon--xs"><use xlink:href="/../assets/icons/symbols.svg#icon-close"></use></svg> 164 </button> 165 </div> 166 <div class="c-navigation__body"> 167 <ul class="c-navigation__list"> 168 <li class="c-navigation__item"> 169 <a href="/docs/quick_start.html" class="c-navigation__anchor " title="Quick Start">Quick Start</a> 170 </li> 171 <li class="c-navigation__item"> 172 <a href="/docs" class="c-navigation__anchor is-active" title="Learn">Learn</a> 173 </li> 174 <li class="c-navigation__item"> 175 <a href="/plugins" class="c-navigation__anchor " title="Plugins">Plugins</a> 176 </li> 177 <li class="c-navigation__item"> 178 <a href="/community" class="c-navigation__anchor " title="Community">Community</a> 179 </li> 180 <li class="c-navigation__item"> 181 <a href="https://blog.embarklabs.io" target="_blank" rel="noopener" class="c-navigation__anchor " title="Blog">Blog</a> 182 </li> 183 </ul> 184 </div> 185 </nav> 186 <div class="o-flex o-flex-center"> 187 <form action="" class="o-flex__item u-hidden-until-large"> 188 <input type="search" placeholder="Search" id="search-input"> 189 </form> 190 <div class="o-flex__item"> 191 <ul class="o-flex o-flex-center"> 192 <li class="o-flex__item"> 193 <a href="https://github.com/embarklabs/embark" title="Github" target="_blank" class="u-link-ghost"> 194 <svg class="c-icon"><use xlink:href="/../assets/icons/symbols.svg#icon-github"></use></svg> 195 </a> 196 </li> 197 <li class="o-flex__item"> 198 <a href="https://twitter.com/EmbarkProject" title="Twitter" target="_blank"> 199 <svg class="c-icon"><use xlink:href="/../assets/icons/symbols.svg#icon-twitter"></use></svg> 200 </a> 201 </li> 202 <li class="o-flex__item u-hidden-large-up"> 203 <button type="button"class="c-navigation__trigger u-link-ghost" title="Open menu"> 204 <svg class="c-icon"><use xlink:href="/../assets/icons/symbols.svg#icon-navigation-menu"></use></svg> 205 </button> 206 </li> 207 </ul> 208 </div> 209 </div> 210 </div> 211 <div class="c-quick-search o-distance-m u-hidden-large-up"> 212 <input type="search" id="inp-search" placeholder="Search"> 213 </div> 214 <div class="c-header__body"> 215 <h1 class="c-title u-text-ghost">Documentation</h1> 216 217 218 219 220 221 </div> 222 </div> 223 </header> 224 225 226 <main role="main"> 227 <section class="o-guided-content o-distance"> 228 <div class="o-guided-content__wrapper"> 229 <button title="Open docs menu" id="guides-trigger" class="c-button c-button--minion u-hidden-large-up"> 230 <svg class="c-icon c-icon--xs"><use xlink:href="/../../assets/icons/symbols.svg#icon-navigation-menu"></use></svg> 231 <span>Guides</span> 232 </button> 233 <div class="c-guide o-guided-content__guide" id="guide-navigation"> 234 <div class="c-guide__header u-hidden-large-up"> 235 <a href="" title="Guides"> 236 Guides 237 </a> 238 <button type="button" title="Close menu" id="guides-close"> 239 <svg class="c-icon c-icon--xs"><use xlink:href="/../../assets/icons/symbols.svg#icon-close"></use></svg> 240 </button> 241 </div> 242 <div class="c-guide__body"> 243 <nav role="navigation"> 244 245 <div class=""> 246 <h3 class="c-category-title">Getting Started</h3> 247 <ul class="o-list-bare"> 248 249 <li class="o-list-bare__item"> 250 <a href="/docs/overview.html" title="Overview" class="u-link-uniform ">Overview</a> 251 <!-- <div class="o-distance-m"> 252 <ul class="o-list-bare c-navigation__subnav"> 253 <li class="o-list-bare__item"> 254 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 255 </li> 256 </ul> 257 </div> --> 258 </li> 259 260 <li class="o-list-bare__item"> 261 <a href="/docs/installation.html" title="Installation" class="u-link-uniform ">Installation</a> 262 <!-- <div class="o-distance-m"> 263 <ul class="o-list-bare c-navigation__subnav"> 264 <li class="o-list-bare__item"> 265 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 266 </li> 267 </ul> 268 </div> --> 269 </li> 270 271 <li class="o-list-bare__item"> 272 <a href="/docs/faq.html" title="FAQ" class="u-link-uniform ">FAQ</a> 273 <!-- <div class="o-distance-m"> 274 <ul class="o-list-bare c-navigation__subnav"> 275 <li class="o-list-bare__item"> 276 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 277 </li> 278 </ul> 279 </div> --> 280 </li> 281 282 </ul> 283 284 285 <div class="o-distance-xl"> 286 <h3 class="c-category-title">General Usage</h3> 287 <ul class="o-list-bare"> 288 289 <li class="o-list-bare__item"> 290 <a href="/docs/create_project.html" title="Creating apps" class="u-link-uniform ">Creating apps</a> 291 <!-- <div class="o-distance-m"> 292 <ul class="o-list-bare c-navigation__subnav"> 293 <li class="o-list-bare__item"> 294 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 295 </li> 296 </ul> 297 </div> --> 298 </li> 299 300 <li class="o-list-bare__item"> 301 <a href="/docs/structure.html" title="App structure" class="u-link-uniform ">App structure</a> 302 <!-- <div class="o-distance-m"> 303 <ul class="o-list-bare c-navigation__subnav"> 304 <li class="o-list-bare__item"> 305 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 306 </li> 307 </ul> 308 </div> --> 309 </li> 310 311 <li class="o-list-bare__item"> 312 <a href="/docs/running_apps.html" title="Running apps" class="u-link-uniform ">Running apps</a> 313 <!-- <div class="o-distance-m"> 314 <ul class="o-list-bare c-navigation__subnav"> 315 <li class="o-list-bare__item"> 316 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 317 </li> 318 </ul> 319 </div> --> 320 </li> 321 322 <li class="o-list-bare__item"> 323 <a href="/docs/dashboard.html" title="Using the dashboard" class="u-link-uniform ">Using the dashboard</a> 324 <!-- <div class="o-distance-m"> 325 <ul class="o-list-bare c-navigation__subnav"> 326 <li class="o-list-bare__item"> 327 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 328 </li> 329 </ul> 330 </div> --> 331 </li> 332 333 <li class="o-list-bare__item"> 334 <a href="/docs/using_the_console.html" title="Using the console" class="u-link-uniform ">Using the console</a> 335 <!-- <div class="o-distance-m"> 336 <ul class="o-list-bare c-navigation__subnav"> 337 <li class="o-list-bare__item"> 338 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 339 </li> 340 </ul> 341 </div> --> 342 </li> 343 344 <li class="o-list-bare__item"> 345 <a href="/docs/environments.html" title="Environments" class="u-link-uniform ">Environments</a> 346 <!-- <div class="o-distance-m"> 347 <ul class="o-list-bare c-navigation__subnav"> 348 <li class="o-list-bare__item"> 349 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 350 </li> 351 </ul> 352 </div> --> 353 </li> 354 355 <li class="o-list-bare__item"> 356 <a href="/docs/configuration.html" title="Configuration" class="u-link-uniform ">Configuration</a> 357 <!-- <div class="o-distance-m"> 358 <ul class="o-list-bare c-navigation__subnav"> 359 <li class="o-list-bare__item"> 360 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 361 </li> 362 </ul> 363 </div> --> 364 </li> 365 366 <li class="o-list-bare__item"> 367 <a href="/docs/pipeline_and_webpack.html" title="Building & Compiling" class="u-link-uniform ">Building & Compiling</a> 368 <!-- <div class="o-distance-m"> 369 <ul class="o-list-bare c-navigation__subnav"> 370 <li class="o-list-bare__item"> 371 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 372 </li> 373 </ul> 374 </div> --> 375 </li> 376 377 <li class="o-list-bare__item"> 378 <a href="/docs/executing_scripts.html" title="Executing Scripts" class="u-link-uniform ">Executing Scripts</a> 379 <!-- <div class="o-distance-m"> 380 <ul class="o-list-bare c-navigation__subnav"> 381 <li class="o-list-bare__item"> 382 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 383 </li> 384 </ul> 385 </div> --> 386 </li> 387 388 <li class="o-list-bare__item"> 389 <a href="/docs/javascript_usage.html" title="Using EmbarkJS" class="u-link-uniform is-active">Using EmbarkJS</a> 390 <!-- <div class="o-distance-m"> 391 <ul class="o-list-bare c-navigation__subnav"> 392 <li class="o-list-bare__item"> 393 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 394 </li> 395 </ul> 396 </div> --> 397 </li> 398 399 </ul> 400 </div> 401 402 <div class="o-distance-xl"> 403 <h3 class="c-category-title">Smart Contract Development</h3> 404 <ul class="o-list-bare"> 405 406 <li class="o-list-bare__item"> 407 <a href="/docs/contracts_configuration.html" title="Configuration" class="u-link-uniform ">Configuration</a> 408 <!-- <div class="o-distance-m"> 409 <ul class="o-list-bare c-navigation__subnav"> 410 <li class="o-list-bare__item"> 411 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 412 </li> 413 </ul> 414 </div> --> 415 </li> 416 417 <li class="o-list-bare__item"> 418 <a href="/docs/contracts_deployment.html" title="Accounts & Deployment" class="u-link-uniform ">Accounts & Deployment</a> 419 <!-- <div class="o-distance-m"> 420 <ul class="o-list-bare c-navigation__subnav"> 421 <li class="o-list-bare__item"> 422 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 423 </li> 424 </ul> 425 </div> --> 426 </li> 427 428 <li class="o-list-bare__item"> 429 <a href="/docs/contracts_imports.html" title="Special Imports" class="u-link-uniform ">Special Imports</a> 430 <!-- <div class="o-distance-m"> 431 <ul class="o-list-bare c-navigation__subnav"> 432 <li class="o-list-bare__item"> 433 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 434 </li> 435 </ul> 436 </div> --> 437 </li> 438 439 <li class="o-list-bare__item"> 440 <a href="/docs/contracts_testing.html" title="Testing" class="u-link-uniform ">Testing</a> 441 <!-- <div class="o-distance-m"> 442 <ul class="o-list-bare c-navigation__subnav"> 443 <li class="o-list-bare__item"> 444 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 445 </li> 446 </ul> 447 </div> --> 448 </li> 449 450 <li class="o-list-bare__item"> 451 <a href="/docs/contracts_javascript.html" title="Smart Contracts in JavaScript" class="u-link-uniform ">Smart Contracts in JavaScript</a> 452 <!-- <div class="o-distance-m"> 453 <ul class="o-list-bare c-navigation__subnav"> 454 <li class="o-list-bare__item"> 455 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 456 </li> 457 </ul> 458 </div> --> 459 </li> 460 461 </ul> 462 </div> 463 464 <div class="o-distance-xl"> 465 <h3 class="c-category-title">Blockchain Client</h3> 466 <ul class="o-list-bare"> 467 468 <li class="o-list-bare__item"> 469 <a href="/docs/blockchain_configuration.html" title="Configuration" class="u-link-uniform ">Configuration</a> 470 <!-- <div class="o-distance-m"> 471 <ul class="o-list-bare c-navigation__subnav"> 472 <li class="o-list-bare__item"> 473 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 474 </li> 475 </ul> 476 </div> --> 477 </li> 478 479 <li class="o-list-bare__item"> 480 <a href="/docs/blockchain_accounts_configuration.html" title="Managing Accounts" class="u-link-uniform ">Managing Accounts</a> 481 <!-- <div class="o-distance-m"> 482 <ul class="o-list-bare c-navigation__subnav"> 483 <li class="o-list-bare__item"> 484 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 485 </li> 486 </ul> 487 </div> --> 488 </li> 489 490 </ul> 491 </div> 492 493 <div class="o-distance-xl"> 494 <h3 class="c-category-title">Storage (IPFS/Swarm)</h3> 495 <ul class="o-list-bare"> 496 497 <li class="o-list-bare__item"> 498 <a href="/docs/storage_configuration.html" title="Configuration" class="u-link-uniform ">Configuration</a> 499 <!-- <div class="o-distance-m"> 500 <ul class="o-list-bare c-navigation__subnav"> 501 <li class="o-list-bare__item"> 502 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 503 </li> 504 </ul> 505 </div> --> 506 </li> 507 508 <li class="o-list-bare__item"> 509 <a href="/docs/storage_deployment.html" title="Deploying apps" class="u-link-uniform ">Deploying apps</a> 510 <!-- <div class="o-distance-m"> 511 <ul class="o-list-bare c-navigation__subnav"> 512 <li class="o-list-bare__item"> 513 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 514 </li> 515 </ul> 516 </div> --> 517 </li> 518 519 <li class="o-list-bare__item"> 520 <a href="/docs/storage_javascript.html" title="Storage APIs in JavaScript" class="u-link-uniform ">Storage APIs in JavaScript</a> 521 <!-- <div class="o-distance-m"> 522 <ul class="o-list-bare c-navigation__subnav"> 523 <li class="o-list-bare__item"> 524 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 525 </li> 526 </ul> 527 </div> --> 528 </li> 529 530 </ul> 531 </div> 532 533 <div class="o-distance-xl"> 534 <h3 class="c-category-title">Messages (Whisper)</h3> 535 <ul class="o-list-bare"> 536 537 <li class="o-list-bare__item"> 538 <a href="/docs/messages_configuration.html" title="Configuration" class="u-link-uniform ">Configuration</a> 539 <!-- <div class="o-distance-m"> 540 <ul class="o-list-bare c-navigation__subnav"> 541 <li class="o-list-bare__item"> 542 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 543 </li> 544 </ul> 545 </div> --> 546 </li> 547 548 <li class="o-list-bare__item"> 549 <a href="/docs/messages_javascript.html" title="Messages in JavaScript" class="u-link-uniform ">Messages in JavaScript</a> 550 <!-- <div class="o-distance-m"> 551 <ul class="o-list-bare c-navigation__subnav"> 552 <li class="o-list-bare__item"> 553 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 554 </li> 555 </ul> 556 </div> --> 557 </li> 558 559 </ul> 560 </div> 561 562 <div class="o-distance-xl"> 563 <h3 class="c-category-title">Naming Systems (ENS)</h3> 564 <ul class="o-list-bare"> 565 566 <li class="o-list-bare__item"> 567 <a href="/docs/naming_configuration.html" title="Configuration" class="u-link-uniform ">Configuration</a> 568 <!-- <div class="o-distance-m"> 569 <ul class="o-list-bare c-navigation__subnav"> 570 <li class="o-list-bare__item"> 571 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 572 </li> 573 </ul> 574 </div> --> 575 </li> 576 577 <li class="o-list-bare__item"> 578 <a href="/docs/naming_javascript.html" title="Naming Systems in JavaScript" class="u-link-uniform ">Naming Systems in JavaScript</a> 579 <!-- <div class="o-distance-m"> 580 <ul class="o-list-bare c-navigation__subnav"> 581 <li class="o-list-bare__item"> 582 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 583 </li> 584 </ul> 585 </div> --> 586 </li> 587 588 </ul> 589 </div> 590 591 <div class="o-distance-xl"> 592 <h3 class="c-category-title">Plugins</h3> 593 <ul class="o-list-bare"> 594 595 <li class="o-list-bare__item"> 596 <a href="/docs/installing_plugins.html" title="Installing plugins" class="u-link-uniform ">Installing plugins</a> 597 <!-- <div class="o-distance-m"> 598 <ul class="o-list-bare c-navigation__subnav"> 599 <li class="o-list-bare__item"> 600 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 601 </li> 602 </ul> 603 </div> --> 604 </li> 605 606 <li class="o-list-bare__item"> 607 <a href="/docs/creating_plugins.html" title="Creating plugins" class="u-link-uniform ">Creating plugins</a> 608 <!-- <div class="o-distance-m"> 609 <ul class="o-list-bare c-navigation__subnav"> 610 <li class="o-list-bare__item"> 611 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 612 </li> 613 </ul> 614 </div> --> 615 </li> 616 617 <li class="o-list-bare__item"> 618 <a href="/docs/plugin_reference.html" title="Plugin APIs" class="u-link-uniform ">Plugin APIs</a> 619 <!-- <div class="o-distance-m"> 620 <ul class="o-list-bare c-navigation__subnav"> 621 <li class="o-list-bare__item"> 622 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 623 </li> 624 </ul> 625 </div> --> 626 </li> 627 628 </ul> 629 </div> 630 631 <div class="o-distance-xl"> 632 <h3 class="c-category-title">Cockpit Guides</h3> 633 <ul class="o-list-bare"> 634 635 <li class="o-list-bare__item"> 636 <a href="/docs/cockpit_introduction.html" title="Introduction" class="u-link-uniform ">Introduction</a> 637 <!-- <div class="o-distance-m"> 638 <ul class="o-list-bare c-navigation__subnav"> 639 <li class="o-list-bare__item"> 640 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 641 </li> 642 </ul> 643 </div> --> 644 </li> 645 646 <li class="o-list-bare__item"> 647 <a href="/docs/cockpit_dashboard.html" title="Using the Dashboard" class="u-link-uniform ">Using the Dashboard</a> 648 <!-- <div class="o-distance-m"> 649 <ul class="o-list-bare c-navigation__subnav"> 650 <li class="o-list-bare__item"> 651 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 652 </li> 653 </ul> 654 </div> --> 655 </li> 656 657 <li class="o-list-bare__item"> 658 <a href="/docs/cockpit_deployment.html" title="Deployment" class="u-link-uniform ">Deployment</a> 659 <!-- <div class="o-distance-m"> 660 <ul class="o-list-bare c-navigation__subnav"> 661 <li class="o-list-bare__item"> 662 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 663 </li> 664 </ul> 665 </div> --> 666 </li> 667 668 <li class="o-list-bare__item"> 669 <a href="/docs/cockpit_explorer.html" title="Explorer View" class="u-link-uniform ">Explorer View</a> 670 <!-- <div class="o-distance-m"> 671 <ul class="o-list-bare c-navigation__subnav"> 672 <li class="o-list-bare__item"> 673 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 674 </li> 675 </ul> 676 </div> --> 677 </li> 678 679 <li class="o-list-bare__item"> 680 <a href="/docs/cockpit_editor.html" title="Code Editor" class="u-link-uniform ">Code Editor</a> 681 <!-- <div class="o-distance-m"> 682 <ul class="o-list-bare c-navigation__subnav"> 683 <li class="o-list-bare__item"> 684 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 685 </li> 686 </ul> 687 </div> --> 688 </li> 689 690 <li class="o-list-bare__item"> 691 <a href="/docs/cockpit_debugger.html" title="Using the Debugger" class="u-link-uniform ">Using the Debugger</a> 692 <!-- <div class="o-distance-m"> 693 <ul class="o-list-bare c-navigation__subnav"> 694 <li class="o-list-bare__item"> 695 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 696 </li> 697 </ul> 698 </div> --> 699 </li> 700 701 </ul> 702 </div> 703 704 <div class="o-distance-xl"> 705 <h3 class="c-category-title">Reference</h3> 706 <ul class="o-list-bare"> 707 708 <li class="o-list-bare__item"> 709 <a href="/docs/embark_commands.html" title="CLI Commands" class="u-link-uniform ">CLI Commands</a> 710 <!-- <div class="o-distance-m"> 711 <ul class="o-list-bare c-navigation__subnav"> 712 <li class="o-list-bare__item"> 713 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 714 </li> 715 </ul> 716 </div> --> 717 </li> 718 719 </ul> 720 </div> 721 722 <div class="o-distance-xl"> 723 <h3 class="c-category-title">Miscellaneous</h3> 724 <ul class="o-list-bare"> 725 726 <li class="o-list-bare__item"> 727 <a href="/docs/migrating_from_3.x.html" title="Migrating from Embark 3.x" class="u-link-uniform ">Migrating from Embark 3.x</a> 728 <!-- <div class="o-distance-m"> 729 <ul class="o-list-bare c-navigation__subnav"> 730 <li class="o-list-bare__item"> 731 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 732 </li> 733 </ul> 734 </div> --> 735 </li> 736 737 <li class="o-list-bare__item"> 738 <a href="/docs/troubleshooting.html" title="Troubleshooting" class="u-link-uniform ">Troubleshooting</a> 739 <!-- <div class="o-distance-m"> 740 <ul class="o-list-bare c-navigation__subnav"> 741 <li class="o-list-bare__item"> 742 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 743 </li> 744 </ul> 745 </div> --> 746 </li> 747 748 <li class="o-list-bare__item"> 749 <a href="/docs/contributing.html" title="Contributing" class="u-link-uniform ">Contributing</a> 750 <!-- <div class="o-distance-m"> 751 <ul class="o-list-bare c-navigation__subnav"> 752 <li class="o-list-bare__item"> 753 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 754 </li> 755 </ul> 756 </div> --> 757 </li> 758 759 </ul> 760 </div> 761 762 </nav> 763 </div> 764 </div> 765 <div class="o-guided-content__content"> 766 <p class="c-meta">Last updated: February 18th 2020 767 (<a href="https://github.com/embarklabs/embark/edit/master/site/source/docs/javascript_usage.md" target="_blank"> 768 Improve this guide <svg class="c-icon c-icon--xs"><use xlink:href="/../../assets/icons/symbols.svg#icon-pen-write-paper"></use></svg> 769 </a>) 770 </p> 771 <div class="o-standard-page"> 772 <h1>Using EmbarkJS</h1> 773 <p>In order to make decentralized app development as easy as possible, Embark offers a useful companion JavaScript library called <strong>EmbarkJS</strong>. It comes with many APIs that make your applications connect to decentralized services such as your Smart Contracts or IPFS. This guide gives a brief overview on how to set up EmbarkJS and make it connect to a blockchain node.</p> 774 <h2 id="Embark-Artifacts"><a href="#Embark-Artifacts" class="headerlink" title="Embark Artifacts"></a>Embark Artifacts</h2><p>First of all it’s important to understand where EmbarkJS comes from. Whenever <code>embark run</code> is executed, Embark will generate the EmbarkJS library and put it in the configured <code>generationDir</code>, as discussed in <a href="/docs/configuration.html">configuring Embark</a>. This EmbarkJS library is called an artifact and is just one of many other artifacts that Embark generates for later usage.</p> 775 <p>Other artifacts that Embark generates are:</p> 776 <ul> 777 <li>Smart Contract ABIs</li> 778 <li>Bootstrapping code</li> 779 <li>Configuration data</li> 780 </ul> 781 <p>We’ll discuss these more in this guide.</p> 782 <h2 id="Importing-EmbarkJS"><a href="#Importing-EmbarkJS" class="headerlink" title="Importing EmbarkJS"></a>Importing EmbarkJS</h2><p>Once Embark has generated all necessary artifacts, we can start using them when building an application. Artifacts are really just written to disc, so if we want to get hold of any of them, it’s really just a matter of importing them accordingly.</p> 783 <p>The following code imports EmbarkJS:</p> 784 <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">import EmbarkJS from './embarkArtifacts/embarkjs';</span><br></pre></td></tr></table></figure> 785 786 <h2 id="Waiting-for-EmbarkJS-to-be-ready"><a href="#Waiting-for-EmbarkJS-to-be-ready" class="headerlink" title="Waiting for EmbarkJS to be ready"></a>Waiting for EmbarkJS to be ready</h2><p>EmbarkJS also includes a <code>onReady</code> function. This is very useful to ensure that your Dapp only starts interacting with contracts when the proper connection to web3 has been made and ready to use.</p> 787 <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">import EmbarkJS from 'Embark/EmbarkJS';</span><br><span class="line">import SimpleStorage from 'Embark/contracts/SimpleStorage';</span><br><span class="line"></span><br><span class="line">EmbarkJS.onReady((error) => {</span><br><span class="line"> if (error) {</span><br><span class="line"> console.error('Error while connecting to web3', error);</span><br><span class="line"> return;</span><br><span class="line"> }</span><br><span class="line"> SimpleStorage.methods.set(100).send();</span><br><span class="line">});</span><br></pre></td></tr></table></figure> 788 789 <h2 id="Using-dappConnection"><a href="#Using-dappConnection" class="headerlink" title="Using dappConnection"></a>Using <code>dappConnection</code></h2><p>After reading the section above on <code>EmbarkJS.onReady</code>, you might be wondering where EmbarkJS establishes a connection.</p> 790 <p>The answer is: you decide! You can configure it using <code>dappConnection</code>, a config property you can find in the Smart Contract config (by default at <code>config/contracts.js</code>).</p> 791 <p>You will notice that property name reused in some other config files too, like the Storage one, because you can configure where those connect as well.</p> 792 <p>The expressions used within <code>dappConnection</code> come with special semantics. Here’s how they work: it is an array of strings where EmbarkJS will try each of those in order (from 0 to N) and as soon as one of the connections work, it will stop.</p> 793 <p>In the case of the Smart Contract config <code>dappConnection</code>, the one that is used to connect to the blockchain node and that is indirectly used in <code>EmbarkJS.onReady</code>, you will see two special entities: <code>$WEB3</code> and <code>$EMBARK</code>.</p> 794 <ul> 795 <li><code>$WEB3</code> tells EmbarkJS to connect to the browser’s web3 instance. For example, Metamask or Status.</li> 796 <li><code>$EMBARK</code> tells EmbarkJS to connect to Embark’s wallet, implemented using a proxy in between the Dapp and the blockchain node.<ul> 797 <li>This let’s you use you own accounts, as set up in your Blockchain config’s <code>accounts</code> section<ul> 798 <li>If you don’t use custom accounts, using <code>$EMBARK</code> is still useful, because it connects to the node more easily for you and uses the unlocked accounts on the node, like when using the <code>dev</code> <code>miningMode</code></li> 799 </ul> 800 </li> 801 <li>Also, Embark gets to see the transactions processed and logs them back to you in a human readable manner</li> 802 </ul> 803 </li> 804 </ul> 805 <p>If you want, you can also put a valid node URL in the <code>dappConnection</code> array. In that case, EmbarkJS will connect directly to the node, without using Embark’s proxy.<br>It is, however, not recommended as you lose some of Embark’s features, like the transaction logger.</p> 806 <p>If you want to use an external node, like Infura, we instead recommend to set it in the Blockchain config (<code>config/blockchain.js</code>) using the property <code>endpoint</code>.<br>Then, using <code>$EMBARK</code> will use Embark’s proxy, which in part will be connected to that endpoint.</p> 807 <h2 id="Requesting-account-access"><a href="#Requesting-account-access" class="headerlink" title="Requesting account access"></a>Requesting account access</h2><p>As of <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1102.md" target="_blank" rel="noopener">EIP1102</a>, decentralized applications MUST request access to a DApp’s user accounts. Embark offers several options on how to implement this.</p> 808 <p>An Embark application’s Smart Contract configuration file (typically located in <code>config/contracts.js</code>) comes with a <code>dappAutoEnable</code> property which controls whether or not EmbarkJS should automatically try to request account access:</p> 809 <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">module.exports = {</span><br><span class="line"> ...</span><br><span class="line"> // Automatically call `ethereum.enable` if true.</span><br><span class="line"> // If false, the following code must run before sending any transaction: `await EmbarkJS.enableEthereum();`</span><br><span class="line"> dappAutoEnable: true,</span><br><span class="line"> ...</span><br><span class="line">}</span><br></pre></td></tr></table></figure> 810 811 <p>By default, the value of <code>dappAutoEnable</code> is <code>true</code> which means that Embark will call <code>ethereum.enable</code> for us to request account access when the first page of the DApp is loaded.</p> 812 <p>If we want more control over when our application should request account access, we can set <code>dappAutoEnable</code> to false and make use of <code>EmbarkJS.enableEthereum()</code>.</p> 813 <p>This method will essentially cause our application to request account access, giving us full control over when this should happen.</p> 814 <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">try {</span><br><span class="line"> const accounts = await EmbarkJS.enableEthereum();</span><br><span class="line"> // access granted</span><br><span class="line">} catch() {</span><br><span class="line"> // access not granted</span><br><span class="line">}</span><br></pre></td></tr></table></figure> 815 816 <h2 id="Additional-APIs"><a href="#Additional-APIs" class="headerlink" title="Additional APIs"></a>Additional APIs</h2><p>This guide only touched on getting started with EmbarkJS. There are many more APIs to explore, depending on what we’re achieving to build. Have a look at the dedicated guides to learn more:</p> 817 <ul> 818 <li><a href="contracts_javascript.html">EmbarkJS.Contract</a> - To interact with smart contracts. Typically Embark automatically initializes all your deployed contracts with this. uses web3.js 1.2.6</li> 819 <li><a href="storage_javascript.html">EmbarkJS.Storage</a> - To interact with the configured decentralized storage. Includes bindings to save & retrieve data, upload & download files, etc..</li> 820 <li><a href="messages_javascript.html">EmbarkJS.Communication</a> - To interact with the configured decentralized messages system. Includes bindings to listen to topics and send messages.</li> 821 <li><a href="naming_javascript.html">EmbarkJS.Names</a> - To interact with the configured decentralized naming system such as ENS. Includes bindings to look up the address of a domain name as well as retrieve a domain name given an address.</li> 822 </ul> 823 824 </div> 825 <div class="o-container-medium o-distance-l"> 826 <div class="o-flex o-flex-space-between"> 827 828 <div class="o-flex__item"> 829 <a href="/docs/executing_scripts.html" class="c-button c-button--quite" title="Previous article">Previous</a> 830 </div> 831 832 833 <div class="o-flex__item"> 834 <a href="/docs/contracts_configuration.html" class="c-button c-button--quite" title="Next article">Next</a> 835 </div> 836 837 </div> 838 839 840 </div> 841 </div> 842 <div class="o-guided-content__addition"> 843 <h3 class="c-category-title">Contents</h3> 844 <ol class="o-list-bare"><li class="o-list-bare__item o-list-bare-level-2 o-ellipsis"><a href="#Embark-Artifacts" class="u-link-uniform">Embark Artifacts</a></li><li class="o-list-bare__item o-list-bare-level-2 o-ellipsis"><a href="#Importing-EmbarkJS" class="u-link-uniform">Importing EmbarkJS</a></li><li class="o-list-bare__item o-list-bare-level-2 o-ellipsis"><a href="#Waiting-for-EmbarkJS-to-be-ready" class="u-link-uniform">Waiting for EmbarkJS to be ready</a></li><li class="o-list-bare__item o-list-bare-level-2 o-ellipsis"><a href="#Using-dappConnection" class="u-link-uniform">Using dappConnection</a></li><li class="o-list-bare__item o-list-bare-level-2 o-ellipsis"><a href="#Requesting-account-access" class="u-link-uniform">Requesting account access</a></li><li class="o-list-bare__item o-list-bare-level-2 o-ellipsis"><a href="#Additional-APIs" class="u-link-uniform">Additional APIs</a></li></ol> 845 </div> 846 </div> 847 </section> 848 </main> 849 850 <script src="/js/linkjuice/dist/linkjuice.min.js"></script> 851 852 <footer role="contentinfo" class="c-footer o-distance-xxl"> 853 <div class="o-container"> 854 <div class="c-footer__top"> 855 <p class="c-category-title c-footer__top__title u-text-light"> 856 <a href="/" class="c-logo c-logo--negative" title="Embark">Embark</a> 857 </p> 858 </div> 859 <div class="c-footer__body"> 860 <div class="o-grid"> 861 <div class="o-grid__column--1-1 o-grid__column--medium-1-2 o-grid__column--large-1-5"> 862 <p class="c-category-title u-text-light">Resources</p> 863 <ul class="o-list-bare"> 864 <li class="o-list-bare__item"> 865 <a href="/docs/quick_start.html" class="u-link-ghost" title="Quick Start">Quick Start</a> 866 </li> 867 <li class="o-list-bare__item"> 868 <a href="/docs" class="u-link-ghost" title="Documentation">Documentation</a> 869 </li> 870 <li class="o-list-bare__item"> 871 <a href="https://blog.embarklabs.io" target="_blank" rel="noopener" class="u-link-ghost" title="Blog">Blog</a> 872 </li> 873 <li class="o-list-bare__item"> 874 <a href="/docs/faq.html" class="u-link-ghost" title="FAQ">FAQ</a> 875 </li> 876 <li class="o-list-bare__item"> 877 <a href="/docs/troubleshooting.html" class="u-link-ghost" title="Troubleshooting">Troubleshooting</a> 878 </li> 879 </ul> 880 </div> 881 <div class="o-grid__column--1-1 o-grid__column--medium-1-2 o-grid__column--large-1-5"> 882 <p class="c-category-title u-text-light">Help</p> 883 <ul class="o-list-bare"> 884 <li class="o-list-bare__item"> 885 <a href="https://stackoverflow.com/questions/tagged/embark" target="_blank" rel="noopener" class="u-link-ghost" title="Embark Questions">Stack Overflow</a> 886 </li> 887 <li class="o-list-bare__item"> 888 <a href="https://gitter.im/embark-framework/Lobby" target="_blank" rel="noopener" class="u-link-ghost" title="Gitter">Gitter</a> 889 </li> 890 <li class="o-list-bare__item"> 891 <a href="https://github.com/embarklabs/embark/issues" target="_blank" rel="noopener" class="u-link-ghost" title="Report issues">Report issues</a> 892 </li> 893 <li class="o-list-bare__item"> 894 <a href="https://github.com/embarklabs/embark/blob/master/CODE_OF_CONDUCT.md" target="_blank" rel="noopener" class="u-link-ghost" title="Code of Conduct">Code of Conduct</a> 895 </li> 896 </ul> 897 </div> 898 <div class="o-grid__column--1-1 o-grid__column--medium-1-2 o-grid__column--large-1-5"> 899 <p class="c-category-title u-text-light">Community</p> 900 <ul class="o-list-bare"> 901 <li class="o-list-bare__item"> 902 <a href="https://github.com/embarklabs" target="_blank" rel="noopener" class="u-link-ghost" title="Github">Github</a> 903 </li> 904 <li class="o-list-bare__item"> 905 <a href="https://twitter.com/EmbarkProject" target="_blank" rel="noopener" class="u-link-ghost" title="Twitter">Twitter</a> 906 </li> 907 <li class="o-list-bare__item"> 908 <a href="/docs/contributing.html" class="u-link-ghost" title="Contribute">Contribute</a> 909 </li> 910 <li class="o-list-bare__item"> 911 <a href="/community/#team" class="u-link-ghost" title="Team">Team</a> 912 </li> 913 </ul> 914 </div> 915 916 <div class="o-grid__column--1-1 o-grid__column--medium-1-2 o-grid__column--large-1-4"> 917 <p class="c-category-title u-text-light">The Status Network</p> 918 <ul class="o-list-bare two-columns"> 919 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://status.im/" target="_blank">Status</a></li> 920 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://keycard.tech/" target="_blank">Keycard</a></li> 921 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://dap.ps/" target="_blank">dap.ps</a></li> 922 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://teller.exchange/" target="_blank">Teller</a></li> 923 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://assemble.fund/" target="_blank">Assemble</a></li> 924 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://subspace.embarklabs.io/" target="_blank">Subspace</a></li> 925 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://vac.dev/" target="_blank">Vac</a></li> 926 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://nimbus.team/" target="_blank">Nimbus</a></li> 927 </ul> 928 </div> 929 </div> 930 </div> 931 <div class="c-footer__bottom"> 932 <p class="u-text-light"> 933 <a href="https://status.im/privacy-policy.html" title="Privacy Policy" target="_blank" class="u-text-light">Privacy Policy</a> 934 / © 2019-2020 Embark 935 </p> 936 </div> 937 </div> 938 </footer> 939 940 941 942 943 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.4/highlight.min.js"></script> 944 <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script> 945 <script> 946 const EMBARK_DOC_VERSIONS = { 947 'latest': 'https://framework.embarklabs.io/docs','3.2': 'https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/' 948 }; 949 </script> 950 951 952 <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom --> 953 <script> 954 (function(f, a, t, h, o, m){ 955 a[h]=a[h]||function(){(a[h].q=a[h].q||[]).push(arguments)}; 956 o=f.createElement('script'), 957 m=f.getElementsByTagName('script')[0]; 958 o.async=1; o.src=t; o.id='fathom-script'; 959 m.parentNode.insertBefore(o,m) 960 })(document, window, '//fathom.status.im/tracker.js', 'fathom'); 961 fathom('set', 'siteId', 'YDUQQ'); 962 fathom('trackPageview'); 963 </script> 964 <!-- / Fathom --> 965 966 967 <script src="/js/index.js"></script> 968 969 970 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> 971 <script type="text/javascript"> 972 docsearch({ 973 apiKey: '439d8dc2add18007a2f31be4a9c0ed70', 974 indexName: 'embark', 975 inputSelector: '#search-input' 976 }); 977 </script> 978 979 </body> 980 </html> 981