웹 개발 정보

변수 선언 방법

var name = '홍길동';
let name = '홍길동';
const name = '홍길동';

자바스크립트 변수에는 자료형은 따로 선언은 없습니다. 

입력된 데이터에 따라 문자, 숫자가 될 수 있습니다. 

var

let과 거의 비슷하지만 var에는 블록 스코프가 따로 없기 때문에 요즘에는 잘 사용하지 않습니다.

let

변수를 선언시 사용하는 키워드입니다. 

const

상수(변하지 않는 값)를 선언시 사용하는 키워드입니다.

1. Vue.js 설치방법

vue.js를 사용하기 위해서는 2가지 방법 사용자 pc에 소스를 직접 내려받아서 적용하는 방법과 CDN주소를 이용해 적용시키는 설치 방법에 대해 알아보겠습니다.

설치를 위해서는 공식 사이트(kr.vuejs.org)를 이용해 다운로드를 받습니다.

해당 사이트에 들어가는 다운로드가 개발 버전, 프로덕션 버전 2가지가 있습니다. 개발기간에는 개발 버전을 이용해 작업을 해고, 배포 시에는 프로덕션 버전을 사용하시면 되겠습니다.

다운로드 경로에 가시면 아래와 같은 내용으로 적용을 시키면 되겠습니다.

2. Vue.js 직접 다운로드

3. Vue.js CDN 주소 활용

제이쿼리(Jquery) 이벤트 종류

.bind( eventType, handler ) 바인드 함수를 사용하면서 요소에 이벤트를 적용시 eventType이 있습니다.

eventType은 선언된 이벤트 외 다른 이벤트를 요소에 주어진다고 해도 이벤트 핸들러가 실행이 되지 않습니다.

이런 이벤트는 키보드, 마우스, 화면 등.. 여러가지가 존재를 합니다.

1. 제이쿼리(Jquery) 이벤트 종류 표

1.1 키보드 이벤트

1.2 마우스 이벤트

1.3 입력 폼 이벤트

1.4 기타 이벤트

1. 제이쿼리(Jquery) 이벤트  등록, 제거

요소에 이벤트 핸들러를 지정하기 위해서 bind() 및 제거에 해당하는 unbind() 함수를 사용해 각각에 요소에 이벤트 핸들러를 추가할 수가 있습니다.

2. 제이쿼리(Jquery) 이벤트  등록 .bind()

<input type="button" id="btn">

<script type="text/javascript"> 
	$("#btn").bind("click",function(){
		alert("클릭");
	}); 
</script>

.bind(eventType,handler)

id가 btn이라는 요소에 이벤트 핸들러를 추가를 합니다. eventType은 click, handler는 클릭이라는 문구를 출력하는 알럿창이 나오도록 함수를 지정합니다.

이렇게 되면 id가 btn요소를 클릭시 '클릭'문구가 나오는 알럿창이 화면이 표시가 됩니다.

3. 제이쿼리(Jquery) 이벤트  제거 .unbind()

<input type="button" id="btn">

<script type="text/javascript"> 
	$("btn").unbind();
</script>

.unbind([eventType] [, handler])

id가 btn인 요소에 추가된 이벤트를 제거합니다.

1. 매개변수가 없으면 모든 이벤트 제거

2. eventType 지정시 지정된 이벤트 제거

3. handler 지정시 click에 대한 이벤트는 남아있어도 핸들러에 해당되는 부분이 제거

1. 제이쿼리(Jquery) Ajax

Ajax는 웹 페이지를 다시 요청하지 않고 동적으로 서버와 HTTP 통신이 이루워져 데이터를 처리하는 방식이다.

Ajax는 또한 프레임워크 중에서도 많이 사용을 하는 편이여서 알아뒀다가 사용을 하면 편하게 작업을 진행을 할 수 있습니다.

2. 제이쿼리(Jquery) Ajax 사용법

<input type="button" id="ajaxBtn">
<div id="printText"></div>
<div id="printError" style="color:red;"></div>

<script type="text/javascript"> 
	$("#ajaxBtn").bind("click",function(){
		$.ajax({
			url : "/rest/rest.jsp",		// 서버로 통신할 URL 주소
			data : {name:"홍길동"},	// 서버로 보낼 데이터
			method : "POST",		// HTTP 요청 메서드 [ "GET", "POST" ]  
			dataType : "text",			// 서버에서 보내줄 데이터 타입 [ "json", "xml", "text", "html" ]
			success : function(data){
				// 성공 콜백 함수 
			},
			error : function(jqXHR,status,error){
				// 실패 콜백 함수 
			},
			complete : function(){
				// 처리 후 콜백 함수 
			}
		})
		
		// 성공 체이닝
		.done(function(data){  
			$("#printText").html("data : " + data);
		})  
		
		// 실패 체이닝
		.fail(function(jqXHR,status,error){ 
			$("#printError").html("xhr : " + xhr + "<br/> error : " + error + "<br/> status : " + status);
		})
		
		// 처리 후 체이닝
		.always(function(){
			alert("처리 끝");
		})				
	});
</script>

