국비 TIL(Today I Learned) 20220725 제이쿼리 API

TIL/academy

국비 TIL(Today I Learned) 20220725 제이쿼리 API

토희 2022. 7. 25. 16:49

728x90

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

https://releases.jquery.com/

jQuery CDN

The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr

releases.jquery.com

똑같은 파일인데,

uncompressde 최적화가 이루어지지 않은상태, 개발할때는 이거

minified 회사에서 실제로 운영할때는 minified, 띄어쓰기 공백 잘 나눠져 있음, 용량이 큼

우리는 uncompressde

이걸 복사해서 url 붙여놓으면

이런 화면 떠, 다른 이름으로 저장

이클립스에 jquery폴더 만들고 붙여넣기

$로 시작하는게 두 종류

$.~~~, $(): script태그에 존재할 경우 jquery를 사용

$(셀렉터) : 해당 객체 취득

$(document).ready(function() { // 문서의 조회가 끝난 후 실행
	  		 	// window.onload와 동일하나 다수 선언해도 됨
	
})

- jquery에서 값을 다루는 함수의 경우, 인자 1개 차이로 가져오거나 넣어준다

$(셀렉터).함수명(값1); => 값1에 해당하는 값을 가져옴

$(셀렉터).함수명(값1, 값2); => 값1에 값2를 넣어줌

$(셀렉터).함수명(); => 함수에 해당하는 값을 가져옴

$(셀렉터).함수명(값1); => 함수에 해당하는 위치에 값1 넣음

$(셀렉터).on(이벤트종류, 함수); => 해당 객체에 이벤트 할당

$(셀렉터).이벤트(함수); => 해당 객체에 이벤트 할당

제이쿼리 api

1. css()

2. attr()

attribute 태그의 속성

3. fadeIn() / fadeOut()

4. hide() / show()

5.slideUp() / slideDown() -> 아코디언 구현할떄 빼고 잘 안 씀, 조잡해보임

6. width()

7. animate()

alt + shift + a 멀티모드

8. append() / prepend()

걸려있는 이벤트 볼수있음

9.on() /off()

10. empty()

test8

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#box{
	display: inline-block;
	vertical-align: top;
	width: 150px;
	height: 150px;
	border: 1px solid #000;
}

.a { 
	background-color : red;
}
.b {
	background-color: blue;
}
</style>
<script type="text/javascript" src="../jquery/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() { // 문서의 조회가 끝난 후 실행
							// window.onload와 동일하나 다수 선언해도 됨
							
	// on을 써줘야 해지가 가능? 데이터 쌓이는거에 대해			
	$("#btn").on("click", function() {
		alert("눌렀다 : " + $(".txt").val());	// 가져오겠다
		$(".txt").val("바꼈다"); // 넣어주겠다
	});
	
	$("#btn1").on("click", function() {
		// css(값1, 값2) : css중 값1 값2를 넣는다
		// $("#box").css("background-color", "#FF9999");
		// css(값1) : css중 값1에 해당하는 값을 가져온다
		// console.log($(".box").css("background-color"));
		
		// attr(값1, 값2) : 값1 속성에 값2를 넣는다
		// arrt(값1) : 값1 속성의 값을 가져온다
		if($("#box").attr("class") == "a"){
			$("#box").attr("class", "b");
		} else {
			$("#box").attr("class", "a");
		}
		
		// $("#box").fadeOut(100);
		// $("#box").hide(); // hide() : 객체를 감춤, display : none으로 바꿈
		// fadeIn() : 서서히 나타남. 투명도 1.0까지 있음
		// fadeIn(속도) : 속도만큼 애니메이션 진행됨
		// 숫자 - ms, 문자 - fast, slow
		// $("#box").fadeIn("fast");
		
		// slideDown() : 아래로 내리면서 나타남
		// slideDown(속도) : 아래로 내리면서 나타남
		// slideDown(속도, 함수) : 아래로 내리면서 나타남, 끝나면 함수실행
		// $("#box").slideDown(100);
		// $("#box").slideDown(100, function() {
		//	console.log("slide 끝");
		//});
		
		// width() : 현재 가로 크기
		// width(값) : 가로 크기를 값으로 변경
		console.log($("#box").width());
		// $("#box").width($("#box").width() * 2;
		
		
		// animate 영역처리 안됨, hide나 fadeOut은 display: none 되서 투명도 1.0으로 바꿔도 안보임
		// animate display 못 건드림, css 투명도 조절
		//$("#box").css("opacity", "0.0");
		$("#box").animate({
			opacity: 0.0,
		}, 0).animate({
			opacity: 1.0,
			width: "+=50"
		}, 100)
		// 이런 방법도
		
		
	});	
});


