JWU Guest Talk: JavaScript and AJAX

Download as ppt, pdf

4 likes4,557 views

The document discusses how JavaScript, AJAX, jQuery, and other technologies enable dynamic and interactive functionality on web pages without reloading. It covers how the Document Object Model (DOM) allows JavaScript to access and modify elements, and how events and asynchronous requests via XMLHttpRequest (XHR) enable complicated behaviors and communication between the browser and server. jQuery is presented as a library that abstracts away cross-browser differences and simplifies tasks like DOM manipulation and event handling.

Technology

JavaScript, AJAX, jQuery, Code, OH MY! Or: How cool web stuff works

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=ISO-8859-1" /> < title >I'm a web page</ title > </ head > < body > < div id = "top" >This is the top.</ div > </ body > </ html >

The Document Object Model (DOM) XML Document Object Model

Referencing an XHTML element < div id = "top" >This is the top.</ div > … reference the element by unique ID document. getElementById( "top" ) … this returns the selected element in the parse tree. DOM Element Properties

How to Lose Friends <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=ISO-8859-1" /> < title >I'm a web page</ title > < script type= "text/javascript"> function element() { alert( document. getElementById( "top").innerHTML); } </ script> </ head > < body onload = "element()" > < div id = "top" >This is the top.</ div > </ body > </ html >

Manipulating Element Contents InnerHTML! DOM Manipulation!

Events <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=ISO-8859-1" /> < title >I'm also a web page</ title > < script type= "text/javascript"> function update() { document. getElementById( "contents").innerHTML = "You clicked!"; } </ script> </ head > < body > < div id = "contents" >I'm here when you initially load.</ div > < input type = "button" value = "Click Me" onclick = "update()" /> </ body > </ html > Try Me

XMLHttpRequest() XMLHttpRequest (XHR) transfers data between a client (browser) and a server over background HTTP requests.

