HTML + Javascript 1

1. 기초

var a = "전역변수a";
var z,k;

function aaa(){		//즉시실행함수
	var a = "a 지역변수 생성!";
	console.log(this.a);	//전역변수의 값을 가져와서 출력
	console.log(a);			//지역변수의 a 변수값을 가져옴
	var b = "지역변수";
}
function bbb(){	
	this.a = "aaa"		//전역변수 값을 변경
	var b = "bbb에서 사용하는 지역변수";
	console.log(b);
}
function aaa(){
	console.log("회원가입");
}
bbb();
aaa();

• field : 함수 바깥공간
• function : 함수
• 전역변수 : field에 선언한 변수
• 지역변수 : 함수안에 선언한 변수
• this : 전역변수 호출시 사용하는 명령어    //this의 종류는 6가지 면접시 어떤거 써봤는지 질문가능

function ccc(mid,mpass){
	console.log(mid);
	console.log(mpass);
}
ccc("hong","a1234");
ccc(10, 20);			
ccc("kim",20000);		
ccc("park");	//undefine		

function ddd(point){
	console.log(point);
}
ddd(10000,5000);	//데이터 loss

• function(매개변수, 매개변수)
• fnc_name(인자값(문자), 인수값(숫자)) 
• 매개변수보다 인자(수)값이 적으면 undefine 발생
• 인자(수)값보다 매개변수가 적으면 데이터 loss

function box(){
	//2. 지역변수 생성 값을 적용
	var usernm = "홍길동";
	var userlevel = "일반회원";
	box2(usernm,userlevel);	//3, box2함수에 인자값을 적용하여 실행
}	

function box2(nm,level){	//4. 매개변수 전달값을 받은
	console.log(nm);		//5. 매개변수 값을 출력
	console.log(level);

}
box();	//1. 함수 실행

• 함수->함수 값을 적용하는 과정

function ccc(n1,n2){
	console.log(Number(n1)*Number(n2));
}
ccc(3,4);

• Number();  : 인자값으로 매개변수를 받을 경우 문자를 숫자로 변경하는 함수 
• String();  : 숫자->문자

⭐HTML은 기본으로 모든 입력을 문자열로 받기 때문에 사칙연산중 덧셈을 할땐 Number 꼭 사용

2. 이벤트핸들링 함수

• onclick 속성에 함수이름

아이디 : <input type="text" id="mid">
<input type="button" value="중복체크" onclick="idcheck()">

function idcheck(){
	var id = document.getElementById("mid");	//이거 핸들링하려면 뒤에 뭐 안붙이는게 좋음
	if(id.value ==""){
		alert("아이디를 입력하세요");
	}else{
		alert("해당 아이디는 사용 가능합니다.");
		id.readOnly = true;
		id.style.backgroundColor = "skyblue";
	}
}

• document : 현재 페이지
• getElementById : 현재 페이지에서 id 이름
• alert : 경고 메세지
• readOnly : 읽기 전용 (boolean)
• style : css 핸들링 속성값
• value : 사용자가 입력한 값

<div class="btn" onmouseover="bbb()">회원가입</div>

function bbb(){
	console.log("마우스 이벤트");
}

• onmouse : 마우스 포인터에 관련된 이벤트 속성

😊응용문제

상품가격이 10000원이며, 사용자가 포인트 금액을 입력
포인트 적용이라는 버튼 클릭시 해당 상품가격에서 포인트를 제외한 최종 결제 금액을 콘솔로 출력

 

상품 가격 : <input type="text" id="product" value="10000" readonly><br>
포인트 : <input type="text" id="point" value=""><br>
<input type="button" value="포인트 적용" onclick="usePoint()">

function usePoint(){
	var uPoint = document.getElementById("point");
	var pMoney = document.getElementById("product");
	var total = Number(pMoney.value)-Number(uPoint.value);
	console.log(total);
}

전역변수에 있는 인증번호 입력시 " 정상적으로 인증이 완료되었습니다."라는 경고메세지 출력
아닐시 "해당 인증번호가 올바르지 않습니다."경고메세지 출력

