TIL 2020.11.12

Where to add script in html

  • Once browser meets <script>tag, it stops interpreting html tag and operates JavaScript file first
  1. Add in <head>
  • If I put console.log in JavaScript file by using querySelector, I receive null
  • JavaScript file needs to bring info from html first in order to operate, but browser runs console log first before browser finishes reading html tags

2. Add in <body> right before it closes its tag

  • console.log gives what I am looking for so always put it this way!

Form Validation

  • necessary step when we cooperate
  • shows all different status

:root

  • allows you to set variable that you will use often so that you can save time to type continuously

display: none / display: block

  • allows you to set up css that will show up on certain time

Step 2. Create Function for form validation

  • return as Boolean since this function is only for valid/invalid

reference: https://stackoverflow.com/questions/19605150/regex-for-password-must-contain-at-least-eight-characters-at-least-one-number-a

Check phone number

Check identification number

Check visa or master card

reference: https://www.w3resource.com/javascript/form/credit-card-validation.php

  • use querySelector to call element form html and connect with eventhandler

onkeydown

  • fires when the user presses a keyboard key
  • onkeydown (버튼이 내려갈 때)-> onkeypress(눌렸을 때)-> onkeyup(땠을 때)

onkeyup

  • fires when the user releases a key that was previously pressed

onkeypress

  • should fire when the user presses a key on the keyboard. However, in practice browsers do not fire for certain keys, such as command keys.

onchange

  • fire when the user commits a value change to a form control
  • maybe good for password form validation…?

onclick

  • raised when the user clicks on an element

onmousedown

  • fires when the user depresses the mouse button

onmouseup

  • fires when the user releases the mouse button

Step 4. Create function for visual feedback

  • after form validation, you need to provide proper feedback to users

forEach

  • executes a provided function once for each array element.
  • returns undefined because action happens while it iterates
  • 함수 리턴 값은 하나의 값이지만, 순회를 돌면 절대 하나의 값이 나오지 않음. 나온다면 Map이랑 동일함. forEach를 사용하므로, 원하는 기능을 각각의 배열에 적용시킴. 리턴값은 undefined이므로, 만약 forEach로 return값을 구하려고 하면 실행 안됨!!!!!!!!

EventTarget.addEventListener()

  • with this method, it creates event object
  • when you want to do something once clicked
  • when you want to use several functions with one button

--

--

--

Consistency achieves everything https://github.com/paigekim29

Love podcasts or audiobooks? Learn on the go with our new app.

How To Detect The Location of Your Website’s Visitors Using JavaScript

Calling Child’s function from Parent with react hooks

Data Binding in Angular

test this medium post

test this medium post

How to add Trustpilot code with JavaScript

Set a Canonical URL in Node.JS

How to find all Pronouns in a String in Node.JS with NLP

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Joo Hee Paige Kim

Joo Hee Paige Kim

Consistency achieves everything https://github.com/paigekim29

More from Medium

❌You Don't Know How JavaScript Copy Variables (Shallow Copy)

Some useful function for your JS Project

Objects and their internal representation — Javascript

Underestimating the Power of the Event Object