Download JavaScript Exam Questions and Answers: Interactive Web Development and more Exams Advanced Education in PDF only on Docsity!
JAVASCRIPT EXAM QUESTIONS WITH
CORRECT ANSWERS
Web pages made with HTML and CSS display dynamic content. True or false? - Correct Answers -False: Web pages made with HTML and CSS display static content. Webpages can respond to user's actions: true or false? - Correct Answers -True What two languages make webpages more interactive? - Correct Answers -JavaScript and jQuery are used to make web pages interactive. JavaScript is a programming language used to create web pages that _____in response to ____ actions. - Correct Answers -JavaScript is a programming language used to create web pages that CHANGE in response to USER ACTIONS. jQuery is a collection of _______ _________code that lets us easily create interactive _______on our site - Correct Answers -jQuery is a collection of PREWRITTEN JAVASCRIPT code that lets us easily create interactive EFFECTS on our site To include JavaScript files in HTML, we use the ______ element. - Correct Answers -To include JavaScript files in HTML, we use the script element. E.g.
HERE HERE
The _____ element tells the browser where to find a JavaScript file. Give code example
- Correct Answers -The script element tells the browser where to find a JavaScript file. Example:
........... Explain the following code in HTML:
- Correct Answers -The first script loads in jQuery:
The second script loads in app.js. This is where the code for the program lives:
Explain the following: var main = function() { ..... } - Correct Answers -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); - Correct Answers -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); Explain line 2: 1 var main = function() { 2 $('.dropdown-toggle').click(function() { 3 $('.dropdown-menu').toggle(); 4 }); } - Correct Answers -First, the code SELECTS the .. 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();
jQuery enables us to do three main things on a web page...... - Correct Answers -1: Events. RESPOND to user interactions. 2: DOM Manipulation. MODIFY HTML ELEMENTS on the page. 3: Effects. Add animations. 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. - Correct Answers -var main = function() { } $(document).ready(main); Explain the following code: var main = function() {.......}; $(document).ready(main); - Correct Answers -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. Inside the main function, use jQuery to select the class 'icon-menu'. - Correct Answers - var main = function() { $('.icon-menu').click(function() {}); }; 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. - Correct Answers -var main = function() { 1: -> $('.icon-menu').click(function() { 2:-> $('.menu').animate({left: "0px"}, 200); }); }; 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); - Correct Answers -var main = function() { $('.icon-menu').click(function() { $('.menu').animate({left: "0px"}, 200); $('body').animate({left: "285px"}, 200); });
$(document).ready(main); 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. - Correct Answers -var main = function() { 1-> $('.icon-close').click(function() { 2-> $('.menu').animate({left: "-285px"}, 200); 3-> $('body').animate({left: "0px"}, 200); }); }; Write a variable called counter that holds integer 10 in JavaScript - Correct Answers - var counter = 10; Create two variables continaining values 1 and two and divide them. - Correct Answers -var score1 = 1; var score2 = 2; var result = score1/score2; Create a var named counter - Correct Answers -var counter; Set Sum equal to 15 and 12 - Correct Answers -var sum = 15+12; only double quotes (" ") can be used to write a string. True or False - Correct Answers - False; Single quotes (' ') or double quotes (" ") can be used to write a string e.g var tweet = "Hiking trip on Saturday"; The following will give errors: var score1 = 1; var score2 = 2; var result = score1/score2 - Correct Answers -True: ; missing on last line The following will give errors: var score1 = 1; var score2 = 2; var result = score1/score2; - Correct Answers -False: Compiles and runs fine Find the length of the string: var tweet = "Hiking trip on Saturday"; - Correct Answers -var tweet = "Hiking trip on Saturday"; tweet.length; What is the value of tweetlen?
__________ selects the whole web page. - Correct Answers -$(document) selects the whole web page. Explain the following code: 1: $(document).keypress(function() { 2: $('.dropdown-menu').toggle(); }); - Correct Answers -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. The ______ object contains more information about an event, such as which mouse button was clicked or which key was pressed - Correct Answers -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: $(document).keypress(function(event) { .................. }); - Correct Answers -$(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 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: } }); - Correct Answers -The event handler takes event as a parameter. Explain line 2-4: 1: $(document).keypress(function(event) { 2: if(event.which === 109) { 3: $('.dropdown-menu').toggle(); 4: } 5: }); - Correct Answers -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. write an event handler so that when an article class is clicked, make sure it's nested description class contents are shown - Correct Answers -$('.article').click(function() { $(this).children('.description').show(); }); write an event handler so that when an article class is clicked, it's description is hidden.
- Correct Answers -$('.article').click(function() {
$('.description').hide(); }); Use jQuery to select document - Correct Answers -$(document) Use jQuery to select document. Add a .keypress() method with a function inside. This function is called a keypress event handler. - Correct Answers -$ (document).keypress(function(event) {...}); explain the following code: $('.article').click(function() { $('.article').removeClass('current'); $('.description').hide(); $(this).addClass('current'); $(this).children('.description').show(); }); - Correct Answers -/event handler listens for articles clicked/ $('.article').click(function() { /remove 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(); }); explain each line of the following code: $(document).keypress(function(event) { if(event.which === 111) { $('.description').hide(); $('.current').children('.description').show(); } - Correct Answers -/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(); }
explain the following code: $('.btn').click(function() { $('').text('New item').prependTo('.items'); }); - Correct Answers -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 .. on the page. what's the difference between $('li') and $('')? - Correct Answers -The $(') function creates a NEW li ELEMENT. $('li') is used to select EXISTING li ELEMENTS on the page Use $( ) to select only the .. element. - Correct Answers -$ ('.pubdate'); Use $( ) to select the h2 element nested inside the .. element.
- Correct Answers -$('.article h2'); create a new p element and add the words "New Items" to it. Choose one of the following: A: $('p').text("New Items"); B: $('
').text('New Items'); C: $(
).text('New Items'); - Correct Answers -C: $(
).text('New Items'); 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: $().text('Empty List'); - Correct Answers -A: $('li').text('Empty List'); Get the text within header. Choose one of the following: A: $().text(); B: $('h1').text(); C: $('h1').getText(); - Correct Answers -B: $('h1').text(); Write code so when 'btn' button element is clicked the 'selected' element is deleted from webpage - Correct Answers -$('.btn').click(function() { $('.selected').remove(); }); Create a new li element and append it to the ul element. Choose one of the following: A: $().appendTo('ul'); B: $('').appendTo('ul'); C: $('').append('ul'); - Correct Answers -C: $('').appendTo('ul'); Select all p elements and remove them. Choose one of the following: A: $('
').remove();
B: $('p').delete(); C: $('p').remove(); - Correct Answers -C: $('p').remove(); 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 - Correct Answers -.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 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) - Correct Answers -var main = function () { $(".btn").click(function () { $(".read").hide(); }); }; 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'); - Correct Answers -C: $('ul').addClass('attribution'); 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(); - Correct Answers -A: $('p').hide(); Select the
..
Hello
and remove the class "description". Choose one of the following: A: $('description').removeClass('.description'); B: $('.p').remove('description'); C: $('.description').removeClass('description'); - Correct Answers -C: $ ('.description').removeClass('description'); Create a new li element with the class "author", and append it to the ul element. Choose:
$('').text(post); - Correct Answers -Use .prependTo('.posts') to prepend it to the .. element. var post = $('.status-box').val(); $('').text(post).prependTo('.posts'); Write JavaScript code to take text from status-box and post it into another 'post' class when the user clicks the post button 'btn' - Correct Answers -$('.btn').click(function() { var post = $('.status-box').val(); $('').text(post).prependTo('.posts'); }); Use jQuery to empty the 'status-box' class. - Correct Answers -$('.status-box').val(''); write to JQuery code to listen for when the user this is finger from the key having pressed on the btn - Correct Answers -$('.btn').keyup(function() { }); Write the JQuery code for getting the number of characters in '.status-box' - Correct Answers -$('.status-box' ).val().length; Update the '.counter' element to show the var curNum =140; - Correct Answers -var curNum =140; $('.counter').text(curNum ); write a JQuery to disable the button btn - Correct Answers -$ ('.btn').addClass('disabled'); write a JQuery to enable the button btn - Correct Answers -$ ('.btn').removeClass('disabled'); The JQuery ______ method shows the selected HTML element by sliding it down - Correct Answers -The .slideDown() method shows the selected HTML element by sliding it down Write JQuery called so that when you click in the page's body, the next image 'slide' down over 600 milliseconds. - Correct Answers -$('body').click(function() { $('.slide').slideDown(600).addClass('active-slide'); }); The _______method hides the selected HTML element by sliding it up. - Correct Answers -The .slideUp() method hides the selected HTML element by sliding it up. When you click in the page's body, the current image slides up over 600 milliseconds: $('body').click(function() { $('.slide').______(600).________('active-slide');
}); - Correct Answers -$('body').click(function() { $('.slide').slideUp(600).addClass('active-slide'); }); The ________ method shows the selected HTML element by fading it in. - Correct Answers -The .fadeIn() method shows the selected HTML element by fading it in. When you click in the page's body, the next image fades in over 600 milliseconds: $('body').click(______ { $('.slide').______(600)._____('active-slide'); }); - Correct Answers -$('body').click(function() { $('.slide').fadeIn(600).addClass('active-slide'); }); The _______ method hides the selected HTML element by fading it out. - Correct Answers -The .fadeOut() method hides the selected HTML element by fading it out. When you click in the page's body, the current image fades out over 600 milliseconds: $('body').click(______() { $('.slide').______(600).____('active-slide'); }); - Correct Answers -$('body').click(function() { $('.slide').fadeOut(600).addClass('active-slide'); }); What's the code to run the main() JavaScript function? - Correct Answers -$ ('document').ready(main); The _______ method lets you create your own custom animations. - Correct Answers - The .animate() method lets you create your own custom animations. use the animate method to set the width of the menu to 193 for a duration of 300 ms: $('.icon-menu').____(_____() { $('.menu')._____({ ___: "193px" }, ____); }); - Correct Answers -$('.icon-menu').click(function() { $('.menu').animate({ width: "193px" }, 300); }); This code will not compile. True or False? var main = new function() { };
Variable names must begin with ____ or ______ or ______ - Correct Answers -A letter or underscore _ or dollar sign $ Write to the screen hello world in JavaScript - Correct Answers - How can you explicitly identify JavaScript as your scripting language in your HTML internally - Correct Answers - How can you call external JavaScript code in your HTML? - Correct Answers - Write code to allow a page to continue to load without waiting for the script to load - Correct Answers - Write code for webpage viewers browsing without JavaScript - Correct Answers - JavaScript code here
no script code here You can place script between ____ tags and______tags only - Correct Answers -You can place script between tags and tags Use single var statement to declare multiple variables - Correct Answers -var one, two, three; Use single var standby to declare and initialise multiple var - Correct Answers -var one=1, two = 2, three =3; var volatile; will give a compile error. True or false - Correct Answers -True: volatile is a reserved JavaScript keyword var continues =3; will give a compile error. True or false - Correct Answers -False: continues is a valid valid variable name. However continue is a keyword in JavaScript JavaScript
var constant; will not give a compile error - Correct Answers -True: it is a valid variable name. const is a keyword and not a valid variable name var integer, double; will give a compile error. True or False - Correct Answers -False: integer and double are valid variable names. However int is a keyword and not a valid variable name yield, with, in, let, debugger are valid variable names. True or False - Correct Answers - False: all are keywords in JavaScript yields, within, ints, lets, debug are valid variable names. True or False - Correct Answers -True: All are valid variable names Javascript forces you to declare the type of a variable eg String one ="hello"; Double Two=10.0; True or False - Correct Answers -False: JavaScript dues NOT force you to declare the type of variable eg var one="hello"; var two=10.0; JavaScript does NOT require numbers to be declared as integers, floating point etc. True or False - Correct Answers -True The following will give compile error: var one='hello'; var two="world "; True or false - Correct Answers -False: Both single ' ' and double quotes " " pairs can be used for string values. The following will give compile error: var one='hello"; var two="world "; True or false - Correct Answers -True: matching pairs must be the same i.e. ' ' and/or " " Declare a variable pets that contains "dog cat bird" and has a tab between each word - Correct Answers -var pets="dog\tcat\tbird"; Declare a variable path that contains "c:\home\mab\sc" and prints the same to the screen - Correct Answers -var path="c:\home\mab\sc"; will print "c:\home\mab\src to screen Display "Hello World" in a paragraph on page with strong emphasis on Hello - Correct Answers -
HelloWorld
The following JavaScript code will print: Hamlet says, "to be, or not to be". document.write("Hamlet says, " to be, or not to be" "); True or false - Correct Answers -False: extra quotes at end will cause error. Placing shows fur under quotes to become part of the string document.write("Hamlet says, " to be, or not to be" ");
return result; } ..... /stores 35/ var curResult=sum (34, 1); What is function declaration hoisting? - Correct Answers -Where a JavaScript FUNCTION can be called ANYWHERE in JavaScript. Firstly JavaScript INTERPRETER will RUN through JavaScript CODE LOOKING for FUNCTIONS Name two advantages of placing JavaScript in external file as opposed to internally in header or body - Correct Answers -If JavaScript code (variables and functions etc) declarations placed in HEAD tags then it may need to use INFO from the DOCUMENT that may NOT be LOADED yet. If JavaScript code declared in BODY then DIFFICULT to MAINTAIN. Create a JavaScript alert to display "Warning!" - Correct Answers -window.alert ("Warning! "); How can you get an alert pop up window to assist once the page is loaded? - Correct Answers -Make sure the script is called just before the closing tag eg
Consider the following function: function checkBalance(num){ Window. alert( "Account "+ num+" balance is "+12345); } Then call checkBalance(); Will give error. True or False - Correct Answers -False: you can call function without its parameters. Will print undefined but will still run Explain variable declaration hoisting - Correct Answers -You can use a variable BEFORE it is declared eg x=5: window.alert(x); var x; Explain function declaration hoisting - Correct Answers -This is where a function is CALLED BEFORE it has been DECLARED eg walk(); function walk (){ } JavaScript INTERPRETER looks AHEAD at all variables and functions. If a variable or function was NOT DECLARED at all and it's called then there'll be errors
Write a function expression called write - Correct Answers -var write=function (){..}; It's DECLARED like an ANONYMOUS function. Used once off A function cannot be called before it is declared. True or fake - Correct Answers -False: JavaScript INTERPRETER scans FORWARD to inspect declarations Variable's can be used before they are declared. True or False - Correct Answers -True: JavaScript INTERPRETER scans FORWARD to inspect declarations The function expression can use function declaration hoisting? - Correct Answers - False: it's an anonymous function an only used once. Cannot execute until defined. Name ove benefit of anonymous function - Correct Answers -In EVENT handling eg button listener etc Name two drawbacks for having unused functions in your code? - Correct Answers -# DIFFICULT to MAINTAIN #2 INCREASES DOWNLOAD time for viewers A var declared globally can only be used in certain parts of your JavaScript code defined by its scope: True or False - Correct Answers -False: a global var can be called ANYWHERE in your code I.e. inside functions and any where else It's best to keep keep global variables to a minimum. True or False - Correct Answers - True: declaring global variables guess against the principals of REUSABILTY and COHESIVE code DESIGN An operator is a ___word in JavaScript that enables a certain ____ between values - Correct Answers -An operator is a KEYWORD in JavaScript that enables a certain CALCULATIONS between values Give 1 or more eg's of each of the following operators: #1 Arithmetic #2 Assignment #3 Comparison #4 Logical #5 Bitwise - Correct Answers -#1 Arithmetic: +,-,* #2 Assignment: = #3 Comparison: ===,>,< #4 Logical: && (AND) #5 Bitwise: << (Shift left) (Works at bit level zeros and ones) Name the operators and operands in the following code: var sum= 1+"two"+3; - Correct Answers -OPERATOR: + OPERANDS: 1, "two", 3
