# Tech Tuesday: Javascript By [Albert's Import](https://paragraph.com/@albertsimport) · 2012-03-20 tech tuesday, web, javascript --- The topic of last week’s [Tech Tuesday](http://continuations.com/tagged/tech_tuesday) was [CSS](http://continuations.com/post/19232533977/tech-tuesday-css), which determines the look and feel of the content of a web page (where the content itself is described in [HTML](http://continuations.com/post/18844862921/tech-tuesday-html)).  Today we will learn about [Javascript](http://en.wikipedia.org/wiki/JavaScript), which is a programming language that lets us control the behavior of the web page (both by itself and in reaction to what the user does).  Together HTML, CSS and Javascript determine what a [web browser](http://continuations.com/post/18434175219/tech-tuesday-web-browser-part-1) does in Steps 7 and 8 of the [web cycle](http://continuations.com/post/15615918569/tech-tuesday-how-the-web-works-overview). What is a programming language?  It is a language that lets us [tell a computer what to do](http://continuations.com/post/13823734190/tech-tuesday-programming-a-start) which is really all that programming is.  Javascript was originally developed specifically for telling a web browser what to do, but it is a completely general programming language and has more recently been used to program [servers](http://continuations.com/post/18011033249/tech-tuesday-web-servers). Let’s jump into a simple example that will allow us to illustrate the basic idea.  Say we have a web page with a list of headlines.  For each headline we also have a summary of the story but we only want to show that when someone clicks on the headline so that we can show more headlines and make the page less cluttered.  Now we could make each headline a link and set off [a web request cycle](http://continuations.com/post/15615918569/tech-tuesday-how-the-web-works-overview) to go to a new page for that headline but that would be slow and clumsy.  As an alternative we could put the headlines at the top of the page and the summaries below and use [URLs](http://continuations.com/post/16004201409/tech-tuesday-anatomy-of-a-url) with [fragment identifiers](http://en.wikipedia.org/wiki/Fragment_identifier) to jump to the summary but that too would make the page scroll around like crazy. With Javascript we have another alternative.  We can keep each summary below its headline but have the summary be hidden and show it only when someone clicks on the headline.  How would that work?  Let’s first take a look at how we might structure the HTML, i.e. the content itself: First Headline Goes Here ======================== First summary goes here Second Headline Goes Here ========================= Second summary goes here This looks very similar to the [HTML](http://continuations.com/post/18844862921/tech-tuesday-html) we have seen with some extra attributes thrown in which we will use in a second.  In order to keep the summaries hidden when the page first loads, we will use some CSS as follows .summary { display: none } The .summary is a [CSS selector](http://css.maxdesign.com.au/selectutorial/selectors_class.htm), that picks out all the elements on the page that have the class=“summary” attribute set.  By styling these elements with “display: none” we get the web browser not to display them.  But they are still part of the HTML and so they are sitting right there on the page, just not visible. Now we need to sprinkle on a tiny bit of Javascript to let us make a summary visible when the headline above it is clicked.  Here is what that might look like: First Headline Goes Here ============================== We have added a so-called Javascript [event handler](http://en.wikipedia.org/wiki/Event_handler) to the h1 element. I will explain how this works step by step.  onClick is an attribute that lets us set the Javascript code to be executed when the text of the h1 element is clicked by the user.  The code itself consists of a single expression which modifies the value of the CSS display property of the summary by setting it to the new value “inline”.  As soon as that happens, the web browser takes the previously hidden summary and displays it. We can unpack the Javascript expression a bit more.  Document refers to the HTML  (technically it refers to something called the [Document Object Model](http://en.wikipedia.org/wiki/Document_Object_Model) or DOM but we will get to that in a future Tech Tuesday).  The getElementById(‘first’) then gives us access to the element with the specific id attribute of first, which is the containing our first summary.  And finally .style.display refers to the display style of that element. Now this is not what you would actually do on a production web site, but you get the basic idea.  In reality you would use a library such as [jQuery](http://jquery.com/) to deal with issues of browser compatibility and to write more elegant code that doesn’t have to be repeated for each summary.  Finally, much like with CSS you would not throw the Javascript right into the HTML but separate it out into its own file which the browser requests separately from the web server.  Now if you want to learn Javascript, I highly recommend you head on over to [Codecademy](http://codecademy.com) (a USV portfolio company) where you can jump right in using just your web browser. It will take you through a series of simple lessons that have you writing code from the very first moment.  Next Tuesday, I am planning to wrap up the [web cycle](http://continuations.com/post/15615918569/tech-tuesday-how-the-web-works-overview) by revisiting the [web browser](http://continuations.com/post/18434175219/tech-tuesday-web-browser-part-1). --- *Originally published on [Albert's Import](https://paragraph.com/@albertsimport/tech-tuesday-javascript)*