All language subtitles for 5- Separation of Concerns

Now while we can

easily write JavaScript code in between the script element, in a real

world application, you have 1000 maybe even a million lines of code, we don't want to

write all that code in line here. We want to extract and

separate our JavaScript code from our html code. Let me give you a

metaphor. Think of your house. In your bedroom you have your

bed, and your clothes, you don't store your clothes in the kitchen. This is

what we call separation of concerns. You have the same principle

in programming so we want to separate html which is all about content,

from JavaScript which is all about behavior. How should

your web page behave, what should happen when we hover our mouse

over a given element? Maybe something should pop up maybe something should be hidden,

so we use JavaScript to implement behavior. So,

open up the explorer window, add the new file,

call it index.js.

Now, back in index.html, cut all this

JavaScript code here, and then paste it in index.js,

now in this simple application we have a single

file, a single JavaScript file, in a real world application we have hundreds or even

thousands of JavaScript files. Later in the course you will learn how to

combine these files into a bundle, and serve that bundle into the client.

Now, save the changes, back in index.

html, now that all our JavaScript code is in a separate file

we need to reference that file here. So,

let's add an attribute here, src, which is short for src,

and set it to index.js.

So this tells the browsers that our JavaScript code

is now in index.js save the changes

back in the browser, you can still see the Hello World message

and that confirms that our code is still working. In the next lecture,

we're going to execute this code in Node.