TIL 2020.11.12
2 min readNov 12, 2020
Where to add script in html
- Once browser meets <script>tag, it stops interpreting html tag and operates JavaScript file first
- 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
Step 1. Compose UI
- 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
Check phone number
Check identification number
Check visa or master card
reference: https://www.w3resource.com/javascript/form/credit-card-validation.php
Step 3. Connect Ul elements to event
- 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
