Bill Rosener: Well, this is Doctor Bill. Welcome back in this video. We'll do a little string manipulation using HTML and Javascript in particular. We're gonna allow the user in our 1st name space and the last name. And we press extract name. It's gonna extract the 1st name, Bill. How many characters are in there and then the last name, and how many characters are in there, and it should work on any name. So if I put in, William and I press extract, name, it should extract the correct 1st name and the correct last name as well. Trick. Here again it's got to have a space.
Bill Rosener: because if I had this all jammed together, I would better know where the 1st name ended
Bill Rosener: and the last name started.
Bill Rosener: Okay, well, now that we know what we're trying to do. Let's go ahead and get started. So the very 1st step I'm doing is open up visual studio code. I'm gonna come right up here to file new
Bill Rosener: regardless. One assignment
Bill Rosener: 22 dot HTML.
Bill Rosener: Hit the enter key and then finally create.
Bill Rosener: So at the very top up there we wanted some type of header tag header, 2 header, 3 header, one.
Bill Rosener: And it just needed to say
Bill Rosener: string
Bill Rosener: and their punishment.
Bill Rosener: Okay, we'll be working on the Javascript code here in a little bit like if I wanted to, I could go ahead and I could start it up here.
Bill Rosener: That's where the Javascript code is gonna go. But I'm gonna come on down here and get working on the form. And I'm just gonna go ahead and give this thing the name form one. Just keep it nice and simple.
Bill Rosener: Okay?
Bill Rosener: And I've taken a look here, the very 1st time I'm going to do is allow the user to enter their name.
Bill Rosener: So I'm gonna go ahead and say, name Poland
Bill Rosener: input type equals
Bill Rosener: tax
Bill Rosener: name equals.
Bill Rosener: I'm gonna call this complete name.
Bill Rosener: We specify size. I'm going to go, say 40
Bill Rosener: and go ahead and put a default value in here
Bill Rosener: that way. When you're a Testament
Bill Rosener: you don't have to keep undering your 1st name and last name over and over, and then, if I hopefully, I remember at the very end, I would come along and delete this value.
Bill Rosener: since it's just kind of some just kind of save me some time while developing. Once I've got it working, then I'll go ahead and not delete that.
Bill Rosener: and let's go ahead and put a little, maybe a paragraph break
Bill Rosener: out there at the end.
Bill Rosener: Okay, so we've got a name
Bill Rosener: and put type, text complete name. And we've given it a value. Let's go ahead and save this.
Bill Rosener: We're gonna right. Click open in default, Browser.
Bill Rosener: and I'll get that a little bit larger, and there we go. Yeah, that's looking great so far. Now, the next step is going to be. We're going to create our command button. Maybe I won't even worry about the clear. I'll just work on extract names.
Bill Rosener: Input type equals button. First, st the top one was text.
Bill Rosener: value equals.
Bill Rosener: I tell you. Sometimes I put the on click first, st and that it matters so the order.
Bill Rosener: And then what value do I want to appear? Or what caption?
Bill Rosener: Okay, so input type equals button when I click on it. It's going to come up here and look for a Javascript function called Extract, which will have to work, and then I want the caption to say, extract name
Bill Rosener: on the commitment button.
Bill Rosener: Okay? And then, finally, we're going to go ahead and create a text area tag where we cannot display this.
Bill Rosener: I'm just going to call this my output.
Bill Rosener: This is going to be case sensitive in Javascript. So I've got my everything is lower except output capital O,
Bill Rosener: and maybe go with 8 rows
Bill Rosener: and maybe say 50 columns.
Bill Rosener: And then we're gonna close the text error tag.
Bill Rosener: Okay, let's see what we've got here so far about
Bill Rosener: how did that upload them
Bill Rosener: file save? Come back to my browser refresh.
Bill Rosener: and that's looking perfect here. Now we need to do is work on the Javascript code.
Bill Rosener: I'm gonna come right up here.
Bill Rosener: I'm going to start a function and it has to match. So down here, I call this some extract. So I'm going to create a function called extract.
Bill Rosener: Okay? And there we go.
Bill Rosener: Now, I'm gonna go ahead and create some variables.
Bill Rosener: I wouldn't really have to do this. But I'm going to go ahead. And
Bill Rosener: it's kind of optional whether to Ver declare the variables or not. I'm gonna create one called the Complete name.
Bill Rosener: one for 1st name.
Bill Rosener: one for last name.
Bill Rosener: one for the space.
Bill Rosener: I'm gonna put a capital P there space position. And then, finally, I'm gonna create a temp string just to store this all in prior to writing it out.
Bill Rosener: Okay? So what I've done so far is I've created a function. I've created some variables. Now, I'm gonna say, a complete name.
Bill Rosener: And I'm use. It's gonna have a variable called complete name. And so is the name of this text box.
Bill Rosener: So it's going to be a document.
Bill Rosener: dot form one
Bill Rosener: that complete name.
Bill Rosener: dog value.
Bill Rosener: And I tell you what we could do is go ahead. And I'm going to
Bill Rosener: just to make sure my code is working.
Bill Rosener: I'm gonna go to a document that form one
Bill Rosener: dot my
Bill Rosener: output
Bill Rosener: dot value
Bill Rosener: equals.
Bill Rosener: I'm just gonna start off with complete name just to make sure
Bill Rosener: I can call this function correctly here. So what it's gonna do is take complete name and throw it into that text area. Tag. Well, let's make sure this is working here.
Bill Rosener: Someone to come along and save it.
Bill Rosener: Come back to my browser, hit, refresh, reload, and hit extract name, and sure enough, all to did was take this information and place it here. We've got some work to do. But if you're not getting that, that means that you've probably already got a problem and make sure you guys functions about correctly extract. I've got that all lowercase in both cases.
Bill Rosener: Form. Make sure you don't have any spaces here.
Bill Rosener: It's called form one, I can call it. Whatever I want. I could call this ABC. As long as this was also called ABC. My output
Bill Rosener: that was, I've got capital O. And capital. O, so make sure you got all those things working.
Bill Rosener: Okay? So maybe one of the very 1st steps we're going to do is we need to find, where does that space occur at?
Bill Rosener: And maybe what I could do is go ahead and
Bill Rosener: have a comment here.
Bill Rosener: and I'll put that on
Bill Rosener: both.
Bill Rosener: Okay, that's enough. What we're gonna find is Javascript, it starts in position 0. So we are actually gonna find the space at Position 4 using my and using bill. If I use William, it would be a different number. But then using Bill, so I'm gonna go ahead and say, space position equals
Bill Rosener: complete name
Bill Rosener: dot index of.
Bill Rosener: and then we'll put a single space right here.
Bill Rosener: So what is gonna happen is it's gonna take a look at complete name and find, where does this? There's only make sure you only got one space in there. Where does this one space occur at? And it's gonna find it in position for? So I tell you what, let me. Just go ahead, and I'll put a space position here just to show you.
Bill Rosener: So if I was to save this.
Bill Rosener: come along and reload.
Bill Rosener: and if I hit extract names. Sure enough, it has found the space in position form.
Bill Rosener: Okay, we now know where the space occurs at. We can now extract the 1st name.
Bill Rosener: and it's going to be the complete name
Bill Rosener: dot substring.
Bill Rosener: And I'm going to start in position 0 and go to space position.
Bill Rosener: Okay? So to extract. 1st name, I'm going to say, 1st name is the complete name.
Bill Rosener: the substring starting in position 0, and go into the 4. So it's going to grab BILL. In that case. But again, if I put a different name in there, it would work just as well.
Bill Rosener: Okay, let's go ahead and start working on something to write out. And I'm gonna say, Temp string
Bill Rosener: is equal to
Bill Rosener: 1st name
Bill Rosener: Colon. That's just a constant string
Bill Rosener: plus
Bill Rosener: 1st name.
Bill Rosener: And now I'm going to keep going. And I'm going to put a hard return
Bill Rosener: and a semicolon.
Bill Rosener: Okay, then let me. Just kinda I'm gonna keep going here. I'm not gonna say
Bill Rosener: temp string is equal to what's already in temp string
Bill Rosener: concatenated with
Bill Rosener: it's
Bill Rosener: contains.
Bill Rosener: There's a little space there.
Bill Rosener: I'm going to concatenate it the length of 1st name.
Bill Rosener: and then I'm going to go ahead and put a
Bill Rosener: another.
Bill Rosener: I'm going to type in characters.
Bill Rosener: Let me put a space there
Bill Rosener: and a hard return. Next, I'm gonna put 2 hard returns here.
Bill Rosener: Okay, so what's gonna happen is, so let's go ahead and a table. Let's check it first.st
Bill Rosener: We're going to file.
Bill Rosener: save
Bill Rosener: come back to my browser, hit, refresh.
Bill Rosener: and extract names
Bill Rosener: and let's go ahead and rather than display in space position.
Bill Rosener: We now want to start displaying my temp string.
Bill Rosener: So time string is just a variable. I'm going to keep adding to it.
Bill Rosener: and it's going to contain eventually the 1st name along with it contains, etc. There, let me go ahead and save this.
Bill Rosener: Come back to my browser, hit, refresh
Bill Rosener: and extract names.
Bill Rosener: It looks like I could put a space after this call in here, but otherwise everything's looking good here.
Bill Rosener: So right after right here. I'm going to put 1st name, Colon. Let me save that.
Bill Rosener: Come back and refresh.
Bill Rosener: And sure enough, I'm not going to space. Okay. Now we're ready to start working on the last name.
Bill Rosener: Okay? Last name. I'm gonna 1st of all, grab
Bill Rosener: what is like? Find out what is the last name.
Bill Rosener: and it's equal to
Bill Rosener: complete name
Bill Rosener: dot substring.
Bill Rosener: Now I'm going to start in space position
Bill Rosener: plus one.
Bill Rosener: So I found the space in Position 4.
Bill Rosener: I use my name. I'm now going to start in position 5 and grab it. So I now have last name, and now we can continue. Tell you what I can do is just go ahead and grab this code right here.
Bill Rosener: copy it.
Bill Rosener: paste it.
Bill Rosener: and I can say rather than saying 1st name. I can say last name
Bill Rosener: and last name
Bill Rosener: the little higher up here on the screen temp strings. It contains
Bill Rosener: last name characters. I think I've got everything here.
Bill Rosener: oops! One big thing here is this one.
Bill Rosener: the 1st one is going to do an assignment, the second ones I want to take what was already in temp string and add it to it, so I need to put a temp string here.
Bill Rosener: plus. So it's I don't want it to delete it. If I didn't have that, plus. It would have written overwritten everything there, and just started with last name.
Bill Rosener: So let's take a look here. I think I've got everything last name, last name.
Bill Rosener: and looking good. Here, let me go ahead and save this.
Bill Rosener: Come back to my browser, hit refresh.
Bill Rosener: hit, extract names.
Bill Rosener: 1st name Bill. 4 characters. Last name Rosenner, 7 characters looking good. And let me just put in
Bill Rosener: different 1st name.
Bill Rosener: And this is looking great here. And
Bill Rosener: okay. Anyway, hopefully, you got everything working. If you've got any problems, just make sure a couple of things there. You don't have spaces like you can't have a space
Bill Rosener: here between. It's a variable, complete name. Make sure it matches in case Javascript is case sensitive. So I've got a capital in here.
Bill Rosener: and
Bill Rosener: so complete. Name. Capital! N my output. Capital. O,
Bill Rosener: even index up capital! O, right there! So just kind of keep staring at your code, if you're having trouble. And eventually you'll probably figure it out. Hopefully, with visual studio code. It might start being in a different color if it's an incorrect spelling there, anyway. Hopefully, in this video, you learned how to create a
Bill Rosener: using HTML and Javascript, a little string manipulation application here that will allow the user in our 1st name, last name, and it will extract it. Well, I'll catch you next. Video. Thanks a lot. Bye.