//Google AdSense

함수 복습 실습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
<script type="text/javascript">
	/*  
		실습1. 아래의 함수 호출부가 있다. 호출부를 보고 선언부를 완성시켜라.
		선언부에서 인수값 전체를 합산시키는 코드 작성.
		
		var arr = [10,20,30];
		myFunction(20,30,arr);
		
	*/
	
	var arr = [10,20,30];
	
	//익명함수
	var myFunction = function(n1, n2, arr){
		var re = 0;
		for(var i = 0; i < arr.length ; i++){
			re += arr[i];
		}
		re += n1+n2;
		return re;		
	}
	
	//기본형
	function myFunction(n1, n2, arr){
		var re = 0;
		for(var i = 0; i < arr.length ; i++){
			re += arr[i];
		}
		re += n1+n2;
		return re;		
	}
	
	//호출
	myFunction(20,30,arr);
	
	/*  
		실습2. 아래의 함수 호출부가 있다. 호출부를 보고 선언부를 완성시켜라.
		(함수 호출시 리턴 없이 콘솔로 매개변수 출력)
		
		myFunction2('한국스마트정보교육원');
	*/
	
	//익명함수
	var myFunction2 = function (str) {
		console.log(str);		
	}
	
	//기본형
	function myFunction2 (str) {
		console.log(str);
	}
	
	//호출
	myFunction2('한국스마트정보교육원');
	
	/*  
	실습3. 아래의 함수 호출부가 있다. 호출부에 1개의 넘버형 인수가 들어가고 선언부에는 매개변수값으로 구구단을 출력하는 코드가 들어가있다.
	선언부를 완성시켜라.(함수 호출시 리턴없이 콘솔로 결과값 출력)
	
	myFunction3(2);
	*/
	
	var myFunction3 = function(n) {
		for(var i = 1; i<=9 ; i++){
			console.log (i * n);
		}
	}
	
	function myFunction3(n) {
		for(var i =1; i<=9 ; i++){
			console.log(i*n);
		}
		
	}
		
	myFunction3(2);

</script>
</head>
<body>

</body>
</html>

 

