William Rosener: Hello. Welcome back. And this assignment you learn about string manipulation using both JavaScript and PHP would probably break this video up into two sections. Sections.
William Rosener: The first one will be purely on JavaScript will do this exact same thing on PHP using another video here.
William Rosener: So take a look here. Here we got to JavaScript. We're going to allow the user to enter a first name a space. And the last thing.
William Rosener: And when I press extract name, it's going to extract the first name and last name there and then display, how many characters are in each name.
William Rosener: And we're going to make sure that this can work for any name, not just my name. So if your name is one character or 10 characters long, first name and we're going to make sure it works them.
William Rosener: Okay, so what's going to happen is we're going to look for a space anything to the left of the space. It's going to be the first thing than anything to the right is the last thing them.
William Rosener: And that was JavaScript and then to challenge you. I'm going to probably have you guys see if you can figure this out. That was with the two names. The first name and last name.
William Rosener: What is that someone had a first name, middle name and last name, and we'll see if we can get that to work as well. So if I came along and maybe if I put in William and Joseph
William Rosener: And I had extract name that's going to extract my first name, middle name and last name and tell me how many characters are in each name there. Okay, let's get started here with the JavaScript one
William Rosener: And the very first step I'll do is open up some basic editor. I'm just going to use notepad. I think it's very clean interface here, although I probably be using notepad plus plus. I was actually doing some
William Rosener: More complicated things for there's a chance. I was making some mistakes here. Okay, so the very first step I want to do is I want to go ahead and just grabbed a basic form I had lying around here and we're going to come along, appeared the title and I'm going to put in string manipulation.
William Rosener: And I'm going to put in JavaScript.
William Rosener: Okay, maybe, let me just go ahead and copy this control see come down here to my header tag, and I'll paste
William Rosener: And I'll go ahead and close that and then this, go ahead and put your name.
William Rosener: And then either a couple line breaks or I just go ahead and put a paragraph break there.
William Rosener: So just take a look here. What do we got so far HTML HyperText Markup Language. We're going to start it.
William Rosener: We're going to close it. We're gonna have our head. We're going to close the head a title, close the title will be inserted in
William Rosener: Our JavaScript within the script tag. Then we'll start the body and close the body. Let's go ahead and save this. I'm gonna come up to file. I'm going to go to save as
William Rosener: And I'm just going to call this one assignment.
William Rosener: He loves JavaScript.
William Rosener: And then this is an HTML.
William Rosener: HyperText Markup Language. So make sure you know where you're saving it on the saving on a temp. Make sure you give it so dicks ends with the extension HTML HyperText Markup Language and make sure it's a text document you get everything done. Go ahead and press Save.
William Rosener: And I'm just come right over here and here it is. I'm not going to right click on it and I'm going to go open with and I'm gonna choose Firefox. And there we go.
William Rosener: Okay, so maybe now we're going to come on down and we'll start working on the form a little bit here and maybe just to save a little time. I'm just going to go ahead and copy
William Rosener: Some information here and paste that I'll explain what this does. So we're going to start a forum. I'm just kidding. This the name form one will go ahead and close the forum.
William Rosener: And I'm allow the user to input information in this case of size 30 here. And again, I've done this in the past.
William Rosener: I typically insert a value into this text box. And when I got everything up and running, if I remember here at the end, I'll try and delete this name so that when someone else uses and that name is not appear there.
William Rosener: Okay, just save me a little time. Okay. Then we're going to have a command button.
William Rosener: The caption is going to say extract name. And when I press on it, it's going to come up to my JavaScript and look for a function called extract name.
William Rosener: Now I've got a text area. I've got rose and sometimes I'll put this in double quotes here it's going to work either way, though. And same thing with a columns and I'll go with
William Rosener: 50 on the column so works with or without those Duncan said, Okay, well let's table. Let's just go ahead and before we even
William Rosener: Do anything else is just go ahead and make sure we've got a function that's working correctly here.
William Rosener: So we'll take a look here. I've now got a function in if you want, you could just to make sure you're not making this film sticks. Here you can literally copy extract name and come right up here.
William Rosener: I'm not going to put open parentheses close and then I curly bracket to start my function and a curly bracket to close the function
William Rosener: Okay. And I'll tell you. Well, let's just go ahead and put something in results here to make sure we're calling this function correctly. I'm just going to type in document.
William Rosener: Form one and results.
William Rosener: Value equals test.
William Rosener: Okay so document form one
William Rosener: Results that value coast. So when I press on it, it should simply display the text test. Okay, let's go ahead and save that someone will come up here to file. I'm gonna hit Save.
William Rosener: I'm not going to come right back over here. It's my refresh button. And there we go. And now when I press extract name, hopefully. And sure enough, and displays test.
William Rosener: Okay, now what we want to do is begin to read need to read this information to variable than one of the began looking for the space everything to the left is the first time into the ride is the last name them.
William Rosener: Okay, so maybe this point, I'm going to just to save a little time here. I'll go ahead and paste some verbals appear at the top.
William Rosener: And a lot of times I go with them, we go with start off with lowercase letters. So I've got complete name, first name, last name space position and Tim string here and maybe the very first step, we'll do is we'll grab
William Rosener: The information from that form.
William Rosener: So what am I going to do, I'm going to take document for one complete name, I'm going to take the information and this text box and store it in a variable with the exact same name here.
William Rosener: Okay, at this point, I'll tell you what, let me grab a little code here to illustrate what will be working on.
William Rosener: This is a comments to slashes there. So right now we're going to start with my name here. And what I'm going to find is the spaces that position for if I type in Bill Reznor
William Rosener: And you're going to find with JavaScript actually with PHP as well arrays and strengths both starting position zero. So the B would be zero I in one L to the cell and three and then my space would be in position for
William Rosener: Okay, but let's now go ahead and have actually find that
William Rosener: Space position and that's what I've used the server before space position here. So what am I gonna do I'm gonna take complete name index, make sure this is a capital O,
William Rosener: And then inside. I've got double quotes with a single space inside there and semicolon. Some what's going to happen is, first step we're going to do is we're going to
William Rosener: Read The Information from the text box and to variable now going to go ahead and find the position of this space. The table. Let's just go ahead and check it out. Let's just put in space position right here.
William Rosener: So if I enter a bill space roesner will find that it occurs at position for. Let's go ahead and I say that
William Rosener: Come back to my browser. I'll hit refresh ahead extract name. And sure enough, I'm finding a position for however we want to make sure that this works for any name. I'll just
William Rosener: Bill or not just names of four characters we wanted to work with names of any size here. So let me type in William I'll hit extract name and we'll find that the space now occurs at position seven
William Rosener: OK, so now that we know where the space occurs that we can extract
William Rosener: The first name and then eventually we'll get to the last name here.
William Rosener: And I just got done change that. So let me change this server. So, first name.
William Rosener: First name and first name are all lowercase here. Okay, so what's going to happen now. I found this this this line right here is going to find the space. And in this case, I found that position form.
William Rosener: So I'm not going to take complete name, I'm gonna take a sub string. I'm going to start in position zero
William Rosener: Right here, and I am going to go to position the fact for so I'm a store that in first them. Now what I'm gonna do is I'm gonna say Tim strength is equal to the static string first name plus
William Rosener: What's in for the variable first name, plus a new line and I'm like concatenate now I'm gonna say 10 strings are going to attempt string, plus the static string it contains.
William Rosener: I'm going to take the link the first name, the link of the variable what's in that variable first them along with this string here characters and then two new lines and now rather than display in space position will go ahead and put in temps trying
William Rosener: Okay, I'm gonna go ahead and save that.
William Rosener: Come back here refresh his extract name. Sure enough for same as William it contains seven characters in the subject will go ahead and put in a different name.
William Rosener: And sure enough, that's working with those as well. Okay, so that now got it working on both on first name. Now we need to simply get it working on last name.
William Rosener: So again, probably the big thing here to keep in mind. I'm trying to think what you could have messed up as make sure index. That's a capital O, everything else in there is lowercase here. OK. Now we're going to go ahead and do last name.
William Rosener: And last name. OK. So now what's going to happen is I'm going to take us the sub string. The building sub string function. And I'm going to start in space position plus one. So I found my space and position for
William Rosener: I'm not going to go for plus one is five. And I'm going to start there and grab the information to the right of that and I'll place that in a verbal called last name.
William Rosener: Then I'm gonna take Tim string is equal to what was already in Tim string concatenation with last name concatenate what's in my variable last name, along with a new line.
William Rosener: And then down here, kind of like we did before. What concatenate the length of that string. Okay, let's go ahead and save that.
William Rosener: Take a look at it. It's refresh and hit the extract name. And sure enough, it's now extracted the first and last name there. And if I was to type in William
William Rosener: And I'll tell you what I've just put a different name here Smith.
William Rosener: And it extract name I'm not grabbing the first name and last name correctly display and the number of characters and these one. So, again, that was JavaScript here.
William Rosener: Just take a look here back we come back here. I've now walked through me challenge you a little bit here. So that was with just a first name and last name.
William Rosener: And when I'm a big challenge to do is to have a first name, middle name and last name, where you would extract the first middle and last name there. Well, it's going to conclude this video in JavaScript. I'll catch a second just on using doing the same thing using PHP.