LECTURE #4: JQUERY AND FORM VALIDATION Josh Kaine Josh Kaine 4/1/2016

Intro ■Previous class we worked on using JavaScript to do validation of HTML forms. ■Today we're going to stick with form validation, but we're going to use jQuery instead. ■We'll use the same format as most classes: I'm going to walk through the basics of jQuery so that when you get to the lab you have enough information and perspective to dig in right away. 2

What is jQuery? ■jQuery is a JavaScript framework/library. ■jQuery expands and extends JavaScript, making development work more efficient in a number of different ways. ■jQuery is NOT a language, nor does it replace JavaScript. You still have all the base functions and syntax that come with JavaScript, but you get more and better tools. 3

Why use jQuery? ■jQuery provides a means of interacting with the pieces of your Web page in a manner similar to how we use CSS. –Makes for an easier learning curve for those already comfortable with HTML and CSS –Makes it easier to think about your Web page ■jQuery adds functions that simplify many tasks that have become basic when building interactive Web pages. 4

Why use jQuery? (cont) ■Code Sample #1 –JavaScript: var old_school = document.getElementById('input1').value; –jQuery: var new_school = $("#input1").val(); 5

jQuery – Basic Syntax ■Code Sample #1 – var new_school = $("#input1").val(); ■ var – Tells JavaScript that we're creating a variable ■ new_school – Name of the Variable ■ $() - Activates jQuery –Actually more complicated than this, but this is a good way to start thinking about it –In the jQuery API documentation, this piece is referred to as the "selector". 6

jQuery – Basic Syntax (cont) ■Code Sample #1 – var new_school = $("#input1").val(); ■ "#input1" - Tells jQuery what part of your page you're going to work with; in this case, the INPUT field with id="input1" ■.val() - The jQuery function we're applying to the INPUT field with id="input1" –In this case, we're asking the val() function to retrieve the text contained in the INPUT field with id="input1" 7

jQuery Functions ■Today we're going to focus on two groupings of jQuery functions: –HTML Functions – Retrieve and manipulate your Web page HTML and CSS –Event Functions – Monitor elements of your web page for specific actions, calling code when those actions occur ■Resources –Lab Handout – This has a list of all the jQuery functions you'll need for today's lab –jQuery API - –W3 Schools - 8

jQuery HTML Functions ■Read/Write - Most jQuery functions are designed to support the retrieval of information AND the changing of information, depending on how you call the function. ■Code Sample #2: var initialValue = $("#scary").val(); $("#scary").val("But Sharks are even more Scary"); 9

jQuery HTML Functions (cont) ■Code Sample #2: var initialValue = $("#scary").val(); $("#scary").val("But sharks are even more scary"); ■First line uses the val() function to grab the text from the INPUT field that uses ID="scary" ■The second line uses the val() function, but providing an argument tells jQuery to change the value of the INPUT field that uses ID="scary" 10

jQuery Event Functions ■Code Sample #3: $("#green").click(function() { $("#colorBox").css("background-color", "green").text("Green!"); }); ■ $("#green") - The selector (piece of the page) that we're going to work with ■. click() - The jQuery event function that we are binding to the selector ■ function(){ - Initiates the function that we want to run when the click() function is triggered 11

jQuery Event Functions (cont) ■Code Sample #3: $("#green").click(function() { $("#colorBox").css("background-color", "green").text("Green!"); }); ■ $("#colorBox") - The selector we want to alter as part of the function called by click() ■.css() - The jQuery function we're attaching to the selector ■ ("backround-color", "green") - The CSS key and value we're going to change ■.text("Green!") - Using jQuery's "chaining" feature, we're attaching a second change to the selector. 12

jQuery Event Functions (cont) ■Code Sample #4 $("#green").hover(function() { $("#colorBox").css("background-color", "green").text("Green!"); }); ■Only change is replacing the.click() function with the.hover() function 13

Why use jQuery? (part 2) ■Additional Benefits: –Cross-browser compatibility –Event triggers are removed from the HTML –Effects Functions – very fun stuff –jQuery Plugins –jQuery is built into most contemporary CMS (Content Management System; e.g. WordPress) 14

When to use jQuery? ■Whenever possible, assuming that you find it more friendly than base JavaScript ■Actually easier to answer the opposite question: When NOT to use jQuery? –When writing high-end and complex JavaScript tools –When adding jQuery to your application environment would cause problems: ■Creates conflicts with other JavaScript frameworks and libraries ■If your JavaScript needs to be able to run across multiple environments, some of which may not (easily) support jQuery 15

Adding jQuery to your page ■Step 1: Load the Library –Add it to your HTML pretty much like you would any JS file –For today's lab: –Code Sample #0 16

Adding jQuery to your page (cont) ■Step 1: Load the Library (cont) – Load local, or from a CDN (Content Delivery Network)? ■ CDN is preferred – Compressed vs. Full? ■ Compressed (Min) is preferred – Which version? ■ Most recent, unless an earlier version is required – Where to add it in the HTML? ■ Bottom of the page is preferred, though not always workable 17

Adding jQuery to your page (cont) ■Step 2: Create your.JS file –Start the same way you would create a regular.JS file to hold your JavaScript –IMPORTANT STEP: Wrap all your jQuery within a $(document).ready() statement: $(document).ready(function() { //jQuery code goes in here } –Code Sample #0 18

Adding jQuery to your page (cont) ■Step 3: Add your.JS file to your HTML file –Add it like you would another JS file: –Best Practice: Add it below the HTML that loads the jQuery library –Code Sample #0 19

Adding jQuery to your page (cont) ■IMPORTANT: Other Environments –Today's examples show the way to add jQuery to a basic HTML file. –When adding to other environments, you may have to use somewhat different placement and code. –Both Drupal and WordPress (recent versions) include jQuery as part of their core application, and they load it differently. ■You will need to make some environment-specific adjustments to your jQuery code, but it's all well documented; Google it. 20

Principals of Client-Side Validation ■Including this from last week as a reminder: –Client-side form validation is almost always about enhancing the user interface –Client-side form validation DOES NOT replace server-side validation 21

Vocabulary ■[insert per curriculum and lab] 22

Additional Resources ■[insert per curriculum and lab] 23