JavaScript & JQuery

.click() method attaches an event handler to each button. Give an example of this code

$('.SOME-ELEMENT').click(function() { ......... });

Use $( ) to select the h2 element nested inside the <div class="article">..</div> element.

$('.article h2');

write an event handler so that when an article class is clicked, it's description is hidden.

$('.article').click(function() { $('.description').hide(); });

write an event handler so that when an article class is clicked, make sure it's nested description class contents are shown

$('.article').click(function() { $(this).children('.description').show(); });

Write code so when 'btn' button element is clicked the 'selected' element is deleted from webpage

$('.btn').click(function() { $('.selected').remove(); });

Use $( ) to select only the <li class="pubdate">..</li> element.

$('.pubdate');

Use $( ) to select all p elements on the page.

$('p');

Use jQuery to select document

$(document)

Explain the following code: $(document).keypress(function(event) { .................. });

$(document) selects the whole web page, and the .keypress() method attaches an event handler to document. Inside the body of the event, something happens when a key is pressed on the page

__________ selects the whole web page.

$(document) selects the whole web page.

Use jQuery to select document. Add a .keypress() method with a function inside. This function is called a keypress event handler.

$(document).keypress(function(event) {...});

Get the text within header. Choose one of the following: A: $(<h1>).text(); B: $('h1').text(); C: $('h1').getText();

B: $('h1').text();

Select all children of the ul element. Choose one of the following: A: $(ul).children(); B: $('ul').children(); C: $('.source');

B: $('ul').children();

The operator to compare value is A: ==? B: == C: === D: = E: ?=

C

Select the <p class="description">..</p> <p>Hello</p> and remove the class "description". Choose one of the following: A: $('description').removeClass('.description'); B: $('.p').remove('description'); C: $('.description').removeClass('description');

C: $('.description').removeClass('description');

Create a new li element and append it to the ul element. Choose one of the following: A: $(<li>).appendTo('ul'); B: $('<li>').appendTo('ul'); C: $('<li>').append('ul');

C: $('<li>').appendTo('ul');

Select all p elements and remove them. Choose one of the following: A: $('<p>').remove(); B: $('p').delete(); C: $('p').remove();

C: $('p').remove();

Select the ul element and add the class "attribution". Choose one of the following: A: $('ul').text('.attribution'); B: $('.attribution').appendTo('ul'); C: $('ul').addClass('attribution');

C: $('ul').addClass('attribution');

create a new p element and add the words "New Items" to it. Choose one of the following: A: $('p').text("New Items"); B: $('<p>').text('New Items'); C: $(<p>).text('New Items');

C: $(<p>).text('New Items');

The not equal to operator is A: !=== B: ===! C: != D: !==

D

The following will give errors: var score1 = 1; var score2 = 2; var result = score1/score2;

False: Compiles and runs fine

Web pages made with HTML and CSS display dynamic content. True or false?

False: Web pages made with HTML and CSS display static content.

JavaScript if statements and if/else blocks are different in syntax to Java. True or False

False: they are the same e.g. if( myName.length >= 7 ) { .......... } else { ....... }

only double quotes (" ") can be used to write a string. True or False

False; Single quotes (' ') or double quotes (" ") can be used to write a string e.g var tweet = "Hiking trip on Saturday";

Explain line 2: 1 var main = function() { 2 $('.dropdown-toggle').click(function() { 3 $('.dropdown-menu').toggle(); 4 }); }

First, the code SELECTS the <a class="dropdown-toggle">..</a> element. Next, the code CHECKS whether this HTML element has been CLICKED. If it has been clicked, the line of code inside the curly braces will run (Line 3-4)

Explain line 3: 1 var main = function() { 2 $('.dropdown-toggle').click(function() { 3 $('.dropdown-menu').toggle(); 4 }); }

If clicked, the dropdown menu will appear and if you click the mouse on the top of the drop down menu, it will disappear.

explain line 4: 1 var main = function() { 2 $(".dropdown-toggle").click(function() { 3 $(".dropdown-menu").show(); 4 }); };

