[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.55,0:00:05.45,Default,,0000,0000,0000,,A form is a way for a webpage\Nto send information to a server.
Dialogue: 0,0:00:05.45,0:00:09.95,Default,,0000,0000,0000,,We don't let the webpages here\Non Khan Academy interact with servers
Dialogue: 0,0:00:09.95,0:00:11.44,Default,,0000,0000,0000,,for security reasons.
Dialogue: 0,0:00:11.44,0:00:13.65,Default,,0000,0000,0000,,So we don't teach forms here.
Dialogue: 0,0:00:13.65,0:00:16.100,Default,,0000,0000,0000,,But, now that you are learning JavaScript\Nto manipulate webpages,
Dialogue: 0,0:00:16.100,0:00:20.55,Default,,0000,0000,0000,,I can show you how to use JavaScript\Nto process form elements
Dialogue: 0,0:00:20.55,0:00:23.07,Default,,0000,0000,0000,,instead of having to\Nsend them to a server.
Dialogue: 0,0:00:23.07,0:00:28.10,Default,,0000,0000,0000,,I've set up a bunch of form elements\Non this page to find out the user's name,
Dialogue: 0,0:00:28.10,0:00:30.04,Default,,0000,0000,0000,,and their language.
Dialogue: 0,0:00:30.04,0:00:34.03,Default,,0000,0000,0000,,And I want the webpage to say hello\Nto the user in their language
Dialogue: 0,0:00:34.03,0:00:36.67,Default,,0000,0000,0000,,once they click this button.
Dialogue: 0,0:00:36.67,0:00:41.46,Default,,0000,0000,0000,,The first step is to store\Nthe button element in a variable.
Dialogue: 0,0:00:41.46,0:00:49.31,Default,,0000,0000,0000,,So we'll just say:\N`document.getElementById("button")`.
Dialogue: 0,0:00:49.31,0:00:53.19,Default,,0000,0000,0000,,The next step is to define\Nthe event listener function.
Dialogue: 0,0:00:53.19,0:00:57.88,Default,,0000,0000,0000,,`var onButtonClick = function() {`
Dialogue: 0,0:00:57.88,0:01:03.77,Default,,0000,0000,0000,,and then inside of here, we'll just start\Nwith having it append a message.
Dialogue: 0,0:01:03.77,0:01:08.73,Default,,0000,0000,0000,,So,\N`document.getElementById("message")`,
Dialogue: 0,0:01:08.73,0:01:10.71,Default,,0000,0000,0000,,we have a nice little message `div`.
Dialogue: 0,0:01:10.71,0:01:20.71,Default,,0000,0000,0000,,And we'll just: `textContent +=\N"You clicked me! Thank you so much!"`
Dialogue: 0,0:01:20.71,0:01:23.16,Default,,0000,0000,0000,,A very grateful div!
Dialogue: 0,0:01:23.16,0:01:28.80,Default,,0000,0000,0000,,Finally, step three, we will\Nadd the event listener to the button
Dialogue: 0,0:01:28.80,0:01:31.71,Default,,0000,0000,0000,,so that it calls that function\Nwhen it's clicked.
Dialogue: 0,0:01:31.71,0:01:36.49,Default,,0000,0000,0000,,so, `("click", onButtonClick)`.
Dialogue: 0,0:01:36.49,0:01:42.96,Default,,0000,0000,0000,,Pause the talk-through now, and see for\Nyourself that it works like you expected.
Dialogue: 0,0:01:42.96,0:01:47.97,Default,,0000,0000,0000,,Now, let's make it actually say something\Nbased on what's in the form.
Dialogue: 0,0:01:47.97,0:01:52.85,Default,,0000,0000,0000,,We need to figure out how to get whatever\Nthe user typed in the name input field.
Dialogue: 0,0:01:52.85,0:01:55.83,Default,,0000,0000,0000,,Let's make a variable for it.
Dialogue: 0,0:01:55.83,0:02:04.77,Default,,0000,0000,0000,,So,\N`var name = document.getElementById`,
Dialogue: 0,0:02:04.77,0:02:07.34,Default,,0000,0000,0000,,since it had an ID,
Dialogue: 0,0:02:07.34,0:02:11.32,Default,,0000,0000,0000,,so we've got that there.
Dialogue: 0,0:02:11.32,0:02:17.12,Default,,0000,0000,0000,,Let's make a new string for the greeting,\Nand concatenate the name of it,
Dialogue: 0,0:02:17.12,0:02:22.72,Default,,0000,0000,0000,,so `var greeting = "Heyaz"`,\Nthat's my favorite greeting,
Dialogue: 0,0:02:22.72,0:02:24.20,Default,,0000,0000,0000,,` + name`.
Dialogue: 0,0:02:24.20,0:02:30.35,Default,,0000,0000,0000,,Okay, so we've got a string, plus\Nwhatever's being stored in that variable.
Dialogue: 0,0:02:30.35,0:02:38.77,Default,,0000,0000,0000,,And now, this here, this text content,\Nshould actually be `greeting`.
Dialogue: 0,0:02:38.77,0:02:41.69,Default,,0000,0000,0000,,Let's see, that looks right--
Dialogue: 0,0:02:41.69,0:02:44.90,Default,,0000,0000,0000,,we found the name input, \Nwe made a greeting string,
Dialogue: 0,0:02:44.90,0:02:47.73,Default,,0000,0000,0000,,and we appended it to the div.
Dialogue: 0,0:02:47.73,0:02:53.03,Default,,0000,0000,0000,,Pause the talk-through,\Nand see if it worked.
Dialogue: 0,0:02:53.03,0:02:55.63,Default,,0000,0000,0000,,Not quite, right?
Dialogue: 0,0:02:55.63,0:03:01.88,Default,,0000,0000,0000,,Did you see "Heyaz [object Object]", or\N"Heyaz object Element"?
Dialogue: 0,0:03:01.88,0:03:04.76,Default,,0000,0000,0000,,Assuming that your name isn't Object--
Dialogue: 0,0:03:04.76,0:03:08.07,Default,,0000,0000,0000,,and no offense if it is,\Nthat's a great name--
Dialogue: 0,0:03:08.07,0:03:10.51,Default,,0000,0000,0000,,that means that something's wrong.
Dialogue: 0,0:03:10.51,0:03:13.70,Default,,0000,0000,0000,,We expected to see whatever you typed in.
Dialogue: 0,0:03:13.70,0:03:16.48,Default,,0000,0000,0000,,But we saw "object" instead.
Dialogue: 0,0:03:16.48,0:03:20.68,Default,,0000,0000,0000,,That means that the `name` variable\Nis pointing at an object,
Dialogue: 0,0:03:20.68,0:03:23.58,Default,,0000,0000,0000,,not the string we expected it to point at.
Dialogue: 0,0:03:23.58,0:03:26.65,Default,,0000,0000,0000,,Maybe you've already\Nfigured out the problem.
Dialogue: 0,0:03:26.65,0:03:31.88,Default,,0000,0000,0000,,We stored the whole element object\Ninside the `name` variable.
Dialogue: 0,0:03:31.88,0:03:34.99,Default,,0000,0000,0000,,And the element object is a big object
Dialogue: 0,0:03:34.99,0:03:37.10,Default,,0000,0000,0000,,with lots of information\Nabout the element:
Dialogue: 0,0:03:37.10,0:03:39.53,Default,,0000,0000,0000,,all of its attributes, all of its methods.
Dialogue: 0,0:03:39.53,0:03:43.47,Default,,0000,0000,0000,,To find out what the user typed in,\Nwe have to access a particular property
Dialogue: 0,0:03:43.47,0:03:46.21,Default,,0000,0000,0000,,of the element: the value.
Dialogue: 0,0:03:46.21,0:03:51.92,Default,,0000,0000,0000,,I'll just go ahead and type `.value`,\Nand that should fix it.
Dialogue: 0,0:03:51.92,0:03:56.18,Default,,0000,0000,0000,,Pause the talk-through, try again.
Dialogue: 0,0:03:56.18,0:03:57.98,Default,,0000,0000,0000,,It worked, right?
Dialogue: 0,0:03:57.98,0:04:01.91,Default,,0000,0000,0000,,Now that's a common mistake to make,\Nso look out for it.
Dialogue: 0,0:04:01.91,0:04:05.01,Default,,0000,0000,0000,,I want to show you\None more common mistake.
Dialogue: 0,0:04:05.01,0:04:13.96,Default,,0000,0000,0000,,I'll take this line here, and move it\Noutside of the function.
Dialogue: 0,0:04:13.96,0:04:22.74,Default,,0000,0000,0000,,Now, pause the talk-through,\Ntype in the input, and press the button.
Dialogue: 0,0:04:22.74,0:04:25.100,Default,,0000,0000,0000,,If it broke the way it should,\Nthen you should have seen
Dialogue: 0,0:04:25.100,0:04:28.05,Default,,0000,0000,0000,,an empty string for your name.
Dialogue: 0,0:04:28.05,0:04:29.69,Default,,0000,0000,0000,,Have you figured out why?
Dialogue: 0,0:04:29.69,0:04:33.94,Default,,0000,0000,0000,,You have to think carefully about\Nwhen each line of code is executed.
Dialogue: 0,0:04:33.94,0:04:37.10,Default,,0000,0000,0000,,In the current code,\Nthe browser loads the page,
Dialogue: 0,0:04:37.10,0:04:39.77,Default,,0000,0000,0000,,and executes the JavaScript line-by-line.
Dialogue: 0,0:04:39.77,0:04:42.93,Default,,0000,0000,0000,,First, it stores\Nthe button element in a variable.
Dialogue: 0,0:04:42.93,0:04:46.82,Default,,0000,0000,0000,,Then, it stores the value of\Nthe input element in the variable.
Dialogue: 0,0:04:46.82,0:04:50.46,Default,,0000,0000,0000,,But it stores the value\Nat the time that the page loads--
Dialogue: 0,0:04:50.46,0:04:52.46,Default,,0000,0000,0000,,which would be empty.
Dialogue: 0,0:04:52.46,0:04:56.32,Default,,0000,0000,0000,,Then, it defines a function and\Nassigns the event listener.
Dialogue: 0,0:04:56.32,0:05:00.42,Default,,0000,0000,0000,,When the listener is called,\Nthe name is still the same string
Dialogue: 0,0:05:00.42,0:05:02.88,Default,,0000,0000,0000,,as it was when the page loaded.
Dialogue: 0,0:05:02.88,0:05:06.20,Default,,0000,0000,0000,,So the listener never finds out\Nthe latest thing that the user typed.
Dialogue: 0,0:05:06.20,0:05:08.53,Default,,0000,0000,0000,,That's why this line of code
Dialogue: 0,0:05:08.53,0:05:13.19,Default,,0000,0000,0000,,has to be inside\Nthis event listener function,
Dialogue: 0,0:05:13.19,0:05:18.76,Default,,0000,0000,0000,,so that it finds out the value\Nat the time that the event happens.
Dialogue: 0,0:05:18.76,0:05:21.94,Default,,0000,0000,0000,,Let's add some code to look at\Nthe language value now,
Dialogue: 0,0:05:21.94,0:05:24.41,Default,,0000,0000,0000,,to make sure you're really getting this.
Dialogue: 0,0:05:24.41,0:05:29.60,Default,,0000,0000,0000,,Inside the listener, I'll store\Nthe language in a `lang` variable.
Dialogue: 0,0:05:31.77,0:05:34.55,Default,,0000,0000,0000,,Ugh, look at this indenting,\Nthis is horrible.
Dialogue: 0,0:05:34.55,0:05:36.89,Default,,0000,0000,0000,,Let's just line these things up.
Dialogue: 0,0:05:36.89,0:05:38.84,Default,,0000,0000,0000,,Okay, so...
Dialogue: 0,0:05:38.84,0:05:41.45,Default,,0000,0000,0000,,[typing]
Dialogue: 0,0:05:46.77,0:05:51.23,Default,,0000,0000,0000,,And you'll notice that I am naming\Nmy variables the same thing as my IDs,
Dialogue: 0,0:05:51.23,0:05:55.29,Default,,0000,0000,0000,,but that's just what I'm doing,\Nyou don't have to do that.
Dialogue: 0,0:05:55.29,0:05:59.79,Default,,0000,0000,0000,,Now I want to output a different message\Nbased on what language they picked.
Dialogue: 0,0:05:59.79,0:06:03.63,Default,,0000,0000,0000,,Notice the value isn't\Nwhat's shown in the drop-down.
Dialogue: 0,0:06:03.63,0:06:06.88,Default,,0000,0000,0000,,It's the value attribute in the HTML.
Dialogue: 0,0:06:06.88,0:06:11.25,Default,,0000,0000,0000,,So `lang` should be either\N"en", "es", or "plt".
Dialogue: 0,0:06:11.25,0:06:17.21,Default,,0000,0000,0000,,So that means:\N`if (lang === "es")`,
Dialogue: 0,0:06:17.21,0:06:23.68,Default,,0000,0000,0000,,then the greeting should be "Hola,".
Dialogue: 0,0:06:23.68,0:06:26.81,Default,,0000,0000,0000,,Let's go ahead and make this \N`greeting` variable here.
Dialogue: 0,0:06:26.81,0:06:35.10,Default,,0000,0000,0000,,So then `greeting` will be\N"Hola, " plus the name.
Dialogue: 0,0:06:35.10,0:06:41.22,Default,,0000,0000,0000,,And then if the lang equals "plt",\Ngood old Pig Latin,
Dialogue: 0,0:06:41.22,0:06:48.54,Default,,0000,0000,0000,,the greeting should be,\N"Ello-hey, " plus the name.
Dialogue: 0,0:06:48.54,0:06:53.17,Default,,0000,0000,0000,,and then we can just\Nuse an `else` for our English.
Dialogue: 0,0:06:53.17,0:06:55.37,Default,,0000,0000,0000,,I'll just move this in here.
Dialogue: 0,0:06:55.37,0:06:56.80,Default,,0000,0000,0000,,All right.
Dialogue: 0,0:06:56.80,0:07:00.37,Default,,0000,0000,0000,,Ooh, and if you want a\Nfun bonus challenge,
Dialogue: 0,0:07:00.37,0:07:03.84,Default,,0000,0000,0000,,try making a Pig Latin\Nconverter for names,
Dialogue: 0,0:07:03.84,0:07:07.68,Default,,0000,0000,0000,,so that the entire greeting,\Nincluding their name gets translated.
Dialogue: 0,0:07:07.68,0:07:10.01,Default,,0000,0000,0000,,That'd be pretty neat.
Dialogue: 0,0:07:10.01,0:07:13.30,Default,,0000,0000,0000,,Now pause the talk-through,\Nenter your name,
Dialogue: 0,0:07:13.30,0:07:19.10,Default,,0000,0000,0000,,pick a different language, and try it out.
Dialogue: 0,0:07:19.10,0:07:20.24,Default,,0000,0000,0000,,Neat, huh?
Dialogue: 0,0:07:20.24,0:07:24.69,Default,,0000,0000,0000,,Now, there's a lot of stuff you can do\Nwith form inputs and a little JavaScript:
Dialogue: 0,0:07:24.69,0:07:27.32,Default,,0000,0000,0000,,word games, number games,\Nstory makers...
Dialogue: 0,0:07:27.32,0:07:30.03,Default,,0000,0000,0000,,and if you do have a server\Noutside of Khan Academy,
Dialogue: 0,0:07:30.03,0:07:33.45,Default,,0000,0000,0000,,you can use JavaScript to do\Npre-processing on form input
Dialogue: 0,0:07:33.45,0:07:35.36,Default,,0000,0000,0000,,before sending it to a server.
Dialogue: 0,0:07:35.36,0:07:38.52,Default,,0000,0000,0000,,There are also a lot more events\Nyou can listen to on forms,
Dialogue: 0,0:07:38.52,0:07:40.70,Default,,0000,0000,0000,,like keypress and focus events.
Dialogue: 0,0:07:40.70,0:07:44.15,Default,,0000,0000,0000,,Just remember to look at\Nthe value of the inputs,
Dialogue: 0,0:07:44.15,0:07:47.29,Default,,0000,0000,0000,,and to check that value at the right time.
Dialogue: 0,0:07:47.29,0:07:50.03,Default,,0000,0000,0000,,You'll get to practice that\Nin the next challenge,
Dialogue: 0,0:07:50.03,0:07:52.64,Default,,0000,0000,0000,,which is a personal favorite of mine.