호미의 개발블로그

탭메뉴 사용시 선택한 메뉴에 active클래스를 줘야하는 일이 발생한다.

그러기 위해서는 클래스가 존재하는지 존재여부를 판단해야 하는데

그럴때 사용하는 메소드가 hasClass이다.

<ul class="noticeTabArea">
    <li class="active>
        <a href="javascript:item.formSearch('tab');" data-value="CHN"> 중국 </a>
    </li>
    <li>
        <a href="javascript:item.formSearch('tab');" data-value="IND">인도</a>
    </li>
    <li>
        <a href="javascript:item.formSearch('tab');" data-value="IDN">인도네시아</a>
    </li>
    <li>
        <a href="javascript:item.formSearch('tab');" data-value="VNM">베트남</a>
    </li>
</ul>

예를들면 위와 같이 li태그로 만든 탭메뉴가 존재한다.

4개의 li태그 중 어떤 li에 active클래스가 적용됐는지 확인을 위해 hasClass를 사용한다.

내가 하고 싶은 작업은 active클래스가 적용된 li태그 안에 있는 a태그의 data-value의 값을 가지고 오고싶은데

hasClass에서는 $(this)를 사용할 수 없다. 

그렇기 때문에 each함수를 사용하여 li태그를 하나씩 탐색하면서

active클래스가 있는지 확인을하여 data-value를 가져 올 수 있다.

예제코드

<script>
$(".noticeTabArea li").each(function(){
	var NtnCd = $(this).find("a").attr("data-value");
	console.log("NtnCd : ",NtnCd);
    //결과: NtnCd : CHN
});
</script>

동적으로 추가된 태그는 일반적인 이벤트가 적용되지 않는다.

그렇기 때문에 별도의 이벤트 형식을 지정해줘야 한다.

일반적인 이벤트 형식

최초에 선언된 태그에만 동작한다.

동적으로 생성된 태그에는 동작하지 않음.

동적으로 추가된 태그에 이벤트 동작

$(document).on(eventName,selector,eventHandler);

on을 추가하여 이벤트를 실행하게되면 이벤트를 실행하는 순간에

이벤트를 실행할 대상을 그 자리에서 바로 찾아 동작하게된다.

on태그에 각각 들어가게 되는 파라미터는 아래와 같은 형식으로 작성하면

동적으로 생성된 태그에 이벤트를 줄 수 있다.

1. click, change와 같은 이벤트

2. 이벤트를 적용할 타겟

3. 동작함

off() 이벤트 제거 

off()메소드를 사용하게 되면 기존의 이벤트들을 전부 제거해주고 새로운 이벤트 핸들러가 추가된다.

on() 메소드

off() 메소드

순수 JavaScript

document.getElementById("elem");

JQuery

$("#elem").length;

예를 들어 

if($("#instNm").length > 0){
	var colspan = $("#selectInstArea").attr("colspan","2"); //colspan이라는 속성에 2값 추가
}

id가 instNm인 요소가 1개 이상일때 조건문을 수행한다.

https://rh-cp.tistory.com/83

이벤트란?
브라우저에서 사용자가 클릭했을 '때', 스크롤했을 '때', 필드의 내용을 바꾸었을 '때' 처럼
어떤 사건이 발생한것을 의미한다.

• onclick : 사용자가객체를클릭할때
• ondblclick : 객체에 더블클릭될 때
• onmouseleave: 마우스 커서가 객체영역에서 벗어나는 순간
• onmouseenter : 마우스 커서가 객체영역 안으로 들어가는 순간 

HTML태그에 리스너 작성

addEventListener() :
 -하나의 이벤트에 여러 함수를 설정할 수 있다.
 -등록한 이벤트를 removeEventListener()사용하여 제거할 수 있다.

init() : 맨 처음 시작하는 함수, 혹은 초기화 함수

document.getElementsByTagName = 여러개의 Element 태그 이름을 가져오다.
직역을 하자면 의미는 이러하다.
인자로 전달된 태그명에 해당하는 객체를 찾아서 그 리스트를 NodeList라는 유사배열에 담아 반환한다.
문서내에서 document 객체의 메소드를 이용하여 객체를 찾는다. 

h1태그와 안에 들어있는 내용을 script를 사용하여 생성.

• 부모객체.appendChild(객체); - 객체안에 노드연결, 부모객체(태그)안에 마지막 자식으로 들어감.
• 부모객체.insertBefore(객체,[,기준자식]); - 첫번째 자식이나 기준자식 앞으로 들어감
• 부모객체.removedChild(객체); - 해당객체를 부모에게서 제거 

스타일 동적 설정

script에서는 하이픈(-)이 연산자로 사용되기에 두번째 단어를 대문자로 작성해준다.

ex)background-color = backgroungColor

배열

객체안 속성 접근시 도트(.)가 아닌 배열과 같이 대괄호[]로 호출이 가능핟.

배열처럼 인덱스번호가 아니기에 키값은 " "(' ') 로 묶어준다

키값이 문자열인 경우엔 도트로 호출 할 수 없다.

in예약어 : 해당속성이 객체안에 있는가를 판별(출력 : 논리값 true or false)

객체안에 속성 제거

with문법 : 특정 객체안에 속성을 쉽게 접근할 수 있다.

문서객체 가져오기

태그를 기준으로 객체생성

아이디를 기준으로 객체생성

