JavaScript(돔 객체 컨트롤)

JSP&Servlet

JavaScript(돔 객체 컨트롤)

byeol_dev 2023. 3. 3. 17:47

자바스크립트 내용 : 기본 코딩 문법, 돔(태그) 객체 컨트롤 - 핵심

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
자바스크립트 내용 : 기본 코딩 문법, 돔(태그) 객체 컨트롤-핵심
<input type="text" id="myInput">
<script type="text/javascript">
	//input태그에 작성된 값 받아오기.
	//태그에 접근하는 방법 : id, class로 접근하는 방식
	//자바스크립트 초창기 버전
	
	//태그 중에 id 속성이 myInput인 태그를 선택.
	var myInput = document.getElementById('myInput'); //myInput 변수 자체가 input태그 전체가 됨.
	
	//선택한태그.속성명 > 속성 값을 알 수 있다.
	alert(myInput.type); //선택한 태그의 type 속성 값 불러옴. > text
	alert(myInput.id); //선택한 태그의 id 속성 값 불러옴 > myInput
	
	console.log(myInput.type);
	console.log(myInput.id);
	console.log(myInput.value);
	
</script>
</body>
</html>

javascript에서 jsp의 input 태그에 접근 가능하며 여러 값들도 불러올 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="aaa">
<input type="button" value="실행" onclick="getValue();">

<script type="text/javascript">
	function getValue(){
		//인풋 태그 선택(예전 코드)
		var myTag = document.getElementById('aaa');
		var myTag = document.getElementByClass('aaa');
		var myTag = document.getElementByTagName('div');
		
		//최근 코드 - 변수 선언(var 대신) : const, let
		//const : 변하지 않는 값을 저장할 때 사용.
		//let : 변하는 값을 저장할 때 사용.
		
		//자바스크립트 태그 선택자 = css 선택자와 동일하게 들어옴.
		const myTag = document.querySelector('#aaa'); //id
		//const myTag = document.querySelector('.aaa'); 클래스
		//const myTag = document.querySelector('.div'); 
		//const myTag = document.querySelector('.div > table > tr'); 클래스의 자식의 자식
		
		alert(myTag.value); //내가 선택한 태그의 value 속성값 불러옴.
		
		//선택한 태그의 value 속성값을 변경
		myTag.value = '안녕하세요';
	}
</script>

▼태그 선택 시 사용하는 코드

document.querySelector('#aaa');

document.querySelector('#태그 아이디명');

document.querySelector('.태그 클래스명');

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="num1">
<input type="text" id="num2">
<input type="button" value="더하기" onclick="getSum();"><br>
<input type="text" id="result">
<script type="text/javascript">
	function getSum(){
		
		const val1 = document.querySelector('#num1').value;
		const val2 = document.querySelector('#num2').value;
		
		const result = parseInt(val1) + parseInt(val2);
		document.querySelector('#result').value = result;
	}

</script>
</body>
</html>

입력된 num1, num2의 value 값을 불러옴 > 입력 받은 데이터 문자열

int로 변환해준 후 value 값 더해줌

더하기 버튼 누르면 getSum 함수 실행되는 것 확인 가능.