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.
<!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>
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:
............
, <script src="jquery.min.js"></script>
<script src="app.js"></script>
...........
Explain the following code in HTML:
<script src="jquery.min.js"></script>
<script src="app.js"></script> - Correct Answers -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>
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 <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 });
,} - Correct Answers -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 });
}; - Correct Answers -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();
Explain line 6:
1 var main = function() {
2 $('.dropdown-toggle').click(function() {
3 $('.dropdown-menu').toggle();
4 });
5 };
6 $(document).ready(main); - Correct Answers -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.
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); - Correct Answers -1 var main = function() {
->2 $('.dropdown-toggle').click(function() {
->3 $('.dropdown-menu').toggle();
4 });
5 };
->6 $(document).ready(main);
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. - Correct Answers -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.
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.
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.
<!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>
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:
............
, <script src="jquery.min.js"></script>
<script src="app.js"></script>
...........
Explain the following code in HTML:
<script src="jquery.min.js"></script>
<script src="app.js"></script> - Correct Answers -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>
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 <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 });
,} - Correct Answers -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 });
}; - Correct Answers -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();
Explain line 6:
1 var main = function() {
2 $('.dropdown-toggle').click(function() {
3 $('.dropdown-menu').toggle();
4 });
5 };
6 $(document).ready(main); - Correct Answers -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.
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); - Correct Answers -1 var main = function() {
->2 $('.dropdown-toggle').click(function() {
->3 $('.dropdown-menu').toggle();
4 });
5 };
->6 $(document).ready(main);
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. - Correct Answers -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.
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.