1. 성공 처리 -> 성공 콜백 함수(success) -> 처리 후 콜백 함수(complete) -> 성공 체이닝(.done) -> 처리 후 체이닝(.always)

2. 실패 처리 -> 실패 콜백 함수(error) -> 처리 후 콜백 함수(complete) -> 실패 체이닝(.fail) -> 처리 후 체이닝(.always)

3. Ajax 사용 옵션

제이쿼리(Jquery) 필터링 선택자#4

제이쿼리에 요소를 선택 후 선택한 요소를 필터링하기 위해 제이쿼리에서 제공하고 있는 메서드를 사용해 요소를 다시 선택하는 방법에 대해서 알아보겠습니다.

1. 제이쿼리(Jquery) 필터링 함수 표

1.1 제이쿼리(Jquery) 필터링 사용 예시

1.1.1 .first() .last() 함수 사용

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li>
	</ul>
</div> 
<script type="text/javascript">
	$("li").first().css("color","red");
	$("li").last().css("color","red");
</script>

결과값

선택된 li 전체 태그들 중에서 처음과 마지막에 해당하는 1, 6인 요소가 선택됩니다.  

1.1.2 .eq() 함수 사용

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li>
	</ul>
</div> 
<script type="text/javascript">
	$("li").eq(2).css("color","red");
</script>

결과값

선택된 li 전체 태그들 중에서 index가 2번인 3번째 li 요소가 선택이 됩니다.

index 번호는 0번 부터 시작이 된다.

1.1.3 .filter() 함수 사용

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li>
	</ul>
</div> 
<script type="text/javascript">
	$("li").filter(":odd").css("color","red");
</script> 

결과값

선택된 li 전체 요소 중에서 filter에 해당하는 짝수 요소들만 선택이 됩니다.

1.1.4 .not() 함수 사용

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li>
	</ul>
</div> 
<script type="text/javascript">
	$("li").not(":odd").css("color","red");
</script>

결과값

선택된 li 전체 요소 중에서 not에 해당하는 짝수가 아닌 홀수 요소들을 선택이 됩니다.

1.1.5 .has() 함수 사용

<div>
	<ul>
		<li><span>1</span></li>
		<li><span>2</span></li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li>
	</ul>
</div> 
<script type="text/javascript">
	$("li").has("span").css("color","red");
</script>

결과값

선택된 li 전체 요소 중에서  has에 해당하는 자식요소가 span를 갖는 li 태그만 선택이 됩니다.

1.1.6 .is() 함수 사용

<div>
	<ul>
		<li id="selector">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li> 
	</ul>
</div> 
<script type="text/javascript">
	var flag = $("li").is("#selector");
	if(flag){
		$("#selector").css('color','red');
	}
</script>

결과값

선택된 li 전체 요소 중에서 id가 selector 값이 있으면 true 값을 반환하는 기능입니다.

1.1.7 .slice() 함수 사용

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li> 
		<li>6</li> 
	</ul>
</div> 
<script type="text/javascript">
	$("li").slice(1,2).css('color','red');
</script> 

결과값

선택된 li 전체 요소 중에서 slice에 해당하는 인덱스가 1부터 2이전 인덱스에 해당 하는 요소를 선택합니다.

.slice(startIndex, endIndex) index는 0부터 시작 startIndex(포함) 부터 endIndex(미포함) 이전까지 해당하는 요소

.slice(startIndex) startIndex(포함) 부터 마지막 요소(포함)까지 해당하는 요소 선택

제이쿼리(Jquery) 부모, 형제, 자식 선택자#3

제이쿼리에 요소를 선택 후 선택된 요소에서 부모, 형제, 자식 요소를 찾는 방법에 대해서 알아보겠습니다.

선택된 요소를 감싸고 있는 상위 노드를 부모, 반대로 선택된 요소가 어떤한 요소를 감싸고 있을때 감쌓여진 요소를 자식, 또는 선택된 요소와 같은 트리위치에 있는 요소들을 형제 요소라고 부릅니다.

1. 제이쿼리(Jquery) 부모 선택자 함수 표

1.1 부모 선택자 사용 예시

1.1.1 .parent() 사용 접근

<div id="parentDIV">메뉴
 <ul id="parentUL1">
  <li>1</li>
  <li>2</li>
  <li id="parentLI">3
   <ul id="parentUl2">
    <li id="selector">3-1</li> 
    <li>3-2</li>
   </ul>
  </li>
  <li>4</li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").parent().css("color","red");
</script> 

결과값

부모 요소인 ID가 'parentUl2' 요소가 선택된다.

1.1.2 .parents() 사용 접근

<div id="parentDIV">메뉴
 <ul id="parentUL1">
  <li>1</li>
  <li>2</li>
  <li id="parentLI">3
   <ul id="parentUl2">
    <li id="selector">3-1</li> 
    <li>3-2</li>
   </ul> 
  </li>
  <li>4</li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").parents().css("color","red");
</script>

결과값

부모요소들인 ID가 'parentDIV', 'parentLI', 'parentUl2' 요소들이 선택된다.

1.1.3 .closest( [selector] ) 사용 접근

