1 Using jQuery JavaScript & jQuery the missing manual (Second Edition)

2 Objectives You will be able to Describe what jQuery is and what it does. Use jQuery to hide browser dependencies in JavaScript scripts. Use jQuery in JavaScript to access and modify the DOM.

3 jQuery A JavaScript framework Extensive JavaScript script that provides a more abstract DOM API for client scripts. Hides browser differences. API works for all widely used browsers. Open Source Developed and maintained by volunteers Has emerged as the preeminent JavaScript framework. Supported by Microsoft

4 jQuery jQuery leverages the CSS selection syntax to identify DOM elements. Identify DOM elements for JavaScript functions the same way we identify them to apply CSS styles. Most web developers are familiar with CSS. More powerful and more concise API.

5 Adding jQuery to an App You can either Download jQuery and put a copy into your web site directory. OR Reference one of several Content Distribution Networks that support jQuery. Server downloads jQuery from the CDN at run time.

6 The Microsoft CDN

Scroll Down 7

8 Using jQuery As a demonstration of jQuery, we will modify the DOM positioning script from last week to use jQuery rather than the DOM API. Anything you can do one way you can do the other. But jQuery is often more convenient.

9 Using jQuery Create a new empty ASPX website called DOM_Positioning_jQuery Download to desktop final version of DOM_Positioning website from last week: Downloads/2016_03_31_DOM_Positioning/ Downloads/2016_03_31_DOM_Positioning/ File DOM_Positioning.zip Expand the.zip file

10 Using jQuery In Visual Studio, add existing item: Select all five files.

Initial Website 11 Set positioning.html as start page. Build and run.

12 Initial Website

13 Download jQuery

14 Download jQuery Download current version minified to website folder. Add to website

Add Existing Item 15

jQuery in Solution 16

17 Add jQuery to the Page Add tag to head as first script immediately after the title. <script language="javascript" type="text/javascript" src="jquery min.js" > The jquery file must be loaded before animate.js Update the title Positioning Elements with jQuery

18 positioning.html

19 Using jQuery We will modify the original JavaScript scripts to use jQuery In small steps. Understand each step! Build and test after each step.

20 animate.js Modify to use jQuery.

21 The jQuery $( ) $('#square') returns a jQuery object An array of JavaScript DOM node objects All nodes with ID square. There is only one. $('#square')[0] returns a reference to the first (and only) element of the array. In this case, a DOM element. Effect is the same as for sq = document.getElementById("square");

22 The jQuery $( ) $( ) is a JavaScript function call Shorthand for jQuery( ) A function defined in jQuery.js Everything we do with jQuery will have this form. The function returns a jQuery object. The object has properties and methods that we can use. $( ) takes a parameter that is identical to a CSS selector. If you know CSS, you already have a good start toward understanding jQuery!

23 Try it! Click these buttons to test our change.

24 Replace All getElementById("square")

25 Adding Content with jQuery The jQuery append() method adds its parameter value as the last child element of the selected element. Let's use this jQuery method in function modifySquareText. Comment out entire function and replace with this: function modifySquareText() { var new_text = "Blah, blah, blah "; $('#square').append(new_text); } Try it!

26 Adding Content with jQuery Click Change Text

27 Modified Square

28 Getting User Input in jQuery Select text input element. Use the jQuery val() method to get the input. Let's modify function modifySquareText to use jQuery val() to get user input from a textbox and add it to the text in the square. Add a textbox below the buttons. id = input_box

Add a Textbox 29

animate.js function modifySquareText() { $('#square').append($('#input_box').val()); // Clear the input box. $('#input_box').val(''); } 30 val without an argument gets the value val with an argument sets the value

App with Textbox 31 Enter some text and then click “Change Text”

User Input 32

33 After Change Text Clicked End of Section

34 Let the User Drag and Drop the Square We can handle MouseDown, MouseMove, and MouseUp events in order to implement drag and drop in JavaScript. Note: This is a simple example. In a real app we would typically do something in response to the drag and drop rather than just moving the object on the screen.

35 Drag and Drop Add a new JavaScript file to the website: drag_and_drop.js

36 Drag and Drop New tag in positioning.html head: <script language="javascript" type="text/javascript" src="drag_and_drop.js"> After jquery and before animate

37 drag_and_drop.js var dx, dy; // Set up when the page loads window.onload = Setup; function Setup() { $('#square').bind('mousedown', Start_Drag); } Note alternative to Avoid cluttering the HTML!

38 Drag and Drop in Progress Apps typically provide feedback to the user indicating that a drag and drop operation is in progress. Let's make the border red while the square is being dragged.

39 css() The jQuery css() method sets style attributes for jQuery objects. To set the border of the square red we can write: var sq = $('#square'); sq.css('borderColor', 'Red');

40 function Start_Drag() The argument passed to the event handler Start_Drag is a jQuery object. Its methods are the same for all browsers supported by jQuery. Eliminates the need for browser dependent code.

41 function Start_Drag function Start_Drag(e) { var mouse_x = e.pageX; var mouse_y = e.pageY; var sq = $('#square'); sq.css('borderColor', 'Red'); // Calculate x and y distances from mouse position // to upper left corner of the square. dx = mouse_x - sq[0].offsetLeft; dy = mouse_y - sq[0].offsetTop; // Set event handlers sq.bind('mousemove', Move); sq.bind('mouseup', Drop); sq.unbind('mousedown'); }

function Move // Track mouse movements function Move(e) { var new_mouse_x = e.pageX; var new_mouse_y = e.pageY; // Update position of the square var new_x = new_mouse_x - dx; var new_y = new_mouse_y - dy; var sq = $('#square'); sq.css('left', new_x); sq.css('top', new_y); } 42

43 function Drop function Drop() { var sq = $('#square'); sq.css('borderColor', 'black'); sq.unbind('mousemove'); sq.unbind('mouseup'); sq.bind('mousedown', Start_Drag); } Try it!

44 Internet Explorer 10

45 Cultural Issues The jQuery culture encourages the use of anonymous functions. Keep the namespace sparse. Avoid potential name conflicts. If a function is only used in one place use the function definition rather than a function name.

46 An Anonymous Function Try it! (It works the same.)

47 Chaining Many jQuery functions return a reference to a jQuery object. Can be used to perform another operation without doing a new selection.

48 Chaining css() At the end of Move() Instead of var sq = $('#square'); sq.css('left', new_x); sq.css('top', new_y); we can write $('#square').css('left', new_x).css('top', new_y);

49 Chaining bind() At the end of Start_Drag() $('#square').bind('mousemove', Move).bind('mouseup', Drop).unbind('mousedown'); At the end of Drop() $('#square').unbind('mousemove').unbind('mouseup').bind('mousedown', Start_Drag);

50 Different Browsers jQuery generally does a good job of hiding browser differences. BUT Always check your app in multiple browsers.

51 Chrome

52 Firefox

53 Safari

54 Summary jQuery makes DOM manipulations easier by hiding browser differences. More concise syntax than the DOM API. Leverages knowledge of CSS selectors.

55 References Documentation for the jQuery methods that we have used can be found in JavaScript & jQuery the missing manual and on the jQuery web site. append page bind page css page val page