User Input and Response on a webpage using JavaScript (for beginners)

so in this video we're going to make a web page that says hello to the user and then the user is going to type their name and the web page is going to say hello back but with their name included so it's going to take input from the user and produce output that includes their name so that's going to involve making a javascript program so getting javascript along with our html to get that functionality happening so i'm going to make a new file here in visual studio code and i need to save it as an html file so that vs code recognize it as html so i'm just going to save this on my desktop i'm going to call it something like hello name hello name.html the important bit is the dot html extension because if you've got that then it recognizes it as an html document and what i love about vs code just the exclamation point and then tab and then it auto-completes a boilerplate for us um so we can type in here the title let's call it hello name or you can call it whatever you want to call your web page and then getting into the actual code inside the body of our html document i'm just going to type in h1 element and the heading is actually going to be the question so i'm just going to say um hello um what is your name uh question mark and then so that that heading is gonna be nice and big gonna ask us the question then underneath that um some input so the input tag is self closing so i don't need to have an opening and closing tag for input just that is enough to give ourselves a little box where the user can type in their name underneath that i want a button so just the button tag and html is all we need and then inside the html i just type in what i want the button to actually say so inside the button is going to be the text submit to indicate that they click on the button once they finish typing their name so just before we go any further let's just save that and see what that looks like for now so i'm coming to our um actual uh web page here if we open it in the browser it looks like that so it says hello what's your name and then there's a space to type in and then a submit button now i probably want this underneath um so let's put a break so just a br tag in fact maybe a couple of those um br is kind of like pressing enter on the keyboard to just kind of move it down a line um and let's see if that improves it at all so refreshing the page okay so now it's there's a bit more space there so that's nice i think i want all of the centered so what i will do is actually put all of this actually you know what i'm just going to do some i'll just send to everything so i'm going to make a style tag here now this is mostly this video is mostly about javascript but it's a tiny bit of css it's got to make it look a little bit good so inside my style tags that's why i do the styling so just for the body and the entire body i'm going to fancy brackets um to tell the computer how i want to style the body and actually let's make a background color shall we make a background color of you know dark slate gray that'll do and let's text align center everything so um in fact i think let's make the color of the actual text so color for the text oh not column count i didn't want that i wanted color so color um for the text let's make it a nice white okay so like i said this video is not really about styling but we'll do that basic styling for now and see if that improves the look of it at all uh there you go so it's in the center i got a background color and the text is a you know a nice-ish color so i can type my name in here and press submit but of course nothing is going to happen so this is where the javascript comes in so um to include javascript in your html you could make a separate javascript file but for now what we'll just do is we'll just make a script tag so type in the word script and just like a normal tag in html but this is the script so inside the two script tags that's where we're going to write our javascript code so what i want to happen is when i click this button i want it to call a javascript function so in other words i want something to happen with my javascript when i click this button so what i'm actually going to do this time is inside the button opening tag here is an actual inside the opening button tag so after the end but before this greater than sign here i'm gonna type in on the event so on on the event of me clicking the button i want something to happen so auto complete and you get the equal sign and the quotes so inside the quotes that's where we can have you know this is what i want to happen when i click the button and what i want to happen is i want um a function to run so i'm just going to call it um my function for now so this function is going to run in javascript to sort of let the text editor know that it is or to let the computer know that it's a function we want these brackets just normal brackets opening and closing and you see how that changes the color um in vs code here of the my function name because we know now that yeah this is a function we've got um with these empty brackets um that's uh how we know so coming down here to the javascript um the problem at the moment we have is when i click the submit button it says it's going to run a function called my function but there isn't a function yet so let's make one so how do we make a function or declare a function in javascript well funnily enough we use the word function so function and we're going to declare our function and give it a name well what do we want to call it obviously we have to call it the same thing as we say we want this function to run so it has to be the same name so my function again spelled exactly the same way it should come up actually you can auto complete it so the capital f they have camel cased it you've got to spell it exactly the same way so that when we click this button it's going to look for a function by the same name in our javascript and again we need these brackets to indicate yeah that's a function there okay so after we've declared the function we need to actually write some code for the function uh to run so to if we're writing code we use the fancy bracket so the actual code for the function goes inside these fancy brackets i'm going to press enter to give myself some space to write some code and to start with let's just test it out i'm just going to do an alert here so alert and then in brackets a string so quotes for a string and i'm going to say testing to test out that my button is working so that when i click it it runs this function which has got no code inside it apart from an alert popping up that says testing so let's save that and come to the browser i'll refresh the browser to update the code and then if i click the submit button hey i've got a pop-up that says testing so yeah that means my javascript is working now i don't want that pop up so i will delete this and we'll actually write some code in here some some javascript that i actually want so firstly one thing i need to do is i need to identify this input tag from my document from my html document that's the input but i i need to sort of draw on that or find it in my html document but i'm not going to find it unless i give it a name i need to call it something so we're going to give it an id an identification so id autocomplete and we get equals and then the string you know quotes and i can call it what i like in here so i'm just going to call it uh maybe call it user input or something like that user input um right so if i um come down here now what i can do is i can create a variable um so i'm going to say lit so let and i'm going to make this variable i call the variable the same thing you can actually call it whatever you like but for me i find it easier to call it the same thing as the name that i gave the html element so let user input we're defining this variable we're going to call it user input let that equal and then i need to actually find this thing from my html document i want this variable to equal this element from my html now when i'm defining a variable just generally if we haven't looked at variables too much um i could i could make this whatever i want i could store whatever data i want to inside this variable i could say it equals two or seven or i could use quotes and call it a string um you know and this this data whether it's a string data or number data or whatever can be stored inside this variable but for now what i want to do is i want to take this element from my html and store that inside this variable so that i can write some code that does something with that user input because remember ultimately i want to actually take what they write in there and do something with it i want to say hi and then use their name right so um all right this is in my document so i'm going to write document document to indicate that what i'm trying to find is from the html document and then dot i'm going to use a method now to find something from the document and that's i'm querying the document really and i'm selecting something from it so i'm going to use query selector that's my method to find something from the document document.query selector and then in brackets i'm going to write the name of what i want to find so because it's a string i'm putting it in quotes and then because i've given an id just like instagram really if i'm trying to find something on instagram i use hashtag right so hashtag and then whatever i've called it user input so hashtag user input and it will find it from my html document all right so let's put a semicolon there to end the instruction in my first line of javascript semicolon says yeah i'm finished that instruction ready to move on to the next one okay and what i want to do is um actually put a message out there so i want to put a message into my html now at the moment i've got a heading i've got the input i've got the button but i'm going to have a space underneath here in my html to actually say something so i might say this in an h1 as well you could do an h3 or whatever you want but i was going to make an h1 in here and inside this h1 i want some text to appear a message to appear now at the moment inside this html my inner html here between these h1's tags is empty there's nothing there right but i want to put something into the html there with my javascript code i want this to be empty until i press the button and then when it runs the code i want it to actually fill the h1 with some text so once again to do that i need to actually recognize this h1 i want to give it a name because this h1 is different to my first one so i want to distinguish between them i'm going to give it a name so again the id tag let's call it something i'll just call it message for now all right and then exactly the same process i'm going to create a variable and then find that thing this h1 i'm going to find it from my document so to do that i'm just going to copy and paste because it's basically the same exactly the same code that i wrote before but this time instead of user input we're calling it message so this new variable i'm calling message and that's going to what i'm going to store in this variable called message is going to be this element here from my html so i'm going to find it from my document i'm going to use the query selector method and i'm going to find this thing that's called message so remember i need the hashtag don't forget the hashtag hashtag message to find it from my document all right so now that i've actually defined those variables i can actually do something with them okay so i'm gonna when i click the button it's going to run this function and what i'm going to do is i'm going to say message now that i've defined that variable the computer knows what i'm talking about when i say message it says ah you mean that thing that element from your document this one here this element that i've i've stored in this variable called message okay so yes that's what i mean i mean that empty h1 dot and i'm going to write something inside my html so the inner html of this empty h1 i'm going to make it say something and for now i'm just going to say testing to see if it works and then if it works i'll actually think more about what i want to put in there okay so let's test this out and see if it works so coming to my browser i'm going to refresh the browser to update the code and then if i press submit hooray it says testing so i know that that button works and it puts something in the html for me okay great but i don't actually want it to say testing what i want it to do is i want it to say welcome to my page but i want it to use the user's actual name so let's try this instead i'm going to say welcome uh oh spell it right welcome to my uh web page or you can make it say whatever you want um and then i want it to say the user's name um but i don't want the name to be like squished up right against the text so i'm going to put a space bar in here then i'm going to close the string now you notice visual studio code has tried to be helpful here and give me an extra quote mark but let's get rid of that i need to have opening quotes and closing quotes doesn't matter at this stage if they're single quotes or double um but i want to end the the quote there i want to end the string there welcome to my web page and then a space bar um or a space um and then i want to add the the user's name okay so i'm going to use the plus symbol i'm not doing maths i'm not adding anything together uh what i'm doing is what's called concatenating so i'm i'm joining together um two separate things so i've got the string that says welcome to my web page and then a space and then i want the user input variable that i made up here so the user input and remember that is bringing this input box from the html um that's what it's stored in that variable so it's going to join those two things together so does that mean we're finished no not quite and i'll show you why you might not might be quite what you expect here let's let's save this and refresh and test it out and you'll see what i mean if i uh refresh the browser if i go to say you know type my name in here and then i press the button it's actually not going to say hello to me with my name it says welcome to my web page and we get that space but look at this it's giving me a whole html element now why is it doing that well if i come back to the code we'll see that what i've stored in this variable is the entire element right it's this element this html element the whole thing now i don't want the whole element what i want is what the person has typed in what the user has actually typed into that box and we call that the value right that's the value of what's actually inside this element so if i say user input which is that variable and then dot value that's what's actually going to give me whatever they type in the box that's going to give me the string that they've actually put inside that box so it must be user input dot value okay so i'm going to save the page there and refresh and let's test it out again so refresh the browser hello what's your name i'm going to say my name and then i press submit and now it says welcome to my webpage and it's using my name great actually one more thing let's put a comma in there um let's have better grammar sorry it's a bit ocd but there we go um refresh the browser um hello what's your name type my name and now press submit and when i press submit it runs that function in javascript and my javascript code is working so that's how we can get some input from the user and produce output with a simple javascript program that we put in our html

Channel: Keith Paterson

Views: 1,581

Keywords:

Id: KB6Yg5hNrqc

Length: 16min 54sec (1014 seconds)

Published: Tue Sep 07 2021