[MUSIC]

Hi, everyone.

I'm Guil, a developer and JavaScript teacher here at Treehouse.

I'm really excited to teach you the basics of JavaScript.

JavaScript is a great first programming language to learn.

It's fun, versatile and you can use it in any web browser,

which means that you can get up and running doing useful things right away.

JavaScript started live as a simple scripting language intended to

add engaging interactive features to web pages.

However, JavaScript's grown into a powerful, general purpose programming

language that's used on nearly every website in the world.

And in all phases of development, from software to hardware,

making it one of the most in demand developer skills.

So it's a great time to be learning JavaScript.

Let me take you through some of the places you can find JavaScript,

then we'll jump into a quick programming example.

Developers have always used JavaScript to add fun and useful features to webpages.

The most common place you'll encounter JavaScript is on the web,

where it's used to create every thing from engaging photo, and video galleries,

like a pop up or scrolling gallery.

To complex animated experiences,

like this interactive photo gallery shaped like a disco ball.

With JavaScript, you can create immersive web experiences and

make ordinary web experiences like signing up at a site and

filling in a form more exciting and delightful.

You can even make games using HTML, CSS and JavaScript like in these examples.

Developers use JavaScript for more than just adding visual flair to a website.

Many of the world's top websites and apps use JavaScript for useful functionality.

For instance, web applications like Google Maps, Gmail, and

Google Docs depend on JavaScript.

Many tasks, like creating an email or document, titling a document and adding

numbers and calculations to a spreadsheet for example, are done using JavaScript.

One of the best part about getting started with JavaScript,

is that because it's implemented in a web browser,

you don't need additional tools or setup to get going.

Let me show you a fun example.

In fact, you can cut along if you like by launching the workspace with this video.

In the workspace, open the preview.js file located inside the JS folder.

Don't worry about what any of the code in this file means right now.

You'll learn more about what each part of this code does, and

have a chance to do lots of programming with JavaScript throughout the course.

This is a JavaScript file containing a short program that asks the user by name.

Hi, want to see something cool?

Then it replaces all the content on whatever webpage they're visiting with

a Welcome headline and an animated GIF.

First I'll replace the text inside these quotes with my name,

and now I'll run the script in the browser.

In fact, I'll try it on a live website.

A quick and easy way to run JavaScript is in the web browser's developer tools using

a tool called the JavaScript Console.

One way to open the console is with the keyboard shortcut CMD+OPTION+J on a Mac,

or CTRL+SHIFT+J on Windows.

You're going to use the console all throughout the course to run and

test JavaScript code, identify and

fix errors, as well as display messages from within your program.

The console lets you interact with the webpage you're currently on, so I can

try this script on just about any website by pasting this code into the console.

For instance, I'll run the script on the MDN web docs site,

which is one of the best resources on web technologies, just for fun.

I'll copy all the code from my file and

paste it into the console, then press Enter or Return.

We see a dialogue box pop up on the page that says Hi Guil,

want to see something cool?

I wanna click OK, everything on the page disappears.

The webpage's HTML, CSS, and JavaScript is replaced by the headline and an image.

And notice that this is only temporary.

When you refresh the browser, everything comes back.

I can make this script a little more useful and interactive by allowing

any user to enter their name into an input field and display it on the page.

I'll replace my name inside quotes with prompt, and

the message What is your name?

And let's see what this does.

I'll copy my updated code, then paste the code into the console, and press Enter.

Now a dialog box appears that asks, What is your name?

Or enter Guil and click OK, And

now the alert dialogue says, Hi Guil, want to see something cool?

When I click OK, again everything on MDN doc's page disappears and

gets replaced by the welcome headline and GIF.

Neat.

This is another advantage of learning JavaScript as your first programming

language.

You can get instant feedback in the browser with a minimal amount of

JavaScript code.

I'll refresh the page, now all the content is back.

And JavaScript isn't just limited to the web browser.

You can also use JavaScript outside of the browser, even on web servers.

For example, Node js is a popular choice for

writing JavaScript that runs on the server.

Node offers great performance and easily handles lots of simultaneous users.

It's a favorite of big companies like PayPal, LinkedIn and

Netflix who use Node to serve up at least some portion of their websites.

There are even complete desktop applications written in JavaScript.

For example, Slack, GitHub desktop, the Visual Studio,

Code Editor and Discord are all written with JavaScript.

You'll learn a whole lot more about Node JS in later courses, and

you'll need to study a lot and work hard to build the next Slack or Discord.

But the basics you're going to learn in this course will provide the foundations

for building complex user interfaces and

software that's usable by everyone on just about any device.

And with just the basics,

you can start using JavaScript in all sorts of fascinating in meaningful ways.