Javascript Elements Client-Side Scripting Why Use Client

Total Page:16

File Type:pdf, Size:1020Kb

Javascript Elements Client-Side Scripting Why Use Client Client-side scripting JavaScript Elements • client-side script: code runs in browser a"er page is sent back from server – often this code manipulates the page or responds to user actions Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst 2 Why use client-side programming? What is JavaScript? • PHP already allows us to create dynamic web pages. Why • a lightweight programming language ("scripting language") also use client-side scripting? • • Client-side scripting (JavaScript) benefits: used to make web pages interactive – – usability: can modify a page without having to post back to the server insert dynamic text into HTML (ex: user name) (faster UI) – react to events (ex: page load user click) – efficiency: can make small, quick changes to page without wai?ng for – get information about a user's computer (ex: browser type) server – perform calculations on user's computer (ex: form validation) – event-driven: can respond to user ac?ons like clicks and key presses • a web standard (but not supported identically by all • Server-side programming (PHP) benefits: browsers) – security: has access to server's private data; client can't see source code – compa7bility: not subject to browser compa?bility issues • NOT related to Java other than by name and some syntactic – power: can write files, open connec?ons to servers, connect to databases, ... similarities Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst 3 4 Short History of JavaScript JavaScript and JAVA • Originally developed by Netscape, as LiveScript • JavaScript and Java are only related through syntax • Javascript is interpreted • Became a joint venture of Netscape and Sun in • JAVA is strongly typed - types are known at compile time and 1995, renamed JavaScript operand types (τύποι τελεστέων) are checked for • Now standardized by the European Computer compatibility Manufacturers Association as ECMA-262 (also • Variables in JavaScript are dynamically typed ISO 16262) – Compile-time type checking impossible • JavaScript has more relaxed syntax and rules • We’ll call collections of JavaScript code scripts, – fewer and "looser" data types not programs – variables don't need to be declared – errors often silent (few exceptions) http://www.ecma-international.org/publications/standards/Ecma-262.htm 5 6 JavaScript vs. Java JavaScript vs. PHP • interpreted, not compiled • similarities: – • more relaxed syntax and rules both are interpreted, not compiled – fewer and "looser" data types + = – both are relaxed about syntax, rules, and types – variables don't need to be declared – both are case-sensitive – errors often silent (few exceptions) – both have built-in regular expressions for powerful text processing • key construct is the function rather than the class • differences: – "first-class" functions are used in many situations – JS is more object-oriented: noun.verb(), less • contained within a web page and integrates with its HTML/ procedural: verb(noun) CSS content – JS focuses on UIs and interacting with a document; PHP on • Objects in: HTML output and files/forms – – JAVA are static: their collection of data members and methods JS code runs on the client's browser; PHP code runs on the web server is fixed at compile time – JavaScript are dynamic: members of an object can change during execution Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst 7 8 Overview of JavaScript Object Orientation and JavaScript • JavaScript can be used to: • JavaScript is NOT an object-oriented programming – replace some of what is typically done with applets (except language graphics) – Does not support class-based inheritance - cannot support – replace some of what is done with CGI - namely server-side polymorphism programming (but no file operations or networking) – Has prototype-based inheritance, which is much different • User interactions through forms are easy • JavaScript objects are collections of properties, which • The Document Object Model makes it possible to support are like the members of classes in Java and C++ dynamic HTML documents with JavaScript • JavaScript has primitives for simple types – Much of what we will do with JavaScript is event-driven computation 9 10 Linking to a JavaScript file: script • script tag should be placed in HTML page's head • script code is stored in a separate .js file • JS code can be placed directly in the HTML file's body or head (like CSS) Linking JavaScript to HTML – but this is bad style (should separate content, presentation, and behavior) Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst 12 JavaScript in HTML body (example) Browsers and HTML/JavaScript Documents • What happens when the browser encounters a JavaScript script in a document? • JS code can be embedded within your HTML • Two approaches for embedding JavaScript in HTML page's head or body documents: – Explicit embedding (ρητή ενσωμάτωση) • runs as the page is loading <script type = "text/javaScript"> • this is considered bad style and shouldn't be done in this -- JavaScript script – course </script> – mixes HTML content and JS scripts (bad) – Implicit embedding (υπόρρητη ενσωμάτωση) – can cause your page not to validate <script type = "text/javaScript" src = "myScript.js"> </script> Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst 13 14 Implicit vs Explicit JavaScript JavaScript embedding • Explicit embedding: • Scripts are usually hidden from browsers that do – Mixes two types of notation inside the same document (bad for readability) not include JavaScript interpreters by putting – Makes maintenance difficult - often different people manage the them in special comments: HTML and the JavaScript <!-- • Depending on its use, a JavaScript script that is explicitly -- JavaScript script – embedded appears in: //--> – The head of an HTML document - for scripts that produce • This is also required by the HTML validator content only upon request or for those that react to user interactions • Note that the comment closure is in a new line • These scripts contain function definitions and code associated with form and is also a JS comment elements – The body of an HTML document - for scripts that are to be interpreted just once, as they are found 15 16 Event-driven programming • JS programs have no main; they respond to user actions called events • Event-driven programming: writing programs driven by user events Events in JavaScript • To respond to events, we can write code to respond to various events as the user generates them : event handlers Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst 18 Event-driven programming A simple JavaScript Program • To respond to an event in JavaScript, we follow the following • Problem: create a page with a button that will cause some steps: code to run when it is clicked. – decide which element or control we want to respond to • Step 1: create the HTML Control – write a JavaScript function with the code we want to run (event – button's text appears inside tag; can also contain images handler) <!DOCTYPE html> – attach that function to the control’s event <html> <head><title>Javascript example</title></head> • Event handlers typically cause some sort of change to be <body> <div> made to the web page: <button type=“button">Say the magic word!</button> – </div> changing text on the page </body> – dynamically adjusting styles of elements on the page </html> – adding/removing content from the page • Step 2: Write JavaScript Event-Handling Function: – Need to add code to take action when button is clicked – Create a JS file with a function to execute when button is clicked function sayMagicWord() { alert(“PLEASE!”); Event Handler 19 } 20 Pop-up messages in JS A simple JavaScript Program • JavaScript has three methods for creating dialog boxes: • Step 3: Attach Event Handler to Control – alert, confirm, and prompt – connect JS file to HTML file, using <script> tag of HTML; syntax: <script src=“URL” type=“text/javascript”></script> • type attribute it optional in HTML5; used for backward compatibility • script typically contains no inner content, but not allowed to be a self- closing tag – attach the sayMagicWord JS function to the click of the button • Every HTML element has special event attributes that represent actions you can perform on it: onclick, onkeydown, onchange, onsubmit • To attach a handler that will “listen” to an event on an element, you set a value for one of the element’s event attributes, which points to the event handler <element onevent=“eventHandler();”>…</element> 21 22 <!DOCTYPE html> <html> <head><title>Javascript example</title></head> <script src=“please.js” type=“text/javascript”></script> <body> <div> <button onclick=“sayMagicWord();”>Say the magic word!</button> </div> </body> </html> – Note: sayMagicWord executes when the user clicks the button, not when the page is loaded 23 24 No Javascript? <!DOCTYPE html> <html> <head><title>Javascript example</title></head> <script src=“please.js” type=“text/javascript”></script> <body> <noscript> <p class=“error”>Warning: this page requires JavaScript. Please visit this site with a JS-enabled web browser.</p> <div> JavaScript Syntax <button onclick=“sayMagicWord();”>Say the magic word!</button> </div> </body> </html> 25 8.2 - 8.4: JavaScript Syntax Variables • 8.1: Key JavaScript Concepts • Names: Variable names begin with a letter or underscore, • 8.2, 8.3, 8.4: JavaScript Syntax followed by any number of letters, underscores, and digits – case sensitive • Object-oriented JavaScript Features • Types: JS determines the type of a variable dynamically, based on the kind of value you assign to it. • Variable declarations: – Explicit: using the keyword var var name = value; – Implicit: it is legal to declare a variable without the var keyword • It is better to avoid this for reasons of programming clarity var name1 = value; name2 = “Marty”; Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst 27 28 Variable scoping Types • Scope of a variable (πεδίο εμβέλειας): the range of statements over • Types are not specified, but JS does have types ("loosely which the variable is visible.
Recommended publications
  • Interaction Between Web Browsers and Script Engines
    IT 12 058 Examensarbete 45 hp November 2012 Interaction between web browsers and script engines Xiaoyu Zhuang Institutionen för informationsteknologi Department of Information Technology Abstract Interaction between web browser and the script engine Xiaoyu Zhuang Teknisk- naturvetenskaplig fakultet UTH-enheten Web browser plays an important part of internet experience and JavaScript is the most popular programming language as a client side script to build an active and Besöksadress: advance end user experience. The script engine which executes JavaScript needs to Ångströmlaboratoriet Lägerhyddsvägen 1 interact with web browser to get access to its DOM elements and other host objects. Hus 4, Plan 0 Browser from host side needs to initialize the script engine and dispatch script source code to the engine side. Postadress: This thesis studies the interaction between the script engine and its host browser. Box 536 751 21 Uppsala The shell where the engine address to make calls towards outside is called hosting layer. This report mainly discussed what operations could appear in this layer and Telefon: designed testing cases to validate if the browser is robust and reliable regarding 018 – 471 30 03 hosting operations. Telefax: 018 – 471 30 00 Hemsida: http://www.teknat.uu.se/student Handledare: Elena Boris Ämnesgranskare: Justin Pearson Examinator: Lisa Kaati IT 12 058 Tryckt av: Reprocentralen ITC Contents 1. Introduction................................................................................................................................
    [Show full text]
  • Defensive Javascript Building and Verifying Secure Web Components
    Defensive JavaScript Building and Verifying Secure Web Components Karthikeyan Bhargavan1, Antoine Delignat-Lavaud1, and Sergio Maffeis2 1 INRIA Paris-Rocquencourt, France 2 Imperial College London, UK Abstract. Defensive JavaScript (DJS) is a typed subset of JavaScript that guarantees that the functional behavior of a program cannot be tampered with even if it is loaded by and executed within a malicious environment under the control of the attacker. As such, DJS is ideal for writing JavaScript security components, such as bookmarklets, single sign-on widgets, and cryptographic libraries, that may be loaded within untrusted web pages alongside unknown scripts from arbitrary third par- ties. We present a tutorial of the DJS language along with motivations for its design. We show how to program security components in DJS, how to verify their defensiveness using the DJS typechecker, and how to analyze their security properties automatically using ProVerif. 1 Introduction Since the advent of asynchronous web applications, popularly called AJAX or Web 2.0, JavaScript has become the predominant programming language for client-side web applications. JavaScript programs are widely deployed as scripts in web pages, but also as small storable snippets called bookmarklets, as down- loadable web apps,1 and as plugins or extensions to popular browsers.2 Main- stream browsers compete with each other in providing convenient APIs and fast JavaScript execution engines. More recently, Javascript is being used to program smartphone and desktop applications3, and also cloud-based server ap- plications,4 so that now programmers can use the same idioms and libraries to write and deploy a variety of client- and server-side programs.
    [Show full text]
  • Sams Teach Yourself Javascript in 24 Hours
    Phil Ballard Michael Moncur SamsTeachYourself JavaScript™ Fifth Edition in Hours24 800 East 96th Street, Indianapolis, Indiana, 46240 USA Sams Teach Yourself JavaScript™ in 24 Hours, Fifth Edition Editor-in-Chief Mark Taub Copyright © 2013 by Pearson Education, Inc. All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, Acquisitions Editor or transmitted by any means, electronic, mechanical, photocopying, recording, or other- Mark Taber wise, without written permission from the publisher. No patent liability is assumed with respect to the use of the information contained herein. Although every precaution has Managing Editor been taken in the preparation of this book, the publisher and author assume no responsi- Kristy Hart bility for errors or omissions. Nor is any liability assumed for damages resulting from the use of the information contained herein. Project Editor ISBN-13: 978-0-672-33608-9 Anne Goebel ISBN-10: 0-672-33608-1 Copy Editor Library of Congress Cataloging-in-Publication Data is on file. Geneil Breeze Printed in the United States of America First Printing October 2012 Indexer Erika Millen Trademarks All terms mentioned in this book that are known to be trademarks or service marks have Proofreader been appropriately capitalized. Sams Publishing cannot attest to the accuracy of this Chrissy White, information. Use of a term in this book should not be regarded as affecting the validity of Language Logistics any trademark or service mark. Publishing Coordinator Warning and Disclaimer Vanessa Evans Every effort has been made to make this book as complete and as accurate as possible, but no warranty or fitness is implied.
    [Show full text]
  • Typescript-Handbook.Pdf
    This copy of the TypeScript handbook was created on Monday, September 27, 2021 against commit 519269 with TypeScript 4.4. Table of Contents The TypeScript Handbook Your first step to learn TypeScript The Basics Step one in learning TypeScript: The basic types. Everyday Types The language primitives. Understand how TypeScript uses JavaScript knowledge Narrowing to reduce the amount of type syntax in your projects. More on Functions Learn about how Functions work in TypeScript. How TypeScript describes the shapes of JavaScript Object Types objects. An overview of the ways in which you can create more Creating Types from Types types from existing types. Generics Types which take parameters Keyof Type Operator Using the keyof operator in type contexts. Typeof Type Operator Using the typeof operator in type contexts. Indexed Access Types Using Type['a'] syntax to access a subset of a type. Create types which act like if statements in the type Conditional Types system. Mapped Types Generating types by re-using an existing type. Generating mapping types which change properties via Template Literal Types template literal strings. Classes How classes work in TypeScript How JavaScript handles communicating across file Modules boundaries. The TypeScript Handbook About this Handbook Over 20 years after its introduction to the programming community, JavaScript is now one of the most widespread cross-platform languages ever created. Starting as a small scripting language for adding trivial interactivity to webpages, JavaScript has grown to be a language of choice for both frontend and backend applications of every size. While the size, scope, and complexity of programs written in JavaScript has grown exponentially, the ability of the JavaScript language to express the relationships between different units of code has not.
    [Show full text]
  • Javascript & AJAX
    JavaScript & AJAX JavaScript had to “look like Java” only less so—be Java's dumb kid brother or boy-hostage sidekick. Plus, I had to be done in ten days or something worse than JavaScript would have happened. JavaScript: the Big Picture(ELLS §11.1) © 2012 Armando Fox & David Patterson Licensed under Creative Commons Attribution- Image: Wikimedia. Used under CC-SA license. NonCommercial-ShareAlike 3.0 Unported License The Moving Parts • 1995: Netscape includes LiveScript JavaScript as browser scripting language • Originally, for simple client-side code such as animations and form input validation • Document Object Model (DOM) lets JavaScript inspect & modify document elements • 1997: standardized as ECMAScript • 1998: Microsoft adds XmlHttpRequest to IE5 • 2005: Google Maps, AJAX takes off JavaScript’s privileged position • Because it’s embedded in browser, JavaScript code can: 1. be triggered by user-initiated events (mouse down, mouse hover, keypress, …) 2. make HTTP requests to server without triggering page reload 3. be triggered by network events (e.g. server responds to HTTP request) 4. examine & modify (causing redisplay) current document DOM & JavaScript: Document = tree of objects • DOM is a language-independent, hierarchical representation of HTML or XML document • Browser parses HTML or XML => DOM • JavaScript API (JSAPI) makes DOM data structures accessible from JS code • Inspect DOM element values/attributes • Change values/attributes → redisplay • Implemented incompatibly across browsers …but jQuery framework will help us
    [Show full text]
  • Ch08-Dom.Pdf
    Web Programming Step by Step Chapter 8 The Document Object Model (DOM) Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller. 8.1: Global DOM Objects 8.1: Global DOM Objects 8.2: DOM Element Objects 8.3: The DOM Tree The six global DOM objects Every Javascript program can refer to the following global objects: name description document current HTML page and its content history list of pages the user has visited location URL of the current HTML page navigator info about the web browser you are using screen info about the screen area occupied by the browser window the browser window The window object the entire browser window; the top-level object in DOM hierarchy technically, all global code and variables become part of the window object properties: document , history , location , name methods: alert , confirm , prompt (popup boxes) setInterval , setTimeout clearInterval , clearTimeout (timers) open , close (popping up new browser windows) blur , focus , moveBy , moveTo , print , resizeBy , resizeTo , scrollBy , scrollTo The document object the current web page and the elements inside it properties: anchors , body , cookie , domain , forms , images , links , referrer , title , URL methods: getElementById getElementsByName getElementsByTagName close , open , write , writeln complete list The location object the URL of the current web page properties: host , hostname , href , pathname , port , protocol , search methods: assign , reload , replace complete list The navigator object information about the web browser application properties: appName , appVersion , browserLanguage , cookieEnabled , platform , userAgent complete list Some web programmers examine the navigator object to see what browser is being used, and write browser-specific scripts and hacks: if (navigator.appName === "Microsoft Internet Explorer") { ..
    [Show full text]
  • Learn Javascript
    Learn JavaScript Steve Suehring Copyright © 2012 by Steve Suehring All rights reserved. No part of the contents of this book may be reproduced or transmitted in any form or by any means without the written permission of the publisher. ISBN: 978-0-7356-6674-0 1 2 3 4 5 6 7 8 9 LSI 7 6 5 4 3 2 Printed and bound in the United States of America. Microsoft Press books are available through booksellers and distributors worldwide. If you need support related to this book, email Microsoft Press Book Support at [email protected]. Please tell us what you think of this book at http://www.microsoft.com/learning/booksurvey. Microsoft and the trademarks listed at http://www.microsoft.com/about/legal/en/us/IntellectualProperty/ Trademarks/EN-US.aspx are trademarks of the Microsoft group of companies. All other marks are property of their respective owners. The example companies, organizations, products, domain names, email addresses, logos, people, places, and events depicted herein are fictitious. No association with any real company, organization, product, domain name, email address, logo, person, place, or event is intended or should be inferred. This book expresses the author’s views and opinions. The information contained in this book is provided without any express, statutory, or implied warranties. Neither the authors, Microsoft Corporation, nor its resellers, or distributors will be held liable for any damages caused or alleged to be caused either directly or indirectly by this book. Acquisitions and Developmental Editor: Russell Jones Production Editor: Rachel Steely Editorial Production: Dianne Russell, Octal Publishing, Inc.
    [Show full text]
  • Unobtrusive Javascript
    Unobtrusive JavaScript Unobtrusive JavaScript (Sample Chapter) Written by Christian Heilmann Version 1.0, July 2005-07-05 This document is copyright by Christian Heilmann and may not be fully or partly reproduced without consent by the author. If you want to use this information in part for presentations or courses, please contact the author. This is a free sample chapter, the whole course book is around 60 pages and covers the topic of Unobtrusive JavaScript in-depth with over 50 examples and demonstration files. You can obtain the complete course by donating a 2 figure amount at http://onlinetools.org/articles/unobtrusivejavascript/ Page 1 of 7 Unobtrusive JavaScript Unobtrusive JavaScript (Sample Chapter).................................................................................................1 Separation of CSS and JavaScript ........................................................................................................3 Our mistake .......................................................................................................................................3 Multiple class syntax..........................................................................................................................3 Applying classes via JavaScript ........................................................................................................4 Page 2 of 7 Unobtrusive JavaScript Separation of CSS and JavaScript You might have noticed in the previous examples that we are not exactly practising what we preach. Our mistake
    [Show full text]
  • Concrete Types for Typescript
    Concrete Types for TypeScript Gregor Richards1, Francesco Zappa Nardelli2, and Jan Vitek3 1 University of Waterloo 2 Inria 3 Northeastern University Abstract TypeScript extends JavaScript with optional type annotations that are, by design, unsound and, that the TypeScript compiler discards as it emits code. This design point preserves programming idioms developers are familiar with, and allows them to leave their legacy code unchanged, while offering a measure of static error checking in annotated parts of the program. We present an alternative design for TypeScript that supports the same degree of dynamism but that also allows types to be strengthened to provide correctness guarantees. We report on an implementation, called StrongScript, that improves runtime performance of typed programs when run on a modified version of the V8 JavaScript engine. 1998 ACM Subject Classification F.3.3 Type structure Keywords and phrases Gradual typing, dynamic languages Digital Object Identifier 10.4230/LIPIcs.ECOOP.2015.999 1 Introduction Perhaps surprisingly, a number of modern computer programming languages have been de- signed with intentionally unsound type systems. Unsoundness arises for pragmatic reasons, for instance, Java has a covariant array subtype rule designed to allow for a single polymor- phic sort() implementation. More recently, industrial extensions to dynamic languages, such as Hack, Dart and TypeScript, have featured optional type systems [5] geared to ac- commodate dynamic programming idioms and preserve the behavior of legacy code. Type annotations are second class citizens intended to provide machine-checked documentation, and only slightly reduce the testing burden. Unsoundness, here, means that a variable an- notated with some type T may, at runtime, hold a value of a type that is not a subtype of T due to unchecked casts, covariant subtyping, and untyped code.
    [Show full text]
  • Visual Studio “Code in Strings”
    VisCis: Visual Studio “Code in Strings” Paul Roper School of Business and Computer Technology Nelson Marlborough Institute of Technology Nelson, NZ [email protected] When developing web applications using Visual Studio .NET SQL and Javascript. This code is ignored by Visual there are times when the programmer is coding either SQL or Javascript within text strings. Consequently such code is never Studio, and consequently can be the source of run- checked for correct syntax before it is run. As far as Visual time errors. The writer wanted to see if another Studio is concerned, the contents of a string are irrelevant. As program could extract this “code in strings” and syn- long as the code is inside matching quotes, it is simply a valid string. tax check it at edit-time, potentially saving devel- There is an irony here in that Visual Studio is a sophisticated oper time and frustration. tool with powerful features for developers such as highlighting syntax errors as lines are typed. However, the SQL and 1.1 SQL in ASP.NET program code Javascript code inside strings is just as prone to errors as any other code but these errors are only discovered at run time. In SQL instructions have long been part of web terms of time taken to find and fix, they probably consume application code (Java, ASP, PHP etc). Both stu- relatively more time per lines of code than the VB or C# code that is thoroughly checked at edit-time. Both SQL and Javascript dents and experienced developers frequently expe- are necessary for any non-trivial web application although the rience problems with the syntax of embedded SQL use of stored procedures in MSSQL removes SQL code from particularly unmatched quotes, inadvertent use of a program code.
    [Show full text]
  • Formally Verifying Webassembly with Kwasm
    Formally Verifying WebAssembly with KWasm Towards an Automated Prover for Wasm Smart Contracts Master’s thesis in Computer Science and Engineering RIKARD HJORT Department of Computer Science and Engineering CHALMERS UNIVERSITY OF TECHNOLOGY UNIVERSITY OF GOTHENBURG Gothenburg, Sweden 2020 Master’s thesis 2020 Formally Verifying WebAssembly with KWasm Towards an Automated Prover for Wasm Smart Contracts RIKARD HJORT Department of Computer Science and Engineering Chalmers University of Technology University of Gothenburg Gothenburg, Sweden 2020 Formally Verifying WebAssembly with KWasm Towards an Automated Prover for Wasm Smart Contracts RIKARD HJORT © RIKARD HJORT, 2020. Supervisor: Thomas Sewell, Department of Computer Science and Engineering Examiner: Wolfgang Ahrendt, Department of Computer Science and Engineering Master’s Thesis 2020 Department of Computer Science and Engineering Chalmers University of Technology and University of Gothenburg SE-412 96 Gothenburg Telephone +46 31 772 1000 Cover: Conceptual rendering of the KWasm system, as the logos for K ans Web- Assembly merged together, with a symbolic execution proof tree protruding. The cover image is made by Bogdan Stanciu, with permission. The WebAssembly logo made by Carlos Baraza and is licensed under Creative Commons License CC0. The K logo is property of Runtime Verification, Inc., with permission. Typeset in LATEX Gothenburg, Sweden 2020 iv Formally Verifying WebAssembly with KWasm Towards an Automated Prover for Wasm Smart Contracts Rikard Hjort Department of Computer Science and Engineering Chalmers University of Technology and University of Gothenburg Abstract A smart contract is immutable, public bytecode which handles valuable assets. This makes it a prime target for formal methods. WebAssembly (Wasm) is emerging as bytecode format for smart contracts.
    [Show full text]
  • Debugging Javascript
    6803.book Page 451 Thursday, June 15, 2006 2:24 PM APPENDIX ■ ■ ■ Debugging JavaScript In this appendix, I will introduce you to some tricks and tools to debug your JavaScript code. It is very important to get acquainted with debugging tools, as programming consists to a large extent of trying to find out what went wrong a particular time. Some browsers help you with this problem; others make it harder by having their debugging tools hidden away or returning cryptic error messages that confuse more than they help. Some of my favorites include philo- sophical works like “Undefined is not defined” or the MSIE standard “Object doesn’t support this property or method.” Common JavaScript Mistakes Let’s start with some common mistakes that probably every JavaScript developer has made during his career. Having these in the back of your head when you check a failing script might make it a lot quicker to spot the problem. Misspellings and Case-Sensitivity Issues The easiest mistakes to spot are misspellings of JavaScript method names or properties. Clas- sics include getElementByTagName() instead of getElementsByTagName(), getElementByID() instead of getElementById() and node.style.colour (for the British English writers). A lot of times the problem could also be case sensitivity, for example, writing keywords in mixed case instead of lowercase. If( elm.href ) { var url = elm.href; } There is no keyword called If, but there is one called if. The same problem of case sensi- tivity applies to variable names: var FamilyGuy = 'Peter'; var FamilyGuyWife = 'Lois'; alert( 'The Griffins:\n'+ familyGuy + ' and ' + FamilyGuyWife ); This will result in an error message stating “familyGuy is not defined”, as there is a variable called FamilyGuy but none called familyGuy.
    [Show full text]