DOCSLIB.ORG

Javascript, AJAX, and Jquery Module 5

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Javascript, AJAX, and Jquery Module 5 Module 5 – JavaScript, AJAX, and jQuery • Module 5 Contains an Individual and Group component – Both are due on Wednesday Oct 23rd – Start early on this module – One of the most time consuming modules in the course • Read the WIKI before starting along with a few JavaScript and jQuery tutorials 1Extensible- CSE 330 – Creative Networking Programming Platform and Rapid Prototyping 1 Module 5 • JavaScript – Scripting language to add interactivity to HTML pages – Java and JavaScript are completely different languages • AJAX – Asynchronous JavaScript and XML (AJAX) – Allows for retrieval of data from weB servers in the Background • jQuery – JavaScript liBrary 2Extensible- CSE 330 – Creative Networking Programming Platform and Rapid Prototyping 2 JavaScript • Popular scripting language widely supported in browsers to add interaction – Pop-Up Windows – User Input Forms – Calculations – Special Effects • Implementation of the ECMAScript language 3Extensible- CSE 330 – Creative Networking Programming Platform and Rapid Prototyping 3 JavaScript • JavaScript is a prototyped-based scripting language – Dynamic, weakly typed • Interpreted language – You do not compile it • Uses prototypes instead of classes for inheritance 4Extensible- CSE 330 – Creative Networking Programming Platform and Rapid Prototyping 4 Is JavaScript like Java? • Java and JavaScript are similar like Car and Carpet are similar • Two completely different languages with different concepts – Java is compiled, JavaScript is interpreted – Java is object-oriented, JavaScript is prototyped based – Java requires strict typing, JavaScript allows for dynamic typing 5Extensible- CSE 330 – Creative Networking Programming Platform and Rapid Prototyping 5 JavaScript Basics • Declare a variable with let let foo = “JS is fun”; • Declare a constant with const const bar = ”This is will not change”; • Older versions of JavaScript do not support let and const and use var instead – In this course we will use let and const and avoid using var • Define a function with function function foo() { //Some JS code here } • Functions are also objects 6Extensible- CSE 330 – Creative Networking Programming Platform and Rapid Prototyping 6 Writing a JavaScript Program • JavaScript programs can either be placed – directly into the HTML file or – can be saved in external files • You can place JavaScript anywhere within the HTML file: within – the <HEAD> tags or – the <BODY> tags 7Extensible- CSE 330 – Creative Networking Programming Platform and Rapid Prototyping 7 Using the <SCRIPT> Tag <script src=url></script> – SRC property is required only if you place your program in a separate file <script> script commands and comments </script> • Older versions of HTML (before 5) use a slightly different format – <script type=“text/javascript”> – This is no longer necessary, simply use <script> 8Extensible- CSE 330 – Creative Networking Programming Platform and Rapid Prototyping 8 JavaScript Example (part 1) <!DOCTYPE html> <html> <head><title>My JavaScript Example</title> <script> function MsgBox(textstring) { alert(textstring); } </script> 9Extensible- CSE 330 – Creative Networking Programming Platform and Rapid Prototyping 9 JavaScript Example (part 2) <body> <form> <input type = "text" name ="text1" > <input type = "submit" value ="Show Me" onClick="MsgBox(form.text1.value)"> </form> </body> </html> 10Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 10 JavaScript Example <!DOCTYPE html> <html lang="en"> <head><title>My JavaScript Example</title> <script> function MsgBox(textstring) { alert(textstring); } </script> </head> <body> <form> <input type = "text" name ="text1" > <input type = "submit" value ="Show Me" onClick="MsgBox(form.text1.value)"> </form> </body> </html> 11Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 11 JavaScript Event Listeners • We can control events in a more granular way using Event Listeners • Event Listeners allow for custom behavior for every element document.getElementById("hello").addEventListener("click",MsgBox, false); 12Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 12 JavaScript Additional Information • The CSE 330 Wiki provides a great intro into JavaScript along with some excellent links to more comprehensive tutorials • Additional JS tutorials – http://www.quirksmode.org/js/contents.html – https://docs.webplatform.org/wiki/Meta:javascript/t utorials 13Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 13 JavaScript Debugging • JSHint is a great resources to help debug your code – http://www.jshint.com/ • Tools for browsers also exist – Firefox • Firebug extension – Chrome and Safari • Webkit Inspector comes bundled with the browser 14Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 14 JavaScript Examples http://research.engineering.wustl.edu/~todd/cse330/demo/lecture5/ 15Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 15 AJAX • Stands for Asynchronous JavaScript and XML” • Development technique for creating interactive web applications • Not a new Technology but more of a Pattern 16Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 16 Motivation for AJAX • Web pages always RELOAD and never get UPDATED • Users wait for the entire page to load even if a single piece of data is needed • Single request/response restrictions 17Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 17 Components – HTML (or XHTML) and CSS • Presenting information – Document Object Model • Dynamic display and interaction with the information – XMLHttpRequest object • Retrieving data ASYNCHRONOUSLY from the web server. – JavaScript • Binding everything together 18Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 18 The DOM • Document Object Model (DOM): platform- and language-independent way to represent XML – Adopts a tree-based representation – W3C standard, supported by modern browsers • JavaScript uses DOM to manipulate content – To process user events – To process server responses (via XMLHttpRequest) 19Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 19 The DOM • Unlike other programming languages, JavaScript understands HTML and can directly access it • JavaScript uses the HTML Document Object Model to manipulate HTML • The DOM is a hierarchy of HTML things • Use the DOM to build an address to refer to HTML elements in a web page • Levels of the DOM are dot-separated in the syntax 20Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 20 DOM 21Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 21 Accessing the DOM Example https://research.engineering.wustl.edu/~todd/cse330/demo/lecture5/ 22Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 22 Web Application and AJAX 23Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 23 Request Processing 24Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 24 Asynchronous processing - XMLHttpRequest • Allows to execute an HTTP request in background • Callbacks kick back into JavaScript Code • Supported in all standard browsers 25Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 25 Using XMLHttpRequest • First you must create the XMLHttpRequest Object in JavaScript • Example – const xmlHttp = new XMLHttpRequest(); • Older browsers might require different syntax – For example (Internet Explorer versions <9) • const xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); – We will not worry about JS compatibility with IE < 9 in this course 26Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 26 Using XMLHttpRequest • Transferring data to Server – Open() to initialize connection to Server – Send() to send the actual Data • Example (POST) – xmlHttp.open("POST", "/query.cgi”,true); – xmlHttp.send("name=Bob&[email protected]"); • Example (GET) – xmlHttp.open("GET","hello.txt",true); – xmlHttp.send(null); 27Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 27 What happens after sending data? • XMLHttpRequest contacts the server and retrieves the data – Can take indeterminate amount of time • Create an Event Listener to determine when the object has finished loading with the data we are interested in – Specifically listen for the load event to occur 28Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 28 Events of interest xmlHttp.addEventListener("load”,myCallbackFunction,false); 29Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 29 Using XMLHttpRequest • Parse and display data – responseXML • DOM-structured object – responseText • One complete string • Examples – const nameNode = requester.responseXML.getElementsByTagName("name")[0]; – const nameTextNode = nameNode.childNodes[0]; • From an event function myCallback(event) { alert(“The response “ + event.target.responseText); } 30Extensible- CSE 330 – CreativeNetworking Programming Platform and Rapid Prototyping 30 AJAX Example <script> const xmlHttp = new XMLHttpRequest(); xmlHttp.open("GET","hello.txt",true); xmlHttp.addEventListener("load”,myCallback,false); xmlHttp.send(null); function myCallback(event) { alert(“The response “ + event.target.responseText);
Load more

Recommended publications
  • Machine Learning in the Browser
    Machine Learning in the Browser The Harvard community has made this article openly available. Please share how this access benefits you. Your story matters Citable link http://nrs.harvard.edu/urn-3:HUL.InstRepos:38811507 Terms of Use This article was downloaded from Harvard University’s DASH repository, and is made available under the terms and conditions applicable to Other Posted Material, as set forth at http:// nrs.harvard.edu/urn-3:HUL.InstRepos:dash.current.terms-of- use#LAA Machine Learning in the Browser a thesis presented by Tomas Reimers to The Department of Computer Science in partial fulfillment of the requirements for the degree of Bachelor of Arts in the subject of Computer Science Harvard University Cambridge, Massachusetts March 2017 Contents 1 Introduction 3 1.1 Background . .3 1.2 Motivation . .4 1.2.1 Privacy . .4 1.2.2 Unavailable Server . .4 1.2.3 Simple, Self-Contained Demos . .5 1.3 Challenges . .5 1.3.1 Performance . .5 1.3.2 Poor Generality . .7 1.3.3 Manual Implementation in JavaScript . .7 2 The TensorFlow Architecture 7 2.1 TensorFlow's API . .7 2.2 TensorFlow's Implementation . .9 2.3 Portability . .9 3 Compiling TensorFlow into JavaScript 10 3.1 Motivation to Compile . 10 3.2 Background on Emscripten . 10 3.2.1 Build Process . 12 3.2.2 Dependencies . 12 3.2.3 Bitness Assumptions . 13 3.2.4 Concurrency Model . 13 3.3 Experiences . 14 4 Results 15 4.1 Benchmarks . 15 4.2 Library Size . 16 4.3 WebAssembly . 17 5 Developer Experience 17 5.1 Universal Graph Runner .
    [Show full text]
  • Create Mobile Apps with HTML5, Javascript and Visual Studio
    Create mobile apps with HTML5, JavaScript and Visual Studio DevExtreme Mobile is a single page application (SPA) framework for your next Windows Phone, iOS and Android application, ready for online publication or packaged as a store-ready native app using Apache Cordova (PhoneGap). With DevExtreme, you can target today’s most popular mobile devices with a single codebase and create interactive solutions that will amaze. Get started today… ・ Leverage your existing Visual Studio expertise. ・ Build a real app, not just a web page. ・ Deliver a native UI and experience on all supported devices. ・ Use over 30 built-in touch optimized widgets. Learn more and download your free trial devexpress.com/mobile All trademarks or registered trademarks are property of their respective owners. Untitled-4 1 10/2/13 11:58 AM APPLICATIONS & DEVELOPMENT SPECIAL GOVERNMENT ISSUE INSIDE Choose a Cloud Network for Government-Compliant magazine Applications Geo-Visualization of SPECIAL GOVERNMENT ISSUE & DEVELOPMENT SPECIAL GOVERNMENT ISSUE APPLICATIONS Government Data Sources Harness Open Data with CKAN, OData and Windows Azure Engage Communities with Open311 THE DIGITAL GOVERNMENT ISSUE Inside the tools, technologies and APIs that are changing the way government interacts with citizens. PLUS SPECIAL GOVERNMENT ISSUE APPLICATIONS & DEVELOPMENT SPECIAL GOVERNMENT ISSUE & DEVELOPMENT SPECIAL GOVERNMENT ISSUE APPLICATIONS Enhance Services with Windows Phone 8 Wallet and NFC Leverage Web Assets as Data Sources for Apps APPLICATIONS & DEVELOPMENT SPECIAL GOVERNMENT ISSUE ISSUE GOVERNMENT SPECIAL DEVELOPMENT & APPLICATIONS Untitled-1 1 10/4/13 11:40 AM CONTENTS OCTOBER 2013/SPECIAL GOVERNMENT ISSUE OCTOBER 2013/SPECIAL GOVERNMENT ISSUE magazine FEATURES MOHAMMAD AL-SABT Editorial Director/[email protected] Geo-Visualization of Government KENT SHARKEY Site Manager Data Sources MICHAEL DESMOND Editor in Chief/[email protected] Malcolm Hyson ..........................................
    [Show full text]
  • An Introduction to AJAX
    An Introduction to AJAX By : I. Moamin Abughazaleh Page 2 /25 How HTTP works? Classical HTTP Process 1. The visitor requests a page Page 3 /25 2. The server send the entire HTML, CSS and Javascript code at once to the client 3. So, the communication is synchronious Page 4 /25 What is Javascript programming actually? What is Javascript programming? It is programming the browsers. So, we are limited to the objects that the Page 5 /25 browser presents us An Alternative for Managing requests - AJAX AJAX stands for Asynchronous JavaScript And XML. AJAX is based on XMLHttpRequest object of Page 6 /25 Javascript - so the browser and XMLHttpRequest is a standard http://www.w3.org/TR/XMLHttpRequest/ It was introduced with IE-5.0 as an ActiveX object (1999) Later all the major browsers added XMLHttpRequest into their object bases. AJAX = Asynchronous JavaScript and XML It is a technique for creating better, faster, and more interactive web applications With XMLHttpRequest object JavaScript can trade data with a web server, without reloading Page 7 /25 the page AJAX uses “asynchronous data transfer” => allowing web pages to request small bits of information from the server instead of whole pages We can create desktop application like web applications using AJAX, this paradigm is also called “WEB 2.0” programming AJAX - Based on Web Standards AJAX is based on the following web standards: XHTML and CSS Presentation DOM Dynamic display of and interaction with data XML and XSLT Tranfering data back and forth Page 8 /25 XMLHttpRequest Asynchronous transfer of data Javascript Bring these technologies together AJAX applications are browser and platform independent The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7.
    [Show full text]
  • Extracting Taint Specifications for Javascript Libraries
    Extracting Taint Specifications for JavaScript Libraries Cristian-Alexandru Staicu Martin Toldam Torp Max Schäfer TU Darmstadt Aarhus University GitHub [email protected] [email protected] [email protected] Anders Møller Michael Pradel Aarhus University University of Stuttgart [email protected] [email protected] ABSTRACT ACM Reference Format: Modern JavaScript applications extensively depend on third-party Cristian-Alexandru Staicu, Martin Toldam Torp, Max Schäfer, Anders Møller, and Michael Pradel. 2020. Extracting Taint Specifications for JavaScript libraries. Especially for the Node.js platform, vulnerabilities can Libraries. In 42nd International Conference on Software Engineering (ICSE have severe consequences to the security of applications, resulting ’20), May 23–29, 2020, Seoul, Republic of Korea. ACM, New York, NY, USA, in, e.g., cross-site scripting and command injection attacks. Existing 12 pages. https://doi.org/10.1145/3377811.3380390 static analysis tools that have been developed to automatically detect such issues are either too coarse-grained, looking only at 1 INTRODUCTION package dependency structure while ignoring dataflow, or rely on JavaScript is powering a wide variety of web applications, both manually written taint specifications for the most popular libraries client-side and server-side. Many of these applications are security- to ensure analysis scalability. critical, such as PayPal, Netflix, or Uber, which handle massive In this work, we propose a technique for automatically extract- amounts of privacy-sensitive user data and other assets. An impor- ing taint specifications for JavaScript libraries, based on a dynamic tant characteristic of modern JavaScript-based applications is the analysis that leverages the existing test suites of the libraries and extensive use of third-party libraries.
    [Show full text]
  • Progressive Imagery with Scalable Vector Graphics -..:: VCG Rostock
    Progressive imagery with scalable vector graphics Georg Fuchsa, Heidrun Schumanna, and Ren´eRosenbaumb aUniversity of Rostock, Institute for Computer Science, 18051 Rostock, Germany; bUC Davis, Institute of Data Analysis & Visualization, Davis, CA 95616 U.S.A. ABSTRACT Vector graphics can be scaled without loss of quality, making them suitable for mobile image communication where a given graphics must be typically represented in high quality for a wide range of screen resolutions. One problem is that file size increases rapidly as content becomes more detailed, which can reduce response times and efficiency in mobile settings. Analog issues for large raster imagery have been overcome using progressive refinement schemes. Similar ideas have already been applied to vector graphics, but an implementation that is compliant to a major and widely adopted standard is still missing. In this publication we show how to provide progressive refinement schemes based on the extendable Scalable Vector Graphics (SVG) standard. We propose two strategies: decomposition of the original SVG and incremental transmission using (1) several linked files and (2) element-wise streaming of a single file. The publication discusses how both strategies are employed in mobile image communication scenarios where the user can interactively define RoIs for prioritized image communication, and reports initial results we obtained from a prototypically implemented client/server setup. Keywords: Progression, Progressive refinement, Scalable Vector Graphics, SVG, Mobile image communication 1. INTRODUCTION Vector graphics use graphic primitives such as points, lines, curves, and polygons to represent image contents. As those primitives are defined by means of geometric coordinates that are independent of actual pixel resolutions, vector graphics can be scaled without loss of quality.
    [Show full text]
  • Microsoft AJAX Library Essentials Client-Side ASP.NET AJAX 1.0 Explained
    Microsoft AJAX Library Essentials Client-side ASP.NET AJAX 1.0 Explained A practical tutorial to using Microsoft AJAX Library to enhance the user experience of your ASP.NET Web Applications Bogdan Brinzarea Cristian Darie BIRMINGHAM - MUMBAI Microsoft AJAX Library Essentials Client-side ASP.NET AJAX 1.0 Explained Copyright © 2007 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, Packt Publishing, nor its dealers or distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: July 2007 Production Reference: 1230707 Published by Packt Publishing Ltd. 32 Lincoln Road Olton Birmingham, B27 6PA, UK. ISBN 978-1-847190-98-7 www.packtpub.com Cover Image by www.visionwt.com Table of Contents Preface 1 Chapter 1: AJAX and ASP.NET 7 The Big Picture 8 AJAX and Web 2.0 10 Building
    [Show full text]
  • Learning Javascript Design Patterns
    Learning JavaScript Design Patterns Addy Osmani Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo Learning JavaScript Design Patterns by Addy Osmani Copyright © 2012 Addy Osmani. All rights reserved. Revision History for the : 2012-05-01 Early release revision 1 See http://oreilly.com/catalog/errata.csp?isbn=9781449331818 for release details. ISBN: 978-1-449-33181-8 1335906805 Table of Contents Preface ..................................................................... ix 1. Introduction ........................................................... 1 2. What is a Pattern? ...................................................... 3 We already use patterns everyday 4 3. 'Pattern'-ity Testing, Proto-Patterns & The Rule Of Three ...................... 7 4. The Structure Of A Design Pattern ......................................... 9 5. Writing Design Patterns ................................................. 11 6. Anti-Patterns ......................................................... 13 7. Categories Of Design Pattern ............................................ 15 Creational Design Patterns 15 Structural Design Patterns 16 Behavioral Design Patterns 16 8. Design Pattern Categorization ........................................... 17 A brief note on classes 17 9. JavaScript Design Patterns .............................................. 21 The Creational Pattern 22 The Constructor Pattern 23 Basic Constructors 23 Constructors With Prototypes 24 The Singleton Pattern 24 The Module Pattern 27 iii Modules 27 Object Literals 27 The Module Pattern
    [Show full text]
  • SVG Exploiting Browsers Without Image Parsing Bugs
    SVG Exploiting Browsers without Image Parsing Bugs Rennie deGraaf iSEC Partners 07 August 2014 Rennie deGraaf (iSEC Partners) SVG Security BH USA 2014 1 / 55 Outline 1 A brief introduction to SVG What is SVG? Using SVG with HTML SVG features 2 Attacking SVG Attack surface Security model Security model violations 3 Content Security Policy A brief introduction CSP Violations 4 Conclusion Rennie deGraaf (iSEC Partners) SVG Security BH USA 2014 2 / 55 A brief introduction to SVG What is SVG? What is SVG? Scalable Vector Graphics XML-based W3C (http://www.w3.org/TR/SVG/) Development started in 1999 Current version is 1.1, published in 2011 Version 2.0 is in development First browser with native support was Konqueror in 2004; IE was the last major browser to add native SVG support (in 2011) Rennie deGraaf (iSEC Partners) SVG Security BH USA 2014 3 / 55 A brief introduction to SVG What is SVG? A simple example Source code <? xml v e r s i o n = ” 1 . 0 ” encoding = ”UTF-8” standalone = ” no ” ? > <svg xmlns = ” h t t p : // www. w3 . org / 2 0 0 0 / svg ” width = ” 68 ” h e i g h t = ” 68 ” viewBox = ”-34 -34 68 68 ” v e r s i o n = ” 1 . 1 ” > < c i r c l e cx = ” 0 ” cy = ” 0 ” r = ” 24 ” f i l l = ”#c8c8c8 ” / > < / svg > Rennie deGraaf (iSEC Partners) SVG Security BH USA 2014 4 / 55 A brief introduction to SVG What is SVG? A simple example As rendered Rennie deGraaf (iSEC Partners) SVG Security BH USA 2014 5 / 55 A brief introduction to SVG What is SVG? A simple example I am not an artist.
    [Show full text]
  • Mastering Ajax, Part 4: Exploiting DOM for Web Response Convert HTML Into an Object Model to Make Web Pages Responsive and Interactive
    Mastering Ajax, Part 4: Exploiting DOM for Web response Convert HTML into an object model to make Web pages responsive and interactive Skill Level: Introductory Brett McLaughlin Author and Editor O'Reilly Media Inc. 14 Mar 2006 The great divide between programmers (who work with back-end applications) and Web programmers (who spend their time writing HTML, CSS, and JavaScript) is long standing. However, the Document Object Model (DOM) bridges the chasm and makes working with both XML on the back end and HTML on the front end possible and an effective tool. In this article, Brett McLaughlin introduces the Document Object Model, explains its use in Web pages, and starts to explore its usage from JavaScript. Like many Web programmers, you have probably worked with HTML. HTML is how programmers start to work on a Web page; HTML is often the last thing they do as they finish up an application or site, and tweak that last bit of placement, color, or style. And, just as common as using HTML is the misconception about what exactly happens to that HTML once it goes to a browser to render to the screen. Before I dive into what you might think happens -- and why it is probably wrong -- I want you need to be clear on the process involved in designing and serving Web pages: 1. Someone (usually you!) creates HTML in a text editor or IDE. 2. You then upload the HTML to a Web server, like Apache HTTPD, and make it public on the Internet or an intranet. Exploiting DOM for Web response Trademarks © Copyright IBM Corporation 2006 Page 1 of 19 developerWorks® ibm.com/developerWorks 3.
    [Show full text]
  • Analysing the Use of Outdated Javascript Libraries on the Web
    Updated in September 2017: Require valid versions for library detection throughout the paper. The vulnerability analysis already did so and remains identical. Modifications in Tables I, III and IV; Figures 4 and 7; Sections III-B, IV-B, IV-C, IV-F and IV-H. Additionally, highlight Ember’s security practices in Section V. Thou Shalt Not Depend on Me: Analysing the Use of Outdated JavaScript Libraries on the Web Tobias Lauinger, Abdelberi Chaabane, Sajjad Arshad, William Robertson, Christo Wilson and Engin Kirda Northeastern University {toby, 3abdou, arshad, wkr, cbw, ek}@ccs.neu.edu Abstract—Web developers routinely rely on third-party Java- scripts or HTML into vulnerable websites via a crafted tag. As Script libraries such as jQuery to enhance the functionality of a result, it is of the utmost importance for websites to manage their sites. However, if not properly maintained, such dependen- library dependencies and, in particular, to update vulnerable cies can create attack vectors allowing a site to be compromised. libraries in a timely fashion. In this paper, we conduct the first comprehensive study of To date, security research has addressed a wide range of client-side JavaScript library usage and the resulting security client-side security issues in websites, including validation [30] implications across the Web. Using data from over 133 k websites, we show that 37 % of them include at least one library with a and XSS ([17], [36]), cross-site request forgery [4], and session known vulnerability; the time lag behind the newest release of fixation [34]. However, the use of vulnerable JavaScript libraries a library is measured in the order of years.
    [Show full text]
  • The Implementation of Large Video File Upload System Based on the HTML5 API and Ajax Yungeng Xu , Sanxing
    Joint International Mechanical, Electronic and Information Technology Conference (JIMET 2015) The Implementation of Large Video File Upload System Based on the HTML5 API and Ajax Yungeng Xu1, a, Sanxing Cao2, b 1 Department of Science and Engineering, Communication University of China, Beijing 2 New Media Institute, Communication University of China, Beijing a b [email protected], [email protected] Keywords: HTML5; File upload; Shell; XMLHttpRequest Abstract. The function of upload file is an important web page designs. Traditional file upload function for file upload function by HTML form and $_FILES system function, has the advantages of convenience, can cope with a relatively small file upload. The traditional HTML way has been difficult to meet the upload of the oversized file. Service not only to open a link waiting for this file is uploaded, but also to allocate the same size of memory to save this file. In the case of large concurrency may cause a great pressure on the server. This article is the use of HTML5 File API to upload video files in the original form on the basis of form, use the function of slice inside the HTML5 file API for the split file upload, to achieve the result of no refresh upload files. Have a valid practical significance. Introduction With the development of web technology, watch videos on the website has become an important forms of entertainment in the people's daily life. Internet video give people a great deal of freedom to choose the way of entertainment, not limited to the live TV mode. People can watch the video on the webpage.
    [Show full text]
  • 6. Client-Side Processing
    6. Client-Side Processing 1. Client-side processing 2. JavaScript 3. Client-side scripting 4. Document Object Model (DOM) 5. Document methods and properties 6. Events 7. Calling a function 8. Table of squares function 9. Comments on previous script 10. Defining a function 11. Event handlers 12. Event handlers example 13. Event listeners 14. Functions and form fields 15. Defining the function myTranslate 16. Navigating the DOM tree 17. Finding elements by name 18. Finding elements by name (function body) 19. Using CSS selectors 20. Adding elements 21. Deleting elements 22. Using jQuery 23. Using jQuery to add elements 24. Finding elements by name (jQuery) 25. DOM and XML 26. jQuery method to load an XML file 27. Retrieving RSS item titles 28. Retrieving JSON data 29. JSON country data 30. Code for JSON retrieval (1) 31. Code for JSON retrieval (2) 32. Exercises 33. Links to more information 6.1. Client-side processing client program (e.g. web browser) can be used to customise interaction with the user validate user input (although HTML5 now provides this) generate (part of) document dynamically send requests to a server in the background make interaction with a web page similar to that of a desktop application this is typically done using JavaScript, since a Javascript interpreter is built into browsers 6.2. JavaScript interpreted, scripting language for the web loosely typed variables do not have to be declared the same variable can store values of different types at different times HTML <script> element specifies script to be executed type attribute has value text/javascript src attribute specifies URI of external script usually <script> appears in the <head> and just declares functions to be called later ECMAScript, 10th edition (June 2019) is the latest standard 6.3.
    [Show full text]