Using XMLHttpRequest …in a cross-browser friendly way var request = new XMLHttpRequest(); request. open( "GET", url, false); request. send( null); if(!request. getResponseHeader( "Date")) { var cached = request; request = new XMLHttpRequest(); var ifModifiedSince = cached. getResponseHeader( "Last-Modified"); ifModifiedSince = (ifModifiedSince) ? ifModifiedSince : new Date( 0); // January 1, 1970 request. open( "GET", url, false); request. setRequestHeader( "If-Modified-Since", ifModifiedSince); request. send( ""); if(request. status == 304) { request = cached; } }

JavaScript Libraries A good library will abstract away the ugly details of cross-platform code. Prototype (the first major lib) jQuery (write less, do more) Script.aculo.us (the prettiest) YUL! (the yahoo!iest) Etc…

jQuery < html > < head > < script type= "text/javascript" src= "jquery.js"></ script> <script type= "text/javascript"> // Your code goes here </ script> </ head > < body > < a href = "http://jquery.com/" >jQuery</ a > </ body > </ html >

jQuery Selector Syntax $(‘#elementid’) $(‘.classname’) $(‘#content a.link’)

Events $(‘#top’).click(); $(‘#top’).click(function() { // do stuff when #top is clicked });

Document Ready Not “onload”! $(document).ready(function(){ // Your code here });

Local Example < html > < head > < script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></ script> <script type= "text/javascript"> $( document).ready( function() { $( "#content"). click( function() { alert( "hi"); }); }); </ script> </ head > < body > < div id = "content" >Did anyone go to Denny's today?</ div > </ body > </ html >

JavaScript is a popular scripting language used in web browsers to add interactivity to HTML pages. It allows dynamic updating of HTML content, reaction to user events, and validation of form data directly in the browser without page reloads. JavaScript code can be embedded into HTML pages or added as separate .js files, and uses statements, functions, and comments to perform tasks like writing content, detecting browsers, and creating cookies.

Anvita Dynamic Fontson Web Feb2001guest6e7a1b1

Javascript BasicKang-min Liu

WCF & JQueryChris Love

YL Intro htmldilom1986

1.1 xhtml basicsBulldogs83

Basic HTMLcoachhahn

This document provides an overview of HTML basics and introduces key HTML tags and concepts. It discusses how to write HTML code using a text editor, view web pages, and format text using tags like <b>, <i>, and <h1-h6>. It also covers inserting comments, paragraphs, and line breaks to structure pages. The goal is to teach web designers the basic building blocks of HTML to create simple web pages.

HTML presentation for beginnersjeroenvdmeer

The document discusses the basic syntax and structure of HTML documents. It covers the main components of HTML including: 1. The DOCTYPE declaration which identifies the document type 2. Elements which contain the content and are wrapped in tags 3. Attributes which provide extra information about elements 4. Comments for annotating the code It provides examples of basic HTML code including the skeleton of an HTML document with headings, paragraphs, lists, links, and other common elements.

We9 Struts 2.0wangjiaz

The document discusses the architecture and features of Struts 2 framework. Some key points: 1) Struts 2 architecture simplified the original Struts 1 architecture by removing unnecessary classes and using plain Java objects instead of forms and forwards. 2) It introduced interceptors to handle tasks like validation and security in a centralized way. 3) An example demonstrates how the same form can be defined more simply in Struts 2 using tags instead of custom JSP elements. 4) Additional features discussed include built-in testing support, debugging tools, ability to run existing Struts 1 actions, and tutorials/training resources.

Intro to Html 5Shauvik Roy Choudhary, Ph.D.

Html5 structure tagsSEO SKills

The document defines several HTML5 structural tags including <article> for self-contained content, <aside> for tangentially related content, <details> for additional interactive information, <header> and <footer> for introductory and closing page elements, <hgroup> for grouping heading elements, <nav> for navigation links, and <summary> for summarizing <details> elements. Examples are provided for each tag.

Findability Bliss Through Web StandardsAarron Walter

The document discusses findability in web design, emphasizing the importance of great content combined with web standards. It covers techniques such as semantic markup, keyword positioning, and accessibility to enhance the discoverability of websites. The use of microformats and ensuring content is accessible even without JavaScript are highlighted as critical strategies for achieving findability bliss.

Learning HTMLDesarae Veit

The document provides an overview of learning HTML and CSS. It discusses HTML topics like DOCTYPE declarations, the HTML DOM, elements, attributes, and comments. It also covers CSS topics such as what CSS stands for, inserting stylesheets, the cascade order, external stylesheets, syntax, and examples of CSS code and selectors. The document includes code snippets of HTML boilerplate, elements, and an external CSS stylesheet.

Microformats HTML to APIelliando dias

#3 HTML & CSS [know-how]Dalibor Gogic

Html5dotNETUserGroupDnipro

This document provides an overview of HTML5, including its history, new features, and JavaScript APIs. Key points include: - HTML5 adds several new semantic tags like <header>, <nav>, <article>, and <footer> to improve structure and accessibility. - It introduces new form field types, multimedia elements (<audio>, <video>, <canvas>), and APIs for client-side storage, geolocation, and web applications. - JavaScript APIs in HTML5 enable features like drag and drop, offline web applications, and communication via web sockets and web workers. - The new document type is <!DOCTYPE html> and ARIA attributes improve accessibility for dynamic content. So in

Jade & Javascript templatingwearefractal

The document discusses JavaScript templating and compares different templating engines including ERB, Mustache, jQuery templates, HAML, and Jade. It provides an overview of what templating is, why it is used, whether templating should be done client-side or server-side, and how different engines work and are compiled. It focuses on explaining the syntax and features of the Jade templating engine, how it is influenced by HAML and written in JavaScript, and how templates can be run both server-side and client-side.

Html basics IML 140 (weeks 2-3)Evan Hughes

Lecture 5 - Comm Lab: Web @ ITPyucefmerhi

This document provides an introduction to JavaScript, covering syntax, variables, data types, operators, conditional statements, functions, events, and how to manipulate HTML elements with JavaScript. It discusses different ways to include JavaScript in HTML documents, such as inline, internally, and externally. Examples are provided for common JavaScript tasks like alerts, form validation, and dynamic content.

Creating Web Sites with HTML and CSSBG Java EE Course

The document provides steps for converting an image-based website design into XHTML and CSS code. It discusses identifying sections, deciding on a layout type, distinguishing content from style, and creating the basic page structure with appropriate HTML tags. Floating DIVs and DIVs that behave like tables are described as options for multi-column page layouts. Centering content, vertical alignment, and image formats are also covered.

Microsoft and jQueryEric ShangKuan

1) The document discusses Microsoft's close relationship with the jQuery community. It describes how Microsoft products like Visual Studio integrate with jQuery and how Microsoft contributes to official jQuery plugins. 2) It provides an overview of jQuery, including its capabilities and sample code. It also summarizes Microsoft's contributions to jQuery like the jQuery template and datalink plugins. 3) The document concludes by mentioning additional jQuery resources like the JSDefer script loader and encourages following Boris Moore's GitHub repositories for future jQuery developments.

The Basics of (X)HTML TagsLearningNerd

This document discusses the basics of (X)HTML tags. It explains that an (X)HTML tag consists of a name surrounded by angle brackets. Tags should be written in lowercase and most tags come in opening and closing pairs to label content. Elements are made up of opening tags, closing tags, and the content between them. Tags can be nested within each other and the first opened tag must be closed last. Some tags are empty and self-closing. Attributes add extra information to tags and their values are contained within quotes. Tags can have multiple attributes separated by spaces.

