Subtitles of the Movie

In this tutorial we take a look at the common elements of JavaScript that are used throughout these different JavaScript Libraries. Because the base functionality of these libraries are tied to the core JavaScript language, these libraries provide additional functionality to using JavaScript more effectively. Now, the way that they do this is by taking these common elements; selectors, event handling, effects, AJAX and data handling and enhance it in some way. So in this tutorial we're going to take a look at each one of these in turn and see how the JavaScript Libraries are going to be working with each one of these elements. First off, we have our selectors. Now, essentially all the JavaScript Libraries rely on some ability to select specific DOM elements or collections of DOM elements for further manipulation. Now, our JavaScript Libraries are going to be ranging from using the native document.get element by ID to the use of some type of shortcut such as the dollar sign followed by parentheses, in which you place the element that you want to select. The examples here are showing you how this would be done. The first is showing you the native JavaScript DOM method for selecting elements followed by jQuery and then followed by Prototype. Now, we're going to get a little more in depth whenever we get to those particular libraries. But in essence here, all of our JavaScript Libraries are going to have some way of selecting specific elements. Also, our JavaScript Libraries are going to have some way to handle events. Now again, these are either going to be based on native JavaScript event handling or some type of extended version of it. So it is either going to be attaching on to the events that the browser detects, such as on-click, which is pretty standard or some other type of event. It is possible to subscribe to some events that are happening in the back end of things with a programmatic execution. And some of your JavaScript Libraries give you the ability to work with those signals. So it's quite nice. Here we're seeing two examples; the. click and. bind. These are two different ways that we can make certain events trigger other things to happen inside of our applications. Next, we have our effects. Most libraries include animations and other sets of Cascading Style Sheet property manipulation. One of the reasons people have so much interest in these libraries are the quick and easy effects they make possible. Now, by manipulating CSS and DOM properties through JavaScript, we get some really cool effects. Our example here are the Show and Puff and of course Show is a shortcut that allows you to show an element that has been previously hidden and Puff affects a number of Cascading Style Sheet properties such as opacity and scaling and invisibility there to make it appear as if an element is just kind of puffing off the screen. Now, you also have here the project example so a lot of the different animations we were doing with that are available through the different JavaScript Libraries. Next, we have AJAX. Now nearly all of these libraries to some degree have some shortcuts to make JavaScript calls a little easier, if not an entire cakewalk. Now, here's an example of our JavaScript standard AJAX call here. So with classic code, you end up needing to detect to see what browser you're working with. So depending on which browser you're working with will determine whether you need to create an XML HTTP Request Object or some type of ActiveX Object. Now, of course, over time this has been a little bit more standardized but you still have to deal with some of those older browsers. So this can sometimes be a little bit complicated because you end up having to have multiple handling events for the different browsers and then you have to set it up in case of errors, plus for what to do with the data once it comes back. Now, with your JavaScript Libraries it takes all this code and reduces it down to and sometimes as little as one line of code. So it makes life a whole lot easier. I'm sure you're excited to see how that stuff actually works. In addition to giving us the ability to deal with these AJAX calls relatively easily, our JavaScript Libraries also give us the ability to handle the data that comes back. Now, all libraries deal with information and many of these JavaScript Libraries extend JavaScript so that the native arrays and objects are more robust for serious programming and deal with the returns from AJAX calls. So we end up having a lot of different features in some of our JavaScript Libraries that are dedicated to just handling data so they do a lot of heavy lifting. Now, most libraries are designed to handle both XML and JSON, as well as a large number of other types of data types. But the focus we're going to be dealing with in our tutorials is dealing with JSON because JSON is a very lightweight data transfer model and the reason why it's so lightweight is because it's very easy to traverse and it's very easy to parse. Essentially the parsing mechanism for JSON is the JavaScript method of eval. So you'll take a JSON Object that's returned to you, eval it and it becomes live JavaScript code that you can very quickly implement into your application. Here you see that we have our JSON example and inside of this example we have our items. We have two separate items and each item has a unique identifier here for thumbnail image, title and link. So we have a key value pair separated by colons. Each one of these key value pairs is separated further by a comma and each separate, distinct custom object is separated by scroll braces and a comma and these are all nested together inside of essentially an Array. So what you're looking at here is a type of custom JavaScript Object that is a combination of arrays and JavaScript Objects. So you're going to be seeing JSON being used over and over again throughout our tutorials and your JavaScript Libraries give you great ability to deal with these JSON elements. And that concludes our tutorial on our common elements of our JavaScript Libraries.