Presentation is loading. Please wait.

Presentation is loading. Please wait.

WHO STILL DOESN’T HAVE IT? UGCS. JQUERY AND THE DOCUMENT OBJECT MODEL PA 70b – Giordon Stark.

Similar presentations


Presentation on theme: "WHO STILL DOESN’T HAVE IT? UGCS. JQUERY AND THE DOCUMENT OBJECT MODEL PA 70b – Giordon Stark."— Presentation transcript:

1 WHO STILL DOESN’T HAVE IT? UGCS

2 JQUERY AND THE DOCUMENT OBJECT MODEL PA 70b – Giordon Stark

3 Table of Contents Brief History of JavaScript Abstracting Abstractions Diving Right In  Start with basic JavaScript  Understand the usefulness of libraries like jQuery Getting started with jQuery  How does it tie in with the DOM? In-Class Exercise

4 WHAT IN THE WORLD IS ECMASCRIPT? Brief History

5 What should we already know? At this point, we’ve familiarized ourselves with HTML and CSS.

6 What is JavaScript? HTML gave us the bones CSS gave us the skin and make-up JavaScript gives us the muscles to do things

7 … but I know Java? Java and JavaScript are completely different things Java is developed my Sun Microsystems (it is a programming language)

8 What is JavaScript? It’s a scripting language (not a markup language)  A lightweight programming language Adds interactivity to HTML pages Usually embedded into HTML pages in identical ways like CSS can be  Inline JavaScript  Internal JavaScript  External JavaScript Interpreted Language  It executes without previous compilation (just like PHP) It’s free (no license required)

9 Why is JavaScript awesome? It has simple syntax for beginners – but can come with a steep learning curve for experts It’s a reaction script – it can execute when something happens such as  Load, double click, click, focus, blur, drag, right click, enter, exit, scroll, mouse up, mouse down, key up, key down, key press, etc… Unlike PHP, CSS, and HTML – it can interact directly with elements in your DOM  It can alter attributes and values, the contents of an element, rearrange your DOM, move or copy elements around

10 Historical Grounds JavaScript is ECMAScript  Officially ECMA-262 Invented by Brendan Eich at Netscape  Found in all browsers since 1996 Standardized by the ECMA Organization in 1997  In the same idea as HTML is standardized with web drafts It’s currently being developed

11 LIKE HTML AND CSS, JAVASCRIPT HAS SPECIFIC SYNTAX Some Abstract Concepts

12 Inline (Obtrusive) JavaScript Inline JavaScript is a little bit confusing sometimes We mentioned it can react to events Inside HTML tags, it has a variety of attributes that you can find it in:  onclick, onblur, onfocus, onkeydown, onkeyup, etc…  List of all events: http://w3schools.com/jsref/dom_obj_event.asp http://w3schools.com/jsref/dom_obj_event.asp Within the HTML tag, we can do the following: What do you think it does?

13 JavaScript in the Look at the difference between the following: My First Web Page document.getElementById("demo").innerHTML=Date(); My First Web Page Why might these be different? (Hint: how does the DOM load – all at once, or line by line from top to bottom?)

14 JavaScript in the (Internal) function displayDate(element) { element.value = Date(); }

15 External JavaScript

16 WHY IS JQUERY USEFUL? Diving Right In

17 JavaScript Issues The biggest issue with JavaScript (that CSS used to have) is cross-browser implementations  Quite simply, everyone has their opinion of the best way to write and run code It is JavaScript that lent the name to “rich internet applications” or DOM-scripted applications and AJAX technologies  Because of it’s usefulness, it’s been forced to develop rather quickly and lots of client-side developers (including yours truly) had libraries of their own cut-and-paste snippets for specific things to make it work cross-browser  Example snippets: changing the contents of elements, referencing elements, CRUD with cookies, etc… [even the most basic things were different in different browsers – a headache]

18 jQuery – a library for all! This is where jQuery comes in – it standardizes the scripting by predefining a series of functions for you using object notation and handles cross-browser issues right off the bat  Supported and used by IBM, Netflix, Amazon, Dell, Best Buy, Twitter, Bank of America, Microsoft, Nokia (on their phones!) jQuery makes it easier for those who know HTML and CSS to select and run actions on elements without a steep learning curve