Ajax ons2Chad Davis

The document discusses classic web applications versus Ajax web applications and provides an overview of how Struts 2 can be used to build both. It explains that classic applications involve full page reloads when submitting forms, while Ajax applications use JavaScript to submit requests and update parts of the page without reloading. It also summarizes that Struts 2 handles much of the work behind the scenes, supports separation of concerns, and allows defining actions and results through XML configuration or annotations, making development faster.

Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010Sergey Ilinsky

The document discusses the Ample SDK, a JavaScript GUI framework that aims to provide a consistent platform for building complex web applications. It virtualizes browser technologies to implement a standard programming model using XML for layout, CSS for styling, and JavaScript for logic. This allows developers to build reusable UI components. The framework also enables creation of domain-specific markup languages and extension of core technologies like SVG and XUL across browsers.

HtmlChidanand Byahatti

HTML all tags .........its to much helpful for beginners Nimrakhan89

Java Scriptsiddaram

JavaScript is a scripting language that adds interactivity to HTML pages. It can dynamically manipulate HTML elements, validate user input, and respond to events like mouse clicks or page loads. JavaScript code can be embedded directly in HTML files or linked via external .js files and placed in the <head> or <body> sections. Common uses of JavaScript include displaying popup boxes, handling form validation, and dynamically updating content.

Developing GadgetsQuirk

The document discusses how to develop gadgets using standard web technologies like HTML, JavaScript and XML. It provides examples of a basic "Hello World" gadget and the anatomy of a gadget including metadata, preferences and content. It covers various features available to gadgets like caching, user preferences, tabs, analytics and internationalization. It also discusses publishing, hosting and communicating between gadgets.

KMUTNB - Internet Programming 3/7phuphax

Developing and testing ajax componentsIgnacio Coloma

The document discusses developing and testing JavaScript components. It recommends: 1. Generating clean HTML and JavaScript code separately to maximize flexibility and performance. HTML serves as the contract between server and client-side code. 2. Testing JavaScript code with frameworks like QUnit or YUI Test. Tests should make asynchronous requests synchronous and wait for responses. 3. Integrating unit tests into a test suite that runs across browsers to catch errors and failures. Integration tests should confirm the server generates the expected HTML.

More Related Content

What's hot (18)

We9 Struts 2.0wangjiaz

Intro to Html 5Shauvik Roy Choudhary, Ph.D.

Html5 structure tagsSEO SKills

Findability Bliss Through Web StandardsAarron Walter

Learning HTMLDesarae Veit

Microformats HTML to APIelliando dias

#3 HTML & CSS [know-how]Dalibor Gogic

Html5dotNETUserGroupDnipro

Jade & Javascript templatingwearefractal

Html basics IML 140 (weeks 2-3)Evan Hughes

Lecture 5 - Comm Lab: Web @ ITPyucefmerhi

Creating Web Sites with HTML and CSSBG Java EE Course

Microsoft and jQueryEric ShangKuan

The Basics of (X)HTML TagsLearningNerd

Ajax ons2Chad Davis

Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010Sergey Ilinsky

HtmlChidanand Byahatti

HTML all tags .........its to much helpful for beginners Nimrakhan89

We9 Struts 2.0wangjiaz

Intro to Html 5Shauvik Roy Choudhary, Ph.D.

Html5 structure tagsSEO SKills

Findability Bliss Through Web StandardsAarron Walter

Learning HTMLDesarae Veit

Microformats HTML to APIelliando dias

#3 HTML & CSS [know-how]Dalibor Gogic

Html5dotNETUserGroupDnipro

Jade & Javascript templatingwearefractal

Html basics IML 140 (weeks 2-3)Evan Hughes

Lecture 5 - Comm Lab: Web @ ITPyucefmerhi

Creating Web Sites with HTML and CSSBG Java EE Course

Microsoft and jQueryEric ShangKuan

The Basics of (X)HTML TagsLearningNerd

Ajax ons2Chad Davis

Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010Sergey Ilinsky

HtmlChidanand Byahatti

HTML all tags .........its to much helpful for beginners Nimrakhan89

Similar to JWU Guest Talk: JavaScript and AJAX (20)

Java Scriptsiddaram

Developing GadgetsQuirk

KMUTNB - Internet Programming 3/7phuphax

Developing and testing ajax componentsIgnacio Coloma

Everything You Always Wanted To Know About XML But Were Afraid To AskRichard Davis

