23.08.22 112일차
JavaScript
react에서 사용하는 자바스크립트 함수들을 알아보자
- 로그인 아이디 받아서 화면에 출력
<!DOCTYPE html>
<html>
<head>
<script>
function login(){
p1 = document.getElementById("id").value;
p2 = document.getElementById("pwd").value;
str = "아이디 : " + p1 + " 암호 : " + p2;
document.getElementById("textarea").innerText = str
console.log(str)
}
</script>
</head>
<body>
<div align="center"><h2>로그인</h2></div>
<div align="center">
<table border="1">
<tr><td>아이디</td><td><input type="text" id="id"></td></tr>
<tr><td>비밀번호</td><td><input type="password" id="pwd"></td></tr>
</table>
<div>
<input type="button" value="로그인" onClick="login()"><br><br>
[결과보기]<br>
<p id="textarea"></p>
</div>
</div>
</body>
</html>어제 배운 getElementById를 사용해 값을 받아와 전달해주어 화면에서 보이도록 했다.
- 문자열 함수
<!DOCTYPE html>
<html>
<head>
<script>
function practice(){
// 문자열 자르기
let str="0123456789"
console.log(str.slice(0,3))
console.log(str.substring(0,3))
console.log(str.substr(0,3))
// 문자열 구분
let str2="012,345,6789"
k = str2.split(",")
console.log(k[0])
console.log(k[1])
console.log(k[2])
// 값 형태 비교
if(isNaN(str2)){
console.log("str2는 문자값입니다.")
}else{
console.log("str2는 숫자값입니다.")
}
// 자릿수 확인
let n=99999999999999999999
console.log(n) // 20자리까지는 정상표현
n=999999999999999999999
console.log(n) // 21자리부터 지수표현 (1e+21)
// 공백 연산
k1 = Number(" 101 ")
k2 = Number(" 201 ")
console.log(k1 + k2) // 302(공백이 있어도 연산이 된다)
k = Number(" 201 51 ")
console.log("k값 " + k) // NaN(숫자형이 아니라 인식불가)
// 참 거짓
k = Number(true)
console.log("참: " + k) // 1
k = Number(false)
console.log("거짓: " + k) // 0
}
practice()
</script>
</head>
<body bgcolor="#ffaacc">
</body>
</html>slice,substring, substr은 자리수를 지정하여 해당하는 값만 출력
split은 기준점을 부여하여 항목들을 구분하여 출력
isNaN은 값이 숫자인지 문자인지를 구분할 수 있는 함수이다.
Back-end Developer Preparation Students