Web Design. Lecture 7. Instructor : Cristina Mîndruță Site : Cristina Mindruta - Web Design

Size: px

Start display at page:

Download "Web Design. Lecture 7. Instructor : Cristina Mîndruță Site : https://sites.google.com/site/webdescm. Cristina Mindruta - Web Design"

Robert Norman
6 years ago
Views:

1 Web Design Lecture 7 Instructor : Cristina Mîndruță Site :

2 Select HTML elements in JavaScript Element objects are selected by a). id, b). type, c). class, d). shortcut properties, and e). CSS selector in HTML5 (Selectors API) queryselector() / queryselectorall() methods on Document, DocumentFragment and Element take a single string argument containing a CSS selector return: the first element that matches the selector / a static NodeList that represents all elements that match the selector. Examples\docs\HTML5SelectorsAPI.html 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 $().

3 jquery JQuery = JavaScript library that simplifies client-side java scripting, especially DOM manipulation and AJAX calls. Features: HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations Utilities for working with objects and arrays AJAX utilities for dynamically making HTTP requests Extendable with plugins

4 jquery Variants of accessing the jquery facilities: Download the jquery library from jquery.com <head> <script src="jquery min.js"></script> </head> Include jquery from a content distribution network (CDN) (ex. Google): <head> <script src=" </script> </head> Recommendation : Put jquery functions in a separate.js file and import it into HTML file.

5 Syntax Select (query)/create HTML elements and perform "actions" on them. $(selector).action() $( ul p ).addclass( highlight ); $(selector) - returns a JQuery object selector CSS syntax some own custom selectors : document, window, this HTML text (creates the HTML element(s) and returns representing JQuery object) Examples of actions: add content, edit HTML attributes and CSS properties, define event handlers, perform animations.

6 jquery() or $() global function (1) Select (query) HTML elements. jquery function jquery( selector [, context ] ) Accepts a string containing a CSS selector which is then used to match a set of elements. selector = a string containing a selector expression context = a DOM Element, Document, or jquery to use as context Default context : the DOM starting at the document root. Example : Find all inputs of type radio within the first form in the document. $( "input:radio", document.forms[ 0 ] ); returns jquery object jquery object can be assigned to a variable and reused later. Obs. A selection (jquery object) only fetches the elements that are on the page at the time the selection is made.

7 jquery function (2) Create HTML. jquery( html [, ownerdocument]) Creates DOM elements on the fly from the provided string of raw HTML. html = a HTML string ownerdocument = a document in which the new elements will be created. Default ownerdocument : the document into which the jquery library was loaded. Example : Append My new text to <body>. $( "<p id='test'>my <em>new</em> text</p>" ).appendto( "body" );

8 (3) The document ready handler. jquery function jquery( callback ) Binds a function to be executed when the DOM has finished loading. callback = the function to be executed Example : Callback function used to prevent ambiguities if other libraries that use $ sign too exist. jquery.noconflict(); // Restore $ to its original state; release it for use by other libraries jquery(function($) { // Set $ as a local alias for the jquery object // jquery code }); Discussion : In JS wait after all files (including all external resources like images, videos, etc) are loaded window.onload = function() {// code...}; Improvement in jquery - execute the code after the DOM is loaded jquery(document).ready(function() {// code...}); or jquery(function() {// code...}); Obs. No need for that if script code is placed just before the closing body tag (</body>)

9 Functions and methods jquery functions static methods, utility global functions: Examples : $.trim(somestring); Remove whitespaces from the beginning and the end of the string somestring. $.now(); A number representing the current time. $.each(myarray, somefunction); Call to the jquery function each() to invoke the function somefunction once for each element of the array myarray. jquery object methods operate on the set of elements which are represented by the jquery object. Example : $("a").each(somefunction) Call to the jquery() function to obtain a jquery object that represents all <a> (anchor) elements in the document. Then call the each() method of that jquery object to invoke the function somefunction once for each selected element.

10 Examples from book site: selectors Examples\docs\lab.selectors.html Examples\docs\lab.operations.html Refining and filtering selections $(s1).has(s2); $(s1).not(s2); $(s1).filter(s2); $(s1).first(); $(s1).eq(n); // elements that match s1 and have a descendent that matches s2 // elements that match s1 and do not match s2 // elements that match s1 and s2 // the first element that matches s1 // the n+1 element that matches s1 Pseudo-selectors that help find elements in forms: :input (selects all <input>, <textarea>, <select>, and <button> elements) :enabled, :disabled, :checked, :selected Form-specific elements according to their type: :password, :reset, :radio, :text, :submit, :checkbox :button, :image, :file

11 Method chaining Some methods return also a jquery object => method chaining idiom can be used for expressing sequences of operations (chain of method invocations as a single expression). Examples: // Find all headers, map to their ids, convert to an array and sort them $(":header").map(function(){ return this.id }).get().sort(); map() - passes each element in the matched set through a function, producing a new jquery object containing the return values. get() - retrieve the elements matched by the jquery object; returns an array. $("p.details").css("background-color", "yellow").show("fast"); css() - set one or more CSS properties for the set of matched elements and returns the same jquery object. $("#p1").slideup(2000).slidedown(2000).slideup(1000); What do you expect slideup() and slidedown() to return? $("div").find("p").addclass("highlight").end().css("border", "solid black 1px"); Calling end() in a method chain restores the set of matched elements to its previous state. Detalii la :