The document provides a comprehensive overview of XML, including its basic structure, history, and various applications such as data exchange and web technologies. It discusses the components of XML, including elements, attributes, and document type definitions, and explains how XML is used with other technologies like HTML and CSS. Additionally, it covers practical aspects such as creating and manipulating XML through programming and XML editors.

Randy Witt Audio AssignmentPAVenturer

Javascript: Ajax & DOM Manipulation v1.2borkweb

This document serves as a comprehensive introduction to JavaScript, covering its features, DOM manipulation, AJAX, and the use of jQuery. It explains JavaScript's capabilities as a client-side scripting language and provides examples of control structures, objects, and event handling. Additionally, it highlights the importance of tools like Firebug and jQuery in enhancing the development experience.

Html pptIblesoft

The document provides an introduction to HTML, covering main HTML elements like headings, paragraphs, lists, links, images and tables. It discusses block-level and text-level elements, and how to create hyperlinks and embed images. Examples are given for different HTML tags and elements like headings, paragraphs, links, images, tables and frames. It also covers HTML form controls like text boxes, passwords, checkboxes, radio buttons, dropdowns and buttons.

HTML5 - techMaine Presentation 5/18/09pemaquid

HTML5 provides new semantic elements that improve accessibility and microformatting. It allows for rich media like audio and video to be directly embedded in webpages. Browser support for HTML5 is still limited, especially in older browsers, but the specification aims to enable more powerful cross-browser web applications. The document outlines many of the new capabilities and tags in HTML5 but notes it is still a working draft.

Ajaxpptvsnmurthy

AJAX allows parts of a web page to be updated asynchronously by exchanging small amounts of data in the background without reloading the entire page. It uses a combination of HTML, CSS, JavaScript, XML, and the XMLHttpRequest object to retrieve data from the server and update portions of the web page. While AJAX enables faster and more dynamic web applications, it also presents challenges such as pages not registering with the browser history and difficulties allowing users to bookmark specific states.

AjaxpptRatna Prashanth

AJAX allows parts of a web page to be updated asynchronously by exchanging small amounts of data in the background without reloading the entire page. It uses a combination of XMLHttpRequest objects, JavaScript, DOM, and CSS. When an AJAX request is made, JavaScript code calls an XMLHttpRequest object to request data from the server in the background. The returned data is then used to update specific elements on the web page without reloading. While AJAX improves interactivity, it also has drawbacks like pages being harder to develop and not registering with the browser history.

Lecture1 B Frames&FormsSur College of Applied Sciences

Frames allow dividing a browser window into multiple sections or frames. Each frame can load and display a separate HTML page. Frames are useful for keeping navigation menus static across pages but have drawbacks like broken back buttons. Forms allow users to input and submit data to a server. Common form elements include text fields, radio buttons, checkboxes. Forms are submitted via GET or POST methods to a specified URL for processing.

HTML FundamentalsDoncho Minkov

Introducing YUIChristian Heilmann

Chris presents the Yahoo User Interface Library (YUI) in a talk emphasizing the challenges of web development and the importance of styling and layout. He discusses how YUI simplifies the process of creating consistent, cross-browser layouts with components like reset.css and grids.css, and introduces the use of JavaScript for enhanced functionality. The presentation highlights the adaptability of web documents using YUI's grid system and encourages developers to utilize YUI for managing elements' size and position effectively.

Understanding htmlRay Villalobos

PHPTAL introduction'"">

Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM Alfresco Software

The presentation introduces Google Gadgets and how they can be used to build lightweight applications for embedding in sites. It discusses how to develop gadgets using JavaScript libraries and preferences, and provides examples of using web scripts to create gadgets that interact with an Alfresco repository. The document demonstrates how gadgets can integrate with technologies like Google Search Appliance and Google OneBox.

JSP Custom TagsBG Java EE Course

This document discusses JSP custom tags, including: - Tag files allow defining custom tags and should be used to modularize JSP output or reuse behavior. - There are two types of tag files: stand-alone tags and tags containing other tags/text. Both can have attributes. - The document demonstrates creating a simple "hello" tag and using attributes, JSTL, modifying body content, and exporting variables from tags. - Custom tags can help build reusable components, iterate/filter content, and encapsulate logic in JSPs.

Html for translatorsAndrea Spila

The document provides an introduction and brief history of HTML and the Internet, describing how HTML evolved from earlier technologies and became the standard language for building web pages. It explains the basic structure and tags of an HTML document, including tags for text formatting, headings, lists, images, tables and hyperlinks. Examples are given of simple HTML code for structuring a basic web page with a title, paragraphs of text and other common elements.

GTAC: AtomPub, testing your server implementationDavid Calavera

Java Scriptsiddaram

Developing GadgetsQuirk

KMUTNB - Internet Programming 3/7phuphax