복수(s)가 붙지않음, 하나의 결과만 갖는다.

문서에서 id는 특정한 element 하나만을 식별하는 유일무이한 식별자이다.

클래스를 기준으로 객체생성

querySelector : CSS에서 대상을 선택하는 방식

맨 처음  요소 하나만 선택되어 스타일이 적용된다.

querySelectorAll : 모든 객체를 조회한다.

DOM 트리

객체란?
서로 연관된 함수와 변수를 그룹핑한 그릇이라고 할 수 있다.
객체 내의 변수를 프로퍼티(property), 함수를 메소드(method)라고 부른다.

객체선언 예

객체 안에 있는 변수(속성) 호출

object.a : 도트를 통해 객체에 접근

 

객체 안에 있는 함수(메소드) 호출

 

객체 안에 새로운 변수(속성) 추가

객체안에 새로운 함수(메소드) 추가

'x'의 값에 100, 'y'의 값에 22가 들어간다.

 

생성자함수:객체를 생성하는 함수
   -동일한 속성과 메소드를 가진 객체가 여러개 필요할 경우
   -일반함수와 차이를 두기위해 첫글자를 대문자를 사용한다.

생성자 함수선언

생성자함수를 통한 객체생성

new라는 예약어를 사용하여 객체를 생성하고 생성자 함수를 호출한다.

생성자 함수 선언

생성자 함수를 통한 객체생성

객체 접근 : 객체와 멤버사이에 점(.)연산자 이용

함수:일렬의 처리과정(실행문)을 묶어놓고  이름을 부여한것
 -필요할 때 호출하여 사용하기 위함
 -반복하여 사용 할 수 있다.
 -인수값에 따라 다른 결과를 만들어낼 수 있다.함수의 형식
 -함수는 코드의 재사용성을 높여준다.

함수의 형식

• function noodle() : 함수호출은 "함수명+괄호"로 작성해야함. (함수선언식)
• var coffee = function(){ } 익명함수 :이름이 없는 함수. 변수가 함수가 된다. (함수표현식) 1회성으로 호출하는경우 사용

   ※프로그래밍에서 선언하는 부분은 실행하는 문장보다 선행되어 실행된다.

   ※함수선언식은 선행하여 호출해 사용할 수 있지만 표현식은 선행되어 사용할 수 없다.

매개변수와 인수 :그때 그때 다른값을 입력하여 출력할때 사용

function sum(x,y){  } :x와 y가 매개 변수가 되고 함수 안에서만 사용가능.

sum(7,20);  : 함수호출시 매개변수에 들어갈 값을 지정해주어야하고 그 값을 '인수'라고 한다.

                     인수 '7'은 매개변수 'x'에 인수 '20'은 매개변수 'y'에 들어감

변수의 사용범위와 생명주기

• 전역변수:함수 밖에 선언된 변수. 어디서든 호출하여 사용가능하다.
• 지역변수:함수 안에 선언된 변수. 해당 함수 안에서만 사용가능하다.(매개변수도 지역변수임)
• 블록변수:블록내에서만 사용가능한 변수, let으로만 선언.

    ※지역변수는 전역변수와 같은 이름을 가질 수 있다. 

    ※함수가 끝나면 지역변수는 사라짐 블록변수도 마찬가지임.

매개변수와 동일한 이름의 전역변수 사용시 "this"접근한다.
단, let으로 선언된 전역변수는 "this"로 접근할 수 없다.

return : 반환값 - 함수가 실행되면 호출된 위치에 반환되는 값, 함수의 종료를 뜻함.

내장함수 : 이미 시스템에 정의되어 있는 함수

NaN : 숫자가 아님을 나타내는 함수

isNaN(인수) : 인수가 숫자가 아니면 true리턴 

 -대소문자 구분해야함

parseInt() : 문자열을 정수로 변환하여 반환

parseFloat() : 문자열을 실수로 변환하여 반환

setInterval(함수,시간) : 일정시간(밀리초)마다 함수를 호출함. 

clearInterval() : setInterval을 종료

setTimeout(함수,시간)  : 지정된 시간에 함수를 한번 호출

clearTimeout() : setTimeout을 실행전에 지울 수 있음.

반복문(while) : 해당되는 문장들을 반복하여 실행함.
for문, while문 ' ~하는 동안에 " 라는 뜻을 가진 반복문이다. 

while(true) console.log("실행문"); 

→조건식이 true인 동안 작업문을 반복하여 실행함.

   반복문을 만들 때에는 [무한반복]이 되지않도록 해야한다.

   반복조건은 반복을 시작할때마다 매번검증을 한다. 거짓이되면 반복이 멈춤.

   반복문을 실행하기 전 반복조건을 검증함.

do while문 :  한번은 실행을 함. 반복을 계속 진행하는것에 대해 반복조건을 검증한다.

break문 : 반복문을 종료하여  블럭밖으로 나감.

               여러 반복문으로 중첩된 경우 현재 반복문 하나만 벗어난다.

continue문 : 현재 반복을 넘어감. 다음 반복으로 넘어가고자 할때 사용됨. 

반복문은 다른 프로그래밍언어에서도 공통적으로 사용됨.

반복문(for) :"변수 초기화; 반복조건; 변화식" 한꺼번에 작성가능

for(let b=1; b<=10; b++){

    console.log(`변수b의 값:${b}`);