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
next
Slide 1: Slide
InformaticaMiddelbare schoolhavoLeerjaar 4

This lesson contains 26 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 90 min

Items in this lesson

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

Slide 1 - Slide

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 - Slide

What have you done for website HTML part until now ?

Slide 3 - Open question

What have you done for website CSS part until now ?

Slide 4 - Open question

Slide 5 - Slide

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

Slide 6 - Slide

What do you think JavaScript is used for in websites?

Slide 7 - Open question

Slide 8 - Slide

Slide 9 - Slide

Event Handling

Slide 10 - Slide

Slide 11 - Slide

Capturing Form Data

Slide 12 - Slide

Slide 13 - Slide

Slide 14 - Slide

What does document.getElementById do?

Slide 15 - Open question

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

Slide 16 - Slide

Validating Form Input

Slide 17 - Slide

Slide 18 - Slide

Slide 19 - Slide

Assignment 4

Slide 20 - Slide

Slide 21 - Slide

Slide 22 - Slide

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 - Slide

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 - Slide

Slide 25 - Slide

Slide 26 - Slide