Web Site for Teachers - Java Script

STARTKLAAR
  • Phones Away in Your Bag or Pocket
  • Please sit with your Scrum Team
  • Reminder for taking attendance 
1 / 26
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolhavoLeerjaar 4

In deze les zitten 26 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 90 min

Onderdelen in deze les

STARTKLAAR
  • Phones Away in Your Bag or Pocket
  • Please sit with your Scrum Team
  • Reminder for taking attendance 

Slide 1 - Tekstslide

Today
  • Understand how JavaScript interacts with HTML forms.
  • Learn how to capture and validate form data.
  • Implement JavaScript to handle form submission in their teacher job-search website

Slide 2 - Tekstslide

What have you done for website HTML part until now ?

Slide 3 - Open vraag

What have you done for website CSS part until now ?

Slide 4 - Open vraag

Slide 5 - Tekstslide

What is JavaScript?
  • JavaScript is a programming language used to make web pages interactive.
  • Works with HTML (structure) and CSS (design).

Slide 6 - Tekstslide

What do you think JavaScript is used for in websites?

Slide 7 - Open vraag

Slide 8 - Tekstslide

Slide 9 - Tekstslide

Event Handling

Slide 10 - Tekstslide

Slide 11 - Tekstslide

Capturing Form Data

Slide 12 - Tekstslide

Slide 13 - Tekstslide

Slide 14 - Tekstslide

What does document.getElementById do?

Slide 15 - Open vraag

 How JavaScript Works with Forms ?
  • Forms collect user data: name, subject, experience, email.
  • JavaScript captures this data for processing.

Slide 16 - Tekstslide

Validating Form Input

Slide 17 - Tekstslide

Slide 18 - Tekstslide

Slide 19 - Tekstslide

Assignment 4

Slide 20 - Tekstslide

Slide 21 - Tekstslide

Slide 22 - Tekstslide

Students work in pairs to debug a pre-written JavaScript form validation code

  • Fix the broken form validation.
  • Ensure all fields (name, subject, experience, email) are correctly validated.

Slide 23 - Tekstslide

Challenge Instructions:
Debug the Code: Identify what is missing and what is incorrect.
Fix the Errors: Ensure that all fields (name, subject, experience, email) are validated.
Test the Code: Run the code and make sure that the form does not submit unless all fields are filled in.

Slide 24 - Tekstslide

Slide 25 - Tekstslide

Slide 26 - Tekstslide