[MUSIC] In this video, we'll learn about JavaScript programming, and the proper way to use it in order to add behaviors to the elements in an HTML document. JavaScript is a lightweight interpretive programming language that was designed to be embedded within and provide scripting capabilities to any application. The way we use it is typically as a client side application. So client side JavaScript combines the scripting capability with interaction with a DOM, with a document object model in your web browser. This enables executable content to be distributed over the web. All major browsers include a JavaScript interpreter. Let me show you an example, and I'm not going to spend a lot of time teaching you how to program in JavaScript, we'll learn a lot more in a later class in this specialization. But for right now, let's take a look at the Fibonacci numbers, and here's some code, some JavaScript code that you can write to actually compute these Fibonacci numbers, and you'll notice that there's an opening script which is HTML, then there's the JavaScript code, and then there's the end tag. So, there's the open tag for script and then the end tag. Let's take a look at how this executes in a browser. So, if you'd like to try this just create a file called fib.html and copy this code into it. That's all you need, so it's going to be treated as an HTML file. Now I'm just going to click on this file, and we'll see that it just gets executed in the browser. So, here are the Fibonacci numbers computed using JavaScript. Client-side JavaScript also opens up the possibility for authors to deliver malicious code to your browsers, so you have to be careful with this. Browsers guard against this by doing two things. First, JavaScript code is run inside a sandbox in your browser. This sandbox only allows the code to do certain things, for example it can't write to your desk, it can't create files, and so it can't be used as a general purpose programming language. It can only do certain things that interact with your DOM. JavaScript code is also constrained by the same origin policy in your browser recall that. What happens is that your browser may request resources that are java script files from other locations, and if it does this from two different locations, what the same origin policy says is that these two can't mix. In other words, one of those scripts cannot access any information in the other script. There are numerous JavaScript libraries that have been written to make the job of developing using JavaScript much easier. One of the most popular of these is jQuery, and it's provided by default in Rails. An entire ecosystem has been built up around jQuery, including companion libraries, such as jQuery UI and a whole bunch of plug-ins. If you go to jQuery.com, you can take a look at all of these. jQuery supports the notion of unobtrusive JavaScript. This is the separation of behavior from the document structure. This is really an extension of the separation of content from it's presentation that we've already talked about with reference to html. This is a very natural extension of the same concept. WIth unobtrusive JavaScript, you never embed any JavaScript expressions or statements within the body of an html document, either it's attributes or html elements. Instead you put them in a separate file, so this is very similar to how we treated CSS with the styling of HTML documents. jQuery developers placed a high priority on making sure this library worked consistently across all types of browsers. The focus in jQuery is on retrieving elements from HTML pages, and then performing operations on them. The elements that are retrieved are done so by using the exact same selectors that we use in CSS. To collect a group of elements, you pass a selector to the jQuery function, so here's jQuery, and then you give it the sets of selectors that you want to retrieve the elements of. You can use this dollar sign in place of the jQuery. So, dollar sign is a shorthand way of calling the jQuery function. So, this call is equivalent to the call I show above it. The jQuery function returns a JavaScript object containing an array of DOM elements that match the selector. The returned elements are actually wrapped with some additional functionality, and for this reason they're referred to as the wrapped set. Here's an example, div.byebye.hide. So, here the dollar sign is called the jQuery, the selector is div.byebye. This selector selects the div that has the class bye bye. And then the hide method, the jQuery hide method, is being applied to it. This will hide all of the div elements in the document that belong to this class bye-bye. Many of the jQuery methods also return a wrapped set, so it's very common to see them chained in this way. So, here I added another call to the end of the one that I showed you previously. This will add a new class called remove to the elements we just hid. So, this might be useful if you want to make them display at some point later on. You could call another jQuery method looking for the remove methods and then re-display them. The last thing I want to show you is how jQuery is added to your Rails app. If you go to your gen file, if you scroll down, you'll see that there's a gen called jquery-rails, and so this is how the jquery JavaScript library becomes a part of your Rails application.