Developing and testing ajax componentsIgnacio Coloma

Everything You Always Wanted To Know About XML But Were Afraid To AskRichard Davis

Randy Witt Audio AssignmentPAVenturer

Javascript: Ajax & DOM Manipulation v1.2borkweb

Html pptIblesoft

HTML5 - techMaine Presentation 5/18/09pemaquid

Ajaxpptvsnmurthy

AjaxpptRatna Prashanth

Lecture1 B Frames&FormsSur College of Applied Sciences

HTML FundamentalsDoncho Minkov

Introducing YUIChristian Heilmann

Understanding htmlRay Villalobos

PHPTAL introduction'"">

Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM Alfresco Software

JSP Custom TagsBG Java EE Course

Html for translatorsAndrea Spila

GTAC: AtomPub, testing your server implementationDavid Calavera

More from Hilary Mason (12)

Grace Hopper Conference Opening KeynoteHilary Mason

Hilary Mason discusses the transformative potential of machine intelligence and its implications for innovation in technology and data science. She emphasizes the importance of theoretical breakthroughs, economic changes, and new data availability in identifying valuable machine intelligence opportunities. The focus is on utilizing data and algorithms to create reports and prototypes while encouraging industry stakeholders to build a desirable future.

Short URLs, Big FunHilary Mason

The presentation by Hilary Mason discusses the analysis of big data from Bitly, focusing on understanding user interactions with short URLs. It highlights growing data trends, click distributions, and the importance of real-time analysis in understanding social behaviors and topics online. The talk emphasizes the need for effective communication of insights derived from data science to enhance understanding of societal changes.

Strata NY Sep 2011: Big Data, Short URLs: Learning in RealtimeHilary Mason

This document discusses how analyzing short URLs and metadata in real-time can provide insights into trends on social media and what people are interested in around the world. Shortened URLs allow information to spread quickly across networks and examining the languages of web pages viewed and how long people engage can reveal what topics and ideas are connecting with people. Real-time analysis of online data streams has the potential to give a view into what is happening globally through the lens of online conversations and sharing.

PyCon 2011 KeynoteHilary Mason

Hilary Mason introduces herself and provides several links related to data, computational thinking, machine learning, and Python. She discusses challenges related to processing large amounts of data and computational problems. Mason also asks the audience which Python constructs make them happy and discusses list comprehensions as a favorite. She concludes by discussing possibilities for the future including real-time, massively parallel computing as well as processes, security, interactions and sensing.

Machine Learning for Web DataHilary Mason

This document summarizes Hilary Mason's presentation on machine learning for web data. It discusses how machine learning allows algorithms to model and understand data in new ways. Examples include spam filters, Netflix recommendations, language identification, and entity disambiguation. The document also outlines the typical machine learning process of obtaining data, scrubbing it, exploring it to find patterns, modeling it to make predictions, and interpreting the results.

A Data-driven Look at the Realtime WebHilary Mason

Hilary Mason presented a data-driven look at real-time web activity, finding that over the course of a single day there were 9 new Wikipedia articles created, over 347,000 tweets, over 1 million clicks on Bitly links, and over 284,000 new Bitly links shared. The topics discussed on the real-time web were found to be diverse and timely, covering trending news stories about technology, business, entertainment, and significant events happening around the world, with location also playing a role in what content people engage with.

IgniteNYC: How to Replace Yourself With a Very Small Shell ScriptHilary Mason

Practical Data Analysis in PythonHilary Mason

The document discusses practical data analysis in Python, focusing on the challenges of using and analyzing rapidly changing and semi-structured data. It emphasizes the importance of entity disambiguation and various applications of data analysis such as spam classification and recommendation systems, using Python libraries like NLTK and SciPy. Additionally, it showcases a spam classifier trained on tweets, achieving 90% accuracy in identifying spam content.

Have data? What now?!Hilary Mason

The document discusses common problems with gathering and analyzing unstructured data such as text, including parsing, entity extraction, disambiguation, and classification. It provides examples of using tools like Open Calais for entity extraction and describes approaches for supervised classification of text using feature extraction and trained classifiers. The document also briefly mentions clustering and hierarchical clustering techniques for analyzing groups in data.

Analytics for Virtual WorldsHilary Mason

The document discusses the effectiveness of analytics in virtual worlds, focusing on how user-centered metrics can help understand user behavior through activities like dancing and chatting. It emphasizes the need for open standards to generalize findings across different platforms and highlights the potential for social media metrics. The author anticipates significant growth in virtual world platforms by 2008.

Experiential Learning in Second LifeHilary Mason

