별의 공부 블로그 🧑🏻‍💻
728x90
728x170

 

- RSS(Really Simple Syndication)란, 사전저긍로 '초간편 배급(배포)'이라는 의미를 가지고 있음.

- 자주 업데이트되는 뉴스나 신문 기사 내용을 사용자에게 쉽게 배포하기 위해 만들어진 XML 기반의 배급 포맷.

- 크로스 도메인이란 도메인이 서로 다를 경우에 정보 교환을 하지 못하도록 한 보안 정책을 의미하며, 이를 해결할 수 있는 방법으로는 구글에서 제공하는 Google Feed API link(데이터 전환 전송 기능)을 이용하는 것이 있음.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!-- 문단 태그 영역 -->
<style type="text/css">
/*기본 세팅*/
    *{margin:0; padding:0;}
    li{list-style:none;}
    body{font:12px Margun Gothic, "맑은고딕", gulim, "굴림", sans-serif; color:#333; padding-top:20px;}
    h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal;}
    a{color:#333; text-decoration:none; outline:none;}
    h1{font-size:2em; text-align:center; margin-bottom:10px; color:#c00;}
    /*탭 메뉴 디자인*/
    #news_wrap{width:380px; margin:0 auto; background-color:#FFF url("images/rss_bg.gif") 0 0 repeat-x;}
    #news_wrap li{hieght:25px; line-height:25px; position:relative;}
    #news_wrap li span{position:absolute; top:0; right:3px;}
    #news_wrap li a{display:block; width:210px; white-space:nowrap; overflow:hidden; 
                    text-overflow:ellipsis; padding-left:15px; background:url("images/bullet.gif") 5px 10px no-repeat;}
    #news_wrap h2{float:left; padding-right:3px; margin-bottom:10px;}
    #news_list{clear:both;}
    /*비활성화 탭 버튼 모양*/
    #news_wrap h2 a{
        display:inline-block; padding:8px 10px;
        border:1px solid #aaa;
        border-bottom:none;
        border-radius:5px 5px 0 0; 
        background:#ccc;
    }
    /*비활성화 탭 버튼 모양*/
    #news_wrap h2 a.on{background-color:#fff; font-weight:bold;}
</style>
 
<body>
    <h1>닷컴</h1>
    <div id="news_wrap">
        <h2>  <!-- 초기에 첫 번째 버튼에만 class="on"이 포함되어 있음 -->
            <a href="http://............/www_section_rss.xml" class="on">오늘의 주요 뉴스</a>
        </h2>
        <h2>
            <a href="http://........./ent.xml">엔터테인먼트</a>
        </h2>
        <h2>
            <a href="http://......../sports/index.xml">스포츠</a>
        </h2>
        <ul id="news_list">
        </ul>
    </div>
</body>
 
 
<!-- 메서드 적용 -->
<script type="text/javascript">
    $(function(){
        // 변수 g에 크로스 도메인의 XML 데이터를 요청해 올 수 있도록 구글 주소 저장
        var g="https://ajax.googleapis.com/ajax/services/feed/load?v=2.0&num=10&callback=?&q=";
        $("#news_wrap h2 a").on("click"function(e){
            e.preventDefault();     // <a> 태그의 링크 차단
            $("#news_wrap h2 a").removeClass("on");     // <a>의 class 속성값 "on" 삭제
            $(this).addClass("on");     // click 이벤트를 등록한 <a> 태그 중 클릭한 <a>에 class="on" 생성
            $.ajax({
                url:g+$(this).attr("href"),     // 클릭한 택 버튼에 XML 데이터 경로 주소를 가져옴.
                dataType: "json",   // 요청할 데이터의 타입
                success: function(data){    // 성공적으로 요청한 데이터를 가져오면 매개 변수 data에 변화된 JSON 데이터가 저장됨.
                    $("#news_list").empty(); // <ul>의 하위 요소 모두 제거
                    // console.log(data.responseData.feed.entries);
 
                    $.each(data, responseData.feed.entries, function(i, d){ 
                        // 객체의 개수만큼 함수의 실행문이 반복하여 실행됨. 
                        // 이때 매개 변수 i에는 객체의 인덱스 값이 할당되고, d에는 객체가 순서대로 할당됨.
                        if(i==5return false;  // 인덱스 값이 5일 때 강제 종료함.
                        var title=d["title"];       // title 키의 값을 가져옴.
                        var date=new Date(d["publishedDate"]);      // 뉴스 작성 날짜의 특정 날짜 객체를 생성함.
                        // 작성한 년-월-일 형식으로 변수 m에 저장
                        var m=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
                        var lk=d["link"]; 
                        // 앞서 구해온 데이터를 이용해 정보 목록 태그를 생성함.
                        $("#news_list").append('<li><a href="'+lk+'"target="_blank">'+title+'</a><span>'+m+'</span></li>');
                    });     // $.each 메서드 종료
                } // success: function 종료
            });  // $.ajax() 메서드 종료
        });  // 이벤트 on 메서드 종료
 
        $("#news_wrap h2 a").eq(0).click();     // 최초 첫 번째 탭 버튼을 강제로 발생시킴.
    });     // $(function(){...}) 종료
    </script>
cs

 

 

내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)

728x90
그리드형(광고전용)
⚠️AdBlock이 감지되었습니다. 원할한 페이지 표시를 위해 AdBlock을 꺼주세요.⚠️
starrykss
starrykss
별의 공부 블로그 🧑🏻‍💻


📖 Contents 📖