Ai-macro

게시글 검색
알아두면 좋은 javascript 활용 방법
조회수:1402
2018-05-27 07:00:00

Ai-macro는 어떤 웹페이지라도 javascript가 적용될수 있도록 설계 되어 있습니다.

그리고 해당 웹페이지에 jquery가 링크되어 있다면 jquery도 적용되도록 설계 되어 있습니다.

 

이번시간에는 SNS 리스트를 가입클릭과 숨김처리를 javascript를 이용하여 진행해 볼게요.

 

참고 사이트에는 SNS 페에지를 예제용으로 코딩되어 있습니다.

http://aimacrot.anybuild.co.kr/page/sub1_1

 

[참고사이트1]

 

[참고사이트1] 에서는 [가입] 버튼을 눌리면 리스트가 남아있고 [숨기기] 버튼을 눌리면 해당 리스트가 사라집니다.

 

샘플소스를 이용해서 [가입] 버튼, [숨기기] 버튼을 클릭해 볼게요.

[참고소스1]

 

라인 3~6 - [참고사이트1]의 소스를 추출해서 리스트만 추출합니다.

라인 8 - 추출한 리스트를 반복문을 이용하여 각 리스트를 가공합니다.

 

[참고소스2] - 리스트 소스


    <li class="item" data-idx="5">
        <span class="figure"><a href="javascript:void(0);"><img ></a></span>
        <span class="group">
            <a href="javascript:void(0);">
                <span class="group-name">난 오늘도 영화를 본다!</span>
                <span class="group-member">친구 2명, 멤버 11,423명</span>
                <span class="group-friend"><img><img ></span>
            </a>
        </span>
        <span class="group-btn">
            <span class="join">가입</span>
            <span class="hidden">숨기기</span>
        </span>
    </li>


 

라인 9 - 리스트에서 [명령어 strpos] 를 이용하여 "영화"라는 텍스트가 있는지 체크합니다.

라인 10 - data-idx값 추출이라고 되어있는데 [참고소스2]에서 빨간부분을 라인 11 [명령어 filter] 로 추출합니다.

(추출된 값은 $value_idx 에 저장하여 라인15, 라인18 에서 javascript로 클릭시 사용됩니다.)

 

라인 15 - 만약 라인 9 에서 영화라는 텍스트가 있다면 [가입] 버튼을 클릭합니다.


document.querySelector(".item[data-idx='{$value_idx[0]}'] .join").click();


[참고소스2] 에서 파란부분을 클릭하겠다는 javascript 소스입니다.

 

라인 18 - 만약 라인 9 에서 영화라는 텍스트가 없다면 [숨기기] 버튼을 클릭합니다.


document.querySelector(".item[data-idx='{$value_idx[0]}'] .hidden").click();


[참고소스2] 에서 녹색부분을 클릭하겠다는 javascript 소스입니다.

자세한 설명은 아래에서 확인해 주세요.

 

 

 

javascript 사용 예제

 

[참고소스3] - html 소스에는 class 와 id 가 있습니다.


<div id="test_id"><span></span></div>

<div class="test_class"><span></span></div>


와 같이 대부분 태그에는 id, class가 작성이 되어있습니다. 이 네이밍가지고 javascrip로 선택이 가능하고 가공을 할 수 있습니다.

 

 

아래의 Tip은 javascript 소스입니다. [명령어 javascript] 에 삽입하면 동작이 됩니다.

 

소스 Tip1. 스크롤 이동하기 (빨간색 부분 숫자만 적용)


(document.documentElement || document.body.parentNode || document.body).scrollTop = 620 


 

 

소스 Tip2. 특정컨텐츠 선택

[참고소스3] 에서 빨간 부분인 test_id 를 선택하실려면 다음과 같습니다.


document.querySelector("#test_id");


 

[참고소스3] 에서 빨간 부분인 test_class 를 선택하실려면 다음과 같습니다.


document.querySelector(".test_class");


 

id의 경우 네이밍을 #test_id 로 작성을하고

class의 경우 네이밍을 .test_class 로 작성을 합니다.

(네이밍은 홈페이지별로 다 다릅니다. Chrome 개발자모드 소스보기로 id와 class를 확인해 주세요. Chrome 개발자모드 소스보기)

 

[참고소스3] <div id="test_id"> 안에 있는 <span>을 선택하실려면 다음과 같습니다.


document.querySelector("#test_id span");


 

[참고소스3] <div class="test_class "> 안에 있는 <span>을 선택하실려면 다음과 같습니다.


document.querySelector(".test_class span");


 

안에 있는 컨텐츠라면 한칸 뛰우고 해당 태그나 class명 id명을 적어주시면 됩니다.

javascript querySelector 참고사이트 - https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector

 

 

소스 Tip3. 특정컨텐츠 삭제

[참고소스3] 에서 빨간 부분인 test_id 를 삭제하실려면 다음과 같습니다.


document.querySelector("#test_id").remove();


 

[참고소스3] 에서 파란 부분인 test_class 를 삭제하실려면 다음과 같습니다.


document.querySelector(".test_class").remove();


 

 

소스 Tip4. 특정버튼 클릭

[참고소스3] 에서 파란 부분인 test_id 를 클릭하실려면 다음과 같습니다.


document.querySelector("#test_id").click();


 

[참고소스3] 에서 빨간 부분인 test_class 를 클릭하실려면 다음과 같습니다.


document.querySelector(".test_class").click();


 

첨부파일[1]

열기 닫기