📝 정규표현식&유효성검사 사용해서 회원가입 만들기
📝 형변환,연산자 / 배열
#230227
🏷️ 형변환을 하는 이유
요소의 내용 또는 값을 얻어오면 기본적으로 문자열(string)으로 인식됨
→ 산술 연산 시(덧셈) '더하기'가 아닌 '이어쓰기'가 되는 문제 발생
🏷️ 문자열 -> 숫자
1. Number(문자열) 실무에서 가장 많이 씀
"정수" → 정수 ("123" -> 123)
"실수" → 실수 ("3.14"-> 3.14)
2. parseInt(문자열)
"정수" → 정수 ("123" -> 123)
"실수" → 정수 ("3.14"-> 3) 소수점 버림
3. parseFloat(문자열) (실무에서 잘 안씀)
"정수" → 정수 ("123" -> 123)
"실수" → 실수 ("3.14"-> 3.14)
<button class="btn1">형변환 확인</button>
------------------------------------------------------------------
// 형변환 확인하기
const btn1 = document.getElementsByClassName("btn1")[0];
// const btn1 = document.querySelector(".btn");
// 둘중에 하나 쓰면 됩니다.
btn1.addEventListener("click", function() {
console.log("parseInt('123' : " + parseInt('123')); // 123
console.log(typeof parseInt('123')); // number
console.log("parseInt('3.14' : " + parseInt('3.14')); //3
console.log("=======================================")
console.log("parseFloat('123' : " + parseFloat('123')); //123
console.log("parseFloat('123' : " + parseFloat('123')); //123
console.log("=======================================")
console.log("Number('123' : " + Number('123')); //123
console.log("Number('3.14' : " + Number('3.14')); // 3.14
})
📌 형변환 확인
동등 비교 연산자 ( == , != )
값이 같으면 true (자료형 관계 없음)
동일 비교 연산자 ( ===, !== )
값과 자료형이 모두 같으면 true
📌 문자열(string) 내장 함수⭐⭐⭐⭐⭐
실무에서 아주아주 많이 쓰는 함수니 이거라도 알고갑시다😭😭
1. string.indexOf("찾고싶은문자열") ⭐⭐⭐⭐⭐
string 내에서 "찾고싶은문자열"의 시작 인덱스를 반환
없으면 -1 반환
2. string.lastIndexOf("찾고싶은문자열")
뒤에서부터 검색하여
string 내에서 "찾고싶은문자열"의 시작 인덱스를 반환
없으면 -1 반환
3. string.substring(시작인덱스) ⭐⭐⭐
글자 자르는 함수
문자열에서 시작 인덱스부터 끝까지 잘라서 반환
4. string.substring(시작인덱스, 마지막 인덱스)
문자열 시작 인덱스부터 마지막 인덱스 사이를 잘라서 반환
마지막 인덱스 없으면 끝까지 반환
마지막 인덱스 있으면 설정한 값까지 반환!
lastIndexOf('l') 의 'l'은 배열순서(결과값 9)는 그대로고,
뒤에서부터 검색하여 찾기 때문에 뒤에 있는 'l'을 출력함
indexof('l')의 'l'은 보통 생각하는 배열의 순서로
배열의 숫자(결과값 2). 앞에 있는 'l'을 출력함5. string.split("구분자") ⭐⭐⭐
문자열을 "구분자"를 기준으로 나누어 배열로 반환
ex) 구분자에 ,(쉼표)를 넣으면 ,(쉼표)를 기준으로 나눔
6. string.split("")
문자열이 한 글자씩 모두 나누어져서 배열로 반환
📌 숫자 관련 내장 객체 / 내장 함수
✔️ 숫자(number) 타입 리터럴 표기법
123(정수), 9.321(실수), NaN(Not a Number), Infinity(무한)
✔️ 숫자 관련 내장 객체 : Math
Math.random() : 0 이상 1 미만의 난수 발생
//Math.random() 활용 예제
<button id="btn4">랜덤 배경색 만들기</button>
------------------------------------------------------------------------
document.getElementById("btn4").addEventListener("click", function() {
// rgb에 색상 랜덤 대입 ( 0 ~ 255 사이)
const r = Math.floor(Math.random() * 256);
// 0 <= random 256 // 0~256까지 //
// 실수로 나오기 때문에 floor로 덮어줌
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
document.querySelector("body").style.backgroundColor
= "rgb(" + r + "," + g + "," + b + ")";
})(소수점 첫째자리에 적용)
Math.ceil(값) : 올림
Math.floor(값) : 내림
Math.trunc(값) : 버림
Math.round(값) : 반올림
숫자.toFixed(자릿수) : 숫자를 지정된 자릿수까지 반올림해서 표현
ex) (3.45).toFixed(1) --> '3.5'
✔️ isNaN(값)
값이 숫자가 아니면 true
숫자면 false
<input type="text" id="input2">
<button id="btn2">숫자인지 확인</button>
--------------------------------------------------------------------
const input2 = document.getElementById("input2");
const btn2 = document.getElementById("btn2");
// 버튼 눌렀을 때 이벤트 줘야함
btn2.addEventListener("click" , function() {
if (isNaN(input2.value)) {
alert("숫자가 아닙니다")
// 숫자가 아니면 true
} else {
alert("숫자 입니다.")
//숫자면 false
}
})