Jquery 선택자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자</title>
<script type="text/javascript" src="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
	/*  
		DOM 객체를 먼저 읽은 후 readt메서드의 함수 실행
			1.
			$(document).ready(function(){
				
			})
			2.
			$(function(){
				
			})
	*/
	
	//제이쿼리가 DOM객체 읽기를 완료한 후에 실행할 준비가 되었다. (동적으로 생성한 html은 읽지 못한다.)
	$(function(){
		
		// 선택자 - $('선택자') -> 제이쿼리 함수를 실행하면서 인수값으로 css선택자 삽입
	
	
		/*********************************************************************************

		1. 직접선택자 
			제이쿼리 함수에 선택자를 인수값으로 삽입하여 실행
		
		*	$('#아이디')			- 아이디의 객체를 검색하여 객체 반환 (단 하나)
		*	$('.클래스')			- 인수값과 일치하는 클래스를 모두 선택하여 객체 반환
		*	$('[속성명]')			- 인수값과 일치하는 속성명을 모두 선택하여 객체 반환		
		*	$('[속성명=속성값]')	- 인수값과 일치하는 속성명=속성값 을 모두 선택하여 객체 반환	
			$('태그명')			- 인수값과 일치하는 태그를 모두 선택하여 반환
			$('선택자1,..,선택자n')	- 인수값 전체에 해당되는 객체를 선택하여 객체 반환
			$('선택자1 선택자2')		- 첫번째 선택자의 하위인 두번째 선택자를 선택하여 객체 반환
			$('태그명선택자')		- 태그명과 일치하면서 선택자와 일치하는 객체를 반환

				ex) $('h1.title')	h1태그이면서 title이라는 클래스를 가진 객체
					$('h1#title')	h1태그이면서 title이라는 아이디를 가진 객체
					$('h1[class]')	h1태그이면서 class라는 속성을 가진 객체

				
		2. 메서드 활용
			제이쿼리 선택자로 하여 객체가 반환될 경우 각종 메서드를 사용할 수 있다.
			
			
		3. 인접관계 선택자
			직접선택자로 선택 후 상세하게 객체를 검색할 수 있다.
		
			$('선택자').parent();				- 선택된 객체의 부모 객체를 검색하여 객체 반환
				ex) $('article').parent();
				
			$('선택자').parents();			- 선택된 객체의 부모 객체 전체를 검색하여 객체 반환
										인수값이 있을 경우 선택된 객체의 인수값과 일치하는 부모 객체만 반환
				ex) $('article').parents();
					$('article').parents('body');
					
			$('선택자').children();			- 선택된 객체의 자식요소를 검색하여 객체 반환
				ex) $('article').children();
				
			$('선택자').find('자식요소 선택자');	- 선택된 객체의 자식요소 중 find 메서드의 인수값과 일치하는 객체를 반환
			
			
			$('선택자').prev();				- 선택된 객체의 동일선상 이전 객체를 선택하여 객체 반환
				ex) $('body').prev();
			
			$('선택자').next();				- 선택된 객체의 동일선상 다음 객체를 선택하여 객체 반환
				ex) $('head').next();
				
			
		4. 속성 상태에 따른 선택자
			선택된 객체의 상태를 표기하여 상태에 일치하는 객체를 선택하여 반환
				('checked','selected','hidden')
					$('선택자:checked')
					$('선택자:selected')
					$('선택자:hidden')
					
		5. 속성 상태를 확인하는 메서드
			is(':속성 상태')	-	속성 상태를 확인하는 메서드 true 혹은 false 반환
			prop('속성상태',true or false)	-	속성상태를 확인하거나 적용하는 메서드	
					
		*********************************************************************************/
		$('#btn').click(function(){
			$('.check:checked').each(function(){
				console.log($(this).val());
				//val() == value 속성을 가진 폼태그의 value 값을 가지고 오거나 삽입
				//val('값') == 값 삽입, val() == 값 가지고 오기
			})
			
		});
		$('#btn1').click(function(){
			$('.check').prop('checked', true);
		});
		$('#btn2').click(function(){
			$('.check').prop('checked', false);
		});
		
		$('#btn3').click(function(){
			$('.check').each(function(){
				if($(this).prop('checked')){
					console.log($(this).val());
				}
			})
		})
	});
</script>
</head>
<body>
	<input type="checkbox" class="check" value=1 />1
	<input type="checkbox" class="check" value=2 />2
	<input type="checkbox" class="check" value=3 />3
	
	<button type="button" id="btn">확인</button>
	<button type="button" id="btn3">확인2</button>
	<button type="button" id="btn1">전체 체크</button>
	<button type="button" id="btn2">체크 해제</button>

	
</body>
</html>

JQuery 탐색선택자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제이쿼리 탐색 선택자, 배열 관련</title>
<script type="text/javascript">
	/*  
		<탐색선택자>
			-	선택자로 이미 선택된 객체를 한번 더 검색하여 객체를 반환
			$('선택자').first();		-	선택된 객체 중 첫번째 객체 요소 반환
			$('선택자').last();		-	선택된 객체 중 마지막 요소 반환
			$('선택자').eq(index);	-	선택된 객체중 인수값과 일치하는 인덱스 요소 선택 반환
			$('선택자').filter('선택자')-	선택된 객체중 filter 메서드의 인수값인 선택자와 일치하는 객체를 선택하여 반환
				ex) $('article').filter('.post-7') >> article 객체 중에서 .post-7인 article 객체 반환
					(vs. 인접관계 선택자 혼동하지 않기.)
		<배열 관련 메서드>
			-	다중으로 선택된 객체를 반복문 형태와 비슷하게 풀 수 있다.
			
			$('선택자').each();		- 다중으로 선택된 객체를 하나씩 풀어 함수를 실행
				ex)	$('선택자').each(function(){});	
					$.each($('선택자'), function(){});
			
			$('선택자').index('객체')	-다중으로 선택된 객체 중 index메서드의 인수객체와 동일한 객체를 검색하여 인덱스 반환.
	*/
</script>
</head>
<body>

</body>
</html>

 

Jquery 선택자 실습1 

(https://api.jquery.com/에서 test)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제이쿼리 선택자, 인접관계선택자 실습</title>
<script type="text/javascript">
	/*  
		실습4. 제이쿼리 사이트의 api 메뉴에 있는 article 태그 클릭시 클릭한 article 내의 a태그의 모든객체를 제거하시오.
		
		$('article').click(function(){
			//최종적으로 선택된 객체에 remove() 메서드 활용시 선택된 객체 제거
			//$(this) 는 선택된 article의 태그임으로 인접관계 선택자를 활용하여 자식 및 부모객체를 선택할 수 있음
		})
	*/
	
	$('article').click(function(){
		$(this).find('a').remove();
	})
	
	/*  
	실습5. 제이쿼리 사이트의 api 메뉴에 있는  .entry-summary 클릭 시  
	.entry-summary의 상위인  article 객체가 제거되도록 하시오.
	*/
	
	$('.entry-summary').click(function(){
		$(this).parents('article').remove();
	})
	
	/*  
	실습6. 제이쿼리 사이트의 api 메뉴에 있는  .entry-summary 클릭 시  
	 article > .entry-title > a태그 텍스트를 '한국스마트정보교육원'으로 변경하시오.
	*/
	
	$('.entry-summary').click(function(){
	    $(this).parents('article').find('.entry-title').find('a').text('한국스마트정보교육원');
	})
	
</script>
</head>
<body>

</body>
</html>

 

Jquery 선택자 실습2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제이쿼리 선택자, 인접관계 선택자</title>
<script type="text/javascript" src="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('.del-input-group').click(function(){
			$(this).parents('.input-group').remove(); // == $(this).parent().remove();          
		})
	});
</script>
</head>
<body>
	<!--
	실습6. 
	.del-input-group 클릭시 .input-group이 제거되도록 하시오.
	-->
	<div class = "input-wrap">
		<div class = "input-group">
			<input type="text" name="memberName">
			<button type="button" class = "del-input-group">제거</button>
		</div>
		<div class = "input-group">
			<input type="text" name="memberName">
			<button type="button" class = "del-input-group">제거</button>
		</div>
		<div class = "input-group">
			<input type="text" name="memberName">
			<button type="button" class = "del-input-group">제거</button>
		</div>
		<div class = "input-group">
			<input type="text" name="memberName">
			<button type="button" class = "del-input-group">제거</button>
		</div>
		<div class = "input-group">
			<input type="text" name="memberName">
			<button type="button" class = "del-input-group">제거</button>
		</div>
	</div>
</body>
</html>

 

each, 속성 상태 확인 메서드 실습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>each, 속성 상태 확인 메서드 실습</title>
<script type="text/javascript" src="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
	/*  
		실습8. #btn 클릭시 .check의 객체가 체크가 되었다면 체크해제, 체크가 해제되었다면 체크를 하는 코드를 작성하시오.
	*/
	
	$(function(){
		$('#btn').click(function(){
			$('.check').each(function(){
				if($(this).prop('checked')){
					$(this).prop('checked',false);
				}else{
					$(this).prop('checked',true);	
				}
			})
		})
	});
	
</script>
</head>
<body>
	<input type="checkbox" class="check" value=1 /> 1
	<input type="checkbox" class="check" value=2 /> 2
	<input type="checkbox" class="check" value=3 /> 3
	
	<button type="button" id="btn">확인</button>

</body>
</html>

 

저작자표시

'JavaScript' 카테고리의 다른 글

[JQuery] 객체 편집 메서드 실습  (0) 2020.03.31
[JQuery] 속성 조작 메서드 / 객체 편집 메서드 / 동적바인딩  (0) 2020.03.30
[JQuery] 라이브러리 연동 / callback 함수  (0) 2020.03.23
[JavaScript] 문자열 객체 / 브라우저 객체 모델  (0) 2020.03.23

+ Recent posts

티스토리툴바