Experiential learning opportunities can be provided through virtual spaces like Second Life, allowing students to experience places and situations that would otherwise be impossible due to limitations of time, money, access or expertise. By creating virtual recreations of real-world environments and scenarios, students can explore new realities and have real experiences through collaboration, reflection and community learning in Second Life. These types of virtual experiential learning activities have led to high levels of student engagement and return visits according to metrics collected from projects hosted in Second Life.

Virtual Worlds in EducationHilary Mason

The document discusses the use of virtual worlds, particularly Second Life, in education, emphasizing the unique advantages these environments offer in terms of experience, place, and community. It highlights various educational projects, including a virtual Moroccan tourism experience that aims to educate and promote cultural understanding. The document also evaluates the effectiveness of virtual spaces for learning and collaboration while outlining future plans for further integration and development.

Grace Hopper Conference Opening KeynoteHilary Mason

Short URLs, Big FunHilary Mason

Strata NY Sep 2011: Big Data, Short URLs: Learning in RealtimeHilary Mason

PyCon 2011 KeynoteHilary Mason

Machine Learning for Web DataHilary Mason

A Data-driven Look at the Realtime WebHilary Mason

IgniteNYC: How to Replace Yourself With a Very Small Shell ScriptHilary Mason

Practical Data Analysis in PythonHilary Mason

Have data? What now?!Hilary Mason

Analytics for Virtual WorldsHilary Mason

Experiential Learning in Second LifeHilary Mason

Virtual Worlds in EducationHilary Mason

Recently uploaded (20)

You are not excused! How to avoid security blind spots on the way to productionMichele Leroux Bustamante

We live in an ever evolving landscape for cyber threats creating security risk for your production systems. Mitigating these risks requires participation throughout all stages from development through production delivery - and by every role including architects, developers QA and DevOps engineers, product owners and leadership. No one is excused! This session will cover examples of common mistakes or missed opportunities that can lead to vulnerabilities in production - and ways to do better throughout the development lifecycle.

cnc-processing-centers-centateq-p-110-en.pdfAmirStern2

מרכז עיבודים תעשייתי בעל 3/4/5 צירים, עד 22 החלפות כלים עם כל אפשרויות העיבוד הדרושות. בעל שטח עבודה גדול ומחשב נוח וקל להפעלה בשפה העברית/רוסית/אנגלית/ספרדית/ערבית ועוד.. מסוגל לבצע פעולות עיבוד שונות המתאימות לענפים שונים: קידוח אנכי, אופקי, ניסור, וכרסום אנכי.

Raman Bhaumik - Passionate Tech EnthusiastRaman Bhaumik

“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...Edge AI and Vision Alliance

For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2025/06/mpu-a-transformative-solution-for-next-gen-ai-at-the-edge-a-presentation-from-fotonation/ Petronel Bigioi, CEO of FotoNation, presents the “MPU+: A Transformative Solution for Next-Gen AI at the Edge” tutorial at the May 2025 Embedded Vision Summit. In this talk, Bigioi introduces MPU+, a novel programmable, customizable low-power platform for real-time, localized intelligence at the edge. The platform includes an AI-augmented image signal processor that enables leading image and video quality. In addition, it integrates ultra-low-power object and motion detection capabilities to enable always-on computer vision. A programmable neural processor provides flexibility to efficiently implement new neural networks. And additional specialized engines facilitate image stabilization and audio enhancements.

Using the SQLExecutor for Data Quality Management: aka One man's love for the...Safe Software

The SQLExecutor is one of FME’s most powerful and flexible transformers. Pivvot maintains a robust internal metadata hierarchy used to support ingestion and curation of thousands of external data sources that must be managed for quality before entering our platform. By using the SQLExecutor, Pivvot can efficiently detect problems and perform analysis before data is extracted from our staging environment, removing the need for rollbacks or cycles waisted on a failed job. This presentation will walk through three distinct examples of how Pivvot uses the SQLExecutor to engage its metadata hierarchy and integrate with its Data Quality Management workflows efficiently and within the source postgres database. Spatial Validation –Validating spatial prerequisites before entering a production environment. Reference Data Validation - Dynamically validate domain-ed columns across any table and multiple columns per table. Practical De-duplication - Removing identical or near-identical well point locations from two distinct source datasets in the same table.

Daily Lesson Log MATATAG ICT TEchnology 8LOIDAALMAZAN3

Connecting Data and Intelligence: The Role of FME in Machine LearningSafe Software

In this presentation, we want to explore powerful data integration and preparation for Machine Learning. FME is known for its ability to manipulate and transform geospatial data, connecting diverse data sources into efficient and automated workflows. By integrating FME with Machine Learning techniques, it is possible to transform raw data into valuable insights faster and more accurately, enabling intelligent analysis and data-driven decision making.

"Database isolation: how we deal with hundreds of direct connections to the d...Fwdays

What can go wrong if you allow each service to access the database directly? In a startup, this seems like a quick and easy solution, but as the system scales, problems appear that no one could have guessed. In my talk, I'll share Solidgate's experience in transforming its architecture: from the chaos of direct connections to a service-based data access model. I will talk about the transition stages, bottlenecks, and how isolation affected infrastructure support. I will honestly show what worked and what didn't. In short, we will analyze the controversy of this talk.

AI VIDEO MAGAZINE - June 2025 - r/aivideo1pcity Studios, Inc

CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025pcprocore

👉𝗡𝗼𝘁𝗲:𝗖𝗼𝗽𝘆 𝗹𝗶𝗻𝗸 & 𝗽𝗮𝘀𝘁𝗲 𝗶𝗻𝘁𝗼 𝗚𝗼𝗼𝗴𝗹𝗲 𝗻𝗲𝘄 𝘁𝗮𝗯> https://pcprocore.com/ 👈◀ CapCut Pro Crack is a powerful tool that has taken the digital world by storm, offering users a fully unlocked experience that unleashes their creativity. With its user-friendly interface and advanced features, it’s no wonder why aspiring videographers are turning to this software for their projects.

GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdfPriyanka Aash

AI vs Human Writing: Can You Tell the Difference?Shashi Sathyanarayana, Ph.D

Cyber Defense Matrix Workshop - RSA ConferencePriyanka Aash

Enhance GitHub Copilot using MCP - Enterprise version.pdfNilesh Gule

From Manual to Auto Searching- FME in the Driver's SeatSafe Software

Finding a specific car online can be a time-consuming task, especially when checking multiple dealer websites. A few years ago, I faced this exact problem while searching for a particular vehicle in New Zealand. The local classified platform, Trade Me (similar to eBay), wasn’t yielding any results, so I expanded my search to second-hand dealer sites—only to realise that periodically checking each one was going to be tedious. That’s when I noticed something interesting: many of these websites used the same platform to manage their inventories. Recognising this, I reverse-engineered the platform’s structure and built an FME workspace that automated the search process for me. By integrating API calls and setting up periodic checks, I received real-time email alerts when matching cars were listed. In this presentation, I’ll walk through how I used FME to save hours of manual searching by creating a custom car-finding automation system. While FME can’t buy a car for you—yet—it can certainly help you find the one you’re after!

OpenACC and Open Hackathons Monthly Highlights June 2025OpenACC

The OpenACC organization focuses on enhancing parallel computing skills and advancing interoperability in scientific applications through hackathons and training. The upcoming 2025 Open Accelerated Computing Summit (OACS) aims to explore the convergence of AI and HPC in scientific computing and foster knowledge sharing. This year's OACS welcomes talk submissions from a variety of topics, from Using Standard Language Parallelism to Computer Vision Applications. The document also highlights several open hackathons, a call to apply for NVIDIA Academic Grant Program and resources for optimizing scientific applications using OpenACC directives.

UserCon Belgium: Honey, VMware increased my billstijn40

VMware’s pricing changes have forced organizations to rethink their datacenter cost management strategies. While FinOps is commonly associated with cloud environments, the FinOps Foundation has recently expanded its framework to include Scopes—and Datacenter is now officially part of the equation. In this session, we’ll map the FinOps Framework to a VMware-based datacenter, focusing on cost visibility, optimization, and automation. You’ll learn how to track costs more effectively, rightsize workloads, optimize licensing, and drive efficiency—all without migrating to the cloud. We’ll also explore how to align IT teams, finance, and leadership around cost-aware decision-making for on-prem environments. If your VMware bill keeps increasing and you need a new approach to cost management, this session is for you!

Security Tips for Enterprise Azure SolutionsMichele Leroux Bustamante

Delivering solutions to Azure may involve a variety of architecture patterns involving your applications, APIs data and associated Azure resources that comprise the solution. This session will use reference architectures to illustrate the security considerations to protect your Azure resources and data, how to achieve Zero Trust, and why it matters. Topics covered will include specific security recommendations for types Azure resources and related network security practices. The goal is to give you a breadth of understanding as to typical security requirements to meet compliance and security controls in an enterprise solution.

AI Agents and FME: A How-to Guide on Generating Synthetic MetadataSafe Software

Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...Josef Weingand

You are not excused! How to avoid security blind spots on the way to productionMichele Leroux Bustamante

cnc-processing-centers-centateq-p-110-en.pdfAmirStern2

Raman Bhaumik - Passionate Tech EnthusiastRaman Bhaumik

“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...Edge AI and Vision Alliance