</script>
</head>
<body>
<input type="text" class="txt" />
<input type="button" value="버튼" id="btn" />
<input type="button" value="버튼1" id="btn1" />

<br />
<div id="box"></div>
</body>
</html>

test9

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#t{
	border-collapse: collapse; 
	width:400px;
}
#t tr{
	height: 30px;
	border: 1px solid #000;
}
</style>
<script type="text/javascript" src="../jquery/jquery-1.12.4.js"></script>
<script type="text/javascript">
var seq =1;
$(document).ready(function () {
	$("#addBtn").on("click", function () {
		var html = "";
		                             
		html += "<tr no=\"" + seq + "\">";     
		html += "<td>" + seq + "</td>";     
		html += "<td>Test" + seq + "</td>";     
		html += "</tr>";  
		
		seq++;
		// append(값) : 값을 엔티티 뒤에 누적한다
		$("#t tbody").append(html);
   		
		// prepend(값) : 값을 엔티티 앞에 누적한다
		// $("#t tbody").prepend(html);
		
		// html(값) : 엔티티를 값으로 교체한다
		// $("#t tbody").html(html);   	
		// html() : 엔티티 내용을 가져온다
		// console.log($("#t tbody").html());
		
		// 1번예시, 객체 생긴 이후에 이벤트, 안에 넣어줌
		// off() : 할당된 이벤트 제거
		// off(이벤트) : 지정 이벤트 제거 
		// $("#t tbody tr").off("click");
		// 이벤트 할당할때 해당 객체가 화면에 존재해야함
		// $("#t tbody tr").on("click", function () {
		// alert("클릭");
	// })
	})
	
	// 이쪽에 두면 안돌아감, 처음에는 tr이 없는 상태라서, 이벤트를 줄려고 하면 그 대상이 화면상에 있어야함!
	// 그래서 화면에 그려준 이후에 이벤트, 두개의 방식이 있음, 1번예시, 2번예시
	// $("#t tbody tr").on("click", function () {
	// 	alert("클릭");
	// })
	
	
	// 2번예시
	// $(셀렉터1).on(이벤트, 셀렉터2, 함수)
	// 셀렉터1(주체)에 있는 이벤트를 할당한다. 해당 이벤트트가
	// 셀렉터1에 이벤트를 할당한다. 해당 이벤트가 셀렉터2에서 발생했을 시
	// 함수를 실행한다.
	// off 할 필요 없음, 유통적으로 바뀌는 데이터는 이렇게, 상시 떠있는 애를 통해 이벤트 할당
	$("#t tbody").on("click", "tr", function () {
		// $(this) : 이벤트 대상 객체  -> 여기서는 tr 가르킴
		alert($(this).attr("no") + "클릭");
		if(confirm("지우시겠습니까?")){
			$(this).remove();	
		}
	});
	
	$("#resetBtn").on("click", function(){
		seq = 1;
		// empty() : 엔티티를 비운다
		$("#t tbody").empty();
	});
});

</script>
</head>
<body>
<input type="button" value="추가" id="addBtn"/>
<input type="button" value="초기화" id="resetBtn"/>
<br/><br/>
<table id="t">
	<thead>
		<tr>
			<th>번호</th>
			<th>제목</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>
</body>
</html>

실습- 계산기 만들기

내 코드

- 학원에서 한거

- 리셋이 구현 안됬고,

