[MUSIC] Hi, welcome to week three. What we'll start the week talking about, the comparison of static to dynamic webpages. Last week we talked about HTML elements, creating HTML pages. Testing our HTML and even using a little bit of CSS to style it. So first let's talk about what a static website is and what it really means. This is a page we created earlier, it's a modified version of HTML 2 and you probably recall this is an h1 tag and this is a paragraph tag. And if we go here we can open this and look at this text. This is all a static page. We can change it if we want, but if we don't change it it'll stay exactly as we've written it. No change at all without us actually editing it. A dynamic webpage comes in a few different flavors. So here is Amazon.com and in this case Amazon wanted to present information about vegetables and computer parts to a user. This is dynamic because Amazon's using its database to help come up with ideas about what this particular customer might want to see and buy. They write part of this page in advance but they fill in information like the images and other details, based on who's actually looking at the page. That's a server side dynamic webpage. Amazon is doing all of this at their facilities, which is why we call it a server side. The other aspect of a dynamic page is client side, that is, all the part that remains in the browser. And That is usually accomplished with JavaScript. And we will be looking at JavaScript this week and for the rest of the course. So let's look a little bit about what we can do with a JavaScript page. Let's do client side dynamic features. Here we have a button that I created and we'll look at HTML in just a moment since we haven't seen the button element yet, and an h1 tag. So, I'm going to refresh this, and see here at the start here we have empty page, or at least empty of the message that was here a moment ago. When I click, Click Me, thanks for adding text, appears. Again, I'll refresh the page and start over, and Click Me brings it in. This is a very simple dynamic feature. Now let's look at the HTML. Here we have the button onclick that we talk about, its style here's Click Me and it looks like the other tags we've seen. Like the h1 tag and we have the texture in the middle. Let's see a button, but this button has something we call an event an on click. And what's associated with this on click is a program named add paragraph text. Now, I wrote this program to make this demonstration. It's a very small program. Yours could be of any size. And we'll talk all about how to write our own Javascript programs this week and throughout the rest of the course. So addParagraphText is defined here with the Javascript keyword function. Then the name add paragraph text. Which I made up. I could use any name I like, but this name is descriptive for its purpose. And then I'm trying to find element. That is on nine eleven document dot get element YID. Notice you can read this and the ID we're supplying is para. So dash on line 26. We have a paragraph tag, it has an id of para. So what this line 11 does is finds the element on the page called para, which is this one. And then it uses something called inner HTML and the new HTML is set to a value of thanks for adding text, which we already saw comes out when you click this button. So we won't know how to write a program like this automatically, but with a little practice it becomes much easier. Let's look at one more dynamic webpage. This is html6.html. And this one has a place for user input like for instance I'm typing. Let's try it first with no input. You click the Check Name button. And it says hey you need to enter a name. But now if instead I enter a name like Bob and click the button, okay, Bob is fine. So this is another slightly more advanced example of a client side dynamic feature that we can create and we'll be learning how to create this to work with our own forms through out the rest of the course. So, next time we will be writing our first JavaScript program. I'll see you then.