Using the SQLExecutor for Data Quality Management: aka One man's love for the...Safe Software

Daily Lesson Log MATATAG ICT TEchnology 8LOIDAALMAZAN3

Connecting Data and Intelligence: The Role of FME in Machine LearningSafe Software

"Database isolation: how we deal with hundreds of direct connections to the d...Fwdays

AI VIDEO MAGAZINE - June 2025 - r/aivideo1pcity Studios, Inc

CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025pcprocore

GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdfPriyanka Aash

AI vs Human Writing: Can You Tell the Difference?Shashi Sathyanarayana, Ph.D

Cyber Defense Matrix Workshop - RSA ConferencePriyanka Aash

Enhance GitHub Copilot using MCP - Enterprise version.pdfNilesh Gule

From Manual to Auto Searching- FME in the Driver's SeatSafe Software

OpenACC and Open Hackathons Monthly Highlights June 2025OpenACC

UserCon Belgium: Honey, VMware increased my billstijn40

Security Tips for Enterprise Azure SolutionsMichele Leroux Bustamante

AI Agents and FME: A How-to Guide on Generating Synthetic MetadataSafe Software

Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...Josef Weingand

JWU Guest Talk: JavaScript and AJAX

1. JavaScript, AJAX, jQuery, Code, OH MY! Or: How cool web stuff works

2. The Web That Was Web Page Web Page CGI

3. No reloading OMG LMAO!

5. <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=ISO-8859-1" /> < title >I'm a web page</ title > </ head > < body > < div id = "top" >This is the top.</ div > </ body > </ html >

6. The Document Object Model (DOM) XML Document Object Model

7. JavaScript! Magic?

8. Referencing an XHTML element < div id = "top" >This is the top.</ div > … reference the element by unique ID document. getElementById( "top" ) … this returns the selected element in the parse tree. DOM Element Properties

9. How to Lose Friends <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=ISO-8859-1" /> < title >I'm a web page</ title > < script type= "text/javascript"> function element() { alert( document. getElementById( "top").innerHTML); } </ script> </ head > < body onload = "element()" > < div id = "top" >This is the top.</ div > </ body > </ html >

10. Manipulating Element Contents InnerHTML! DOM Manipulation!

11. Events <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=ISO-8859-1" /> < title >I'm also a web page</ title > < script type= "text/javascript"> function update() { document. getElementById( "contents").innerHTML = "You clicked!"; } </ script> </ head > < body > < div id = "contents" >I'm here when you initially load.</ div > < input type = "button" value = "Click Me" onclick = "update()" /> </ body > </ html > Try Me

12. Complicated Behavior… Path101

13. XMLHttpRequest() XMLHttpRequest (XHR) transfers data between a client (browser) and a server over background HTTP requests.

14. Using XMLHttpRequest …in a cross-browser friendly way var request = new XMLHttpRequest(); request. open( "GET", url, false); request. send( null); if(!request. getResponseHeader( "Date")) { var cached = request; request = new XMLHttpRequest(); var ifModifiedSince = cached. getResponseHeader( "Last-Modified"); ifModifiedSince = (ifModifiedSince) ? ifModifiedSince : new Date( 0); // January 1, 1970 request. open( "GET", url, false); request. setRequestHeader( "If-Modified-Since", ifModifiedSince); request. send( ""); if(request. status == 304) { request = cached; } }

15. JavaScript Libraries A good library will abstract away the ugly details of cross-platform code. Prototype (the first major lib) jQuery (write less, do more) Script.aculo.us (the prettiest) YUL! (the yahoo!iest) Etc…

16. jQuery < html > < head > < script type= "text/javascript" src= "jquery.js"></ script> <script type= "text/javascript"> // Your code goes here </ script> </ head > < body > < a href = "http://jquery.com/" >jQuery</ a > </ body > </ html >

17. jQuery Selector Syntax $(‘#elementid’) $(‘.classname’) $(‘#content a.link’)

18. Events $(‘#top’).click(); $(‘#top’).click(function() { // do stuff when #top is clicked });

19. Document Ready Not “onload”! $(document).ready(function(){ // Your code here });

20. Local Example < html > < head > < script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></ script> <script type= "text/javascript"> $( document).ready( function() { $( "#content"). click( function() { alert( "hi"); }); }); </ script> </ head > < body > < div id = "content" >Did anyone go to Denny's today?</ div > </ body > </ html >

21. … explore… Thank you!

JWU Guest Talk: JavaScript and AJAX

Recommended

More Related Content

What's hot (18)

Similar to JWU Guest Talk: JavaScript and AJAX (20)

More from Hilary Mason (12)

Recently uploaded (20)

JWU Guest Talk: JavaScript and AJAX