{"id":3892,"date":"2020-04-04T12:57:00","date_gmt":"2020-04-04T10:57:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=3892"},"modified":"2022-06-09T18:01:38","modified_gmt":"2022-06-09T16:01:38","slug":"web3-js-ethereum-blockchain-javascript-api","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/","title":{"rendered":"Web3.js: the Ethereum Blockchain JavaScript API"},"content":{"rendered":"\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tTable Of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
  1. Introduction<\/a>
  2. Building the bridge with Web3.js<\/a><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n

    Introduction<\/h2>\n\n\n\n

    In previous articles in this series, we have learned how a basic smart contract is made, and discovered that Ethereum Studio is a simple and easy way to develop and deploy on a testnet before going into the Ethereum network. <\/p>\n\n\n\n

    Next we learned to build a simple web page in order to handle user<\/span> interactions<\/span> via web browser<\/span>. <\/p>\n\n\n\n

    In this article we\u2019ll learn how to use Web3.js<\/span><\/strong>, a JavaScript<\/span> <\/a>library, in our project to interact with the Ethereum<\/span> Blockchain, enabling the Ethereum smart contract to be operational at the same time as interaction<\/span> is taking place on the browser.<\/p>\n\n\n\n

    This is part five of a series on how to create an ERC-20 token. If you want to begin from scratch, please read part one<\/a>, part two<\/a>, part three<\/a> and part four<\/a> of this series first.<\/p>\n\n\n\n

    Building the bridge with Web3.js<\/h2>\n\n\n\n

    Renaming the JS file using the same name as the HTML file<\/span> and (optionally) the CSS<\/span> file is recommended. We then have an \u2018app\u2019 folder containing all the files<\/span> that handle user<\/span> interaction, and a \u2018contracts\u2019 folder that gathers all the token logic files<\/span> (the Coin.sol<\/em> file we saw in part three<\/a>). <\/p>\n\n\n\n

    If we follow the Model-View-Controller<\/span> architecture, we would notice that the Model is in the \u2018contracts\u2019 folder, whilst the View (the HTML and CSS<\/span> files<\/span>) and the Controller (the JS file) are in the \u2018app\u2019 folder.<\/p>\n\n\n\n

    To bind the token logic with the functions<\/span> that will be executed<\/span> when an action is made on the interface, the first step is to declare the address on which the smart contract will be located, along with the ABI and the endpoint.<\/p>\n\n\n\n

    All this information can be created by starting a local Ethereum node (with geth<\/a>, for example) or a public service (infura.io<\/a> is one of the most widely known and used, to date).<\/p>\n\n\n

    Contracts['HelloWorld'<\/span>] = {\nabi<\/span>: [],\naddress<\/span>: \"0x..\"<\/span>,\nendpoint<\/span>: \"http:\/\/....\"<\/span>\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    The next step involves the need to create a Web3 instance<\/span> of the smart contract, passing it as a property, allowing Web3.js to interact with it.<\/p>\n\n\n
    function<\/span> Coin<\/span>(Contract<\/span>) <\/span>{\n    this<\/span>.web3 = null<\/span>;\n    this<\/span>.instance = null<\/span>;\n    this<\/span>.Contract = Contract;\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Next, initialize the Coin<\/span><\/code> object and create an instance<\/span> of the web3js library. The initialization function<\/span> first defines the interface for the contract using the web3js contract object (a Web3 object), then defines the address of the instance<\/span> of the contract for the Coin<\/code> object.<\/p>\n\n\n\n
    The web3 <\/em>variable creates a new Web3 instance<\/span> using either the Metamask provider or an independent Web 3 provider created as the endpoint configured for the contract. <\/p>\n\n\n\n
    The contract_interface<\/em> variable<\/span> creates the contract interface using the ABI provided in the configuration and the instance<\/span> <\/em>variable creates the contract instance<\/span> for the specific Ethereum address provided in the configuration. Refer to the code below.<\/p>\n\n\n
    Coin.prototype.init = function<\/span>(<\/span>) <\/span>{\n    this<\/span>.web3 = new<\/span> Web3(\n        (window<\/span>.web3 && window<\/span>.web3.currentProvider) ||\n        new<\/span> Web3.providers.HttpProvider(this<\/span>.Contract.endpoint));\n\n    var<\/span> contract_interface = this<\/span>.web3.eth.contract(this<\/span>.Contract.abi);\n\n    this<\/span>.instance = contract_interface.at(this<\/span>.Contract.address);\n};<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    We begin writing the showAddressBalance <\/em>function triggered by the “Check Balance” button to display the account balance: we need to store the input value of the address in an address <\/em>variable, validate it using the isValidAddress <\/em>function, check the amount relative to it and display it in the returned message<\/em>.<\/p>\n\n\n
    Coin.prototype.showAddressBalance = function<\/span>(hash, cb<\/span>) <\/span>{\n    var<\/span> that = this<\/span>;\n    var<\/span> address = $(\"#balance-address\"<\/span>).val();\n\n    if<\/span>(!isValidAddress(address)) {\n        console<\/span>.log(\"Invalid address\"<\/span>);\n        return<\/span>;\n    }\n\n    this<\/span>.getBalance(address, function<\/span>(error, balance<\/span>) <\/span>{\n        if<\/span>(error) {\n            console<\/span>.log(error)\n        }\n        else<\/span> {\n            console<\/span>.log(balance.toNumber());\n                $(\"#message\"<\/span>).text(balance.toNumber());\n}\n})\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    With the getBalance <\/em>function, we get the balance of tokens found at the address of the contract:<\/p>\n\n\n
    Coin.prototype.getBalance = function<\/span>(address, cb<\/span>) <\/span>{\n    this<\/span>.instance.balances(address, function<\/span>(error, result<\/span>) <\/span>{\n        cb(error, result);\n    })\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Next, we create the action code to send tokens to another address when the “send” button is clicked (the createTokens <\/em>function) by getting input values for address and amount, validating those addresses and the relative amount using the isValidAddress <\/em>and isValidAmount<\/em> function<\/span>. <\/p>\n\n\n\n
    Then, we transfer the amount to other address and use the public mint function<\/span> from the smart contract: if there’s an error, we log it, otherwise we wait for the confirmation of transaction from the waitForReceipt <\/em>function and clear form values while waiting:<\/p>\n\n\n
    Coin.prototype.createTokens = function<\/span>(<\/span>) <\/span>{\n    var<\/span> that = this<\/span>;\n    \n    var<\/span> address = $(\"#create-address\"<\/span>).val();\n    var<\/span> amount = $(\"#create-amount\"<\/span>).val();\n    console<\/span>.log(amount);\n\n    if<\/span>(!isValidAddress(address)) {\n        console<\/span>.log(\"Invalid address\"<\/span>);\n        return<\/span>;\n    }\n\n    if<\/span>(!isValidAmount(amount)) {\n        console<\/span>.log(\"Invalid amount\"<\/span>);\n        return<\/span>;\n    }\n\n    this<\/span>.instance.mint(address, amount, { from<\/span>:\nwindow<\/span>.web3.eth.accounts[0<\/span>], gas<\/span>: 100000<\/span>, gasPrice<\/span>: 100000<\/span>, gasLimit<\/span>: 100000<\/span> }, \n                function<\/span>(error, txHash<\/span>) <\/span>{\n            if<\/span>(error) {\n                console<\/span>.log(error);\n            }\n            else<\/span> {\n                that.waitForReceipt(txHash, function<\/span>(receipt<\/span>) <\/span>{\n                    if<\/span>(receipt.status) {\n                        $(\"#create-address\"<\/span>).val(\"\"<\/span>);\n                        $(\"#create-amount\"<\/span>).val(\"\"<\/span>);\n                    }\n                    else<\/span> {\n                        console<\/span>.log(\"error\"<\/span>);\n                    }\n                });\n            }\n        }\n    )\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    The waitForReceipt <\/em>function waits for receipt of transaction, checking for the transaction receipt using the web3 library method<\/span>, and trying again every 2 seconds (2000 ms):<\/p>\n\n\n
    Coin.prototype.waitForReceipt = function<\/span>(hash, cb<\/span>) <\/span>{\n    var<\/span> that = this<\/span>;\n\n    this<\/span>.web3.eth.getTransactionReceipt(hash, function<\/span>(err, receipt<\/span>) <\/span>{\n        if<\/span> (err) {\n            error(err);\n        }\n        if<\/span> (receipt !== null<\/span>) {\n           Transaction went through\n            if<\/span> (cb) {\n                cb(receipt);\n            }\n        } else<\/span> {\n            window<\/span>.setTimeout(function<\/span>(<\/span>) <\/span>{\n                that.waitForReceipt(hash, cb);\n            }, 2000<\/span>);\n        }\n    });\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    With the isValidAddress<\/em> function, called in the functions<\/span> above, we check if the address meets the basic requirements (i.e.<\/em> it follows the Ethereum<\/span> standard), by doing a basic validation of amount, which must be bigger than 0 and a number type. Use the code below:<\/p>\n\n\n
    function<\/span> isValidAddress<\/span>(address<\/span>) <\/span>{\n    return<\/span> \/^(0x)?[0-9a-f]{40}$\/i<\/span>.test(address);\n}\n\nfunction<\/span> isValidAmount<\/span>(amount<\/span>) <\/span>{\n    return<\/span> amount > 0<\/span> && typeof<\/span> Number<\/span>(amount) == 'number'<\/span>;    \n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
     Then, we bind functions<\/span> to the buttons defined in app.html:<\/p>\n\n\n
    Coin.prototype.bindButtons = function<\/span>(<\/span>) <\/span>{\n    var<\/span> that = this<\/span>;\n\n    $(document<\/span>).on(\"click\"<\/span>, \"#button-create\"<\/span>, function<\/span>(<\/span>) <\/span>{\n        that.createTokens();\n    });\n\n    $(document<\/span>).on(\"click\"<\/span>, \"#button-check\"<\/span>, function<\/span>(<\/span>) <\/span>{\n        that.showAddressBalance();\n    }); \n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    This last bit<\/span> of code binds all the buttons defined in the functions<\/span> above and initialized the contract.<\/p>\n\n\n
    Coin.prototype.onReady = function<\/span>(<\/span>) <\/span>{\n    this<\/span>.bindButtons();\n    this<\/span>.init();\n};\n\nif<\/span>(typeof<\/span>(Contracts) === \"undefined\"<\/span>) var<\/span> Contracts={ Coin<\/span>: { abi<\/span>: [] }};\nvar<\/span> coin = new<\/span> Coin(Contracts['Coin'<\/span>]);\n\n$(document<\/span>).ready(function<\/span>(<\/span>) <\/span>{\n    coin.onReady();\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Web3.js is one of the frameworks most frequently used to design decentralised applications<\/span>. Of course, this is just a little application<\/span> that does very few things. A list of the functions<\/span>, along with a complete guide of web3js framework, is available in the official documentation<\/a> website.<\/p>\n\n\n\n\n\n
    Interested in Web3? Read: What is Web3 and What New Capabilities Does it Bring?<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    Introduction In previous articles in this series, we have learned how a basic smart contract is made, and discovered that Ethereum Studio is a simple and easy way to develop and deploy on a testnet before going into the Ethereum network. Next we learned to build a simple web page in order to handle user… Read more<\/a><\/p>\n","protected":false},"author":86,"featured_media":3893,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":3,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[13],"tags":[4240,4244],"collections":[],"class_list":{"0":"post-3892","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-blockchain","8":"tag-ethereum","9":"tag-smart-contract","10":"entry"},"yoast_head":"\nWeb3.js: the Ethereum Blockchain JavaScript API - Codemotion<\/title>\n<meta name=\"description\" content=\"Learn how to make an interactive web interface by means of a web3.js, in order to tweak the token attributes of Smart Contracts.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web3.js: the Ethereum Blockchain JavaScript API\" \/>\n<meta property=\"og:description\" content=\"Learn how to make an interactive web interface by means of a web3.js, in order to tweak the token attributes of Smart Contracts.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/ijaack94\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-04T10:57:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-09T16:01:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Giacomo Barbieri\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ijaack94\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Giacomo Barbieri\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/\"},\"author\":{\"name\":\"Giacomo Barbieri\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/ace6a459089546835d3262bb7aef87bf\"},\"headline\":\"Web3.js: the Ethereum Blockchain JavaScript API\",\"datePublished\":\"2020-04-04T10:57:00+00:00\",\"dateModified\":\"2022-06-09T16:01:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/\"},\"wordCount\":763,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280.jpg\",\"keywords\":[\"Ethereum\",\"Smart Contracts\"],\"articleSection\":[\"Blockchain\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/\",\"name\":\"Web3.js: the Ethereum Blockchain JavaScript API - Codemotion\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280.jpg\",\"datePublished\":\"2020-04-04T10:57:00+00:00\",\"dateModified\":\"2022-06-09T16:01:38+00:00\",\"description\":\"Learn how to make an interactive web interface by means of a web3.js, in order to tweak the token attributes of Smart Contracts.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280.jpg\",\"width\":1200,\"height\":675,\"caption\":\"javascript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Backend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/backend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Blockchain\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Web3.js: the Ethereum Blockchain JavaScript API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/ace6a459089546835d3262bb7aef87bf\",\"name\":\"Giacomo Barbieri\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8381a47a5414b1154179659f56400e3eb72c3a592355c40b184a4f8a6a991c87?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8381a47a5414b1154179659f56400e3eb72c3a592355c40b184a4f8a6a991c87?s=96&d=mm&r=g\",\"caption\":\"Giacomo Barbieri\"},\"description\":\"Blogger with over 6 years of experience in blogs and newspapers, passionate about AI, 5G and blockchain. Never-ending learner of new technologies and approaches, I believe in the decentralized government and in the Internet of Money.\",\"sameAs\":[\"https:\/\/facebook.com\/ijaack94\",\"https:\/\/instagram.com\/ijaack94\/\",\"https:\/\/linkedin.com\/in\/giacomobarbieri94\",\"https:\/\/x.com\/ijaack94\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/giacomo-barbieri\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Web3.js: the Ethereum Blockchain JavaScript API - Codemotion","description":"Learn how to make an interactive web interface by means of a web3.js, in order to tweak the token attributes of Smart Contracts.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/","og_locale":"en_US","og_type":"article","og_title":"Web3.js: the Ethereum Blockchain JavaScript API","og_description":"Learn how to make an interactive web interface by means of a web3.js, in order to tweak the token attributes of Smart Contracts.","og_url":"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_author":"https:\/\/facebook.com\/ijaack94","article_published_time":"2020-04-04T10:57:00+00:00","article_modified_time":"2022-06-09T16:01:38+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280.jpg","type":"image\/jpeg"}],"author":"Giacomo Barbieri","twitter_card":"summary_large_image","twitter_creator":"@ijaack94","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Giacomo Barbieri","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/"},"author":{"name":"Giacomo Barbieri","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/ace6a459089546835d3262bb7aef87bf"},"headline":"Web3.js: the Ethereum Blockchain JavaScript API","datePublished":"2020-04-04T10:57:00+00:00","dateModified":"2022-06-09T16:01:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/"},"wordCount":763,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280.jpg","keywords":["Ethereum","Smart Contracts"],"articleSection":["Blockchain"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/","url":"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/","name":"Web3.js: the Ethereum Blockchain JavaScript API - Codemotion","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280.jpg","datePublished":"2020-04-04T10:57:00+00:00","dateModified":"2022-06-09T16:01:38+00:00","description":"Learn how to make an interactive web interface by means of a web3.js, in order to tweak the token attributes of Smart Contracts.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280.jpg","width":1200,"height":675,"caption":"javascript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/web3-js-ethereum-blockchain-javascript-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Backend","item":"https:\/\/www.codemotion.com\/magazine\/backend\/"},{"@type":"ListItem","position":3,"name":"Blockchain","item":"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/"},{"@type":"ListItem","position":4,"name":"Web3.js: the Ethereum Blockchain JavaScript API"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/ace6a459089546835d3262bb7aef87bf","name":"Giacomo Barbieri","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8381a47a5414b1154179659f56400e3eb72c3a592355c40b184a4f8a6a991c87?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8381a47a5414b1154179659f56400e3eb72c3a592355c40b184a4f8a6a991c87?s=96&d=mm&r=g","caption":"Giacomo Barbieri"},"description":"Blogger with over 6 years of experience in blogs and newspapers, passionate about AI, 5G and blockchain. Never-ending learner of new technologies and approaches, I believe in the decentralized government and in the Internet of Money.","sameAs":["https:\/\/facebook.com\/ijaack94","https:\/\/instagram.com\/ijaack94\/","https:\/\/linkedin.com\/in\/giacomobarbieri94","https:\/\/x.com\/ijaack94"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/giacomo-barbieri\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280-600x600.jpg","author_info":{"display_name":"Giacomo Barbieri","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/giacomo-barbieri\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280.jpg",1200,675,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280-300x169.jpg",300,169,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280-768x432.jpg",768,432,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280-1024x576.jpg",1024,576,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280.jpg",1200,675,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280.jpg",1200,675,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280.jpg",100,56,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/04\/code-3337044_1280-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Giacomo Barbieri","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/giacomo-barbieri\/"},"uagb_comment_info":0,"uagb_excerpt":"Introduction In previous articles in this series, we have learned how a basic smart contract is made, and discovered that Ethereum Studio is a simple and easy way to develop and deploy on a testnet before going into the Ethereum network. Next we learned to build a simple web page in order to handle user……","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/3892","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/86"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=3892"}],"version-history":[{"count":13,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/3892\/revisions"}],"predecessor-version":[{"id":17981,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/3892\/revisions\/17981"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/3893"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=3892"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=3892"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=3892"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=3892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}