P217_11.02.21

Lessons topics:

• Document

  • Modifying the document

• Introduction to Events

  • Introduction to browser events
  • Bubbling and capturing
  • Event delegation
  • Browser default actions

• UI Events

  • HTML DOM Events - https://www.w3schools.com/jsref/dom_obj_event.asp
  • Mouse events
    • MouseEvent - https://www.w3schools.com/jsref/obj_mouseevent.asp
  • Moving the mouse: mouseover/out, mouseenter/leave
  • Drag'n'Drop with mouse events
  • Keyboard: keydown and keyup
    • KeyboardEvent - https://www.w3schools.com/jsref/obj_keyboardevent.asp
  • Scrolling

• Forms, controls

  • Form properties and methods
  • Focusing: focus/blur
  • Events: change, input, cut, copy, paste
  • Forms: event and method submit

• Document and resource loading

  • Page: DOMContentLoaded, load, beforeunload, unload

  Assignments:

1. JS Exercises

   • Basliqlara double click olduqda onlari gizledin
     • Example video: https://user-images.githubusercontent.com/74110914/103200388-a615a580-4906-11eb-9105-86a1aef8f7e2.mov
   • Buttone click edende random sekil gosterin
     • Sekiller ucun https://picsum.photos/ istifade edin.
     • Example video: https://user-images.githubusercontent.com/74110914/103200455-ce9d9f80-4906-11eb-87a0-a7afdc696a14.mov

2. Form Validation:

Simple client side form validation. Check required, length, email and password match.

• Project Specifications:
  • Form UI-ni hazirlayin
  • Inputlarin altinda error messajlarini gosterin
  • checkRequired() inputun bos olmadigini yoxlamaq ucun
  • checkLength() min/max uzunlugu olcmek ucun
  • checkEmail() email-i regex ile yoxlamaq ucun
  • checkPasswordsMatch() confirm password ve passwordun eyni oldugunu yoxlamaq ucun
• demo video
• link to starter materials HTML and SCSS and JS.