[MUSIC] Hi and welcome to the lesson. In our last two lessons we've been discussing JavaScript syntax. In this lesson we'll talk about a built in function for JavaScript using alerts and also prompts. So first let's look at our alert program Here's some code but before we examine it in detail, let's try running the program. We'll go to my file that I've named JavaScript Alert open it and notice here that I've placed two buttons and a place for input. Now first I want to try the left mouse button, alert test. And when I clicked it, I get a pop up the test worked. Let's return to the code for a second and have a look at that. On line 22, we have a button element that we've seen before. An onclick event which we've also seen. And here we're assigning this little bit of code, alert, and then in parenthesis, 'The test worked'. And notice the text inside the parenthesis is enclosed in single quotes. Now, we also have an input and another button. Here and this input is of type number. Now the most common type of input for an input element is text but you can restrict it to other values such as number and if we return here we can see Let me type the letter h or other letters and they don't show but a number such as eight or six will show. So, it's restricting our input. Now, these second button. We see you're on line 24, also has an onclick event, and its target is a function that I wrote called myAlertMath, and the button itself has a title of Multiply x 5. Now, going up a bit we see our script tags. And notice these script tags don't have the same property that some of our previous script tags have. Where we're showing type equals text slash JavaScript. Now using the type equals text slash JavaScript is the best practice. But most browsers will recognize script tags just like these. So within the Script tags we're defining a functions myAlertMath. And that's the function on here on line 24. And we have a variable on line 9 called user number. And that's variable is collecting it's value from these input. We use document. getElementById. Remember, these are all case sensitive. mathInput, and then .value. So any number our user types in is going to be transferred into this userNumber variable, and then on 11, we see an alert. Now this alert is like the one on line 22, but we've done something a little different with the text in the alert. We have some literal text, and we call this text between quotes literal text, your number x 5 is, and then a space. And no matter what else happens, this text will stay the same. Now we have a plus sign here, and this plus sign will concatenate, that means bring together, this text and this number. Now we have useNumber times 5. And this star symbol is very common symbol for multiplication in many programming languages. So we going to take the users number multiplied by 5 and your number x 5 is and we'll get this value. So let's look at how this works. Now I'm going to save the program because I've made some small changes as we examined it. I'll refresh the page and I'll put in a number, I'm going to use 4. Now because I know I'm multiplying by 5 I can predict that I should get a 20, your number x 5 = 20. And I can try other numbers like a 3 and then we get a 15. And when we do this, we have to click this OK to go on. Notice that when I click elsewhere, I'm not getting any results, so I have to click through the OK. That can make this a little annoying for users, so use them sparingly. Now, I also said that I wanted to share with you another related function called a prompt. So in this case, we got a different program. And, we have a button with an on click it's target is a function called my prompt that I wrote. And the myPrompt uses the built in JavaScript function prompt and we have the prompt text here, Please enter your name. So let's run this and see how it works. So I'm going to click the button, and here's the prompt. Please enter your name. Now for now, I'm going to cancel that prompt. And we get some sort of error like text here, with the word null in it. And we'll return to that in a moment. But that was because I cancelled out of it. Now we can, if we want, include the second argument here. And you can take a moment to guess what you think might happen if I do this. So with this second argument. I'll refresh, notice that the prompt has a default value and if I click OK, you get Hello Fred! How are you today? Now on line 10, we see an if statement. Now, this is an important part of JavaScript and most programming languages, this use of a keyword if. And it does a test on anything that follows in the parenthesis. In this case, we're checking to see person does not equal. Now, this exclamation point equal sign means not equal to. Person does not equal and then notice your half of the empty string. This is just a pair of quotes with nothing in them. And that denotes a string with no characters. So if it doesn't equal a string with no characters. Meaning to say that we have some characters then we'll get a message that we're going to put into the inner HTML of an element called test which is here on line 26. So, we can save this, return the page and notice if I click with this. If I take the Fred out and click okay, I get nothing because that was the empty string. But as long as there's something here, We get our output based on the results of the if. Anything here that's true will cause this code immediately following it to execute. And if we like, we can also use an else, To add a second case. So if person doesn't equal an empty string, we'll do this. On the other hand, We could, here, say. And notice that I'm using white space to help format, I'm using an indent. I'm using an alert in this program as well, to say hey no input and I'll save this. I'll return, I'll refresh, click if I take the input out, I'll get the, hey, no input. And you could handle this a variety of ways. You could decide instead you preferred to assign some other string to inner HTML. In the case of no input. So next time, we'll be talking about other features of JavaScript, including JavaScript events.
