qj

JavaScript 정리하기 2 + JS Form Validation 2021.01.12

JavaScript 정리하기 2 + JS Form Validation

binarywoo 2021. 1. 12. 23:39

2021. 1. 12. 23:39

JS Tutorial (JS Type Conversion ~ JS JSON )

JavaScript Type Conversion

JavaScript에는 값을 포함할 수 있는 5가지 데이터 유형이 있습니다.

string
number
boolean
object
function

객체는 6가지 유형이 있습니다.

Object
Date
Array
String
Number
Boolean

그리고 값을 포함할 수 없는 데이터 유형 2개가 있습니다:

null
undefined

string(), toString()은 string 데이터 타입으로 바꿔줌. ex) boolean값 false를 string 타입으로 바꿔줌. toString(false); --> "false"

Number() 은 숫자타입으로 바꿔줌. ex) Number("3.14") --> 3.14

Automatic Type Conversion

연산 operator 를 사용하여 자동 타입변환을 할 수 있습니다.

Input Validation Example

아래 예제는 간단한 try, throw, catch 문을 사용하여 validation을 수행하는 코드입니다.

빈칸에 5 ~ 10 사이의 숫자를 입력하되,

비어있으면 "empty", 숫자가 아니면(NaN 타입) "not a number", number 또는 numeric string을 확실하게 숫자 타입인 number로 변환하기 위해 Number(x)에 넣어서 변환하고, 그 숫자가 (x < 5) 이면, "too low", 그 숫자가 (x > 5) 이면, "too high"가 됩니다. 만약 숫자가 (5 ~ 10) 이 맞다면, 그냥 try 문을 빠져나오고 아무런 에러 메세지가 throw되지 않아서 아무 메세지가 출력이 되지 않습니다.

JavaScript Hoisting

자바에서 var 변수 선언은 변수 사용 후에 선언해줘도 문제가 안 생긴다.

다만 주의점은, 변수 초기화, 즉 변수와 함께 값을 할당해주면 선언을 먼저 하고 그다음 사용을 해야한다.

ex) 아래 예시는 y가 undefined로 나오는 예시이다.

The JavaScript this Keyword

"this" 키워드는 해당 키워드가 속한 object를 참조합니다.

JavaScript Let

ES2015는 두 가지 중요한 새로운 자바스크립트 키워드인 let과 const를 도입하였다.
이 두 키워드는 JavaScript에서 블록 범위 변수(및 상수)를 제공한다.
ES2015 이전까지 JavaScript는 두 가지 유형의 범위만 있었습니다. Global 범위 및 Function 범위가 있다.

함수 레벨 스코프(Function-level scope)함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.블록 레벨 스코프(Block-level scope)모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

JavaScript const

const는 값을 재할당할 수 없다는 점만 제외하면 let처럼 작동한다.

let과 동일하게 block 안에서 선언된 const는 block 외부에 선언된 변수와 이름이 같아도 동일하지 않다.

또한, const는 한 번 기본 값을 지정하면 이 값을 변경할 수 없다.

반면에 const 타입으로 선언된 객체의 속성은 변경할 수 있지만, 객체를 다시 할당할 수는 없으며

const 배열의 element는 변경 가능하지만 이 배열을 다시 할당할 수 없다.

또한, const로 선언된 변수는 hoisting이 되어 block 맨 위에 올려지지만 초기화되지는 않는다.

따라서 const로 변수를 선언할 때 값을 같이 할당해주어야 한다.

JavaScript Arrow Function

=> 를 사용하여 코드를 간결하게 할 수 있다.

익명 함수랑 비슷한듯...? ㅎㅎㅎ

JavaScript Class Syntax

ES6에서는 자바 스크립트 클래스를 도입하였고 class 키워드를 사용해야만 클래스를 만들 수 있으며, 클래스를 정의할 때 항상 constructor()를 사용해야 한다.

class 를 정의할 때 항상 이름이 "constructor"이어야 하며, 만약 constructor를 정의하지 않을 경우 자바 스크립트는 빈 constructor를 정의한다.

Class를 정의하고 나면 객체를 생성할 수 있다.

JavaScript Debugging

웹 페이지 브라우저에서 F12 키를 누르면 디버깅을 시작할 수 있다.

console.log()를 사용하면 디버거 창에 자바 스크립트의 값을 표시할 수 있다.

또한 debugger 키워드는 자바 스크립트의 실행 및 호출 디버깅 기능을 중지한다.

이것은 디버거에서 중단점을 설정하는 것과 동일하다.

JavaScript JSON

JSON은 데이터를 저장하고 전송하는 형식입니다.
JSON은 서버에서 웹 페이지로 데이터를 보낼 때 자주 사용됩니다.

JavaScript Form Validation

Form Validation이라고, 이거 작동방식이 js 를 사용하여 validation을 하고자 하는 값을 위한 함수를 만들고 조건을 다 만족하면 통과하는 방식으로 한다. 조건을 만족하지 못할시에 alert()를 사용하여 에러 메세지 표기! 또는 getElementById()를 사용하여 에러 메세지를 페이지에 보이게 할 수 있다.