본문 바로가기

Modern Js

(5)
[Js] 로그인 폼을 만들어보자. 간단한 로그인 폼을 만들기 전에 필요한 기능들에 대해서 먼저 정리해보자. 1. 폼 작성 필드 사용자의 정보를 입력받을 수 있는 폼 작성 필드를 구현한다. form 태그와 action 속성 2. 실시간 알림 사용자가 아이디나 비밀번호를 입력하면 실시간으로 정보를 확인하고 잘못된 입력사항을 공지해준다. 이벤트 헨들러 'iput' 기능 classList 기능 3. 정규식 사용자가 입력한 정보가 특정 기준에 부합하는지를 확인한다. 정규식 검사 test 기능 4. 조건문 사용자가 입력한 정보가 부합하다면 '통과', 부합하지 않는다면 '실패' 라는 기준을 세워야함. 조건문(if문 또는 switch문) 대충 필요한 기능들은 이정도. 그럼 먼저 HTML을 활용해서 뼈대부터 세워보자. 이메일을 입력하세요. 아이디를 이메..
[Js] if와 '?'를 사용한 조건문에 대해서 알아보자. 조건에 따라서 다른 처리결과를 보여주기 위해서 조건문(if)과 물음표를 사용한 ? 조건부 연산자를 사용합니다. if문 if(...)문은 괄호 안에 들어가는 조건을 평가해서 그 결과가 true이면 코드가 실행됩니다. let value = prompt('집에 가고 싶습니까?', 'yes or no') if(value == 'yes') alert('저도 그렇습니다.') 위 조건문에서는 하나의 간단한 조건만을 다뤘는데, 조건문은 조금 더 복잡할 수도 있습니다. 조건이 맞을 때 복수의 문을 실행하려면 중괄호를 사용해서 코드 블럭을 감싸주면 됩니다. let value = prompt('집에 가고 싶습니까?', 'yes or no') if(value == 'yes') { alert('저도 그렇습니다.') alert(..
[Js] 형변환에 대해서 알아보자. 형변환 문자형 변환 alert() 함수는 매개변수로 문자형을 받기 때문에 alert(value)에서 value는 문자형이어야 함 만약 다른 형의 값을 전달 받으면 이 값을 문자형으로 자동 변환됨 let value = true alert(typeof(value)); //boolean value = String(value) alert(typeof(value)) //string String() 함수를 사용하면 전달받은 값을 문자형으로 변활할 수 있음 숫자형 변환 수학과 관련된 함수와 표현식에서 자동으로 발생하며 주로 숫자형이 아닌 값에 나누기(/)를 적용한 경우가 대표적임 alert('6' / '2') // 3 // 문자형으로 입력된 두 수가 자동으로 숫자형으로 변환되어서 계산이 진행됨 let str = '1..
[Js] 대화상자에 대해서 알아보자. 대화상자란? 사용자와 상호작용할 수 있는 세 가지 함수 입니다. alert() 일방적인 메시지 모달창 prompt() 사용자에게 텍스트를 입력할 수 있는 입력필드 모달 창 confirm() 사용자의 의사를 확인하는 모달 창 모달 창이 떠있는 동안에 스크립트의 실행이 일시 중단되며 사용자가 창을 닫기 전까지 페이지의 다른 요소들과 상호작용이 불가능합니다. 또한, 이런 모달 창은 브라우저 중앙에 위치하는 것이 특징이며 스타일 적용하는 것이 불가능합니다. alert() alert() 함수는 메세지가 떠있는 작은 모달 창입니다. 모달이라는 단어는 '페이지의 나머지 부분과 상호작용이 불가능하다' 라는 의미가 내포되어 있기 때문에 사용자가 확인 버튼을 누르기 전까지 모달 창 바깥에 있는 요소들을 조작할 수 없습니다..
[Js] 자료형에 대해서 알아보자. 자바스크립트에서 변수를 선언할 때 데이터 타입을 명시해주지 않아도 에러가 발생하지 않습니다. 또한, 변수에 저장되는 값의 자료형은 언제든지 바꿀 수 있습니다. 이는 자바스크립트가 동적 타입(dynamically typed)언어이기 때문입니다. let message = 'hello'; message = 123456; message라는 변수에 초기 문자형태의 자료형을 담았지만 다시 숫자형 자료를 대입해도 전혀 에러가 발생하지 않습니다. 자바스크립트에는 8가지의 자료형이 존재합니다. 이를 이해하는 것이 중요합니다. 문자형(String) 따옴표로 묶은 형태의 자료형입니다. 자바스크립트에서 따옴표는 세 가지 종류가 있습니다. let str = "문자형"; let str1 = '작은 따옴표도 가능합니다.'; let..