- 계산이 한번만 가능함

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function (){
	
	
	var x = "";
	var y = "";
	
	var result = "";
	var calc = "";
	
	
	$("#calculator").on("click", "input", function () {

		if($(this).attr("id") == "num" && calc == ""){
			x += $(this).val();     
			$("#txt").val(x);
		}
		
		
		if($(this).attr("id") == "calc"){
			calc += $(this).val();
		}
		
		if($(this).attr("id") == "num" && calc != ""){
			y += $(this).val();     
			$("#txt").val(y);

			
		}		
		
		if($(this).attr("id") == "result"){
			if(calc == "+") {
				// 문자 숫자로 변환하는거 parseInt로 했는데, 강사님 * 1로 하셨네
				result = x * 1 + y * 1;
				$("#txt").val(result);
				
			} else if(calc == "-") {
				result = parseInt(x) - parseInt(y);
				$("#txt").val(result);
				
			} else if(calc == "/") {
				result = parseInt(x) / parseInt(y);
				$("#txt").val(result);

			}
			else {
				result = parseInt(x) * parseInt(y);
				$("#txt").val(result);
	
			}
			calc = "";
		}
		
		if($(this).attr("id") == "reset"){
			result = "";
			$("#txt").val(result);
			x = "";
			y = "";
			calc = "";	
		}
	
	});
	
	
})
</script>
</head>
<body>
	<div id="calculator">
	<input type="text" value="" id="txt" /> <br/>
	<input type="button" value="0" id="num" />
	<input type="button" value="1" id="num" />
	<input type="button" value="2" id="num" />
	<input type="button" value="3" id="num" />
	<input type="button" value="4" id="num" />
	<input type="button" value="5" id="num" /> <br/>
	<input type="button" value="6" id="num" />
	<input type="button" value="7" id="num" />
	<input type="button" value="8" id="num" />
	<input type="button" value="9" id="num" /> 
	<input type="button" value="C" id="reset"/> <br/>
	<input type="button" value="/" id="calc"/>
	<input type="button" value="*" id="calc" />
	<input type="button" value="-" id="calc"/>
	<input type="button" value="+" id="calc"/> 
	<input type="button" value="=" id="result"/> 
	</div>


</body>
</html>

- 집에서 한거

- 연산자 두번 입력을 못 맞음

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript">
$(document).ready(function (){
	
	
	var x = "";
	var y = "";
	
	var result = "";
    var txt = "";
	var calc = "";
	
	
	$("#calculator").on("click", "input", function () {
        
        // 숫자이고, 연산자가 없을때, 1번째 값 구하기
		if($(this).attr("id") == "num" && calc == ""){
            x += $(this).val();
			txt += $(this).val();
            result += $(this).val();
            $("#txt").val(txt);
            $("#result").val(result);            
		}
        // 1번째 값 이후 연산자
		if($(this).attr("id") == "calc" && y == ""){
            $("#process").val("")
            calc += $(this).val();
			txt += $(this).val();
            result += $(this).val();
            $("#txt").val(txt)
            $("#result").val(result);
            
		}
        // 숫자이고, 연산자가 있을때, 2번째 값 구하기
		if($(this).attr("id") == "num" && calc != ""){
			y += $(this).val();
            txt += $(this).val();
            result += $(this).val();
            $("#txt").val(txt)
            $("#result").val(result);
		}	


        // 연산 2번
        if($(this).attr("id") == "calc" && x != "" && y != ""){
            $("#process").val("")
            if(calc == "+") {
				// 문자 숫자로 변환하는거 parseInt로 했는데, 강사님 * 1로 하셨네
				result = x * 1 + y * 1;
				$("#result").val(result);				
			} else if(calc == "-") {
				result = parseInt(x) - parseInt(y);
				$("#result").val(result);				
			} else if(calc == "/") {
				result = parseInt(x) / parseInt(y);
				$("#result").val(result);
			}
			else {
				result = parseInt(x) * parseInt(y);
				$("#result").val(result);
			}
            calc = "";
            calc += $(this).val();
			txt += $(this).val();
            // 계산된 값을 x에 담아주고
            x = result;
            $("#txt").val(txt)
            $("#result").val(txt)

            y= "";
        }	
        
		if($(this).attr("id") == "result_btn" && x != "" && y != ""){

            $("#process").val($("#txt").val());
            if(calc == "+") {
				result = x * 1 + y * 1;
				$("#result").val(result);				
			} else if(calc == "-") {
				result = parseInt(x) - parseInt(y);
				$("#result").val(result);				
			} else if(calc == "/") {
				result = parseInt(x) / parseInt(y);
				$("#result").val(result);
			}
			else {
				result = parseInt(x) * parseInt(y);
				$("#result").val(result);
			}
            calc = "";
            // 계산된 값을 x에 담아주고
            x = result;
            y = "";
            $("#txt").val(result);


		}
        // 리셋버튼
		if($(this).attr("id") == "reset"){
			result = "";

	        x = "";
	        y = "";
            txt = "";
	        calc = "";
	
			$("#txt").val("");

            $("#result").val("");
            $("#process").val("")
		}
	});
	
})
</script>
</head>
<body>
	<div id="calculator">
    <input type="hidden" value="" id="result" /><br/>
    <input type="text" value="" id="process" /><br/>
	<input type="text" value="" id="txt" /> <br/>
	<input type="button" value="0" id="num" />
	<input type="button" value="1" id="num" />
	<input type="button" value="2" id="num" />
	<input type="button" value="3" id="num" />
	<input type="button" value="4" id="num" />
	<input type="button" value="5" id="num" /> <br/>
	<input type="button" value="6" id="num" />
	<input type="button" value="7" id="num" />
	<input type="button" value="8" id="num" />
	<input type="button" value="9" id="num" /> 
	<input type="button" value="C" id="reset"/> <br/>
	<input type="button" value="/" id="calc"/>
	<input type="button" value="*" id="calc" />
	<input type="button" value="-" id="calc"/>
	<input type="button" value="+" id="calc"/> 
	<input type="button" value="=" id="result_btn"/> 
	</div>