If the drop down menu is clicked, it will not disappear remain permanently open. If you change a line 3 to the following JQuery statement and if you click the mouse on the top of the drop down menu, it will disappear. $(".dropdown-menu").toggle();

What two languages make webpages more interactive?

JavaScript and jQuery are used to make web pages interactive.

JavaScript is a _______ ______ used to add _______to a web page. jQuery _____ JavaScript syntax and makes it _____to build ______web pages that work across multiple browsers.

JavaScript is a PROGRAMMING LANGUAGE used to add INTERACTIVITY to a web page. jQuery SIMPLIFIES JavaScript syntax and makes it EASIER to build INTERACTIVE web pages that work across multiple browsers.

JavaScript is a programming language used to create web pages that _____in response to ____ actions.

JavaScript is a programming language used to create web pages that CHANGE in response to USER ACTIONS.

Representing nested tags in a HTML document as a UML like hierarchy structure is commonly referred to as _______

Representing nested tags in a HTML document as a UML like hierarchy structure is commonly referred to as Document Object Model (DOM).

what's the difference between $('li') and $('<li>') ?

The $('<li>) function creates a NEW li ELEMENT. $('li') is used to select EXISTING li ELEMENTS on the page

explain the following code: $('.btn').click(function() { $('<li>').text('New item').prependTo('.items'); });

The $() function creates a NEW li ELEMENT. Text is ADDED to the NEW li element. The li element is added as the FIRST ITEM inside <ul class="items"> .. </ul> on the page.

Explain the following code: $('.btn').click(function() { $('<li>').text('New item').appendTo('.items'); });

The $() function creates a NEW li ELEMENT. Text is ADDED to the NEW li element. The li element is added as the LAST ITEM inside <ul class="items"> .. </ul> on the page.

Explain line 6: 1 var main = function() { 2 $('.dropdown-toggle').click(function() { 3 $('.dropdown-menu').toggle(); 4 }); 5 }; 6 $(document).ready(main);

The $(document).ready() WAITS for the HTML document to LOAD completely before running the main() function. JavaScript should ONLY RUN AFTER the web page has LOADED completely in the browser - otherwise there wouldn't be any HTML elements to add interactivity to.

Explain the .appendTo() method with e.g.

The .appendTo() method adds HTML elements to the end of the selected element. e.g. $('.btn').click(function() { $('<li>').text('New item').appendTo('.items'); });

The _________method gets the children of the selected element.

The .children() method gets the children of the selected element. e.g. $('.article').children();

The __________method attaches an event handler to an HTML element so that it can respond to a keypress event.

The .keypress() method attaches an event handler to an HTML element so that it can respond to a keypress event.

The _______method gets the next sibling of the selected element.

The .next() method gets the next sibling of the selected element. e.g. $('.title').next();

The ______ method gets the previous sibling of the selected element.

The .prev() method gets the previous sibling of the selected element. e.g. $('.description').prev();

The .text() method does what?

The .text() method ADDS TEXT to an HTML ELEMENT.

The DOM is useful to represent _______ between elements, similar to a _______. e.g.______

The DOM is useful to represent RELATIONSHIPS between elements, similar to a FAMILY TREE. e.g. PARENT-CHILD-SIBLING(brother sister)

Explain the following: var main = function() { ..... }

The code starts with a JavaScript function called main(). A function is a set of INSTRUCTIONS that tells the computer to do something.

Explain the following: var main = function() { $('.dropdown-toggle').click(function() { $('.dropdown-menu').toggle(); }); } $(document).ready(main);

The code starts with a JavaScript function called main(): var main = function() {.....} A function is a set of INSTRUCTIONS that tells the computer to do something. The code uses jQuery to run the main() function once the web page has fully loaded: $(document).ready(main);

In line 1 the event handler takes event as a ________. 1: $(document).keypress(function(event) { 2: if(event.which === 109) { 3: $('.dropdown-menu').toggle(); 4: } });

The event handler takes event as a parameter.

The ______ object contains more information about an event, such as which mouse button was clicked or which key was pressed

The event object contains more information about an event, such as which mouse button was clicked or which key was pressed

Explain the following code in HTML: <script src="jquery.min.js"></script> <script src="app.js"></script>

The first script loads in jQuery: <script src="jquery.min.js"></script> The second script loads in app.js. This is where the code for the program lives: <script src="app.js"></script>

List the following JQuery control methods: _____() hides the selected HTML element _____() displays an element _____() alternates hiding and showing an element _____() adds a CSS class to an element _____() removes a class from an element _____() alternates adding and removing a class from an element

.hide() hides the selected HTML element .show() displays an element .toggle() alternates hiding and showing an element .addClass() adds a CSS class to an element .removeClass() removes a class from an element .toggleClass() alternates adding and removing a class from an element

explain each line of the following code: $(document).keypress(function(event) { if(event.which === 110) { var currentArticle = $('.current'); var nextArticle = currentArticle.next(); currentArticle.removeClass('current'); nextArticle.addClass('current'); } });

/*key press event listener */ $(document).keypress(function(event) { /*110 represents the n key */ if(event.which === 110) { /*get the currently click the article */ var currentArticle = $('.current'); /*to get the next article in the list below */ var nextArticle = currentArticle.next(); /*remove the old linked article above */ currentArticle.removeClass('current'); /*assign the current article the next article */ nextArticle.addClass('current'); });

explain each line of the following code: $(document).keypress(function(event) { if(event.which === 111) { $('.description').hide(); $('.current').children('.description').show(); }

/*key press event listener */ $(document).keypress(function(event) { /*111 represents the key o */ if(event.which === 111) { /*hide the previous description */ $('.description').hide(); /* get the newly clicked item and show description */ $('.current').children('.description').show(); }

identify three mistakes to make code work: 1 var main = function() { 2 $('.dropdown-toggle').click() { 3 ('.dropdown-menu').toggle(); 4 }); 5 }; 6 (document).ready(main);

1 var main = function() { ->2 $('.dropdown-toggle').click(function() { ->3 $('.dropdown-menu').toggle(); 4 }); 5 }; ->6 $(document).ready(main);

What is the value of tweetlen? var tweet = "trip"; var tweetlen = tweet.length;

4

explain the following code: $('.article').click(function() { $('.article').removeClass('current'); $('.description').hide(); $(this).addClass('current'); $(this).children('.description').show(); });

<!-- event handler listens for articles clicked --> $('.article').click(function() { <!--remove the previous left clicked item as the current article--> $('.article').removeClass('current'); <!-- hide it's description--> $('.description').hide(); <!--assign the current left clicked item as the current article--> $(this).addClass('current'); <!--show the current left clicked article description--> $(this).children('.description').show(); });

A ____ _____ occurs when a user clicks on an HTML element.

A click event occurs when a user clicks on an HTML element.

Select all children of the <div class="article">..</div> element. Choose one of the following: A: $('.article').children(); B: $('h2 ul p'); C: $('li').text('children');

A: $('.article').children();

Create a new li element with the class "author", and append it to the ul element. Choose: A: $('<li>').addClass('author').appendTo('ul'); B:$('ul').appendTo('<li>').addClass('author') C: $('li').addClass('.author').appendTo('<ul>')

A: $('<li>').addClass('author').appendTo('ul');

Select li elements and replace text with "Empty List". Choose one of the following: A: $('li').text('Empty List'); B: $(li).text('Empty List'); C: $(<li>).text('Empty List');

A: $('li').text('Empty List');

Select all p elements on the page and hide them. Choose one of the following: A: $('p').hide(); B: $('.description').removeClass('p'); C: $('.p').hide();

A: $('p').hide();

Explain line 2-4: 1: $(document).keypress(function(event) { 2: if(event.which === 109) { 3: $('.dropdown-menu').toggle(); 4: } 5: });

event which contains which key was pressed. Keyboard keys are identified by KEY CODES. The m key is identified by the key code 109. Therefore, if the m key is pressed, the dropdown menu is toggled.

jQuery is a collection of _______ _________code that lets us easily create interactive _______on our site

jQuery is a collection of PREWRITTEN JAVASCRIPT code that lets us easily create interactive EFFECTS on our site

Write a variable called counter that holds integer 10 in JavaScript

var counter = 10;

Create a var named counter

var counter;

I wish to hide the highlighted list element by clicking on btn Hide. Write JScript for this [Hide]<- Hide 'btn' element [Item 1: Food]<-currently highlighted by 'read' element)

var main = function () { $(".btn").click(function () { $(".read").hide(); }); };

Use jQuery to select the body HTML element, animate it, and move it left 285px over 200 milliseconds. in Following: var main = function() { $('.icon-menu').click(function() { $('.menu').animate({left: "0px"}, 200); ---CODE HERE-- }); }; $(document).ready(main);

var main = function() { $('.icon-menu').click(function() { $('.menu').animate({left: "0px"}, 200); $('body').animate({left: "285px"}, 200); }); }; $(document).ready(main);

Inside the main function, use jQuery to select the class 'icon-menu'.

var main = function() { $('.icon-menu').click(function() {}); };

1: Use jQuery to select the '.icon-close' element. Add the .click() method. 2: use .animate() to change the left offset of the menu to -285px, and the (3:) left offset of the body to 0px. Both are done over 200 milliseconds.

var main = function() { 1-> $('.icon-close').click(function() { 2-> $('.menu').animate({left: "-285px"}, 200); 3-> $('body').animate({left: "0px"}, 200); }); };

1: Add a function inside the .click() method and select the 'menu' class and animate it. 2: move it 0px to the left and make this happen over 200 milliseconds.

var main = function() { 1: -> $('.icon-menu').click(function() { 2:-> $('.menu').animate({left: "0px"}, 200); }); };

1: Inside the app.js file, use the keyword var and create a function called main. 2: Leave the function's code block empty 3: Use jQuery to run the main function once the web page has fully loaded.

var main = function() { } $(document).ready(main);

Create two variables continaining values 1 and two and divide them.

var score1 = 1; var score2 = 2; var result = score1/score2;

Set Sum equal to 15 and 12

var sum = 15+12;

1: Write a function called sum that takes in two values, adds them and returns the result. 2: Call the function sum with two values 1 and 2 3: store it in another var result

var sum= function(num1, num2) { var result = num1+num2; return result; }; var result = sum(1,2);

Find the length of the string: var tweet = "Hiking trip on Saturday";

var tweet = "Hiking trip on Saturday"; tweet.length;

Explain the following code: var main = function() {.......}; $(document).ready(main);

The main function is where we'll write our program. The $(document).ready runs the main function as soon as the HTML document has loaded in the browser.

The _____ element tells the browser where to find a JavaScript file. Give code example

The script element tells the browser where to find a JavaScript file. Example: ............ <script src="jquery.min.js"></script> <script src="app.js"></script> ...........

To include JavaScript files in HTML, we use the ______ element.

To include JavaScript files in HTML, we use the script element. E.g. <!doctype html> <html> <head> <link href="style.css" rel="stylesheet"> </head> <body> HERE<script src="jquery.min.js"></script> HERE<script src="app.js"></script> </body> </html>

Webpages can respond to user's actions: true or false?

True

The following will give errors: var score1 = 1; var score2 = 2; var result = score1/score2

True: ; missing on last line

User interactions with a web page are called ______.

User interactions with a web page are called events.

Explain line 2: 1 $('.social li').click(function() { 2 $(this).toggleClass('active'); 3 });

We use $(this) to refer to the HTML element that was clicked on. We can now operate on this element using .toggleClass(). $(this).toggleClass('active'); turns on the button

Explain the following code: 1: $(document).keypress(function() { 2: $('.dropdown-menu').toggle(); });

1: $(document) selects the whole web page. The .keypress() method attaches an event handler to document. 2: When any keyboard key is pressed, the event handler toggles the dropdown menu.

jQuery enables us to do three main things on a web page......

1: Events. RESPOND to user interactions. 2: DOM Manipulation. MODIFY HTML ELEMENTS on the page. 3: Effects. Add animations.

explain the two main uses of $( )

1: SELECT EXISTING HTML ELEMENTSon the page. e.g. $('p') selects all p elements on the page. 2: To CREATE NEW HTML ELEMENTS to ADD to the page. e.g. $('<h1>') creates a new h1 element. The < > indicates that we want to create a new HTML element.