Unit 2: jQueryLesson 2: Syntax and Structure

October 2, 2013

2

Lesson 2: jQuery and Javascript

Introduction to jQuery

Syntax and Structure Abstraction

Pictures, Video, and

Media

HTML and Forms

Search Engine

Optimization

Learning to Use CSS

Introduction to CSS

Reusing Code

3 Ways to Use CSS

Separation of Concerns

Launching Your Own Website

Lesson 1 Lesson 2 Lesson 3 Lesson 4

Lesson 8 Lesson 7 Lesson 6 Lesson 5

Lesson 9 Lesson 10 Lesson 11 Lesson 12

3

Recap from last time (I)

• jQuery is one of the fastest ways to bring movement to a webpage and have it come to life

• It’s easy to use because it’s not a programming language of its own; instead it is a library (a bunch of commonly used pieces of code), written in a programming language called Javascript

• To use jQuery, you don’t need to know Javascript (we will cover this in detail in Unit 3)

4

Recap from last time (II)

• Just as a French phrase book helps us understand common phrases without knowing individual words, jQuery helps us with common features without needing to understand Javascript

• jQuery takes the Javascript code needed to run each of these common features and packages them into some simple commands

5

Three benefits of jQuery over Javascript

1. Fewer mistakes – jQuery’s simple structure makes it easier to identify mistakes. Fewer mistakes means less time spent debugging!

2. Less code – jQuery often requires only a few lines of code in comparison to Javascript

3. Faster to learn – the intuitive structure makes for a more gradual learning curve. It’s one of the easiest ways to add movement to a webpage!

1

2

3

6

jQuery uses a consistent structure

• jQuery code is usually structured the same way – that’s what makes it easy to learn!

• So whether you want to zoom in on an image or make some text disappear, the structure of your code will probably be the same

• It may look confusing at first, but you’ll quickly get the hang of it after you have seen it a few times

1

7

jQuery structure and syntax (I)

jQuery code English translation

1

$(document).ready(function() {

$(pageElement).someEvent(function() {

$(thingToChange).someEffect();

});});

8

jQuery structure and syntax (II)

jQuery code English translation

When the document is ready, do the following:

1

$(document).ready(function() {

$(pageElement).someEvent(function() {

$(thingToChange).someEffect();

});});

9

jQuery structure and syntax (III)

jQuery code English translation

When the document is ready, do the following:

When someEvent happens to pageElement, do the following:

1

$(document).ready(function() {

$(pageElement).someEvent(function() {

$(thingToChange).someEffect();

});});

10

jQuery structure and syntax (IV)

jQuery code English translation

When the document is ready, do the following:

When someEvent happens to pageElement, do the following:

Make someEffect happen to thingToChange

1

$(document).ready(function() {

$(pageElement).someEvent(function() {

$(thingToChange).someEffect();

});});

11

jQuery structure and syntax (V)

jQuery code English translation

Syntax notes

$(element) means “select the element”

1

$(document).ready(function() {

$(pageElement).someEvent(function() {

$(thingToChange).someEffect();

});});

When the document is ready, do the following:

When someEvent happens to pageElement, do the following:

Make someEffect happen to thingToChange

12

jQuery structure and syntax (VI)

jQuery code English translation

Syntax notes

$(element) means “select the element”

$(element).action() means “do this action to the element”

1

When the document is ready, do the following:

When someEvent happens to pageElement, do the following:

Make someEffect happen to thingToChange

$(document).ready(function() {

$(pageElement).someEvent(function() {

$(thingToChange).someEffect();

});});

13

jQuery structure and syntax (VII)

jQuery code English translation

Syntax notes

$(element) means “select the element”

$(element).action() means “do this action to the element”

function() means “do the following”

1

When the document is ready, do the following:

When someEvent happens to pageElement, do the following:

Make someEffect happen to thingToChange

$(document).ready(function() {

$(pageElement).someEvent(function() {

$(thingToChange).someEffect();

});});

14

jQuery is a simpler version of Javascript (I)

• Let’s look at a live example. Say we want to have an alert pop up when the user clicks

Original page

After clicking the text, a popup appears

2

15

jQuery is a simpler version of Javascript (II)

jQueryJavascript

$(document).ready(function() { $('a').click(function() { alert('hello'); });});

var anchors =document.getElementsByTagName(“a”);for(var z =0; z < anchors.length; z++){ var elem = anchors[z]; elem.onclick = function(){ alert(“hello”); };}