</body>
</html>

강사님 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
		src="./jquery/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("table").on("click", ".calc", function() {
		calc($(this).val());
	}).on("click", ".result", function() {
		resultCal();
	}).on("click", ".clr", function() {
		clr();
	}).on("click", ".num", function() {
		num($(this).val());
	});
});

/* 숫자처리 */
function num(num) {
	if($("#input_val").val() == "0") { // 입력값이 0인가?
		$("#input_val").val(num); // 새로 넣어준다
	} else {
		$("#input_val").val($("#input_val").val() + num); // 누적한다
	}
	
	$("#cal_flag").val("false"); // 계산중인지 판단
}
/* 초기화 */
function clr() {
	$("#input_val").val("0");
	$("#result_val").val("0");
	$("#temp_val").val("");
	$("#cal_temp_val").val("");
	$("#cal_val").val("");
	$("#cal_flag").val("false");
	$("#equal_flag").val("false");
}
/* 사칙연산 */
function calc(val) {
	if($("#cal_val").val() == "") { // 기존부호가 없는가?
		$("#result_val").val($("#input_val").val()); // 결과값에 입력값 넣는다
	} else {
		if($("#cal_val").val() == "+") { // 기존부호가 +이면 결과값 + 입력값을 결과값에 넣는다
			$("#result_val").val(
					$("#result_val").val() * 1 + $("#input_val").val() * 1);
		} else if($("#cal_val").val() == "-") {// 기존부호가 -이면 결과값 - 입력값을 결과값에 넣는다
			$("#result_val").val(
					$("#result_val").val() * 1 - $("#input_val").val() * 1);
		} else if($("#cal_val").val() == "*") {// 기존부호가 *이면 결과값 * 입력값을 결과값에 넣는다
			$("#result_val").val(
					$("#result_val").val() * 1 * $("#input_val").val() * 1);
		} else if($("#cal_val").val() == "/") {// 기존부호가 /이면 결과값 / 입력값을 결과값에 넣는다
			$("#result_val").val(
					$("#result_val").val() * 1 / $("#input_val").val() * 1);
		}
		
		$("#temp_val").val($("#input_val").val());
		$("#cal_temp_val").val($("#cal_val").val());
		$("#cal_flag").val("true");
	}
	
	$("#cal_val").val(val); // 부호값에 누른 부호를 넣어준다
	$("#input_val").val("0"); // 입력값을 0으로 변경
}

