If you're in front of a computer and have a browser available I urge you to play along right now. In the exercise files for this movie 02_02 you'll find a single file, index.html, that is blank except for the HTML head, and the body element. Open this file in Chrome and you'll see a blank page. Now either right click anywhere in the view port and select inspect or press control shift I on Windows or command option I on a Mac.
This opens the Chrome dev tools where you can do things like inspect the dom elements and the styles that are connected to them, run network audits, and a lot more. Throughout the course we'll use several of these functions. Right now I want to draw your attention to the second tab called console. Click on console and you open the browser console as a panel. You can also open this panel directly by pressing control shift J on Windows or command option J on a Mac, or open it as a drawer while viewing the elements tab, by either clicking on the donair menu on the right hand side and selecting show console drawer, or simply hitting the escape key on your keyboard.
Type in var date equals new date and here it's important to have a capitalized D, then hold down shift and hit return to create a new line, and type in alert today is plus date. Here we're creating what's known as a variable that is a container that just holds whatever we put in it. We give it to name date and then we populate it with a current date object.
This is something the browser holds that we can request. So we're just saying to the browser, hey, what date and time is it right now, and can you put that information inside this container and then I'll call the container later. Then I alert out the text today is and add to it that date container. So effectively we're alerting out today is followed by the date which is a request for the browser's current date and time. Hit return and you see the result. Today is Monday March 13, 2017 and this is the exact time and it's adjusted for Pacific Daylight Time, because I am in Vancouver, Canada right now.
Today is exact same information, but it's not popping up in this annoying alert window. That's cool and all, but it's not happening on the webpage itself. You'll notice the webpage up here is still conspicuously blank. The real magic happens when we start interacting with what see in the browser view port. To do that we first need to know a little bit about the structure of the HTML on the current page. So let's switch back to the elements tab for a second. Here you see the current document contains only two things, a head element at the top, and an empty body element.
So I'll say inner HTML equals, and then I would just set up my new HTML. Quotation mark, I create an H1 element, and then I say the date today is plus date. Now I also have to close my H1 element. So I add another plus and then type in quotation H1, and end my quotation mark. When I run this, the page HTML is updated on the fly, and we see the text, the date today is, followed by the actual date and time right here in the visual view port.
So I'll start the same way. H1 the date today is then I'll date the date object and use some methods on it to just grab specific pieces of information. So I'll say get month. This will give me the month number in computer terms, and you'll see what that means in a second. Then I'll add a forward slash as plain text, plus date get date.
That gives me the date number. So that would be one to either 30 or 31, or 28 if it's February. And then finally, date get full year, and just like before end my H1 element. Run this and I now get a string that's much shorter, because we grabbed the date object and reduced it down to only specific pieces of information.
If you paid close attention though you'll notice there's something really strange here. Today's date is the 13th of March. But here it says today's date is the 13th of February. Now this is a weird thing computers do sometimes. When you ask a computer to give you a list of items from one to 10 it'll return a list that's indexed as zero, one, two, three, four, five, six, seven, eight, nine, and since we're asking for the month object we're getting the number in the index.
- Working with data
- Using functions and objects
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality