Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn about the JavaScript language and how it can help you make dynamic, interactive web pages.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up