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


  • 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


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


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


  • 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.


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


  • raised when the user clicks on an element


  • fires when the user depresses the mouse button


  • 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


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


  • 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.

Thinking architecture in React

check palindrome string is valid or not

Join us at React Day Berlin Conference and Workshops

Finding Closure

RxReduce: Reactive State Container Architecture — Part 2

Auto Capitalize String in JavaScript

Cloud Function + Emulator + TypeScript part1

12 Front End Developer Websites to Bookmark

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

Reference VS. Primitive Values

Reconciliation Algorithm

Javascript: Function Expression vs Function Declaration

What Is Event Propagation?