- Introduction to the HTML Document and Uploading a Picture 2:39
- Editing Your HTML 2 objectives
- HTML Comments and JavaScript 2:08
- Changing Keywords 4 objectives
- Linking an External Style Sheet 2:15
- External Style Sheets 3 questions
- Background Color, Margin, and Padding 1:19
- Background Color, Margin, and Padding 3 objectives
- CSS Selectors 1:30
- CSS Selectors 3 questions
- What's JavaScript? 3:33
- What's JavaScript? 5 questions
- How to Get an Image Respectfully 2:46
- How to Get Images Legally on the Web 3 questions
Preview
Video Player
00:00
00:00
What's JavaScript?
3:33Learn about the JavaScript language and how it can help you make dynamic, interactive web pages.
There're three languages all web
developers have to learn.
0:00
You've already learned about two of them.
0:04
HTML and CSS.
0:07
And JavaScript is the third one.
0:08
To refresh, HTML defines the content of
the webpage and
0:11
CSS specifies the layout of the webpage.
0:15
JavaScript however,
0:19
is a dynamic programming language that
gives behavior to the webpage.
0:20
In this web app,
0:26
I wrote the JavaScript straight into our
HTML document, between these script tags.
0:28
Script tags are similar to the style tags
we used for CSS.
0:33
Only here, the script tags are where the
JavaScript starts and ends.
0:38
Using JavaScript to make a button work is
very common.
0:42
And you might wanna think about using
JavaScript like this in the future, for
0:46
websites and applications.
0:51
Script tags, like I said, hold JavaScript
code, and
0:53
are typically written at the bottom of the
body element, like you see here.
0:57
However, they can also be written in the
head element as well.
1:02
Similar to the CSS style tags.
1:06
In the future, we're gonna be separating
the JavaScript into an external page,
1:09
titled scripts.js and link it in the head
of our HTML.
1:14
Similar to how I've linked our CSS here.
1:18
Like HTML and CSS, JavaScript has a
specific anatomy as well.
1:23
And in this case,
1:29
function is the key word that tells the
browser you're going to begin a function.
1:30
A function is a reusable set of
instructions that does something.
1:36
In this case, the thing we want it to do,
is play a sound of the car starting.
1:41
Car start is the name of our function.
1:46
And between these parentheses, you can put
any inputs or
1:49
parameters your function takes.
1:53
In our case, there aren't any.
1:56
So we'll leave it empty.
1:58
Our function code is held between these
curly braces.
1:59
The code inside the curly braces is
sometimes called the body of the function.
2:03
Often, JavaScript is based on an event on
a page.
2:09
An event is something like clicking a
button, or making something move.
2:14
In our case, we're using a JavaScript
event to make something play a sound.
2:19
Meaning, that when you click on this link
up here,
2:25
it's going to start this JavaScript event
down here.
2:28
And it's gonna find this ID, which is an
audio file, and
2:32
it's gonna play that sound.
2:37
Just to review, when you click on the
button, it's going to call or
2:39
start the function, start car, which is
going to find the audio, start car.
2:44
And then it's going to play the start car
sound.
2:51
For each of these JavaScript events, you
can see I'm using the same format.
2:55
A button, an audio file, and a JavaScript
function.
2:59
Each of these are gonna work in the same
way,
3:05
to make one of our three pictures make a
sound.
3:07
There's a lot of new vocabulary to learn.
3:12
But don't worry.
3:14
There'll be many opportunities for you to
use these new features.
3:15
Now stay tuned for a quick quiz on what
JavaScript is, and how it works.
3:19
You've almost earned your JavaScript
badge.
3:24
So stay tuned for one more video and quiz
on how to get images legally on the web.
3:27
Good luck.
3:32