Veebivormide loomine, kujundamine ja valideerimine JavaScriptiga (e-õpe, inglise keeles)

Koolituse maht: 24 akadeemilist tundi ehk 3 õppepäeva, mille saad endale sobivale ajale jaotada.

Sihtgrupp: This course is for students who want to learn about creating, styling and validating web forms.

Koolitusel osalemise eeldused: Experience in the following is required for this JavaScript class: Basic HTML, Basic CSS, Basic JavaScript.

To complete the training and get a certification you need to pass the quiz 100%.

Koolituse teemad:

This course is all about creating and processing web forms. It starts with using the latest HTML standards to create and provide basic validation for an HTML form. Then it covers styling forms using CSS. This includes showing the validation status of form fields. You’ll then learn to write clean, real-time client-side form validation with JavaScript and regular expressions. Finally, you’ll learn to validate forms on the server with Node.js, JSON, and Ajax.

1. HTML Forms

• How HTML Forms Work
• The <form> Tag
  1. Get vs. Post
• Form Elements
  1. id and name Attributes
  2. Text Fields
  3. Labels
  4. Text-like Input Types
  5. placeholder Attribute
  6. pattern Attribute
  7. Password Fields
  8. Date and Time Fields
  9. Number Fields
  10. Color Fields
  11. Tel, URL, and Email Fields
  12. tel
  13. url and email
  14. Search Fields
  15. Hidden Fields
• Buttons
  1. Submit Button
  2. Reset Button
  3. Button Buttons
• Checkboxes
• Radio Buttons
• Fieldsets
• Select Menus
  1. Option Groups
• Textareas
• Test

2. JavaScript Form Validation

• Server-side Form Validation
• HTML Form Validation
• Accessing Form Data
• Form Validation with JavaScript
• Checking Validity on Input and Submit Events
• Adding Error Messages
  1. The dataset Property
• Validating Textareas
• Validating Checkboxes
• Validating Radio Buttons
  1. Which Radio Button was Selected?
• Validating Select Menus
• Giving the User a Chance
• Test

3. Styling Forms with CSS

• General Form Layout
• Form-field Pseudo-Classes
• Applying Pseudo-Classes to Forms
• Radio Buttons, Checkboxes, and Fieldsets
• Test

4. Regular Expressions

• Getting Started
  1. JavaScript’s Regular Expression test() Method
• Regular Expression Syntax
  1. Start and End ( ^ $ )
  2. Number of Occurrences ( ? + * {} )
  3. Common Characters ( . \d \D \w \W \s \S )
  4. Grouping ( [] )
  5. Negation ( ^ )
  6. Subpatterns ( () )
  7. Alternatives ( | )
  8. Escape Character ( \ )
  9. Case-Insensitive Matches
• Backreferences
• Form Validation with Regular Expressions
• Cleaning Up Form Entries
• A Slightly More Complex Example
• Test

5. Node.js and Server-side Form Validation

• Welcome to the Server-side
  1. What is a web server?
  2. Dynamic Websites
• Google Chrome DevTools: Network Tab
  1. Status Codes
• Welcome to Node.js
  1. Installing Node.js
  2. package.json
  3. Our First App
  4. What does npm start do?
• Our First Web App
  1. Stopping the Server
• Fat-arrow Functions
• Sending a Response with HTML
• The favicon.ico Icon
• Simple Routing and 404 Pages
  1. Delivering favicon.ico
• Express – Node.js Web Application Framework
  1. app.js
• Favicon Middleware
• Static Files
• Processing a Simple Form
• Form Validation
• Validators
  1. Validation Chaining
  2. not()
  3. withMessage(message)
  4. Custom Validators
• Ajax
  1. XMLHttpRequest
  2. Asynchronous
• Test

6. JSON

• Review of Object Literals
  1. Arrays
  2. Objects
  3. Arrays in Objects
  4. Objects in Arrays
• Back to JSON
  1. JSON Syntax
  2. The built-in JavaScript JSON Object
• Test

Koolituse eesmärk

The main purpose of this e-course is to give students a good understanding of creating, styling and validating web forms.

Koolituse õpiväljundid

After completing this course, students will:

• Learn to create HTML forms using the latest HTML standards.
• Learn to style forms with CSS.
• Learn to validate forms on the client with JavaScript and regular expressions.
• Learn to validate forms on the server with Node.js.
• Learn to use Ajax techniques to do server-side validation on specific form fields without refreshing the entire page.

Koolitus toimub e-õppe keskkonnas, kuhu saab siseneda isikliku kasutajanime ja parooliga. Need saadetakse Teile pärast koolitusarve tasumist või erikokkuleppel.

Täienduskoolituse õppekavarühm: tarkvara ja rakenduste arendus ning analüüs