다연이네

[days05] 1) js 클래스 + constructor 2) form태그 유효성 검사 본문

Web/JavaScript

[days05] 1) js 클래스 + constructor 2) form태그 유효성 검사

　다연　 2020. 12. 15. 20:54
반응형

 1. JS 클래스 

ES6 (ECMAScript 2015)
- javascript 클래스를 도입했다. 
- class 키워드 + 항상 constructor() 함수(메소드) 추가

 

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="demo"></div>

<script>
	class Car{
		//자바라면
		//private String name; 필드가 있어야하지만 
		constructor(name, year){ //생성자 ) 객체 생성될때 자동으로 호출되는 함수
			//this ==	Car클래스로 생성된 객체(자기자신)
			this.name=name; //js는 그냥 이렇게 선언하면 name, year 필드가 만들어진 것이다.
			this.year =year;
		}
	
		
		//메소드
	 	age(year){
			return year - this.year;
		} 
		
	}
	//var  -> let 준 이유 ?  (let: 블럭영역에서 사용되는 거니까 , 블럭 안에서 사용 안하면 그냥 var과 똑같은 의미)
	let myCar =new Car("BMW",2020);
	$("#demo").html(myCar.name + "/" + myCar["year"] + "/" + myCar.age(2025));
</script>
</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
	//ES6 (ECMAScript 2015) js에서도 클래스를 도입했다고 했다.
	class Car{
		constructor(name, year){
			this.name=name;
			this.year = year;
		}
		
		//static붙은 애도 선언 가능 (예전에 객체가 아니라 클래스명으로 호출했었다 => 똑같이)
		static hell(){
			return "hi!";
		}
		//호출시 : Car.hell() 하면된다
		
		//getter, setter도 선언 가능했다
		get carname(){
			return this.name;
		}
		set carname(name){
			this.name = name;
		}
		
		//메소드도 선언 가능했다
		age(y){
			//매개변수 없을때
			//let d = new Date();
			//return d.getFullYear()-this.year();
			return y-this.year;
		}
		
		present(){
			return 'I have a '+this.name;
		}
	}
	let myCar1 = new Car("Audi",2020);
	//myCar1.age(); 매개변수 없을때 
	//myCar1.age(2015); //매개변수 있을때
	
	//js에도 클래스간의 상속을 표현할 수 있다
	class Model extends Car{
		constructor(name, year, mod)	{ //name과 year은 부모클래스의 생성자를 호출해서 넘겨주겠다
			super(name, year);
			this.model = mod;
		}
		show(){
			return this.present()+", it is a "+this.model;
		}
	}//자바와 동일한 super 키워드 사용
	
	
</script>
</body>
</html>

 

 

 2. form태그 유효성 검사 

Name을 적지 않고 엔터친 경우

Age를 적지 않고 엔터친 경우

Name과 Age를 모두 적어야 페이지가 넘어간다.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form action="ex10_ok.jsp" method="get"
	onsubmit="return validateForm()" name="form1"
> <!--  return 씀으로써 처리결과 반환 (false면 넘어가지 않도록)-->
Name: <input type="text" name="name" autofocus />
<br>
Age: <input type="text" name="age" />
<br>
<input type="submit" />
</form>

<!-- form 태그 여러개 있어도 된다-->
<form action=""></form>
<form action=""></form>
<form action=""></form>
<form action=""></form>


<script>
function validateForm() {
	//alert("확인");
	//입력값에 대한 유효성 검사
	
	//document.getElementById(id)
	//document.getElementsByClassName(name)
	//document.getElementsByTagName(tagName)
	//등등 여러 코딩으로 얻어왔었는데,
	//document.forms 컬렉션을 사용해보겠다
	//5개 폼태그 중 index 값줘도 좋고, name 속성이 있다면 그 값으로 얻어와도 좋다
	//document.forms[0] 
	var name = document.forms["form1"]["name"].value;	
	if(name.trim().length==0){
		alert("name은 필수 입력항목입니다.");
		//이벤트(submit) 취소
		document.forms["form1"]["name"].focus();
		return false;
	}
	var age = document.forms["form1"]["age"].value;	
	if(age.trim().length==0){
		alert("age은 필수 입력항목입니다.");
		//이벤트(submit) 취소
		document.forms["form1"]["age"].focus();
		return false;
	}
	
}
</script>

</body>
</html>

 

jquery로 수정

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form id="form1" name="form1" 
			action="ex10_ok.jsp" method="get"> 
Name: <input type="text" name="name" autofocus id="name" />
<span></span>
<br>
Age: <input type="text" name="age" id="age" />
<span></span>
<br>
<input type="submit" />
</form>

<form action=""></form>
<form action=""></form>
<form action=""></form>
<form action=""></form>


<script>
$("#form1").submit(function(event) {
	//alert("test");
	if($("#name").val().trim().length==0){
		$("#name")
				.next() //span태그
					.css("color","red")
					.text("*필수 입력 항목")
					.show()
					.fadeOut(1000); //1초
			//이벤트 취소
			event.preventDefault();
	}//if
	
	
	if($("#age").val().trim().length==0){
		$("#age")
				.next() //span태그
					.css("color","red")
					.text("*필수 입력 항목")
					.show()
					.fadeOut(1000); //1초
			//이벤트 취소
			event.preventDefault();
	}//if
})
</script>

</body>
</html>

jQuery에서 이벤트를 취소하는 함수

event.preventDefault();

 

 

반응형
저작자표시 비영리

'Web > JavaScript' 카테고리의 다른 글

[days06] js call()/apply() 메소드  (0) 2020.12.16
[days05] js 객체와 함수  (0) 2020.12.15
[days05] Arrow Function (화살표 함수)와 this  (0) 2020.12.15
[days05] 변수, var /let /const 키워드  (0) 2020.12.15
[days05] js try~catch  (0) 2020.12.15
'Web/JavaScript' Related Articles more
Comments