<div id="parentDIV">메뉴
 <ul id="parentUL1">
  <li>1</li>
  <li>2</li>
  <li id="parentLI">3
   <ul id="parentUl2">
    <li id="selector">3-1</li> 
    <li>3-2</li>
   </ul> 
  </li>
  <li>4</li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").closest("li").css("color","red");
</script> 

결과값

선택된 현재 요소부터 가장가까운 요소를 자기 자신이므로 ID가 selector인 요소를 찾게됩니다.

2. 제이쿼리(Jquery) 형제 선택자 함수 표

2.1 형제 선택자 사용 예시

2.1.1 .prev() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li> 
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").prev("#prevLI1").css("color","red"); 
</script> 

결과값

선택된 요소에 이전 요소인 ID가 prevLI1이 선택이 되고 selector에 해당하는 아이디가 prevLI1인 요소를 선택하게 됩니다.

2.1.2. .prevAll() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li> 
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").prevAll("#prevLI2").css("color","red"); 
</script> 

결과값

선택된 요소에 이전 요소 전체 ID값이 prevLI2, prevLI1 인 요소를 찾습니다. 그중에서 ID가 prevLI2인 요소만 찾게 됩니다.

2.1.3 .next() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li>
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").next().css("color","red");
</script> 

결과값

선택된 요소에 다음 요소인 ID가 nextLI1 요소가 선택이 됩니다.

2.1.4 .nextAll() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li>
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").nextAll("#nextLI2").css("color","red");
</script> 

결과값

선택된 요소에 다음 요소 전체를 ID가 nextLI1, nextLI2를 찾습니다. 그중에서 ID가 nextLI2인 요소가 선택이 됩니다.

2.1.5 .siblings() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li>
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").siblings().css("color","red");
</script> 

결과값

선택된 요소에 같은 노드에 해당하는 요소들을 전체 선택하게 됩니다.

3. 제이쿼리(Jquery) 자식 선택자 함수 표

3.1 자식 선택자 사용 예시

3.2.1 .children() 사용 접근

<div>메뉴
 <ul>
  <li>1</li>
  <li id="selector">2
   <ul id="children1">
    <li>2-1</li>
    <li>2-2</li>
    <li id="children2">2-3
     <ul id="children3">
      <li id="children4">2-3-1</li>
      <li>2-3-2</li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").children().css("color","red");
</script>

결과값

선택된 요소에 해당하는 자식요소인 ID가 children1 인 요소가 선택이 됩니다.

3.2.2 .find() 사용 접근

<div>메뉴
 <ul>
  <li>1</li>
  <li id="selector">2
   <ul id="children1">
    <li>2-1</li>
    <li>2-2</li>
    <li id="children2">2-3
     <ul id="children3">
      <li id="children4">2-3-1</li>
      <li>2-3-2</li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").find("#children4").css("color","red");
</script>

결과값

선택된 요소에 자식요소들 중에서 ID가 children4인 요소를 선택하게 됩니다.

개발노트 :: 제이쿼리(Jquery) 속성 선택자#2

제이쿼리를 이용해 특정 요소를 선택하는 방법에 대해 알아보겠습니다.

이번에는 요소에 해당하는 속성값을 이용해 선택을 해보겠습니다.

1. 속성 선택자 표

2. 속성 선택자 사용

2-1 element[attribute] attribute속성을 가진 요소 선택

<span id="text1" title="text1" >Header1</span>
<script type="text/javascript">
   $("span[id]").css("color",'red');
</script>

결과값

2-2 element[attribute=value] attribute속성이 value값인 된 요소 선택

<span title="text2">Header2</span>
<script type="text/javascript">
   $("span[title = 'text2']").css("color",'red');
</script>

결과값

2-3 element[attribute!=value] attribute속성이 value값이 아닌 요소 선택

<span title="text1">Header2</span>
<script type="text/javascript">
  $("span[title != 'text2']").css("color",'red');
</script>

결과값 

2-4 element[attribute$=value]  attribute속성이 value값으로 끝나는 요소 선택

<span title="valueText1">Header2</span>
<script type="text/javascript">
 $("span[title $= 'Text1']").css("color",'red');
</script>

결과값

2-5 element[attribute|=value] attribute속성이 'value'일치 또는 'value-'으로 시작하는 요소

<span title="text1">Header2</span><br/>
<span title="text1-text2">Header2</span> 
<script type="text/javascript">
 $("span[title |= 'text1']").css("color",'red');
</script>

결과값

2-6 element[attribute^=value] attribute속성이 value값으로 시작하는 요소 선택

<span title="text1text2">Header2</span> 
<script type="text/javascript">
 $("span[title ^= 'text1']").css("color",'red');
</script>

결과값

2-7 element[attribute~=value] attribute 속성이 value 단어를 포함되어 있는 요소 선택

<span title="text1 text2">Header2</span> 
<script type="text/javascript">
 $("span[title ~= 'text1']").css("color",'red');
</script>

결과값

2-8 element[attribute*=value] attribute속성이 value 값을 포함되어 있는 요소 선택

<span title="text1text2">Header2</span>  
<script type="text/javascript">
 $("span[title *= 'text1']").css("color",'red');
</script>

결과값