Earlier, we learned about HTML, a markup language that is used to express content on the web, and HTTP, a protocol for making requests, receiving responses and communicating web content, particularly between a web browser and web server. Now, we will learn about JavaScript. Like many other programming languages, JavaScript can be used for a variety of purposes, but here, we will focus on how it can be embedded into HTML documents for the purpose of making web pages interactive. JavaScript can be embedded into an HTML document between script tags like so. In this example, when the button on the web page is clicked, an alert box pop-up appears. In general, embedded JavaScript is able to modify elements, attributes, styles and content within the HTML document. JavaScript is an interpreted language where the web browser interprets the JavaScript code at run-time. You can think of embedded JavaScript as a series of commands that are executed by the web browser when it loads the HTML document. To interact with a simple web page that does not contain JavaScript, an HTML form can be used to submit a post or get request. The web server will then respond to that request by providing the web browser with a new HTML document. You will only see the result of the interaction after your browser has received and loaded the new HTML document. Interaction between a user and a web page embedded with JavaScript can be much more efficient and also more usable. Using JavaScript, the form can be partially checked and processed on the client side. In this case, the browser does not have to wait for the web server to provide it with a new web page. Instead, the JavaScript embedded in the web page can dynamically change the HTML web page that is already loaded in the web browser. Of course, some interactions with the web page will require contact with the web server, but the point here is that this is not always necessary. Embedded JavaScript is appealing for web applications because it runs client side in a web browser. This offload some of the processing required to operate the application. Instead of performing all processing server side, some of the processing is done client side. Now, let's take a look at how JavaScript can be applied to a web page in a slightly more complicated example. On this web page, thumbnail images of all cats available for adoption at a pet shelter are displayed. Here, we can use JavaScript to make each thumbnail image grow in size when it is clicked and then shrink back to thumbnail size when it is clicked again. To do this, we will make use of the HTML document object model or the DOM for short. When you load a web page in your web browser, the HTML document becomes a document object. This object can be used by JavaScript to obtain and modify the elements and content on the web page. As a result of processing the document object, the content, structure and style of the HTML document can be modified. Suppose the HTML document for this web page is this. And the corresponding CSS style file to set the default height and weight of images looks like this. Let's consider what happens when the web page is loaded in a web browser. Initially when the web page is loaded, all the images on the page are thumbnail-sized. Also, at this time, the JavaScript embedded in the document runs. The first line in the script obtains all image elements in the document and stores them in a list. The for loop adds an OnClickListener to each image element in the list. So when an image is clicked, the process element function is called. The process element function returns an anonymous function which is responsible for scaling the image. The anonymous function checks the current height and width of the image element. If the image is 25% of its original size when it is clicked, then the height and width are changed to 100% of their original size. Otherwise, if the height and width are 100% when the image is clicked, then they are set back to 25%. You don't necessarily have to know JavaScript well to put it to work for you. Often, you can find pre-made scripts online from a trusted source and use them as is or make small modifications to suit your site's needs. For example, you can use comment management services like Disqus to allow users to comment on your web page and allow you to moderate these comments. After signing up, adding Disqus to your web page is as simple as copying and pasting some JavaScript into the HTML document for that page. In this lesson, you've seen how JavaScript can be embedded into HTML documents to manipulate a web page in the web browser. JavaScript can increase the efficiency of web pages by offloading processing from the web server to the web browser while also providing users with a more interactive web experience. Using JavaScript and HTML, you can insert access to services from a web page.
