- JavaScript Everywhere 6:20
- What to Expect 2:55
- JavaScript Everywhere Review 5 questions
- Display Messages with JavaScript 5:18
- Your First JavaScript Program 2:56
- Add JavaScript to HTML 6:58
- Debug JavaScript in the Console 5:52
- Adding Scripts and JavaScript Commands Review 6 questions
- JavaScript Practice Challenge 2:39
- JavaScript Challenge Solution 1:45
- Code Challenges and Getting Help
- Write JavaScript Statements 4 objectives
Preview
Video Player
00:00
00:00
JavaScript Practice Challenge
2:39Practice using JavaScript by writing a "self-destructing message" program.
You've learned what JavaScript is,
where it runs, and
0:00
how to use some of its built-in commands.
0:03
You've written JavaScript in the console,
even created and linked a JavaScript file.
0:05
Now, you're going to work on
a practice exercise on your own,
0:10
a challenge of sorts.
0:12
You'll do this periodically throughout
the course to give you opportunities to
0:14
practice and
help make what you've learned sink in.
0:17
Let's go over what you'll need to do.
0:20
You're going to practice using JavaScript
by writing a self-destructing message
0:22
program.
0:27
The page will display
a message with an alert
0:27
dialog warning us that
the message will self-destruct,
0:30
then it displays the series of alerts that
count down from three, to two, to one.
0:33
After that, the message on the page
gets replaced by the text, boom, and
0:39
Message destroyed!
0:44
Appears in the console.
0:45
Launch the workspace with this video
to access the starter files for
0:47
this challenge.
0:50
In the file script.js, you'll find the
instructions for this practice challenge.
0:51
The lines with the two backslashes
in front of the text are JavaScript
0:56
comments, and you'll learn more about
writing comments in a later video.
1:00
For now, just know that any characters
immediately following the two backslashes
1:03
until the end of the line are ignored
by the JavaScript engine.
1:08
You're going to use much of what you've
learned so far to write this program.
1:12
So let's go over the instructions.
1:16
First, you'll need to display an alert
dialog with the content, Warning!
1:18
This message will self-destruct in.
1:23
Then, display a 3...
1:26
2...
1:28
1...
1:29
Countdown, as shown in the demo,
using alert dialog boxes.
1:29
I have provided the line of JavaScript
to help you complete the next step.
1:37
You don't need to change this code or
worry about what any of it means for now.
1:41
As the comment says,
this statements selects the <h1> element
1:45
on the page and
replaces its text with BOOM!
1:50
Soon, you'll be a pro at working
with JavaScript code like this, but
1:55
don't worry about it for now.
1:58
Finally, after the message self destructs,
where it gets replaced with the text BOOM!
1:59
You'll need to display the text,
Message destroyed!
2:04
In the console.
2:08
I've already linked the script.js
file to index.html.
2:10
And feel free to customize the initial
message displayed between the h1
2:14
heading tags.
2:18
As you work through this
practice challenge,
2:19
keep in mind that you're not expected
to remember everything right away.
2:22
You can refer to any notes you've taken,
code that you've written so far, or
2:25
go back and review a video.
2:29
This challenge is a great way to
practice what you've learned so far.
2:31
So good luck, have fun.
2:35
And in the next video,
I'll show you my solution.
2:36