What is Javascript?

Javascript is code used to make a website interactive or dynamic. What does dynamic mean? When you see an element of a website change (think of a drop-down menu, a Facebook notification, or a pop up add), this is done with Javascript. Javascript is important because it allows websites to change without re-loading the entire web page.

Sometimes Javascript code will appear nested in the HTML (most of the confusing parts of Facebook and Google source code are Javascript!), and other times it's contained in a separate link. Look for a tag that looks something like: <script src="...">, or just <script>.

Exercise 1

Below is some basic Javascript code that makes all of the <p> tags on the page disappear and reappear. Click the hide text button to make the text invisible, and click the “show text” button to make the text visible.

This is the javascript code to hide all <p> tags:

$('#hide_text').click(function() {
    $('p').hide();
})

This is the javascript code to show all <p> tags:

$('#show_text').click(function() {
    $('p').show();
})

How does it work?

This example has three different components.

1. $('#hide_text') selects all tags with the id "hide_text". You'll notice <button class="btn btn-default" id="show_text"> is the html for one of the buttons, which contains the code id="show_text"
2. .click(...) instructs the browser to wait until the user clicks on the selected element, in this case an element where id=”hide_text”
3. $('p').hide() instructs the browser to hide all <p> tags.

When we put it all together, we have a Javascript function that hides all <p> tags when the user clicks on a button with id=“hide_text”.

A quick note on selectors

• $('p') would select all <p> elements.
• $('#some_id') would select all elements where<... id="some_id">. This could be <p id="some_id"> or <h1 id="some_id">, etc.
• $('.some_class') would select all elements where<... class="some_class">. This could be <p class="some_class"> or <h1 class="some_class">, etc.

Exercise 2

Let’s add some of our own Javascript code to make all <h1> tags disappear. Copy and paste the following code snippet into the “Console” tab of the developer console. When you click hide text, all <h1> tags should disappear.

$('#hide_text').click(function() {
    $('h1').hide();
})

Now modify the above code to make <h1> elements reappear when you click show text

Exercise 3

Exercises 1 and 2 may seem a bit trivial, so now we’ll look at a more practical example. Let’s create a like button, and a counter that increments when the like button has been clicked.

like counter: 0

Here's the Javascript code:

 var likes = 0;
 $('#like').click(function() {
     likes += 1;
     $('#like_counter').text(likes);
 });

How does it work?

This function is a little more complex, but it contains the 3 basic elements we saw in the earlier examples.

1. $('#like') selects all tags with the id "like".
2. .click(...) instructs the browser to wait until the user clicks on the selected element, in this case an element where id=”like”
3. $('#like_counter').text(...) instructs the browser to change the text within elements that have id="like_counter"

Exercise 4

Now we’ll write a javascript function that changes the Like button to an Unlike button when the user has clicked it. Follow the steps to modify the code provided below.

1. Find the id="..." of the Like button and fill in the first $('...') function.
2. Use that same id="..." to fill in the next $('...') function. Why are the first and second $('...') functions the same?
3. Fill in the text('...') function.

$('...').click(function() {
    $('...').text('...');
});

Why does this matter?

Like HTML and CSS, Javascript code looks complex but is made from straightforward, understandable components. The important takeaway here is that Javascript code modifies HTML and CSS, which are both technologies that we already understand. While the examples covered on this web page only offer a brief introduction to Javascript, remember that we can add, remove, or modify any HTML element or CSS property!

Here are a few common Javascript examples:

Dropdown menu code:

$('.dropdown-toggle').dropdown()