Getting started with jquery MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University

Transcription

1 Getting started with jquery MIS 2402 Konstantin Bauman Department of MIS Fox School of Business Temple University

2 Exam 2 Date: 11/06/18 four weeks from now! JavaScript, jquery 1 hour 20 minutes Use class workstations You can use Google Preparations: Read Book, do exercises and challenges

3 Objectives for today 1. Describe jquery. 2. Describe two ways to include the jquery library in your web pages. 3. In general terms, describe the use of jquery selectors, methods, and event methods. 4. Describe the syntax of a simple jquery selector. 5. Describe the use of the val and other methods. Slide 3

4 Linking to the jquery library How to include jquery after you ve downloaded it to your computer <script src="jquery min.js"></script> How to include jquery from a Content Delivery Network (CDN) <script src=" Pro tip! Knowing what a CDN URL is, and how to add one to your solution, is a powerful way to extend the options available to you, the programmer. Slide 4

5 jquery Described jquery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jquery is the most popular JavaScript library in use today. jquery is free, open-source software licensed under the MIT License. Initial release date: August 26, 2006; 12 years ago Created by American software engineer and entrepreneur, John Resig. John Resig is an alumni of the Rochester Institute of Technology. He was going to call it jselect, but that name was already taken. That would have been a *great* name, because selecting is a fundamental concept in jquery Slide 5

6 What jquery feels like to a first time programmer Why does it feel that way? Because the syntax of jquery is slightly different from that of a traditional imperative language. 1. jquery relies heavily on some things called selectors 2. In many cases, jquery abbreviates the syntax used in JavaScript. 3. jquery relies heavily on functions. We use the assignment operator (=) less often when writing jquery logic. Slide 6

7 The $ function in jquery It s a bit more complicated than this var $ = function(id) { return document.getelementbyid(id); } In fact, the source code for jquery v3.3.1 is 10,364 lines long. Stop a moment and reflect on that. Up until this slide, the function $ has taken one parameter (an id) and done one thing (return an element object). But now this is a game changer the $ function can do so much more. Slide 7

8 Remember this from last class? Step 1 Select some elements to work with Step 2 Take some action on each element With jquery we now have a new, simplified, two-step process. The basic structure of a jquery command is: $( some selector goes here ).SomeMethod(); 8

9 jquery selectors The syntax for a jquery selector $("selector") How to select elements by element, id, and class By element type: All <p> elements in the entire document $("p") By id: The element with faqs as its id $("#faqs") By class: All elements with minus as a class $(".minus") These are the simple selectors. What does this syntax remind you of? Slide 9

10 Some more advanced jquery selectors [attribute] [attribute=value] :contains(text) :empty :eq(n) :even :first :first-child :gt(n) :has(selector) :header :hidden :last :last-child :lt(n) :not(selector) :nth-child :odd :only-child :parent :text :visible We ll get a chance to use some of these (the ones in red) in our challenge today. The point here is not to try to memorize them all, but to understand that you have a wide variety of options when it comes to selecting content in the HTML document. Good, interactive, reference material can be found here: Slide 10

11 jquery methods The syntax for calling a jquery method $("selector").methodname(parameters) Some common jquery methods.val().val(value).html().html(value).append(value).next([type]).submit().focus() For the value of an input tag For the innerhtml of a node To move to the next element To initiate the form submit event To set the focus to an element Slide 11

12 More jquery methods More jquery methods.addclass("css class name").toggleclass("css class name").hide([speed in ms]).show([speed in ms]) Add a css class Toggle a css class Hide a tag (or tags) Show a tag (or tags) These methods and others like them can work on multiple elements. To put it another way, the jquery methods work on *all the elements* returned by a selector. (And you don t even need to write a loop to do it!) Slide 12

13 Examples of the val method How to get the value from a text box var gallons = $("#gallons").val(); How to set the value for an input element $("#gallons").val("30"); Notice that we are passing 30 into the value of the #gallons tag. We do that by passing an argument to the val method. We don t use the assignment operator ( = ) here! Let s see jquery at work! (see index_01.html and index_02.html in jquery_demo.zip) Slide 13

14 What about events? Slide 14

15 The syntax for a jquery event method $(selector).eventmethodname(function() { // the statements of the event handler }); Two common jquery event methods Event method ready(handler) click(handler) Description The event handler runs when the DOM is ready. The event handler runs when the selected element is clicked. Slide 15

16 Instead of window.onload now we have How to code an event handler for the ready event The long way $(document).ready(function() { alert("the DOM is ready"); }); The short way I will do it this way. $(function(){ // (document).ready is assumed alert("the DOM is ready"); }); Slide 16

17 It s time for some experiments! 1. In jquery_demo.zip, explore index_03.html and index_04.html a) Notice the use of selectors b) Notice the abbreviated syntax c) Notice how the assignment operator (=) less often when writing jquery logic 2. Then, begin challenge-jquery Slide 17