• We can enable this behavior by using either jQuery or Javascript

• The effect of the two code snippets below is identical!

2

16

jQueryJavascript

$(document).ready(function() { $('a').click(function() { alert('hello'); });});

var anchors =document.getElementsByTagName(“a”);for(var z =0; z < anchors.length; z++){ var elem = anchors[z]; elem.onclick = function(){ alert(“hello”); };}

jQuery is a simpler version of Javascript (III)

• As you can see, parts of the code are the same, but the jQuery version removes a lot of the complexity that you get with Javascript

The code triggering the alert is identical

2

17

Translating jQuery into English (I)

$(document).ready(function() {

$('a').click(function() {

alert('hello'); });});

jQuery code English translation

Syntax notes

3

18

Translating jQuery into English (II)

$(document).ready(function() {

$('a').click(function() {

alert('hello'); });});

jQuery code English translation

Syntax notes

When the document is ready, do the following:

3

19

Translating jQuery into English (III)

$(document).ready(function() {

$('a').click(function() {

alert('hello'); });});

jQuery code English translation

Syntax notes

When the document is ready, do the following:

When the HTML element with an <a> tag is clicked, do the following:

3

20

Translating jQuery into English (IV)

$(document).ready(function() {

$('a').click(function() {

alert('hello'); });});

jQuery code English translation

Syntax notes

When the document is ready, do the following:

When the HTML element with an <a> tag is clicked, do the following:

Send an alert that says “hello”

3

21

Translating jQuery into English (V)

$(document).ready(function() {

$('a').click(function() {

alert('hello'); });});

jQuery code English translation

Syntax notes

When the document is ready, do the following:

When the HTML element with an <a> tag is clicked, do the following:

Send an alert that says “hello”

$(element) means “select the element”

3

22

Translating jQuery into English (VI)

$(document).ready(function() {

$('a').click(function() {

alert('hello'); });});

jQuery code English translation

Syntax notes

When the document is ready, do the following:

When the HTML element with an <a> tag is clicked, do the following:

Send an alert that says “hello”

$(element) means “select the element”

$(element).action() means “do this action to the element”

3

23

Translating jQuery into English (VII)

$(document).ready(function() {

$('a').click(function() {

alert('hello'); });});

jQuery code English translation

Syntax notes

When the document is ready, do the following:

When the HTML element with an <a> tag is clicked, do the following:

Send an alert that says “hello”

$(element) means “select the element”

$(element).action() means “do this action to the element”

function() means “do the following”

3

24

Translating jQuery into English (VII)

$(document).ready(function() {

$('a').click(function() {

alert('hello');

});

});

jQuery code English translation

When the document is ready, do the following:

When the HTML element with an <a> tag is clicked, do the following:

Send an alert that says “hello”

3

25

Translating jQuery into English (VII)

$(document).ready(function() {

$('a').click(function() {

alert('hello');

});

});

jQuery code English translation

When the document is ready, do the following:

When the HTML element with an <a> tag is clicked, do the following:

Send an alert that says “hello”

3

Original page Result after clicking

26

Summary (I)

• jQuery has three main benefits over Javascript:

1) Fewer mistakes 2) Less code 3) Faster to learn

• jQuery code has a consistent structure

jQuery code

$(document).ready(function() {

$(pageElement).someEvent(function() {

$(thingToChange).someEffect();

});});

27

Summary (II)

• jQuery has three main benefits over Javascript:

1) Fewer mistakes 2) Less code 3) Faster to learn

• jQuery code has a consistent structure

jQuery code English translation

$(document).ready(function() {

$(pageElement).someEvent(function() {

$(thingToChange).someEffect();

});});

When the document is ready, do the following:

When someEvent happens to pageElement, do the following:

Make someEffect happen to thingToChange

28

Summary (III)

$(document).ready(function() {

$('a').click(function() {

alert('hello');

});

});

jQuery code English translation

When the document is ready, do the following:

When the HTML element with an <a> tag is clicked, do the following:

Send an alert that says “hello”

29

Summary (IV)

$(document).ready(function() {

$('a').click(function() {

alert('hello');

});

});

jQuery code English translation

When the document is ready, do the following:

When the HTML element with an <a> tag is clicked, do the following:

Send an alert that says “hello”

Original page Result after clicking

30

What to do on your own

1. Go to URL to complete the Codecademy course online

2. Do the practice set on the material learned

3. Take the follow-up quiz to test your understanding