00:06In this video, data capture will be performed using one of the functions of
00:11JavaScript, which is the capture function, through an HTML form, and the first thing that
00:17We need to create a folder on the desktop called java test, inside this folder
00:21We created a file called index.html, and in the work window, we wrote again
00:28In HTML, we select HTML5, and by default the initial programming appears; this
00:34The programming was explained in detail in another video; let's create the HTML file.
00:40a title, where we write user registration, we go to body, inside body, we write the
00:46h1 tag, user registration, already in the programming we write the tag input type name, call
00:54The name, which is important here for JavaScript programming, is the id, called name, plus
01:00The holder serves us for the guide text, called names, if we establish the length of the
01:05text rectangle, measuring 25.
01:10We do the same for the password; we write the label `input type name`, called `apellido`.
01:17Here, what's important for JavaScript programming is the id, called surname, plus
01:22holder, it serves us for the guide text, called surnames, if we establish the length of the
01:27text rectangle, measuring 25, we create the text rectangle, measuring 25, we create the
01:35Likewise, for password we write the label input type name, called key, here important,
01:41For JavaScript programming, it's the id, called key, plus holder, which is useful for the guide text.
01:48called password, if we set the length of the text rectangle, measuring 25.
01:57Now, to capture the data, we assign the label "button," or button within it.
02:02type equals button, we designate the name record, later immediately after type
02:15button, the code will be written once clicked, this is equivalent to capture, now we move on to see the result,
02:22We go to the index.html file, right-click, and go to preview.
02:29We observed that the position of the text rectangles was not correct, so we added
02:34The tag br, twice, this means a line break, and as we can already see
02:46We have the HTML file completed; we just need to reiterate the name of the button for registration.
03:01Okay, let's implement the programming logic in JavaScript. For this, we'll go to...
03:07Open the file and folder explorer and create a file called "data, js" and press enter to link it.
03:13From the HTML file to the JavaScript file, we write in head, script scr this equals data dot
03:22JS, here we're going to perform the capture function, we write capture function, we open parentheses
03:36and keys, with var, data 2 this equals document, get element by id, from id we open quotes,
03:47names, value, that is, with the variable data 2, capture what the person types, in
03:52The text box called names, with eight document.ioli that is published, also
04:09even acute, also a parenthesis and one that activates, should assign, to be doneIR,
04:09zwischen el archivo enchodiani pues el archivo, y a ella debe sumudios de nombre, si el
04:12I see the one capable of installing Olarak that is next in the
04:16text box called names.
04:26We do the same with var, data 4 this equals document, get element by id, from id we open quotes, key,
04:33value, that is, with the variable data 4, capture what the person types in the text box
04:39key call.
04:51Now we need conditionals, to establish that if the person doesn't type in the text box, an alert will appear.
04:57which states that these fields are mandatory, also so that the data is recorded, so we have the if conditionals, if
05:04and else otherwise, we write if, if data 2 is empty, with alert, name(s) are required, and
05:10document.
05:11Get element by id, which captures names in the id and ensures the cursor remains focused on that box.
05:17of text.
05:23Let's use the else conditional, otherwise, if, if data 3 is empty, with alert, let the surnames be
05:30mandatory, and document.
05:32Get element by id, which captures the surname id and keeps the cursor focused in that box
05:37of text.
05:50Let's use the else conditional, otherwise, if, if data 4 is empty, with alert, let the password be
05:58mandatory, and document, get element by id, which captures the key id and keeps the cursor focused,
06:04in that text box.
06:13Now, to display the data in the web browser console, whether it's Mozilla Firefox, Google Chrome, or others, we type the following:
06:20Next, console.log, in parentheses data 2 through data 4, this means that it is displayed in the browser console
06:28If we press F12 on the web, we can see the recorded data.
06:41Next, we write the code 3 times: document, get element by id, with id names, surnames, key, value this equals to
06:49Quotation marks, this means that when you type in the text boxes, they are recorded and simultaneously deleted.
06:54Registering others, with focus, allows us to place the cursor in each of the text boxes.
07:16And from this else conditional, otherwise, an alert is generated with alert, which are presented in data 2,
07:23data 3, data 4.
07:29Now, importantly, in the HTML file, we set the button type to "button".
07:35click equals the function of javascript, capture, named record.
07:40And to see the result, we go to the index file, HTML, right-click, and go to preview.
07:51To see its functionality, we went to the browser and performed a test.
07:55We type Juan, surname López, key or password 123, and we see that it works.
08:07The LED appears, we click accept.
08:17We open the browser console with F12; we can see that entries are being registered and deleted at the same time, in order to enter
08:23more names and details.
08:39Okay, that's all. If you found the video helpful, don't forget to subscribe.
Comentarios