[JS] 자바스크립트 함수2
얕은복사
객체를 변수에 할당하면 객체의 주소가 변수에 저장된다.
해시테이블(인텍스 없는 키와 값을 복사했다.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체의 얕은 복사</title>
<script type="text/javascript">
//const는 상수라는 의미이다.
const a = {
one : 1,
two : 2,
};
// 동적 할당이기 때문에 오른쪽에서 왼쪽으로 할당이 가능하고 // 왼쪽에서 오른쪽으로 할당이 되기 때문에 a.one도 바뀌게 되는거다
let b = a;
b.one = 3;
console.log("a객체의 변경된 결괏값 : ", a);
console.log("b 객체의 변경된 결괏값 : ", b);
</script>
</head>
<body>
웹 브라우저의 콘솔로 확인한다.
</body>
</html>
★열거객체
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>열거 객체</title>
</head>
<body>
<!-- id는 주소 // name은 변수명 -->
<p id="de">아아아아아</p>
<script type="text/javascript">
txt = "";
person = {
fname : "홍",
Iname : "길동",
age : 25
};
var x;
for (x in person) {
txt = txt + person[x] + " ";
}
document.getElementById("de").innerHTML=txt;
</script>
</body>
</html>
★
var x;
for (x in person) {
txt = txt + person[x] + " ";
}★
★이 코드는 정말 중요한 부분이다.★ 보통 체크박스의 값은 배열로 저장이 되는데 배열타입을 받아서 문자열로 바꿔주는 코드이기 때문에 기억하기
-
스트링은 불변성
그래서 “안녕”, 과 “안녕헬로” 이거는 헬로를 추가 한게 아니라 그냥 새로운 값이 된거야 그러니 안녕과 안녕헬로의 주소값이 다름
replace메서드
어떤 패턴에 일치하는 일부나 모든 부분이 교체된 새로운 문자열을 반환한다.
기존 문자열을 새롭게 대체하고 대체한 결과 문자열을 반환한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문자열 대체</title>
<script type="text/javascript">
function myFunction() {
// <p>태그에 선언된 id 속성값인 de를 검색하고 호출한다.
str = document.getElementById("de").innerHTML;
txt = str.replace("전우치", "홍길동");
document.getElementById("de").innerHTML = txt;
}
</script>
</head>
<body>
<!-- 이벤트 합수를 호출한다. -->
<button onclick="myFunction()">글자 교체</button>
<p id="de">전우치 입니다.</p>
</body>
</html>
★indexOf/ suvstring 메서드
indexOf : 문자열을 앞에서부터 검색하여 주어진 값과 일치하는 인덱스를 반환한다.
substring : 문자열에서 시작 인덱스로부터 종료 인덱스 전까지 문자열의 부분 문자열을 반환한다.
★ 이 코드는 URL을 추출하는 코드이기 때문에 기억하기 ★
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문자열 추출</title>
<script type="text/javascript">
url = "https://www.naver.com/index.html";
document.write("문자열 : " + url + "<br>");
// 주어진 문자는 문자열로 인식되지 않으므로 앞에서부터 검색하여 위치인 5를 반환하여 할당한다.
doubleSlash = url.indexOf("://");
//document.write("doubleSlash: "+doubleSlash+"<br>");
// 검색을 시작할 위치를 8로 설정하여 주언진 문자를 앞에서부터 검색하여 위치인 21을 반환하여 할당한다.
slash = url.indexOf("/", doubleSlash + 3);
//document.write("slash: "+slash+"<br>");
//문자열을 8부터 21까지 추출하여 반환하여 할당한다.
domain = url.substring(doubleSlash + 3, slash);
document.write("도메인: " + domain);
</script>
</head>
<body>
</body>
</html>
★parseInt함수/ random메서드
parseInt : 문자열을 구문분석하여 특정 진수의 정수로 변환하여 반환한다.
random( ) : 0을 포함하고 1을 제외한 사이의 숫자 난수를 반환한다.
★ 이 코드는 인증번호를 생성하는 코드이기 때문에 꼭 기억할 것 ★
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인증번호 생성</title>
<script type="text/javascript">
function certificationNumber(n1, n2) {
// 난수를 발생시키고 정수로 변환한다.
return parseInt(Math.random() * (n2 - n1 + 1)) + n1;
}
auth = "";
// 5자리 인증번호를 생성한다.
for (i = 0; i < 5; i++) {
// 발생한 난수를 문자열과 더하면 문자열이 되어 문자열에 할당 할 수 있다.
auth = auth + certificationNumber(0, 9);
}
document.write("인증번호: " + auth);
</script>
</head>
<body>
</body>
</html>
이름 유효성 검사
forms 프로퍼티 : 문서에있는 모든 <form> 태그의 컬렉션을 반환한다.
value 프로퍼티 : 텍스트 필드의 속성값을 설정하거나 반환한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이름 유효성 검사</title>
<script type="text/javascript">
function validateForm( ){
x=document.forms["myForm"]["fname"].value
if(x == null || x== "") {
alert(“이름을 적으세요.”)
return false;
}
}
</script>
</head>
<body>
<!-- 입력값에 대한 유효성 검사를 한다.-->
<form name="myForm" action="#" onsubmit="return validateForm( )" method="get">
이름: <input type="text" name="fname">
<input type="submit" value=“전송">
</form>
</body>
</html>
이메일 유효성 검사
value 프로퍼티 : 텍스트 필드의 속성값을 설정하거나 반환한다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 이메일 유효성 검사 </title>
<script type="text/javascript">
function validateForm( ){
x=document.myForm.email.value;
atpos =x.indexOf("@");
dotpos =x.lastIndexOf(".");
if(atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert(“E-mail 형식이 아닙니다.”);
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="#" method="get">
Email: <input type="text" name="email">
<input type="submit" value="전송" onclick="validateForm( )">
</form>
</body>
</html>
비밀번호 확인
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 비밀번호 확인 </title>
<script type="text/javascript">
function check( ){
str = “비밀번호: ” + web.pass.value + “\n”;
str += web.sane.value + “번으로 저장되었습니다.”;
alert(str);
}
</script>
</head>
<body>
<form name="web" action="#" method="get">
<input type="hidden" name="sane" value="imb">
비밀번호 :<input type="password" name="pass">
<input type="button" value="확인"onclick="check( )">
</form>
</body>
</html>
댓글남기기