Transcripts
1. Class introduction: welcome skill. Shea students to yet another awesome class. It's a beautiful day outside, and it's another beautiful day to learn about JavaScript. And what is this class all about? Well, very simplistically. It's about a nurse in Java script, and we've all seen those incredibly annoying notes that on screen really awful. But you need to learn by used it. So this is what this cost it's all about. We're gonna be talking about the Java script note method, which is available to us on the window project greatly. Real is going to be talking about confirms and promise, and then we're going to finish off this class by building our own very custom alerts. Well, look, dialogue box and you might be worried you might be thinking, Clyde, I don't even know how to write Java script. I don't know how this works. Panic. We're gonna be going through it, stick by stick. So grab a coffee. We'll grab a Red Bull. Whatever suits your fancy, get motivated and I'll see you in the cross audio's oh
2. Alert - creating an onclick event for a button: Alerts for many interfaces and in the past, messages are just done using native JavaScript alert. And you and I know how frustrating and ugly Dale. And one of the problems is that the native alert JavaScript function, it's a system object, and that just means we can't manipulate how it looks and it's literally coming straight from the browser. So in order to manipulate alerts, how they look in the field, we have to design our own CSS on the backlit. So I'm gonna show you a few examples now of some alerts. Let's have a look. So here we go. I've got a plain HTML page just called alert up and going. So let's start now by producing an HTML page. And now we can call this alert example. And you can create this alert in many ways. You can create buttons, you can do inputs, you can do images. I'm just gonna do an input here. Make it a button that you can do it in many ways. So let's just make it a button. And let's do an onclick. And it's fire a function that we can call whatever we went delicious called Show alert. And let's make the value of this input. Click Camino to execute a JavaScript alert. Now the one thing left to do is for us to define this function, and that is JavaScript XHR remainder. And JavaScript has to be inserted between script tags that's executed. So let's put this online is a button that we created and in fact, ticket, what do you expect to happen? Yea, this width, how easy is that? You've just seen how prevented a button with a click event. And in this alert is JavaScript. That's getting into some more examples.
3. Alert - writing text to the screen after the alert has been triggered: All right, so we're gonna get more and more complicated as we go on to say now we want to click a button shown alert. And when you click OK on that alert, text is replaced on the screen with something. How would we do that? Let's go. Let's create an HTML document. And again, let's create a button with an onclick event. Let's just call this one alert. Alert me. I loved me is not defined. Again, we've got to rock javascript. Javascript has to be inserted within script tags. We need to now define the load MY function. You don't worry about the syntax around functions. We're going to learn about that shortly. You'll see, you'll see how it all fits in and how to write a function. Now, after you click OK wellness alert, what do we want executed beneath it? Remember it with JavaScript, and we'll actually it's the browser to the pasa. It starts from the top to the bottom. So once the solute is done, it's going to execute what's beneath it. And say we want on the screen. This was replaced with JavaScript. This takes place tale of JavaScript. This try and run this code, I would expect to see an alert, will not expect to see a button. When we take the button, we should see an alert. And after the alert we should see text put onto the screen. Because we've used document. Document is, It's a global object. It's almost, it's not quite the king. Remember windows the king. But with under window you've got this big object called document. And this document is your weight badge and always saying, is We accessing a method called right? Which literally just puts, takes on that page. Simple as it. Let's see what that looks like. Days our button. Kick me please. My ticket is an alert. And what happens when I click OK? It takes what's replaced. How awesome set. Let's move on.
4. Confirmation dialog - conditional if statement: We've seen alerts. Now let's look at another JavaScript function, a confirmation. Again, let's start with a simple HTML page that does have a button. This time on click, let's say get confirmation. I'm sure, which we still need to define in JavaScript. So let's now define this get confirmation function. Got into JavaScript within script tags. We've gotta tell JavaScript we're defining a function with the function keyword. And let's confirm on the screen reader that come from, well, it is just a JavaScript function. In these JavaScript functions, you'll just learn as a program over time, you'll just start remembering what these function names off, but this one is called conflict. So I haven't coded anything around. Confirm this is inbuilt. And let's just ask the user to U12. Continued should give us the guy and let's see what happens. So we should see a button. When we click the button, we should be displayed with a confirmation dialog box. Confirm button. Now, let me just get rid of that semicolon. Putting JavaScript, this is just HTML is the confirm button when our ticket D12 continue. And it's literally asking me OK or Cancel. But now if I click OK or Cancel and nothing happens, let's try and figure out how to code something. If I click OK, how would we do that? Let's go back to the code. We've got this confirm dialogue box. And what JavaScript does is we can actually store the ok. variable, the outcome of where the user clicks OK or Cancel into a variable. And we're gonna get into variables in the very next section to hold tight to just means a container where we can store information. So let's store it in a variable called decision. So the user's decision is going to be stored to Penny and net value will depend on whether they've clicked yes or no. And now I can code something. Let's, let's code something with an if statement. And again, if statements we're gonna get into later. I just want you to get a feel for how we can start working with these kind of JavaScript events. And before I finished coding here, remember how we've been through the different daughter types in JavaScript penises, why Donald types are important? This confirm dialog box, if the user clicks, yes, it returns true. And if the user clicks known returns false, this is just our JavaScript is built this function into its code. So what we can say is we can say if the decision equals true, it's document, right? The user wants to continue. Else. And this is if the decision is false, that's rot. The user is scaled and does not want to continue. I hope even though you don't fully understand the syntax that you can kind of see, you can kind of follow what it is I'm trying to do. The first thing we've done is we've created a button. And the button does nothing until the user clicks it. That's what this onclick means. When onClick as clicks, we net event is fired. Parser is gonna see this function, get confirmation and it's going to then find this function. It's going to know it's JavaScript. Because we've put it in the script tag. It's going to find that good confirmation function and executed. It's gonna say, Okay, cool, lick decision equals confirm. Do you want to continue? When it sees the confirm? It knows that that's a function, so it's going to execute it. And then if the user clicks yes, it's going to return a true Boolean. And we're going to write this to the screen. And if these are clicked, cancel is going to be false. So this isn't going to be true. And in this will be displayed on the screen. Let's see it in action. So these are confirm button. We click it. If you want to continue that, say no. Users scared and does not want to continue. Perfect, butts. Refresh your page. Let's try going. Click the button. The say, okay, these wants to continue. That works. Hopefully, getting a feel for this, how cool it is an awesome and intuitive. Let's continue.
5. Prompt: Let's now look at some JavaScript prompts. We've looked at Alerts, we've looked a conformations. Now, let's look at prompts. Again. We start with an HTML5 document. And we can do this many ways. Again, malicious do an input for now, and we'll do an unclick, will do prompt me function. So we've got our button, but now when the browser comes to execute a function called prompt me, it's not going to find one, which is why butter write JavaScript function keyword. We've cooled it to prompt me. And now let's issue a JavaScript prompt really isn't difficult. You'll see now with the keyword prompt, erato message, Meany, warthogs D have. And then yeah, you can just give a little place holder lack little hint. You can say into number. We'll see what this looks like. Let me just close these other tabs. Keep forgetting that this is not JavaScript to not keep putting semicolons in the end. This is just HTML. So prompt me peasy as our button. Click the button. How many warthogs and Yazid little hint that we said into number of water. Now far octane and I click OK, nothing's going to happen because we haven't told JavaScript what to do without input value. Remember, we kind of did a bit of this with the confirmation. Well, how do we do this with prompt? Let's, let's have a look. Let's do it. The first thing we have to do is we have to stall the uses decision in something, in a variable. Let's do that. Let's say number, because we know that the user's going to insert a number lambda equals whatever the uses put in. Makes seen so far. And remember how we spoke about template literals? I hope you do because yeah, we're gonna go document, right? And we're going to use template literals as two Beck's dashes. And we're going to say you have. And when you type in a variable within a template literal, you've gotta use the dollar sign and the square brackets. And we've called it number, number. And now if I save this and then we go into our sheet, Yana refresh, let's do it. Let's do a prompt into number of warthogs. Let's say I've got three watermarks and I click OK. You have three waters is pates. That is a lot. And you see how it's dynamically inserted the three on the page, this is awesome. This is what JavaScript is all about. Hope you are enjoying yourself as much as me. Let's continue.
6. Create a custom alert: Remember at the beginning I said that the JavaScript alert function is a system object, meaning we can't change its land. So then how do we get really cool JavaScript alert tabs showing up? Or I'm not going to use plugins because this course is about teaching you JavaScript. And let's just create one. Let's create one ourselves with vanilla, HTML, CSS, and JavaScript. As always, let's start with an HTML document and let's create a button. And now let's creates an onclick function. And let's say that me. And you can see on the right, we've got a little button here, tick me. But of course nothing happens when we ticket. Now before we get into the JavaScript, I actually want to create what the alert would look like and how I like thinking of it. Creates a div, div tag that contains our entire alert. And then within that div tag, I just want to have a heating. Say this is a warning message. And then i once a button that the user can click. Okay, let's do that. Let's have a div tag and let's say have an id of that. This is going to be the whole tank containing the alert. And I wanted to hitting and let's have another and it said That's just the message past message this morning message. And then let's have a button. Misha say glosses. Yes. I don't know why. Anything. Save that. Just looks like gobbledygook on the webpage is our message, is our OK button again does nothing. Now, let's just before we do JavaScript now just want to style this warning message Kitty. And I know this is not good practice, but I'm just going to put the style in the head. I don't want to create external style sheets and all that now, we can just do it to get equity. So what should we do first? Let's do the entire div. So this is just using our standard CSS styling techniques on identifying the ID. And now we can style it together. Let's display it as a block. It's put a background color. Fifty eight, fifty eight, fifty eight. Starting to see some results. Position fixed, border, two pixels. Just showing you kind of how this thing as being made up. Let's put this in the same time. Let's make it a bit wider. But fall to their onset is just push it, lift a little bit larger on. This is not the most ideal way to do things that I'm just trying to get the job done to shake kinda upwards. And now let's just put some padding. And its alignment that takes to the same type. It's getting. It's getting me, I think I wanna feel the vibe. Let's now style this warning message. What did we call it? The golden message? Let's make it a white color so we can actually read it. What else do we need methods? Marginal looks terrible. Anjum top, margin, bottom. That should be our longitude, longitude button. See Stine tell you Stein's look much bigger. And in the last day to style this OK button because that looks table. Say again, what have been called Ethical date back to him and it's about what you do with that. Let's do a background color. It's PDS. And we would not listen, have exactly square borders. Doesn't look that nice. In my opinion. Slightly rounded edges. Probably don't even see it, but it's my subtle improvement on design. We can now do a border stoking already of a bidder. And the margin bottom needs a bit of work. Margin bottom. And the other thing I want to show with my mouse hovers over the, okay, I wanted to become a pointer. So just could assist you that pointer. Now in a hover over, it becomes a pointer. So you know, it's a battle. Cool. Let's make it a bit wider. Let's just add some padding. I guess I'll say it's looking good. I said that's looking mighty. Me just pull this inverse. I said is looking like a nice Alert tab Wave ID in another pop-up that we saw. And you can decide these things would be like I've just done a really rough job. Now let's add JavaScript. Again, let's edge off-script. Just go the top. Remember JavaScript has to be within script tags. And where should we put it? And where should we put it as? Put it at the top. Yeah. Let's put it at the very top. Script. Script. Let's hide this whole confirmation warning box. So at the moment we've got they block less cisco display none. And we should see that disappear. But when we want to, when we click this button, we want to see it. Well, the first thing we need to do is we need to start creating a function for wings button's clicked, right? If you look down, let me just scroll down again to the bottom of the code you can see this button has a function that we've called Lead me. We need to now define that function in JavaScript. Otherwise, nothing happens, which is what's happening here. So let's start defining a function called me. Function. And what do we want to happen? Well, the first thing we want to happen is we want to display an alert message. And in order to do that, we've got identify that whole div tag that has the alert which we had with an ID of comfort. So let's call it the confirm box or lack of a better word, document. Mender at your webpage, JavaScript has an inbuilt method called getElementByID. And we called ID. So now we've got it. Then the second thing we wanna do is, you know, when that alerts openness at OK button, we want to identify the OK button because when the OK button is clicked, we want that modal will pop up, that alert disappear. So that's the second thing we wanted. Late. Ok, button equal document, getElementsByClassName. What fast ended. Recall that again. We call it. Now if we just lifted it thus, it's actually gonna return. When you find an element by class name, it returns what's called a node list. And it's almost like an array-like object. So this isn't quite enough. We've just got to access the first element of that array, which is what that is doing there. Now, now that we have this OK button, what we wanna do is we want to define an unclick. It means that when the user clicks on that, okay, by the whole dialog box disappears. So let's do that. And let me add comments here. And we went through comments. This is the button in the alert modal. And now we want to hide the alert modal when a button is clicked. So let's do that. So let's add an event listener. On click, OK, button on click. And we have to define the function again. But let's do it all in one step. And you'll see later we actually don't have to write out this big keyword is a shorter way to do it, which is new syntax. I'll teach you that later. I just want you to understand what it is we're doing here. Then another inbuilt method within the browsers and JavaScript and the DOM is sick attribute. You can literally change attributes and different elements in your page. So let's grab that confirm box, which we've defined above. And we can see an attribute. And what attributes do on a state where remember we wanted it to be display. Now as none or Knit button is clicked, the attribute we want to make the style is the first argument to this method. And second one is what we want to change. And that is display to none. Supple, right? So now we've defined what happens with the button within the nerd modal, but we haven't actually shown the modal anyway. So we can't do anything with it. Well, let's just put it up here and say show modal. We've got confirm box, S8 attribute. We want to pick the style and we want to display. Block. Should give it a go. How should we tasted good seafood works. Let's click the button. What's gone wrong? And let me was it's not working when other Click Me. So something we can't Jake is if we console log, yeah, we can blog high. Receives the click event is working. Let's just go to the console. And let's click the button. You can see nothing's happening. So obviously this alert me function as mapping called cushion is why on the colored me on Lech should be on check. Check effect works now. And these are high and as I'll want it. Okay, great. Let me hide that immediately. That refresh a page when I click comes up, we've identified this OK button. So when I click OK, it's going to execute this function which says on a sit attribute to display none and it disappears. So this is really an example of how we've created an alert from scratch, from literally scratched on HTML, CSS, and a bit of JavaScript. And we've literally created our own custom-designed alert. This is awesome. And this is going to sit on the path to being awesome, CUDA. Let's continue.
CM Code_Zone, !false | funny, because its true
