Introduction to JavaScript

💡 The Concept

Web browsers can read three languages: HTML, CSS, and JavaScript. You have spent this course mastering the first two. This lesson gives you a first look at the third, JavaScript, and shows you that even without deep knowledge of the language, you can read it, modify it, and make it work for you.

What JavaScript Does

Each of the three web languages has a distinct role:

• HTML provides the structure and content of the page.
• CSS controls how the page looks.
• JavaScript adds interactivity: things that respond to what the user does.

There is some overlap. You can bold text with HTML’s <strong> tag even though that is really a style, and you can create simple animations with CSS alone. But when a page needs to respond to a click, show a popup, or update content without reloading, that is JavaScript’s job.

A Few Things to Know About JavaScript

JavaScript is not related to the Java programming language. The names are a coincidence. JavaScript uses camelCase instead of dashes between words. For example: getElementById() capitalizes the E, B, and I but not the g. JavaScript files end with .js.

Three Ways to Insert JavaScript

Just like CSS, JavaScript can be added to a page in three ways:

1. Embedded. Place JavaScript between <script> tags, added after the closing </footer> tag and before </body>. (This is like using <style> tags for embedded CSS.)
2. External. Link to a separate .js file: <script src="my-script.js"></script>. (This is like linking to an external .css file.)
3. Inline. Place JavaScript directly inside an HTML element as an event attribute, such as onclick.

onclick: Inline JavaScript

The onclick attribute is a common way to trigger JavaScript directly from an HTML element. When the user clicks the element, the JavaScript inside the quotes runs. Here is a simple example that changes the text of a paragraph:

<p id="content">JavaScript can change HTML content.</p>
<button type="button" onclick="document.getElementById('content').innerHTML = 'Hello JavaScript!'">Click Me!</button>

Breaking down what is happening in that JavaScript:

• document refers to the entire web page.
• getElementById('content') finds the element with id="content".
• innerHTML is the content between the element’s tags, in this case, the text of the paragraph.

JavaScript can also change CSS with the same pattern. This example changes the font size of an element when clicked:

<p id="size">JavaScript can change styles too.</p>
<button type="button" onclick="document.getElementById('size').style.fontSize='35px'">Click Me!</button>

Click the Result tab in the JSFiddle below to see both examples in action. Then switch to HTML to see the code.

onclick with a Conditional (if/else) and a Prompt

This example is a step more complex. It uses a JavaScript function, a popup prompt, and an if/else conditional. Click the Result tab and click “Try It”. First leave the name blank, then try entering your name.

The “Try It” button calls a function named myFunction(), which is defined in the <script> tags. Inside the function, a conditional checks what you typed and displays a different result depending on your answer.

JavaScript Frameworks

A framework is a JavaScript (or CSS) file you attach to your website that gives you access to a library of pre-built code. Instead of writing everything from scratch, you call a method that someone else already wrote. The most widely used JavaScript framework is jQuery, which is found on over 90% of websites that use JavaScript. Bootstrap, which you learned about in the previous lesson, depends on jQuery.

You attach jQuery to your page with a single script tag linking to an external file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Once jQuery is attached, you have access to short, powerful methods like fadeIn() and fadeOut() that would otherwise require many lines of plain JavaScript to write.

Try It Yourself

This exercise uses jQuery to fade an image in and out, and then you will add a third button on your own.

jQuery fadeIn and fadeOut

Click the Result tab and try both buttons. Then switch to the JS tab to see the jQuery code. fadeIn() and fadeOut() are jQuery methods, and the number in the parentheses is the duration in milliseconds (1,000 ms = 1 second).

Exercise: Add a Third Button

Now modify the JSFiddle yourself. To start, click the Edit in JSFiddle button in the top corner of the embedded fiddle above. That opens the full editor where you can make changes. Add a third button that both fades out and fades back in. Here is the jQuery you need. Type it in rather than copying and pasting, so you get practice reading JavaScript:

In addition to the jQuery, you also need to add a third button with a different class in the HTML. If you have errors, use the JSFiddle hints to resolve them. When finished, your JSFiddle should look like this:

❓ Frequently Asked Questions

★ Key Takeaways

JavaScript is the language that makes websites interactive. This lesson gave you your first look at what JavaScript can do and how it fits alongside HTML and CSS in the browser. Next up is Keyboard Shortcuts, a set of time-saving shortcuts that make writing code and working on your computer faster.

← Back to Special Topics Lessons

← Back to All Lessons

🎮 Lab: JavaScript Flappy Bird Game

Ready to put your JavaScript knowledge to work? In this lab you will customize a working Flappy Bird game — changing colors, adding a background image, and making it your own. Start the Flappy Bird Lab