Create your first HTML/CSS/JS project

what's up everybody I'm Brendon and today I'll be walking you through how to get up and running with JavaScript on your HTML website now I am assuming you've already watched the getting started with a text editor HTML and CSS videos if not I highly suggest you start with those as I'm assuming you have a beginner's knowledge of how to use a text editor as well as the fundamentals of HTML and CSS now how this video is going to work is first I'm going to show you my completely static site meaning there's no JavaScript hooked up to it it's just HTML and CSS I'm then going to show you how to use the google chrome developer tools within these tools which are this powerful tool kit that comes pre baked into most modern-day web browsers is I'm going to show you how web developers on a daily basis use JavaScript to manipulate what they see on a website I'm then going to switch back over to the text editor and physically show you how to hook up a JavaScript file to an HTML file and last but certainly not least I'm gonna copy and paste some pre-written JavaScript code again not going to explain that code line by line but just show you some of the features that I've built using JavaScript that will hopefully kind of serve as a nice little appetizer as to the types of things we'll be teaching you how to build and incorporate into your own site in the next few lessons here on code academy.com so let's jump into it what I have opened here is my static website I created using HTML and CSS by static I mean my website is not interactable nothing happens when you click on these buttons when you hover over this image or you type something and hit submit of course the default behavior for a form component in HTML is to refresh the page which is going to do right now but the point is is that you can't really interact with this site the way I planned on users interacting with the site and that is because my javascript file is not hooked up to my site let me zoom in again here give you a better view of goodies beautiful face I see a bird I don't even know I should probably know this but anyway the first thing I want to talk about is how what we see in our web browser and the code we write in our text editors fit together so to illustrate this relationship I'm first going to open up the google chrome developer tools and I open up that this tab right here by right clicking and then clicking inspect and it might take a second to load but we have our developer tools over here opened up on the right pane first thing I'm going to do is kind of open these things up so bear with me real quick get that all opened up I'm opening this up by the way by clicking on the triangles [Music] okay so I just want you to kind of take in I guess I can open this to take in what we're looking at here and okay hopefully you were able to see all of that right there now we can switch back over to my index.html file and you'll you'll quickly realize that the code that we're looking at right here in my text editor and over here in the developer tools and the elements tab is basically the same thing why is that are we actually messing with our code in our index.html file itself well I'm gonna kind of let you marinate on that question for a bit and what I'm going to do is do something that might scare you a little bit so I'm going to click on you can actually click on these separate little HTML elements in this elements tab I'm going to click that and hit delete and you'll notice that gritties face is absolutely destroyed gone vamoose and you might be thinking well we're not gonna be able to get that back we literally just edit our index dot HTML file well if I actually refresh it comes right back to us so what are we actually looking at here well there's a word for what this code that we're looking at represents it represents a Dom now Dom stands for document object model and it is basically just a virtual representation of the code over here that we had fed to our web browser so this file and our style dot CSS file which styles that HTML we take those files we pass it to the web browser the web browser reads those files and then constructs a virtual representation of those documents and we're actually able to kind of live edit them in this elements tab over here so we're not actually working with our original index.html file itself or our styles in our CSS folder itself we're working with a virtual representation of our code so when we delete things and delete this and delete that and we refresh it's fine we're not working with our actual copy of our code we're working with a copy a virtual representation a document object model of our site in the next few lessons on code Academy you're actually going to learn more in depth about what exactly this document object model where Dom for short is but for now just know that we can use languages like JavaScript to interact with this Dom when you change the Dom you change what is being displayed in our web browser so how can we use JavaScript to change the Dom well I'm going to navigate over to the console tab in the google chrome developer tools and I'm going to type the word document now this gives us access to the Dom so click on that open this up you'll see that what we're looking at is this virtual representation of our site so we can actually change the content of that site before I show you that this console you should think of this console basically just like a JavaScript sandbox it is able to parse normal old JavaScript and that includes arithmetic for loops basically every part of JavaScript you know is able to be written and parsed in read in this environment in this JavaScript sandbox called the console so I'm going to declare a variable call it date and I'm going to actually set that equal to a new date object let's make sure that was registered okay so date now has this date object saved to it and what am I going to do I'm going to use the power of JavaScript to change the content of our our Dom and when we change that what is being displayed to us is this virtual representation this Dom it's it's going to result in us physically changing what we're able to look at right here over here in the window so let's type in document dot body this gives us access to the actual body of our HTML or the the body representation of our HTML file and then I'm actually going to type in inner HTML and set that equal to a string and you will learn what inner HTML is in the next few lessons but basically what we're doing is we're passing each tml tags as strings to this inner HTML property of the document body and we'll actually be able to change what we see in the browser so let's say Gritti is king on and then join that string with this date object date and then what else do we want to add plus a period actually no long may he reign oops I'm bad at spelling all right and let's see what happens when we hit enter all right so as you can see we can use JavaScript to change the contents of the dumb aka our virtual representation of our website what our web browser constructs from the files we send it so with this in mind let's move back over to our text editor and actually add JavaScript to our site so I'm in my index dot HTML file and I'm going to use the script tag and then I'm going to pass it a SRC attribute short for source and this is where we would actually paste a path to a particular file that includes JavaScript or that contains JavaScript now we haven't created that file yet so let's do that I just right clicked on this sidebar here I'm going to say new file and I'm going to say gritty dot J s now the dot J s is very important here the reason why we're ending this file in every other file that we see index.html style dot CSS is that our browser relies on these file extensions in order to use the proper language to parse whatever's in this file so every web browser that would read the greedy J's file knows that whatever is typed in here is JavaScript so the first thing I'm going to type here is just a simple little trick here what do we want to alert to our screen when this javascript file loads my world what the heck am I thinking hello world okay so let's save that go over to our index dot HTML file ok so let's pass that file path Grady is to our index.html file so because our good ejs and our index.html file exists on the same level of our folder structure we're going to use the syntax dot which mate which means stay where you are index dot HTML file don't go down don't go up in the folder structure just look on the same structure that you're located in and look for a file called grid EJ yes okay so I'm going to save that and that if we've done everything correctly means that we have correctly linked to a JavaScript file from our index dot HTML file which means we're in fact running up and running with JavaScript so if i refresh that page we should see something yep hello so we have been alerted a little world which means that we have successfully incorporated JavaScript into our site now there's something I want to point out here and that's the fact that this script tag is located all the way at the bottom it's basically the last element in our body section of our index dot HTML file now it's very important that we put it here and nowhere else and the reason is that generally speaking javascript is used amongst many things to manipulate the Dom like we did back in our developer tools we've manipulated the content from the console javascript is most times used to manipulate what we see in our web browser so for a real world example you can think of modern web applications like Twitter or Facebook the the window or the website changes based on how we the user interact with it think about when you click on a heart on a tweet you notice how the style of that hearts changes to red and the number of likes increases or increments by one that is all through JavaScript and manipulating the Dom because the code within an HTML file is read and subsequently loaded line by line by a browser from top to bottom if we place our JavaScript script tag anywhere above the line right before our closing body tag here and let's say that JavaScript we had written relied on some HTML that had not been loaded our code would error out in our website which subsequently break by placing the script tag as the last element within our HTML body we're ensuring that all of our HTML will load before our JavaScript does and if that JavaScript relied on our HTML it would work correctly since it's already been loaded in the lines above all right so I've gone and copied my pre-written JavaScript code and I'm going to remove this line and paste that code here save that I'm not going to explain this line by line but you should notice something familiar at the top document so just like in our console we use document to gain access to the Dom in this JavaScript file I'm also using this document to gain access to certain elements within our Dom so there's different types of selectors that you can use with JavaScript I'm using the get element by ID literally like a CSS ID to grab that element off the Dom and then do with it what I want so let's save that refresh and see what I've added to my site so you're noticing here rotate left rotate right it's controlling the style of this image tag so how is that working well some of the things that you'll be learning in the next few lessons here on code Academy is that you can use JavaScript to listen to certain activity on a website so right now what I've done is I've defined listeners for this rotate left button and this rotate right button now what type of activity am i listening for I'm listening for a button click on this button when this button is clicked rotate left I'm saying grab the gritty image and change its style by rotating it left I don't know maybe 15 degrees or something like that or 15 percent and then same thing but different for this rotate right button I'm saying when this button is clicked I want you to fire off a function that grabs this gritty face and changes its CSS to rotate it to the right 15 percent now in addition to listening for certain events like button clicks you can also listen to Mouse events for instance we know the exact position of this Mouse event and we can define using JavaScript events that trigger certain functions when a mouse enters or exits a div so check this out my mouse is going to enter this box and as soon as the mouse enters the box what i've done is i've defined a function that uses the dom to grab the gritty face and then change its CSS style to make it invisible and then again when this mouse leaves this certain div with this orange border i'm firing off another function that says toggle gritties face back now for a more real-world example I've replicated Twitter down here a very simple version of Twitter it basically consists of a HTML form element now what I'm doing using javascript is I'm saying let me first think of a clever message here Gritti what does he like to do he's a psychopath he eats other mascots apparently okay dear diary I like lied this morning about eating mascots okay so what I've done with JavaScript is I've added a listener to this form element that waits for it to be submitted once it's submitted I take the contents of this input and I create a new element and add the text to it as well as an image of Grady's face next to it and I attach those elements to the DOM and then after all that is done and once it's attached to the Dom I also clear this input field all using JavaScript so let's see what happens here so boom and you know it just continues to work and it basically this is exactly how Twitter works it takes your input from a field and then adds it to the Dom now of course when i refresh this it disappears and that is because we are not persisting any of this data to a database that more relies on the backend technology that JavaScript can handle but we'll talk more and more about that in the next coming modules here on code Academy I really just kind of wanted to show you a nice little teaser like I said before that shows you what you can accomplish using JavaScript already folks so hopefully that was a good intro into how you can incorporate JavaScript into your website and hopefully I gave you a good taste as to the types of things you can build with JavaScript that will add some interaction to your site the first thing we talked about is the Dom which is this representation of our site I showed you how to use the developer tools specifically we use the console and we wrote some JavaScript and I showed you how we can manipulate this Dom this representation of our site using javascript to change the contents among many other things we then switch back over to the text editor and we kind of went through the three different ways to add JavaScript to our HTML site the the best way and the best practice is to create a separate JavaScript file and then link to it using a script tag and our index dot HTML file it's the best practice because it just keeps things organized the most it keeps things separated and we don't want to kind of mix and mangle different types of code together now we also talked about why we have to put that script tag at the very end of the body of our HTML file and that's because as a general use case javascript is most times than not use to manipulate the Dom because our browser's read from top to bottom line by line we put the JavaScript script tag at the bottom in case our JavaScript does change things on the Dom this guarantees that our HTML above that script tag has loaded and our browser has constructed the Dom before the browser reads the JavaScript that might actually manipulate that Dom so once I had it copied and pasted my JavaScript into that separate javascript file hook that JavaScript file up to the index dot HTML file finally we were up and running with JavaScript code and the site was working the way we wanted it to I briefly touched on what event listeners are basically event listeners listen for how a user interacts with our site if they click on a button I want to fire this javascript function that takes the DOM and it changes the style of a particular button or when a user types in a form field on our web site I want to take whatever they type and attach it to the Dom just like Twitter Aarti so that was a lot to digest but hopefully you're getting more and more excited about the types of functionality you can incorporate into your own site and kind of let your imagination run free begin to picture how Twitter uses JavaScript to listen for certain events and change the Dom based on how you interact with it for instance when you like a tweet on Twitter the style of that heart changes and not only does the style of that heart changes but the number of likes also increases start to kind of imagine how you would program that using javascript but anyway that was a lot for today and I think that's it so I am signing off here and I will see you in the next video wooof see ya

Channel: Codecademy

Views: 122,436

Keywords: make a javascript website, javascript locally, javascript tutorial, javascript site, html tutorial, web development, HTML, CSS, JavaScript

Id: iwNUJU5D3aI

Length: 20min 49sec (1249 seconds)

Published: Wed Jul 17 2019