19 jQuery is Efficient Here are two code snippets that do the same thing var checkedValue; var elements = document.getElementsByTagName(‘input’); for (var n = 0; n < elements. Length; n++) { if(elements[n].type == ‘radio’ && elements[n].name == ‘someRadioGroup’ && elements[n].checked){ checkedValue = elements[n].value } What would this be in jQuery? var checkedValue = $(‘[name=“someRadioGroup”]:checked’).val();

20 jQuery is Unobtrusive Remember how simple CSS selectors make our HTML markup by moving all inline styles out? jQuery uses CSS selectors to achieve the same thing, but with inline JavaScript

21 jQuery is Unobtrusive Example from before: Becomes $(document).ready(function(){ $("#date").click(function(){ $(this).val( Date() ); });

22 jQuery uses CSS Selectors The jQuery wrapper! jQuery(selector) $(selector) What do you think this does?  $(‘p a’)  $(‘p:last-child’) And some actions (and chaining)  $(‘div.notLongForThisWorld’).hide();  $(‘div.notLongForThisWorld’).hide().addClass(‘removed’);

23 Careful! Real-time versus Static Note that jQuery acts on the page in real-time with CSS, yet the original HTML is never changed  This confuses some beginners in dealing with changed states of elements such as checkboxes. Suppose I want to select all checkboxes that were checked, you might do something like  $(‘input[type=checkbox][checked]’)  But alas, this only selects checkboxes which have the attribute checked in the HTML – but checking a checkbox changes its state to checked jQuery offers the solution of the :checked selector  $(‘input[type=checkbox]:checked’)

24 jQuery Selectors and Chaining jQuery selectors implicitly return an array of jQuery objects (each object points to an element) The following code is identical $(‘div.fillMeIn’).html(‘I have been filled in!’); var elements = $(‘div.fillMeIn’); for(var i=0;i { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.com/3740643/13/slides/slide_23.jpg", "name": "jQuery Selectors and Chaining jQuery selectors implicitly return an array of jQuery objects (each object points to an element) The following code is identical $(‘div.fillMeIn’).html(‘I have been filled in!’); var elements = $(‘div.fillMeIn’); for(var i=0;i

25 jQuery – Document Ready $(document).ready(function(){ // jQuery functions go here... }); Why?  Prevent jQuery code from running before the document is finished loading (ready)  This code could act on elements which don’t exist, and therefore don’t run (even if you look at the page and see it)  This is a type of bug that’s hard to identify because you can’t easily force the browser to load in your DOM line by line and watch how it executes  You think of “compiling” here as loading/refreshing a page, and seeing if the jQuery/JavaScript runs as expected

26 jQuery – Document Ready What is the difference between document.ready and window.onload?  DOM has been loaded –document.ready  Window has been loaded – window.onload

27 Creating HTML elements This concept is very simple (see the jQuery docs for reference later)  We can use functions $.insertBefore, $.before, $.insertAfter, $.after Example:  var myDiv = $(‘ Some div ’);  var myDiv = $(‘ ’).html(‘Some div’); How to insert it?  myDiv.insertAfter(selector);  $(selector).after(myDiv) And similarly with before

28 MORE COMPLICATED EXAMPLE Element Creation

29 Image Element $(' '), { src: 'images/little.bear.png', alt: 'Little Bear', title: 'I woof in your general direction', click: function(){ alert($(this).attr('title')); } }).css({ cursor: 'pointer', border: '1px solid black', padding: '12px 12px 20px 12px', backgroundColor: 'white' }).appendTo('body'); For more on HTML manipulation – you can check out http://www.w3schools.com/jquery/jquery_ref_html.asp http://www.w3schools.com/jquery/jquery_ref_html.asp

30 TO HELP WITH THE EXERCISES The jQuery Reference

31 The jQuery References Selectors  http://www.w3schools.com/jquery/jquery_ref_selectors.asp http://www.w3schools.com/jquery/jquery_ref_selectors.asp Events (click, hover, etc…)  http://www.w3schools.com/jquery/jquery_ref_events.asp http://www.w3schools.com/jquery/jquery_ref_events.asp Effects (hide, show, fade, animate, etc…)  http://www.w3schools.com/jquery/jquery_ref_effects.asp http://www.w3schools.com/jquery/jquery_ref_effects.asp HTML Manipulation  http://www.w3schools.com/jquery/jquery_ref_html.asp http://www.w3schools.com/jquery/jquery_ref_html.asp CSS Manipulation  http://www.w3schools.com/jquery/jquery_ref_css.asp http://www.w3schools.com/jquery/jquery_ref_css.asp AJAX (we’ll cover this with PHP)  http://www.w3schools.com/jquery/jquery_ref_ajax.asp http://www.w3schools.com/jquery/jquery_ref_ajax.asp Misc  http://www.w3schools.com/jquery/jquery_ref_misc.asp http://www.w3schools.com/jquery/jquery_ref_misc.asp

32 BECAUSE HANDS-ON LEARNING WAS NEVER MORE FUN! In-Class Exercises

33 Exercises These exercises will use the template.html page I’ve provided on my website.  Using the click element to hide things  Using the click element to alert and then prevent default behavior  Styling elements  Doing hovers  Etcetera (the sky is the limit, you make up suggestions)

34 IMPROVING YOUR WEBSITE! Homework

35 Improving your website By now, you will have received comments (and/or grades) on your homework assignments. If it is not up on ugcs.caltech.edu yet, put it up there when you get access  If you need help with this, ask us Use the time remaining in class or during the week to improve your HTML and CSS with my comments I’ve given you  If it was unclear about the purpose of your website, I may not have given you suggestions for changes which means your website needs a clearer focus If you have trouble implementing my suggestions, ask me – I can help fix or guide you here If you have nothing to change really – you can start adding in some layout actions with JavaScript and jQuery (like calculators or events)


Download ppt "WHO STILL DOESN’T HAVE IT? UGCS. JQUERY AND THE DOCUMENT OBJECT MODEL PA 70b – Giordon Stark."

Similar presentations


Ads by Google