인증번호 : <input type="text" maxlength="6" id="security">
<input type="button" value="인증번호 확인" onclick="vrfccheck()">
//
//
<script>
var code = "189922";	//전역변수로 사용
</script>

function vrfccheck(){
	var vrfc = document.getElementById("security");
	if(vrfc.value == this.code){
		alert("정상적으로 인증이 완료되었습니다.");
	}else{
		alert("해당 인증번호가 올바르지 않습니다.");
	}
}

3. 주소 이동

이동할 URL을 입력하세요 : 
<input type="text" id="weburl">
<input type="button" value="이동" onclick="gopage()">

function gopage(){
	var url = document.getElementById("weburl");
	if(confirm("해당 페이지로 이동하시겠습니까?")){
		location.href = url.value;
	}else{
		alert("해당 페이지 이동을 취소하셨습니다.");
	}
}

• location.href : js에서 해당 웹페이지로 강제이동시키는 함수
• confirm : 선택메세지 if(확인), else(취소)

4. checkbox

<input type="checkbox" id="all" onclick="fnall()" checked>전체선택<br>
<input type="checkbox" id="box1">선택1<br>
<input type="checkbox" id="box2">선택2<br>
<input type="checkbox" id="box3">선택3<br>

function fnall() {
	var a = document.getElementById("all");
	console.log(a.checked);

	if (a.checked == true) {	//전체선택에 클릭하여 체크된 경우
		console.log("전체선택");
		var z;
		for (z = 1; z <= 3; z++) {
			//box라는 문자와 z변수를 조합하여 적용
			document.getElementById("box" + z).checked = true;
		}
	} else {	//전체선택에 클릭하여 체크아웃된 경우
		console.log("전체해제");
		var z;
		for (z = 1; z <= 3; z++) {
			document.getElementById("box" + z).checked = false;
		}
	}
}

• .checked : 체크됨(true), 체크안됨(false)
• 반복문을 이용하여 문자와 변수를 조합하여 적용가능⭐
• mouse로 클릭하는 오브젝트(checkbox, radio)는 .value가 의미가 없다

5. select

<select onchange="ccc(this.value)">
<option value="">통신사 선택</option>
<option value="SKT">SKT</option>
<option value="KT">KT</option>
<option value="LGT">LGT</option>
<option value="알뜰폰">알뜰폰</option>
</select>

function ccc(k){
	console.log(k);
}

• onchange : 사용자가 데이터를 변경시 해당 함수를 호출하는 이벤트 속성
• select에 onclick 사용시 입력이 두번씩되며 나중에 난리남 절대 onchange 사용하기
• this : 해당 오브젝트에 대한 소스코드    //여기서의 this는 부모인 select의 자식인 option
  • 6가지 this중 두번째

6. 난수

<input type="button" value="랜덤숫자" onclick="lotto()">

function lotto(){
	var no2 = Math.ceil(Math.random() * 46);	//1~46
	console.log(no2);
}

• Math.ceil(Math.random()  * 10) : 올림 1~10
• Math.floor(Math.random() * 10 ) : 내림 0~9
• Math.round(Math.random()  * 10) : 반올림 0~10

😊응용문제

버튼 클릭시 5자리 인증번호 콘솔로 출력

<input type="button" value="인증번호 받기" onclick="cn()">

function cn(){
	var w=1;
	var telcn = "";	//난수 누적 변수 문자열로 초기화시켜서 숫자를 자동으로 문자열로 저장
	
	while(w<=5){
		telcn += Math.floor(Math.random() * 10);	//0~9
		w++
	}
	console.log(telcn);
}

• 반복문을 이용해 난수를 string에 누적시켜 자동으로 string으로 변환하며 누적시킴

아래는 나의 바보코드

function cn(){
	var n1, n2, n3, n4, n5;
	n1 = Math.floor(Math.random() * 10);
	n2 = Math.floor(Math.random() * 10);
	n3 = Math.floor(Math.random() * 10);
	n4 = Math.floor(Math.random() * 10);
	n5 = Math.floor(Math.random() * 10);
	console.log(String(n1)+String(n2)+String(n3)+String(n4)+String(n5));
}

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