Client-Side vs. Server-Side JavaScript

[MUSIC] 0:00 Hi everyone, I'm Guil, a JavaScript teacher here at Treehouse. 0:09 JavaScript is the most popular and 0:12 versatile programming language in the world. 0:14 And there's a lot of ground to cover on the subject. 0:16 In this course, you'll take a short break from coding and 0:18 continue to explore the exciting JavaScript echo system. 0:22 You'll learn how Node.js help JavaScript reach new heights. 0:25 Discover applications and tools built with JavaScript. 0:28 And get a closer look at popular JavaScript frameworks, libraries and more. 0:32 JavaScript was originally designed to run in the browser. 0:36 But JavaScript can be found in other places too. 0:39 For instance, JavaScript is the only web-based 0:42 programming language that can run on both the front end and the back end. 0:45 So let's delve into what this means. 0:48 Writing JavaScript that runs on the front end or 0:51 client side means you're writing JavaScript that runs in the browser. 0:53 Client-side JavaScript is what allows user interactivity in web pages. 0:56 JavaScript is interpreted and executed by the browser's JavaScript engine against 1:01 browser specific APIs, like the DOM, or Document Object Model, for example. 1:05 The JavaScript you've written in many of the projects so far at Treehouse, for 1:10 example, is client-side JavaScript. 1:14 You linked a JavaScript file to an HTML file and tested and 1:16 viewed the results of your code in the browser. 1:20 You may have selected and 1:22 manipulated elements with JavaScript too, or used JavaScript for form validation. 1:23 So client-side JavaScript is mainly concerned with improving and 1:28 enhancing the appearance and behavior of the rendered web page. 1:31 Google Maps is a popular example of an application that uses client-side 1:35 JavaScript to let you interact with a map by moving it around, zooming in and 1:39 out, and more. 1:43 But JavaScript is not just about working with the DOM. 1:44 Writing back end or server-side JavaScript means that instead of writing code 1:47 that executes in the browser, you're writing code that executes on the server. 1:51 Server-side JavaScript is used for building APIs, databases, 1:56 web servers, and more. 2:00 Instead of dealing with the rendered page only, server-side JavaScript can be used 2:02 to provide customized experiences for each user's request to a website. 2:06 Writing JavaScript for both the front end and 2:11 back end portions of an application is known as Full-Stack Development. 2:13 How was JavaScript able to run in different environments? 2:17 Well, host objects are supplied to JavaScript by the environment. 2:20 That way, JavaScript code can execute in that specific environment. 2:23 For example, the browser provides the window object for working with the DOM. 2:27 The browser also provides document, history, XMLHttpRequest, 2:32 and other host objects. 2:37 Now Node, a Server-side runtime environment for 2:39 JavaScript, provides a completely different set of host objects, 2:41 which you'll learn about in the next video. 2:44 For now, you can read more about host objects in the teacher's notes. 2:46 JavaScript's Native Objects are available to you, no matter the environment. 2:50 Native Objects are the built-in objects that 2:54 are part of the JavaScript programming language. 2:57 Like the string, number, array, and math objects for example. 2:59 They're available in both the browser and server-side environments like Node.JS. 3:03 Speaking of Node, in the next video, we'll explore this powerful tool that can run 3:08 JavaScript applications on the server side, client side, and 3:12 just about anywhere else. 3:15