Files
The head loads before or after the body?
Before
Consider the following code snippet:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<h2>Favorite Foods</h2>
<ul>
<li>Mac n Cheese</li>
<li>Chocolate Cake</li>
</ul>
</body>
</html>
Which selectors will select all the li tag elements? (2 Possible Options)
$("li");
OR
var li = "li";
$(li);
Write an animation that will successfully change the width of all selected divs at the same time as the height is changed?
fast 200px by 200px
$("div").animate({width:"200px", height: "200px"}, "fast");
What is a Javascript library that makes DOM traversal, animations, and event handling much easier?
jQuery
JavaScript File names must be which of the following:
A. all lowercase
B. can include - or _
C. must end with .js
A. all lowercase
B. can include - or _
C. must end with .js
Consider the following code snippet:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<h2>Favorite Songs</h2>
<ul>
<li>Life is a Highway</li>
<li>How to Save a Life</li>
</ul>
</body>
</html>
Which of the following is the correct way to append a new favorite song to this list as a list item?
$("ul").append("<li>Bring Me To Life</li>");
Write an animation that will successfully change the width of all selected divs and then change the height?
fast 200px by 200px
$("div").animate({width:"200px"}, "fast");
$("div").animate({height: "200px"}, "fast");
Which of the following reasons is why we should use js files to store scripts?
A. Makes programs easier to read.
B. Allows programmers to reuse code more easily.
C. Reduces the amount of html that programmers have to write.
D. Improves asynchronous execution.
A. Makes programs easier to read.
B. Allows programmers to reuse code more easily.
True or False:
The order that external files are loaded affects their usability
True
A programmer writes the following html file:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script src = "file-a.js"></script>
<div></div>
<script src = "file-b.js"></script>
</body>
</html>
And includes the following code in the two .js files:
1.file-a.js:
$("div").css("background-color","green");
2.file-b.js:
$("div").css("border", "2px solid orange");
When this program is executed, what will the style of the div be?
The div will have an orange border.
What are the 3 other useful animation functions we learned?
.hide(speed) - hides an element on the webpage
.show(speed) - shows a hidden element
.toggle(speed) - hides or shows an element
Which of the following is an example of asynchronous execution?
A. When a website link is clicked, it brings the user to another webpage.
B. When a button is clicked, an animation occurs in the background while the user is still viewing and clicking around the website.
C. A user enters their email address in order to retrieve their password. They’re sent an email and receive a confirmation on the website once the email address is sent. The user is able to view their account information while they wait for confirmation.
D. A user uploads an image to a website. The webpage is only accessible after the image is uploaded.
B. When a button is clicked, an animation occurs in the background while the user is still viewing and clicking around the website.
C. A user enters their email address in order to retrieve their password. They’re sent an email and receive a confirmation on the website once the email address is sent. The user is able to view their account information while they wait for confirmation.
What is the acceptable industry standard formats to write a js file named "my file"? (2 Possible answers)
my_file.js
OR
my-file.js
A programmer writes the following HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div>
<h2>Facts about me:</h2>
<p>I am in high school.</p>
<p>I love WebDev!</p>
<p>We are the War Eagles.</p>
<p>This is not 7th period.</p>
</div>
</body>
</html>
What is the output to the console if they write the following script?
$("p").each(function(index, element){
console.log(index +". "+ $(element).text());
});
Write all of it out.
0. I am in high school.
1. I love WebDev!
2. We are the War Eagles.
3. This is not 7th period.
A programmer develops the following animation:
$(".element").animate({fontSize:"20px"}, "fast", function(){
$(".element").animate({opacity: .7},"fast");
alert("Animation Complete!");
});
Write the order in which this animation occurs. (3 steps)
1.The font size changes
2. The program alerts that the animation is complete
3. The opacity changes
Write a code segments will successfully add a click event to a button with the id "names" that prompts the user for their name?
$("#names").click(function(){
prompt("What is your name?");
});
A programmer has three js files they plan on using on their website: jquery.js, file-a.js, and file-b.js. file-b.js uses functions from jquery.js, and file-a.js uses functions from file-b.js.
What order should the programmer load these files on their HTML document?
A programmer writes the following HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div>
<h2>Facts about monkeys:</h2>
<p>They have unique fingerprints.</p>
<p>They are highly social.</p>
<p>They have diverse diets.</p>
<p>They are not tigers.</p>
</div>
</body>
</html>
What is the output to the console if they write the following script?
$("p").each(function(element, index){
console.log(index +". "+ $(element).text());
});
[object HTMLParagraphElement].
[object HTMLParagraphElement].
[object HTMLParagraphElement].
[object HTMLParagraphElement].
A programmer develops the following animation:
$(".element").animate({fontSize:"20px"}, "fast");
$(".element").animate({opacity: .7},"fast", function(){
alert("Animation Complete!");
});
Write the order in which this animation occurs. (3 steps)
1. The font size changes
2. The opacity changes
3. The program alerts that the animation is complete
$("selector").each(function(index, element){});
Which part represents the count during iteration?
index
$("selector").each(function(index, element){});