function resultCal() {
	var val = ""; // 연산에 사용할 입력 또는 임시보관 값
	var cal = ""; // 연산에 사용할 부호
	
	if($("#cal_flag").val() == "false" && $("#equal_flag").val() == "true") { // =계산중이면서 숫자를 새로 입력한 경우
		$("#result_val").val($("#input_val").val()); // 결과값을 입력값으로 교체
		val = $("#temp_val").val(); // 임시보관값 사용
		cal = $("#cal_temp_val").val(); // 임시보관 부호 사용
		$("#cal_flag").val("true"); // 계산한적 있다로 변경
	} else if($("#cal_flag").val() == "true") { // 계산한적 있을 때
		val = $("#temp_val").val(); // 임시보관값 사용
		cal = $("#cal_temp_val").val(); // 임시보관 부호 사용
	} else { // 계산한적 없을 때
		val = $("#input_val").val(); // 입력값 사용
		$("#temp_val").val($("#input_val").val()); // 임시값에 입력값 넣어놓음
		cal = $("#cal_val").val(); // 현재 부호 사용
		$("#cal_temp_val").val($("#cal_val").val()); // 임시부호에 현재부호 넣어놓음
		
		$("#cal_flag").val("true"); // 계산한적 있다로 변경
	}
	
	if($("#cal_val").val() == "") { // 부호를 한번도 안눌렀을 때
		$("#result_val").val(val); // 결과값에 입력값 넣는다
	} else { // val과 cal을 이용하여 연산
		if(cal == "+") {
			$("#result_val").val(
					$("#result_val").val() * 1 + val * 1);
		} else if(cal == "-") {
			$("#result_val").val(
					$("#result_val").val() * 1 - val * 1);
		} else if(cal == "*") {
			$("#result_val").val(
					$("#result_val").val() * 1 * val * 1);
		} else if(cal == "/") {
			$("#result_val").val(
					$("#result_val").val() * 1 / val * 1);
		}
	}
	
	$("#input_val").val("0"); // 입력값 0
	$("#equal_flag").val("true"); // =계산 진행여부 변경
}
</script>
</head>
<body>
부호값<input type="hidden" id="cal_val" /><br/><!-- 부호값 -->
마지막 입력값<input type="hidden" id="temp_val" /><br/><!-- 마지막 입력값 임시저장 -->
부호값임시저장<input type="hidden" id="cal_temp_val" /><br/><!-- 부호값 임시저장 -->
계산중인지여부<input type="hidden" id="cal_flag" value="false" /><br/> <!-- 계산중인지 여부 -->
=계산중인지여부<input type="hidden" id="equal_flag" value="false" /> <!-- =계산중인지 여부 -->
<table>
	<tr>
		<td colspan="4">
			<input type="text" id="result_val" 
				   value="0" readonly="readonly"/><!-- 결과값 -->
		</td>
	</tr>
	<tr>
		<td colspan="4">
			<input type="text" id="input_val" 
				   value="0" readonly="readonly"/><!-- 입력값 -->
		</td>
	</tr>
	<tr>
		<td><input type="button" value="7" class="num" /></td>
		<td><input type="button" value="8" class="num" /></td>
		<td><input type="button" value="9" class="num" /></td>
		<td><input type="button" value="+" class="calc" /></td>
	</tr>
	<tr>
		<td><input type="button" value="4" class="num" /></td>
		<td><input type="button" value="5" class="num" /></td>
		<td><input type="button" value="6" class="num" /></td>
		<td><input type="button" value="-" class="calc" /></td>
	</tr>
	<tr>
		<td><input type="button" value="1" class="num" /></td>
		<td><input type="button" value="2" class="num" /></td>
		<td><input type="button" value="3" class="num" /></td>
		<td><input type="button" value="*" class="calc" /></td>
	</tr>
	<tr>
		<td><input type="button" value="0" class="num" /></td>
		<td><input type="button" value="c" class="clr" /></td>
		<td><input type="button" value="=" class="result" /></td>
		<td><input type="button" value="/" class="calc" /></td>
	</tr>
</table>
</body>
</html>

강사님은 연산자 두번 들어오면 계산안됨, 0으로됨

오늘의 느낀점

1. input의 val은 empty() 못쓰나봐

생각해보면 input은 열고 닫히는 태그가 아니잖앙!

이거... 언제도 한번 생각했던것 같은데 또 까먹고, 계속 쓸려고 했어

2. 나는 변수범위, 전역변수인지 지역변수인지의 개념이 약한듯

자꾸 지역변수 사용할때 함수 밖에서도 쓰고싶음

728x90

'TIL > academy' 카테고리의 다른 글

국비 TIL(Today I Learned) 20220727 ajax로 데이터 받아오기 (0)	2022.07.27
국비 TIL(Today I Learned) 20220726 제이쿼리 슬라이드, 테이블 체크박스, ajax (0)	2022.07.27
국비 TIL(Today I Learned) 20220722 JS 이벤트 (0)	2022.07.22
국비 TIL(Today I Learned) 20220721 Js String 메소드 (0)	2022.07.21
국비 TIL(Today I Learned) 20220720 Javascript (0)	2022.07.20

현재글국비 TIL(Today I Learned) 20220725 제이쿼리 API

TlL, java, 스프링부트, 채팅기능, Spring Boot, spring-boot-starter-validation, 배열, 변수, Github, redis, 쿼리문, Til, Spring Boot 구동오류, mariaDB, mysql, redis명령어, issuelabels, 국비학원, firebase, IntelliJ,

Today :
Yesterday :

makeaplayground