Web Design. Lecture 6. Instructor : Cristina Mîndruță Site : Cristina Mindruta - Web Design
|
|
- Branden Ross
- 6 years ago
- Views:
Transcription
1 Web Design Lecture 6 Instructor : Cristina Mîndruță Site :
2 Topics JavaScript in Web Browsers The Window Object Scripting Documents Scripting CSS Handling Events
3 JS (Java Scripting) HTML structural layer CSS presentational layer JS behavioral layer React to user input altering the contents of the page, the CSS styles, the browser s behavior Create highly responsive interfaces that improve the user experience and provide dynamic functionality, without waiting for the server to load up a new page.
4 DOM Document Object Model Document Object Model (DOM) - the fundamental API for representing and manipulating the content of HTML and XML documents. nested elements of an HTML/XML document are represented in the DOM as a tree of objects. <html> <head> <title>sample Document</title> </head> <body> <h1>an HTML Document</h1> <p>this is a <i>simple</i> document </body> </html>
5 DOM (Document Object Model) Types of nodes: Element node (HTML tag) can have children and/or attributes Text node (text in a block element) Attribute node (attribute/value pair) Text and attribute nodes children in an element node cannot have children or attributes <p> This is a paragraph of text with a <a href="/path/page.html">link in it</a>. </p>
6 DOM Document Object Model Node type hierarchy:
7 DOM Document Object Model Global variable document refers the Document object. Element objects HTML elements in the Document object. Element objects are selected by: id attribute (unique in the document) document.getelementbyid("element_id") type (tag name) document.getelementsbytagname("tag_name"); element.getelementsbytagname("tag_name"); returns a live NodeList object that behaves like a read-only array of Element objects. shortcut properties to access certain kinds of nodes: body, head, images, forms, links, embeds, plugins, scripts HTML object collections (ex. document.forms), which are similar to NodeList objects, and can additionally be indexed by element ID or name.
8 DOM Document Object Model Element objects are selected by (cont.): class(es) getelementsbyclassname("class_name") returns live NodeList containing all matching descendants of the document or element. CSS selector queryselector() / queryselectorall() - takes a single string argument containing a CSS selector and returns the first element that matches the selector / a static NodeList that represents all elements in the document that match the selector. OBS. jquery library uses CSS selector-based query as its central programming paradigm. Web applications based on jquery use a portable, cross-browser equivalent to queryselectorall() named $().
9 DOM Document structure and traversal Node type - defines properties for traversing DOM tree. parentnode - null for nodes that have no parent (ex. Document object). childnodes live NodeList, read-only array-like object firstchild, lastchild nextsibling, previoussibling - connect nodes in a doubly linked list. nodetype - Document nodes have the value 9. Element, 1. Text nodes, 3. Comments nodes, 8 and DocumentFragment nodes, 11. nodevalue - textual content of a Text or Comment node. nodename - tag name of an Element, converted to uppercase. // second child node of the first child of the Document document.childnodes[0].childnodes[1] document.firstchild.firstchild.nextsibling
10 DOM Document structure and traversal Documents can be also traversed as trees of only Element objects, ignoring Text and Comment nodes, using the following attributes: Attributes on Node objects: children - live NodeList, read-only array-like object firstelementchild, lastelementchild nextelementsibling, previouselementsibling childelementcount, children.length
11 DOM Attributes HTML attributes HTMLElement and its subtypes define properties that correspond to the standard attributes of HTML elements. HTMLElement defines properties for the universal HTTP attributes (id, title lang, dir) event handler properties (ex. onclick). Element-specific subtypes define attributes specific to those elements. Non-HTML attributes Element type also defines getattribute(), setattribute(), hasattribute() and removeattribute() methods Attributes as nodes attributes (property on Node) : live, read-only array-like object elementnode.attributes[index] or element.attributes.attrname returns Attr object with properties name and value. var image = document.getelementbyid("myimage"); var imgurl = image.src;
12 DOM Attributes Dataset attributes: data attributes and the Dataset API introduced by HTML 5. Valid dataset attribute = any attribute whose name is lowercase and begins with the prefix data Standard way to attach additional data without compromising document validity. Programmer-defined attributes : data attrname Accessible through dataset property of element : document.getelementbyid("elementid").dataset Dataset - object containing name-value pairs where name is attrname <span id="opt" data course="web Design" data credits="4" ></span> var dat = document.getelementbyid("opt").dataset dat object is: { course: "Web Design", credits "4" }
13 DOM Element content Element properties for accessing / modifying element content : as HTML: ex. This is a <i>simple</i> document. innerhtml : the content of that element including markup outerhtml includes the opening and closing tags of the element insertadjacenthtml() as plain text : ex. This is a simple document. textcontent = straightforward concatenation of all Text node descendants of the specified element.
14 DOM Operations with Nodes Creating Node objects: document.createelement( tagname ) document.createtextnode("textnodecontent") document.createdocumentfragment() anothernode.clonenode() Inserting Node objects: appendchild(newchildnode) insertbefore(newchildnode, existingchildnode) Deleting, and replacing Node objects: removechild(existingchildnode) replacechild(existingchildnode, newchildnode) : removes one child node and replaces it with a new one.
15 DOM HTML Forms document.forms HTML Collection object that allows form elements to be selected by numerical order, by id, or by name. document.forms.formid, document.forms.formname document.forms[formposition] Form object Properties: formobject.elements [ ] - array with all elements in the form action, encoding, method, target are attributes of the <form> element Methods: submit(), reset() Events: onsubmit, onreset
16 DOM HTML Forms Form element object Common properties: type form read-only reference to the containing form object name value - the string that is sent to the web server when the form is submitted Specific properties; radio / checkbox element: checked, defaultchecked select element: type, selectedindex, selected, text, options.length Events: onclick: button, reset, submit, checkbox, radio onchange: checkbox, radio, select, text, textarea, password, file focus / blur : all types (receive / lose focus) onkeypress, onkeydown, onkeyup, oninput text elements
17 Topics JavaScript in Web Browsers The Window Object Scripting Documents Scripting CSS Handling Events
18 CSS Cascading Style Sheets (CSS) - standard for specifying the visual presentation of HTML documents CSS styles can be scripted => scripted visual effects
19 CSS Scripting style attribute of individual document elements. style - property of Element object only for inline styles element.style.styleattribute = "value"; Ex: e.style.fontsize = "24pt" using strings for the whole style declaration e.setattribute("style", s); s = e.getattribute("style"); e.style.csstext = s; s = e.style.csstext; getcomputedstyle(element, pseudo) gets all the actual (computed) CSS property and values of the specified element, i.e. the style actually used in displaying the element, after styling from multiple sources have been applied. element the element to get a styling for pseudo pseudo-selector like hover or null if not needed. returns CSSStyleDeclaration object : collection of CSS property-value pairs. More details:
20 CSS Scripting style attribute of individual document elements. Managing element classes: classlist property of Element object; live; read-only array-like object add() / remove() - add / remove individual class names toggle() - adds/removes a class name contains() - tests whether the class attribute contains a specified class name.
21 CSS Scripting style sheets document.stylesheets property- read-only array-like object containing CSSStyleSheet objects (represent the stylesheets associated with the document) disabled property of <style>, <link> elements, and CSSStyleSheet objects. CSSStyleSheet object cssrules[] array contains CSSRule objects (the rules of the stylesheet) CSSRule object properties: selectortext style - writable CSSStyleDeclaration object insertrule(), deleterule() methods
22 Topics JavaScript in Web Browsers The Window Object Scripting Documents Scripting CSS Handling Events
23 Handling events JS - asynchronous event-driven programming model. Web browser generates* an event whenever something interesting happens to the document or browser or to some element or object associated with it. JS application can register to one event type one or more functions to be invoked when events of that type occur. event type (name) - name to identify the specific kind of event. event target - object on which the event occurred or with which the event is associated. event handler (event listener) - function that handles (responds to) an event. Applications register their event handler functions with the web browser, specifying an event type and an event target. * fires, triggers, or dispatches
24 Handling events Event object object associated with a particular event contains details about that event is passed as an argument to the event handler function Properties : type, target, other, specific to each event type Default actions are associated with some event types.
25 Handling events Event categories Device-dependent input events - directly tied to a specific input device (keyboard, mouse, touch screen) Device-independent input events - not directly tied to a specific input device. (ex. click, textinput event ) User interface events - higher-level events, often on HTML <form> elements that define a user interface for a web application. (focus, change value, submit) State-change events - triggered by network or browser activity, and indicating state-related change. (load, DOMContentLoaded, online, offline, readystatechange, loadstart, progress, loadend ) API-specific events - web APIs defined by HTML5 and related specifications (events in drag-and-drop API, events on <video> and <audio> elements) Timers and errors - part of client-side JavaScript s asynchronous programming model, are similar to events.
26 Registering event handlers A. By setting a property, on the object or document element that is the event target, to the desired event handler function. Event handler properties : onevent set an event /media/user/comun/cursuri/webdesign/curs/curs6/ig_6.html handler property in JS code set directly as HTML attribute targetobject.onevent = function(){...}; function funcname() {... } targetobject.onevent = funcname; // Set the onload property of the Window object to a function. // The function is the event handler: it is invoked when the document loads. window.onload = function() {...} // Look up a <form> element var elt = document.getelementbyid("shipping_address"); // Register an event handler function that will be invoked right // before the form is submitted. elt.onsubmit = function() { return validate(this); } <button onclick="alert('thank you');">click Here</button> Example
27 Registering event handlers B. Defining EventListener (on any object that can be an event target). addeventlistener(eventtype, handlerfunction, false) On the same object, more handlers can be registered for the same event type; invoked in the order they were registered. <button id="mybutton">click me</button> <script> var b = document.getelementbyid("mybutton"); b.onclick = function() { alert("thanks for clicking me!"); }; b.addeventlistener("click", function() { alert("thanks again!"); }, false); </script> removeeventlistener(eventtype, handlerfunction, false)
28 Event handlers invocation mechanism Event handlers - automatically invoked by the browser, based on the event type and target. Event object the argument at invocation; has the attribute type. Invocation context - the object on which event handlers are defined (this keyword refers to the event target). Event handler is invoked as method of the target object. Event handler - executed in the scope in which is defined, not the scope from which is invoked. Event handlers registered as HTML attributes run with a modified scope chain: direct access to global variables and to properties of some special objects: target object, the containing <form> object (if there is one), and the Document object.
29 Handling events event propagation Propagation path propagation of the Event object from the browser. Event target chain Capture phase: Event object propagates through the target's ancestors from the defaultview to the target's parent. Event listeners registered for this phase handle the event before it reaches its target. addeventlistener(eventtype, handlerfunction, true) Bubble phase: Event object propagates through the target's ancestors in reverse order, starting with the target's parent and ending with the defaultview. Event listeners registered for this phase handle the event after it has reached its target. Target phase: Event object arrives at the event object's event target. Event listeners registered for this phase handle the event once it has reached its target. If the event type indicates that the event must not bubble, the event object halts after completion of this phase.
30 Handling events event propagation Consequence of event bubbling: register a single handler on a common ancestor element and handle events there. Ex. Register an change handler on a <form> element instead of registering a change handler for every element in the form. Event capturing (reverse bubbling) provides an opportunity to peek at events before they are delivered to their target. A capturing event handler can be used for debugging, or it can be used along with an event cancellation technique to filter events so that the target event handlers are never actually invoked. event.preventdefault() - cancel the default action for an event event.returnvalue = false event.stoppropagation() - prevents the propagation of the event to any other objects. event.stopimmediatepropagation() - prevents the propagation of the event to any other objects and also prevents the invocation of any other event handlers registered on the same object.
31 Events Document events: load - document and all of its related files are fully loaded DOMContentLoaded - fired when the document has been loaded and parsed and any deferred scripts have been executed. Images and async scripts may still be loading, but the document is ready to be manipulated. Mouse events: click, contextmenu, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout. Event properties: clientx and clienty - coordinates of the mouse pointer relative to the containing window. altkey, ctrlkey, metakey, shiftkey - keyboard modifier keys held down when the event occurred. button - which mouse button. Complete list at :
32 Events Drag and Drop events: drag source and drop target may be in the same application or in different applications. Draggable element: draggable attribute set event listener for dragstart that stores the data being dragged. Drop target checks that it's not a text selection that is being dragged stores data into the DataTransfer object set the allowed effects (copy, move, link, or some combination). dropzone attribute - what kind of data to accept and what kind of feedback to give event listener for drop event. Example explained at :
33 Keyboard events: keydown, keypress, keyup Event properties: keycode Touchscreen events: Events altkey, ctrlkey, metakey, shiftkey - keyboard modifier keys held down when the event occurred. touchstart, touchend, touchmove, touchcancel Event properties: changedtouches - array-like object : position of each touch. scale - ratio of the current distance between the two fingers to the initial distance between the fingers ( pinch close < 1.0; pinch open > 1.0.) rotation - the angle of finger rotation since the start of the event (clockwise rotation: angle in degrees > 0). Pointer Events - Recommendation Defines events and related interfaces for handling hardware agnostic pointer input from devices including mouse, pen, touchscreen, etc.
34 JS - Execution JavaScript idealized execution mechanism 1. Creates a Document object and begins parsing the web page, adding Element objects and Text nodes to the document as it parses HTML elements and their textual content. The document.readystate property has the value loading. 2. When the HTML parser encounters <script> elements that have neither the async nor defer attributes, it adds those elements to the document and then executes the inline or external script. These scripts are executed synchronously, and the parser pauses while the script downloads (if necessary) and runs. Scripts like these can use document.write() to insert text into the input stream. That text will become part of the document when the parser resumes. Synchronous scripts often simply define functions and register event handlers for later use, but they can traverse and manipulate the document tree as it exists when they run. That is, synchronous scripts can see their own <script> element and document content that comes before it. 3. When encountered a <script> element that has the async attribute set, it begins downloading the script text and continues parsing the document. The script will be executed as soon as possible after it has downloaded, but the parser does not stop and wait for it to download. Asynchronous scripts must not use the document.write() method. They can see their own <script> element and all document elements that come before it, and may or may not have access to additional document content.
35 JS - Execution JavaScript idealized execution mechanism (cont.) 4. When the document is completely parsed, the document.readystate property changes to interactive. 5. Any scripts that had the defer attribute set are executed, in the order in which they appeared in the document. Async scripts may also be executed at this time. Deferred scripts have access to the complete document tree and must not use the document.write() method. 6. The browser fires a DOMContentLoaded event on the Document object. This marks the transition from synchronous script execution phase to the asynchronous eventdriven phase of program execution. Note, however, that there may still be async scripts that have not yet executed at this point. 7. The document is completely parsed, but the browser may still be waiting for additional content, such as images, to load. When all such content finishes loading, and when all async scripts have loaded and executed, the document.readystate property changes to complete and the web browser fires a load event on the Window object. 8. From this point on, event handlers are invoked asynchronously in response to user input events, network events, timer expirations, and so on.
36 Bibliography David Flanagan, Java Script. The Definitive Guide. 6-th ed., O'Reilly 2011 Jennifer Niederst Robbins, Learning Web Design, Fourth Edition, O Reilly Media, 2012 Robin Nixon, Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition A Stepby-Step Guide to Creating Dynamic Websites, Publisher: O'Reilly Media,
JAVASCRIPT AND JQUERY: AN INTRODUCTION (WEB PROGRAMMING, X452.1)
Technology & Information Management Instructor: Michael Kremer, Ph.D. Class 8 Professional Program: Data Administration and Management JAVASCRIPT AND JQUERY: AN INTRODUCTION (WEB PROGRAMMING, X452.1) AGENDA
More informationJAVASCRIPT AND JQUERY: AN INTRODUCTION (WEB PROGRAMMING, X452.1)
Technology & Information Management Instructor: Michael Kremer, Ph.D. Class 6 Professional Program: Data Administration and Management JAVASCRIPT AND JQUERY: AN INTRODUCTION (WEB PROGRAMMING, X452.1) AGENDA
More informationJavaScript Handling Events Page 1
JavaScript Handling Events Page 1 1 2 3 4 5 6 7 8 Handling Events JavaScript JavaScript Events (Page 1) An HTML event is something interesting that happens to an HTML element Can include: Web document
More informationJavaScript and XHTML. Prof. D. Krupesha, PESIT, Bangalore
JavaScript and XHTML Prof. D. Krupesha, PESIT, Bangalore Why is JavaScript Important? It is simple and lots of scripts available in public domain and easy to use. It is used for client-side scripting.
More informationIndex. Ray Nicholus 2016 R. Nicholus, Beyond jquery, DOI /
Index A addclass() method, 2 addeventlistener, 154, 156 AJAX communication, 20 asynchronous operations, 110 expected and unexpected responses, 111 HTTP, 110 web sockets, 111 AJAX requests DELETE requests,
More informationPhoto from DOM
Photo from http://www.flickr.com/photos/emraya/2861149369/ DOM 2 DOM When a browser reads an HTML file, it must interpret the file and render it onscreen. This process is sophisticated. Fetch Parse Flow
More informationJavaScript: Events, the DOM Tree, jquery and Timing
JavaScript: Events, the DOM Tree, jquery and Timing CISC 282 October 11, 2017 window.onload Conflict Can only set window.onload = function once What if you have multiple files for handlers? What if you're
More informationPearson Education Limited Edinburgh Gate Harlow Essex CM20 2JE England and Associated Companies throughout the world
Pearson Education Limited Edinburgh Gate Harlow Essex CM20 2JE England and Associated Companies throughout the world Visit us on the World Wide Web at: www.pearsoned.co.uk Pearson Education Limited 2014
More informationWeb Design. Lecture 7. Instructor : Cristina Mîndruță Site : https://sites.google.com/site/webdescm. Cristina Mindruta - Web Design
Web Design Lecture 7 Instructor : Cristina Mîndruță Site : https://sites.google.com/site/webdescm Select HTML elements in JavaScript Element objects are selected by a). id, b). type, c). class, d). shortcut
More informationCatching Events. Bok, Jong Soon
Catching Events Bok, Jong Soon Jongsoon.bok@gmail.com www.javaexpert.co.kr What Is an Event? Events Describe what happened. Event sources The generator of an event Event handlers A function that receives
More informationCITS3403 Agile Web Development Semester 1, 2018
Javascript Event Handling CITS3403 Agile Web Development Semester 1, 2018 Event Driven Programming Event driven programming or event based programming programming paradigm in which the flow of the program
More informationJavaScript and Events
JavaScript and Events CS 4640 Programming Languages for Web Applications [Robert W. Sebesta, Programming the World Wide Web Jon Duckett, Interactive Frontend Web Development] 1 Events Interactions create
More informationCSE 154 LECTURE 10: MORE EVENTS
CSE 154 LECTURE 10: MORE EVENTS Problems with reading/changing styles click Me HTML window.onload = function() { document.getelementbyid("clickme").onclick = biggerfont; };
More informationCS193X: Web Programming Fundamentals
CS193X: Web Programming Fundamentals Spring 2017 Victoria Kirst (vrk@stanford.edu) Today's schedule Today: - Keyboard events - Mobile events - Simple CSS animations - Victoria's office hours once again
More informationProduced by. App Development & Modeling. BSc in Applied Computing. Eamonn de Leastar
App Development & Modeling BSc in Applied Computing Produced by Eamonn de Leastar (edeleastar@wit.ie) Department of Computing, Maths & Physics Waterford Institute of Technology http://www.wit.ie http://elearning.wit.ie
More informationof numbers, converting into strings, of objects creating, sorting, scrolling images using, sorting, elements of object
Index Symbols * symbol, in regular expressions, 305 ^ symbol, in regular expressions, 305 $ symbol, in regular expressions, 305 $() function, 3 icon for collapsible items, 275 > selector, 282, 375 + icon
More informationHell is other browsers - Sartre. The touch events. Peter-Paul Koch (ppk) DIBI, 28 April 2010
Hell is other browsers - Sartre The touch events Peter-Paul Koch (ppk) http://quirksmode.org http://twitter.com/ppk DIBI, 28 April 2010 The desktop web Boring! - Only five browsers with only one viewport
More informationOutline. Lecture 4: Document Object Model (DOM) What is DOM Traversal and Modification Events and Event Handling
Outline Lecture 4: Document Object Model (DOM) What is DOM Traversal and Modification Events and Event Handling Wendy Liu CSC309F Fall 2007 1 2 Document Object Model (DOM) An defined application programming
More informationHell is other browsers - Sartre. The touch events. Peter-Paul Koch (ppk) WebExpo, 24 September 2010
Hell is other browsers - Sartre The touch events Peter-Paul Koch (ppk) http://quirksmode.org http://twitter.com/ppk WebExpo, 24 September 2010 The desktop web Boring! - Only five browsers with only one
More informationCSI 3140 WWW Structures, Techniques and Standards. Browsers and the DOM
CSI 3140 WWW Structures, Techniques and Standards Browsers and the DOM Overview The Document Object Model (DOM) is an API that allows programs to interact with HTML (or XML) documents In typical browsers,
More informationWeb Site Development with HTML/JavaScrip
Hands-On Web Site Development with HTML/JavaScrip Course Description This Hands-On Web programming course provides a thorough introduction to implementing a full-featured Web site on the Internet or corporate
More informationCSE 154 LECTURE 10: THE DOM TREE
CSE 154 LECTURE 10: THE DOM TREE The keyword this this.fieldname // access field this.fieldname = value; // modify field this.methodname(parameters); // call method JS all JavaScript code actually runs
More informationOverview. Event Handling. Introduction. Reviewing the load Event. Event mousemove and the event Object. Rollovers with mouseover and mouseout
Overview Introduction Reviewing the load Event Event mousemove and the event Object Rollovers with mouseover and mouseout Form processing with focus, blur, submit, reset More events Introduction The Document
More informationAJAX: The Basics CISC 282 March 25, 2014
AJAX: The Basics CISC 282 March 25, 2014 Synchronous Communication User and server take turns waiting User requests pages while browsing Waits for server to respond Waits for the page to load in the browser
More informationAJAX: The Basics CISC 282 November 22, 2017
AJAX: The Basics CISC 282 November 22, 2017 Synchronous Communication User and server take turns waiting User requests pages while browsing Waits for server to respond Waits for the page to load in the
More informationCOMP519 Web Programming Lecture 16: JavaScript (Part 7) Handouts
COMP519 Web Programming Lecture 16: JavaScript (Part 7) Handouts Ullrich Hustadt Department of Computer Science School of Electrical Engineering, Electronics, and Computer Science University of Liverpool
More information729G26 Interaction Programming. Lecture 4
729G26 Interaction Programming Lecture 4 Lecture overview jquery - write less, do more Capturing events using jquery Manipulating the DOM, attributes and content with jquery Animation with jquery Describing
More informationCSC Web Programming. JavaScript Browser Objects
CSC 242 - Web Programming JavaScript Browser Objects JavaScript Object Types User defined objects Native objects (Array, Math, Date, etc.) Host Objects provided by the browser The window object is a representation
More informationEvents: another simple example
Internet t Software Technologies Dynamic HTML part two IMCNE A.A. 2008/09 Gabriele Cecchetti Events: another simple example Every element on a web page has certain events which can trigger JavaScript functions.
More informationINLEDANDE WEBBPROGRAMMERING MED JAVASCRIPT INTRODUCTION TO WEB PROGRAMING USING JAVASCRIPT
INLEDANDE WEBBPROGRAMMERING MED JAVASCRIPT INTRODUCTION TO WEB PROGRAMING USING JAVASCRIPT ME152A L4: 1. HIGHER ORDER FUNCTIONS 2. REGULAR EXPRESSIONS 3. JAVASCRIPT - HTML 4. DOM AND EVENTS OUTLINE What
More informationJavaScript: Events, DOM and Attaching Handlers
JavaScript: Events, DOM and Attaching Handlers CISC 282 October 11, 2017 Keyboard and Text Events Name The User Must Applicable Elements blur remove focus , ,... focus apply focus , ,...
More information5/19/2015. Objectives. JavaScript, Sixth Edition. Using Touch Events and Pointer Events. Creating a Drag-and Drop Application with Mouse Events
Objectives JavaScript, Sixth Edition Chapter 10 Programming for Touchscreens and Mobile Devices When you complete this chapter, you will be able to: Integrate mouse, touch, and pointer events into a web
More informationB. V. Patel Institute of Business Management, Computer and Information Technology, UTU. B. C. A (3 rd Semester) Teaching Schedule
B. C. A (3 rd Semester) 03000308: Advanced Web Design Teaching Schedule Objective: To provide knowledge of advanced features of hypertext mark-up language in conjunction with client side framework to make
More informationTouch Forward. Bill Fisher. #touchfwd. Developing Awesome Cross-Browser Touch
Touch Forward Developing Awesome Cross-Browser Touch Interactions Bill Fisher @fisherwebdev #touchfwd Super F*cking Important yeah, it s important. http://commons.wikimedia.org/wiki/file:071228_human_hands.jpg
More informationSession 6. JavaScript Part 1. Reading
Session 6 JavaScript Part 1 Reading Reading Wikipedia en.wikipedia.org/wiki/javascript Web Developers Notes www.webdevelopersnotes.com/tutorials/javascript/ JavaScript Debugging www.w3schools.com/js/js_debugging.asp
More informationDOM Primer Part 2. Contents
DOM Primer Part 2 Contents 1. Event Programming 1.1 Event handlers 1.2 Event types 1.3 Structure modification 2. Forms 2.1 Introduction 2.2 Scripting interface to input elements 2.2.1 Form elements 2.2.2
More informationFundamentals of Website Development
Fundamentals of Website Development CSC 2320, Fall 2015 The Department of Computer Science Events handler Element with attribute onclick. Onclick with call function Function defined in your script or library.
More informationNew Perspectives on Creating Web Pages with HTML. Tutorial Objectives
New Perspectives on Creating Web Pages with HTML Tutorial 9: Working with JavaScript Objects and Events 1 Tutorial Objectives Learn about form validation Study the object-based nature of the JavaScript
More informationLECTURE-3. Exceptions JS Events. CS3101: Programming Languages: Javascript Ramana Isukapalli
LECTURE-3 Exceptions JS Events 1 EXCEPTIONS Syntax and usage Similar to Java/C++ exception handling try { // your code here catch (excptn) { // handle error // optional throw 2 EXCEPTIONS EXAMPLE
More informationLecture : 3. Practical : 2. Course Credit. Tutorial : 0. Total : 5. Course Learning Outcomes
Course Title Course Code WEB DESIGNING TECHNOLOGIES DCE311 Lecture : 3 Course Credit Practical : Tutorial : 0 Total : 5 Course Learning Outcomes At end of the course, students will be able to: Understand
More informationINDEX SYMBOLS See also
INDEX SYMBOLS @ characters, PHP methods, 125 $ SERVER global array variable, 187 $() function, 176 $F() function, 176-177 elements, Rico, 184, 187 elements, 102 containers,
More informationUNIT - III. Every element in a document tree refers to a Node object. Some nodes of the tree are
UNIT - III Host Objects: Browsers and the DOM-Introduction to the Document Object Model DOM History and Levels-Intrinsic Event Handling- Modifying Element Style-The Document Tree-DOM Event Handling- Accommodating
More informationCSC Javascript
CSC 4800 Javascript See book! Javascript Syntax How to embed javascript between from an external file In an event handler URL - bookmarklet
More information710 Index Attributes, 127 action attribute, 263 assigning, bottom attribute, domain name attribute, 481 expiration date attribute, 480 8
INDEX Symbols = (assignment operator), 56 \ (backslash), 33 \b (backspace), 33 \" (double quotation mark), 32 \e (escape), 33 \f (form feed), 33
More information20480C: Programming in HTML5 with JavaScript and CSS3. Course Code: 20480C; Duration: 5 days; Instructor-led. JavaScript code.
20480C: Programming in HTML5 with JavaScript and CSS3 Course Code: 20480C; Duration: 5 days; Instructor-led WHAT YOU WILL LEARN This course provides an introduction to HTML5, CSS3, and JavaScript. This
More informationSession 16. JavaScript Part 1. Reading
Session 16 JavaScript Part 1 1 Reading Reading Wikipedia en.wikipedia.org/wiki/javascript / p W3C www.w3.org/tr/rec-html40/interact/scripts.html Web Developers Notes www.webdevelopersnotes.com/tutorials/javascript/
More informationCE212 Web Application Programming Part 2
CE212 Web Application Programming Part 2 22/01/2018 CE212 Part 2 1 JavaScript Event-Handlers 1 JavaScript may be invoked to handle input events on HTML pages, e.g.
More informationDocument Object Model. Overview
Overview The (DOM) is a programming interface for HTML or XML documents. Models document as a tree of nodes. Nodes can contain text and other nodes. Nodes can have attributes which include style and behavior
More information8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2) What is JavaScript?
Web Development & Design Foundations with HTML5 Ninth Edition Chapter 14 A Brief Look at JavaScript and jquery Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of
More informationDocument Object Model (DOM)
Document Object Model (DOM) Mendel Rosenblum Browser JavaScript interface to HTML document HTML document exposed as a collection of JavaScript objects and methods The Document Object Model (DOM) JavaScript
More information1. Cascading Style Sheet and JavaScript
1. Cascading Style Sheet and JavaScript Cascading Style Sheet or CSS allows you to specify styles for visual element of the website. Styles specify the appearance of particular page element on the screen.
More information5. Strict mode use strict ; 6. Statement without semicolon, with semicolon 7. Keywords 8. Variables var keyword and global scope variable 9.
Javascript 1) Javascript Implementation 1. The Core(ECMAScript) 2. DOM 3. BOM 2) ECMAScript describes 1. Syntax 2. Types 3. Statements 4. Keywords 5. Reserved words 6. Operators 7. Objects 3) DOM 1. Tree
More informationWeb Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh
Web Programming and Design MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Plan for the next 5 weeks: Introduction to HTML tags, creating our template file Introduction to CSS and style
More informationJavaScript: The Definitive Guide
T "T~ :15 FLA HO H' 15 SIXTH EDITION JavaScript: The Definitive Guide David Flanagan O'REILLY Beijing Cambridge Farnham Ktiln Sebastopol Tokyo Table of Contents Preface....................................................................
More informationextc Web Developer Rapid Web Application Development and Ajax Framework Using Ajax
extc Web Developer Rapid Web Application Development and Ajax Framework Version 3.0.546 Using Ajax Background extc Web Developer (EWD) is a rapid application development environment for building and maintaining
More informationInteractor Tree. Edith Law & Mike Terry
Interactor Tree Edith Law & Mike Terry Today s YouTube Break https://www.youtube.com/watch?v=mqqo-iog4qw Routing Events to Widgets Say I click on the CS349 button, which produces a mouse event that is
More informationChapter 11 Objectives
Chapter 11: The XML Document Model (DOM) 1 Chapter 11 Objectives What is DOM? What is the purpose of the XML Document Object Model? How the DOM specification was developed at W3C About important XML DOM
More informationSections and Articles
Advanced PHP Framework Codeigniter Modules HTML Topics Introduction to HTML5 Laying out a Page with HTML5 Page Structure- New HTML5 Structural Tags- Page Simplification HTML5 - How We Got Here 1.The Problems
More informationWeb Development. With PHP. Web Development With PHP
Web Development With PHP Web Development With PHP We deliver all our courses as Corporate Training as well if you are a group interested in the course, this option may be more advantageous for you. 8983002500/8149046285
More information[MS-POINTER]: Microsoft Edge / Internet Explorer Pointer Events Standards Support Document
[MS-POINTER]: Microsoft Edge / Internet Explorer Pointer Events Standards Support Document Intellectual Property Rights Notice for Open Specifications Documentation Technical Documentation. Microsoft publishes
More informationUsing JavaScript for Client-Side Behavior
for Client-Side Behavior Internet Applications, ID1354 1 / 93 Contents The Document Object Model, The Browser Object Model, The JavaScript Library The JavaScript Framework 2 / 93 Section The Document Object
More informationSkyway Builder Web Control Guide
Skyway Builder Web Control Guide 6.3.0.0-07/21/2009 Skyway Software Skyway Builder Web Control Guide: 6.3.0.0-07/21/2009 Skyway Software Published Copyright 2009 Skyway Software Abstract TBD Table of
More informationCISC 1600 Lecture 2.4 Introduction to JavaScript
CISC 1600 Lecture 2.4 Introduction to JavaScript Topics: Javascript overview The DOM Variables and objects Selection and Repetition Functions A simple animation What is JavaScript? JavaScript is not Java
More informationThis course is designed for web developers that want to learn HTML5, CSS3, JavaScript and jquery.
HTML5/CSS3/JavaScript Programming Course Summary Description This class is designed for students that have experience with basic HTML concepts that wish to learn about HTML Version 5, Cascading Style Sheets
More informationAjax. Ronald J. Glotzbach
Ajax Ronald J. Glotzbach What is AJAX? Asynchronous JavaScript and XML Ajax is not a technology Ajax mixes well known programming techniques in an uncommon way Enables web builders to create more appealing
More informationSession 7. JavaScript Part 2. W3C DOM Reading and Reference
Session 7 JavaScript Part 2 W3C DOM Reading and Reference Background and introduction developer.mozilla.org/en-us/docs/dom/dom_reference/introduction en.wikipedia.org/wiki/document_object_model www.w3schools.com/js/js_htmldom.asp
More informationIndex. Boolean value, 282
Index A AJAX events global level ajaxcomplete, 317 ajaxerror, 316 ajaxsend, 316 ajaxstart, 316 ajaxstop, 317 ajaxsuccess, 316 order of triggering code implementation, 317 display list, 321 flowchart, 322
More informationJavaScript CS 4640 Programming Languages for Web Applications
JavaScript CS 4640 Programming Languages for Web Applications 1 How HTML, CSS, and JS Fit Together {css} javascript() Content layer The HTML gives the page structure and adds semantics Presentation
More informationCOURSE OUTLINE MOC 20480: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
COURSE OUTLINE MOC 20480: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3 MODULE 1: OVERVIEW OF HTML AND CSS This module provides an overview of HTML and CSS, and describes how to use Visual Studio 2012
More informationThe DOM and jquery functions and selectors. Lesson 3
The DOM and jquery functions and selectors Lesson 3 Plan for this lesson Introduction to the DOM Code along More about manipulating the DOM JavaScript Frameworks Angular Backbone.js jquery Node.js jquery
More informationUI Course HTML: (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) Introduction. The World Wide Web (WWW) and history of HTML
UI Course (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) HTML: Introduction The World Wide Web (WWW) and history of HTML Hypertext and Hypertext Markup Language Why HTML Prerequisites Objective
More informationTEXTAREA NN 2 IE 3 DOM 1
778 TEXTAREA Chapter 9DOM Reference TEXTAREA NN 2 IE 3 DOM 1 The TEXTAREA object reflects the TEXTAREA element and is used as a form control. This object is the primary way of getting a user to enter multiple
More informationWeb Programming Step by Step
Web Programming Step by Step Lecture 16 The DOM Tree Reading: 8.3, 9.1 Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller. Complex DOM manipulation
More informationForms, Form Events, and Validation. Bok, Jong Soon
Forms, Form Events, and Validation Bok, Jong Soon jongsoon.bok@gmail.com www.javaexpert.co.kr How to Access to Form In JavaScript, access forms through the Document Object Model (DOM). The first approach
More informationHTML User Interface Controls. Interactive HTML user interfaces. Document Object Model (DOM)
Page 1 HTML User Interface Controls CSE 190 M (Web Programming), Spring 2007 University of Washington Reading: Sebesta Ch. 5 sections 5.1-5.7.2, Ch. 2 sections 2.9-2.9.4 Interactive HTML user interfaces
More informationTizen Web UI Technologies (Tizen Ver. 2.3)
Tizen Web UI Technologies (Tizen Ver. 2.3) Spring 2015 Soo Dong Kim, Ph.D. Professor, Department of Computer Science Software Engineering Laboratory Soongsil University Office 02-820-0909 Mobile 010-7392-2220
More information[MS-DOM4]: Microsoft Edge / Internet Explorer DOM4 Standards Support Document
[MS-DOM4]: Microsoft Edge / Internet Explorer DOM4 Standards Support Document Intellectual Property Rights Notice for Open Specifications Documentation Technical Documentation. Microsoft publishes Open
More informationDOM Interface subset 1/ 2
DOM Interface subset 1/ 2 Document attributes documentelement methods createelement, createtextnode, Node attributes nodename, nodevalue, nodetype, parentnode, childnodes, firstchild, lastchild, previoussibling,
More informationXML: Introduction. !important Declaration... 9:11 #FIXED... 7:5 #IMPLIED... 7:5 #REQUIRED... Directive... 9:11
!important Declaration... 9:11 #FIXED... 7:5 #IMPLIED... 7:5 #REQUIRED... 7:4 @import Directive... 9:11 A Absolute Units of Length... 9:14 Addressing the First Line... 9:6 Assigning Meaning to XML Tags...
More informationThe course is supplemented by numerous hands-on labs that help attendees reinforce their theoretical knowledge of the learned material.
Lincoln Land Community College Capital City Training Center 130 West Mason Springfield, IL 62702 217-782-7436 www.llcc.edu/cctc WA2442 Introduction to JavaScript Objectives This intensive training course
More informationThe course also includes an overview of some of the most popular frameworks that you will most likely encounter in your real work environments.
Web Development WEB101: Web Development Fundamentals using HTML, CSS and JavaScript $2,495.00 5 Days Replay Class Recordings included with this course Upcoming Dates Course Description This 5-day instructor-led
More informationJavaScript Programming
JavaScript Programming Course ISI-1337B - 5 Days - Instructor-led, Hands on Introduction Today, JavaScript is used in almost 90% of all websites, including the most heavilytrafficked sites like Google,
More informationJAVASCRIPT BASICS. Handling Events In JavaScript. In programing, event-driven programming could be a programming
Handling s In JavaScript In programing, event-driven programming could be a programming paradigm during which the flow of the program is set by events like user actions (mouse clicks, key presses), sensor
More informationJavaScript CS 4640 Programming Languages for Web Applications
JavaScript CS 4640 Programming Languages for Web Applications 1 How HTML, CSS, and JS Fit Together {css} javascript() Content layer The HTML gives the page structure and adds semantics Presentation
More informationJavaScript Specialist v2.0 Exam 1D0-735
JavaScript Specialist v2.0 Exam 1D0-735 Domain 1: Essential JavaScript Principles and Practices 1.1: Identify characteristics of JavaScript and common programming practices. 1.1.1: List key JavaScript
More informationIntroduction to Automation. What is automation testing Advantages of Automation Testing How to learn any automation tool Types of Automation tools
Introduction to Automation What is automation testing Advantages of Automation Testing How to learn any automation tool Types of Automation tools Introduction to Selenium What is Selenium Use of Selenium
More informationJQuery WHY DIDN T WE LEARN THIS EARLIER??!
JQuery WHY DIDN T WE LEARN THIS EARLIER??! Next couple of weeks This week: Lecture: Security, jquery, Ajax Next Week: No lab (Easter) I may post a bonus (jquery) lab No quiz (yay!) Maybe a bonus one? Snuneymuxw
More informationJavaScript II CSCI 311 SPRING 2017
JavaScript II CSCI 311 SPRING 2017 Overview Look at more JavaScript functionality DOM slide show preloading images pull down menus and more! Document Object Model DOM gives us ways to access elements of
More informationCOMS W3101: SCRIPTING LANGUAGES: JAVASCRIPT (FALL 2018)
COMS W3101: SCRIPTING LANGUAGES: JAVASCRIPT (FALL 2018) RAMANA ISUKAPALLI RAMANA@CS.COLUMBIA.EDU 1 LECTURE-1 Course overview See http://www.cs.columbia.edu/~ramana Overview of HTML Formatting, headings,
More informationDATABASE SYSTEMS. Introduction to web programming. Database Systems Course, 2016
DATABASE SYSTEMS Introduction to web programming Database Systems Course, 2016 AGENDA FOR TODAY Client side programming HTML CSS Javascript Server side programming: PHP Installing a local web-server Basic
More informationIndex LICENSED PRODUCT NOT FOR RESALE
Index LICENSED PRODUCT NOT FOR RESALE A Absolute positioning, 100 102 with multi-columns, 101 Accelerometer, 263 Access data, 225 227 Adding elements, 209 211 to display, 210 Animated boxes creation using
More informationXML: Tools and Extensions
XML: Tools and Extensions Web Programming Uta Priss ZELL, Ostfalia University 2013 Web Programming XML2 Slide 1/20 Outline XML Parsers DOM SAX Data binding Web Programming XML2 Slide 2/20 Tree-based parser
More informationAn updated events syntax for XML-based markup languages
XHTML Events Module XHTML Events Module An updated events syntax for XML-based markup languages W3C Working Draft 21 December 1999 This version: http://www.w3.org/tr/1999/wd-xhtml-events-19991221 (Postscript
More informationPHP / MYSQL DURATION: 2 MONTHS
PHP / MYSQL HTML Introduction of Web Technology History of HTML HTML Editors HTML Doctypes HTML Heads and Basics HTML Comments HTML Formatting HTML Fonts, styles HTML links and images HTML Blocks and Layout
More informationjquery Cookbook jquery Community Experts O'REILLY8 Tokyo Taipei Sebastopol Beijing Cambridge Farnham Koln
jquery Cookbook jquery Community Experts O'REILLY8 Beijing Cambridge Farnham Koln Sebastopol Taipei Tokyo Foreword xi Contributors xiii Preface xvii 1. jquery Basics 1 1.1 Including the jquery Library
More informationWeb Design & Dev. Combo. By Alabian Solutions Ltd , 2016
Web Design & Dev. Combo By Alabian Solutions Ltd 08034265103, info@alabiansolutions.com www.alabiansolutions.com 2016 HTML PART 1 Intro to the web The web Clients Servers Browsers Browser Usage Client/Server
More informationLECTURE-2. Functions review HTML Forms. Arrays Exceptions Events. CS3101: Scripting Languages: Javascript Ramana Isukapalli
LECTURE-2 Functions review HTML Forms Arrays Exceptions Events 1 JAVASCRIPT FUNCTIONS, REVIEW Syntax function (params) { // code Note: Parameters do NOT have variable type. 1. Recall: Function
More informationCleveland State University Department of Electrical and Computer Engineering. CIS 408: Internet Computing
Cleveland State University Department of Electrical and Computer Engineering CIS 408: Internet Computing Catalog Description: CIS 408 Internet Computing (-0-) Pre-requisite: CIS 265 World-Wide Web is now
More informationskb2 Shaon Barman, Sarah Chasins, Ras Bodik UC Berkeley Sumit Gulwani Microsoft Research
skb2 Web Scripting for End Users Shaon Barman, Sarah Chasins, Ras Bodik UC Berkeley Sumit Gulwani Microsoft Research 1 Slide 1 skb2 I think the title should be changed since the project has expanded past
More information