12 Interaction with HTML Methods for changing and manipulating HTML element content: get / set content : text([text]), html([html_text])- text content without/with HTML tags val([value])- values in form fields // JQuery code $(function(){ $("#b1").click(function(){alert("text: " + $("#i1").text());}); $("#b2").click(function(){alert("html: " + $("#i1").html());}); $("#b3").click(function(){alert("value: " + $("#i2").val());}); }); // HTML code <label id="i1">name: <input type="text" id="i2" value="student"></label> <button id="b1">text</button> <button id="b2">html</button> <button id="b3">value</button> ttps://api.jquery.com/text/,

13 Interaction with HTML Methods for changing and manipulating HTML attributes: get attribute : attr(attribute) set attribute value : attr(attribute, value) attr(attribute-value pairs) attr(attributename, function(index, oldvalue)) Function returns a computed new value. Useful for setting values on a set of elements. // JQuery code $(function(){ $("button").click(function(){ $("#test").attr({src:"sm2.png", width:"240", height:"320", align:"right"}); }); }); // HTML code <img src="sm1.png" id="test" width=420 height=420 border=0 align="left"> <button>change image</button> Examples\test_getSet.html

14 Interaction with HTML Methods for adding new content: append() - Inserts content at the end of the selected elements prepend() - Inserts content at the beginning of the selected elements after() - Inserts content after the selected elements before() - Inserts content before the selected elements $(selector). append( html_text) Methods for removing content: remove() - Removes the selected element (and its child elements) empty() - Removes the child elements from the selected element Examples\docs\IMG_attributes.html var newelem = $( html_text ); newelem.appendto(selector); or newelem.insertafter(selector);

Methods for manipulating CSS: Interaction with CSS addclass() - Adds one or more classes to the selected elements removeclass() - Removes one or more classes from the selected elements toggleclass()

15 Methods for manipulating CSS: Interaction with CSS addclass() - Adds one or more classes to the selected elements removeclass() - Removes one or more classes from the selected elements toggleclass() - Toggles between adding/removing classes from the selected elements css() - sets or returns one or more style properties for the selected elements Methods for working with dimensions: width() height() innerwidth() innerheight() outerwidth() outerheight() Examples\docs\dimensions.html

16 Interaction with HTML/DOM Moving through the DOM (traversing): parent(), parents(), parentsuntil() children(), find() siblings(), next(), nextall(), nextuntil() prev(), prevall(), prevuntil() first(), last(), eq() filter(), not()

17 Interaction with HTML/DOM jquery code compared to JS code examples JS code : var target = document.getelementbyid( "target" ); var newelement = document.createelement( "div" ); target.parentnode.insertbefore( newelement, target.nextsibling ); Using jquery : var target = document.getelementbyid( "target" ); var newelement = document.createelement( "div" ); $( target ).after( newelement ); Or even more simple : $( #target ).after( <div></div> );

18 Events and handlers: Events $(selector).event(function(){function code}) DOM event (click, dblclick, keypress, submit, load,...) $("button").click(function(){$(#test).hide();}); $("input").focus(function(){ $(this).css("background-color", "#cccccc");}); Examples\Events\adding.removing.handlers.html Examples\Events\hover.html To prevent jquery code to execute before document is fully loaded, use: $(document).ready(function(){ // jquery code }); OR $(function(){ // jquery code });

19 Effects Show / Hide elements and Toggle between showing and hiding elements: $(selector).show(speed,easing,callback) hide() or toggle() speed : duration of the effect ("slow", "fast", or milliseconds). callback : function to be executed after the animation completes. easing : the speed of the element in different points of the animation Slide and fade elements: $(selector).slidedown(speed,easing,callback) slideup() or slidetoggle() fadein() or fadeout() or fadetoggle() $(selector).fadeto(speed,opacity,callback) Examples\docs\lab.effects.html Animate elements: $(selector).animate({params},speed,callback); params : CSS properties to be animated. Examples\docs\custom.effects.html

20 JQuery Plug-ins Plug-in = module that adds new functionality. Use plug-ins ( examples at include them with a <script> element, after jquery itself has been previously included. Create plug-ins: use jquery.fn - prototype object for all jquery objects - to add functions that become jquery methods. Create new function: jquery.fn.mynewfct = function(...) {...; return this} Use new function: $("selector").mynewfct(...); // To avoid $ sign ambiguity define an anonymous function with one parameter named $ // and invoke the function with the jquery object as its argument. (function($) { // plug-in code }(jquery));

21 JQuery UI library Facilities: User interface widgets: autocompletion input fields, date pickers for entering dates, accordions and tabs for organizing information, sliders and progress bars for visually displaying numbers, and modal dialogs for urgent communication with the user. Make document element draggable, droppable, resizable, selectable, or sortable. New visual effects methods (including the ability to animate colors). New easing functions. Customizable download : build a custom download bundle that may reduce the page load times compared to the full jquery UI library. Prebuilt themes and the possibility to customize and download new themes. (need to include, into HTML code, the CSS file for the selected theme).

22 Bibliography Robin Nixon, Learning PHP, MySQL, JavaScript, and CSS, 4nd Edition A Step-by- Step Guide to Creating Dynamic Websites, Publisher: O'Reilly Media, 2015 David Flanagan, Java Script. The Definitive Guide. 6-th ed., O'Reilly 2011 Chapters: 18, 19 Bear Bibeault, Yehuda Katz, and Aurelio De Rosa, jquery in Action, 3rd Edition, Publisher: Manning Publications

Introduction. Part I: jquery API 1. Chapter 1: Introduction to jquery 3

Introduction. Part I: jquery API 1. Chapter 1: Introduction to jquery 3 Introduction xix Part I: jquery API 1 Chapter 1: Introduction to jquery 3 What Does jquery Do for Me? 4 Who Develops jquery? 5 Obtaining jquery 5 Installing jquery 5 Programming Conventions 8 XHTML and