반응형 Front-End (JS , jQuery)15 [Express / jQuery] RSS 서비스 활용 (node.js로 xml 파싱하기) RSS 서비스 (Rich Site Summary) rss는 블로그나 뉴스 , 기상청처럼 컴텐츠 업데이트가 자주 일어나는 웹사이트에서 업데이트된 정보를 쉽게 사용자에게 전달하기 위해서 xml 기반의 데이터 배포 형식입니다. 이번 실습에서는 JTBC의 RSS를 이용하겠습니다. https://news.jtbc.joins.com/Etc/RssService.aspx 이중에서 골라서 rss를 이용하시면 됩니다. 스포츠 rss를 가지고 실습해 보겠습니다. http://fs.jtbc.joins.com/RSS/sports.xml 주의할것은 위에 스크린샷처럼 https 말고 http로 바꿔야합니다. 그 rss 주소로 가보면 xml파일을 어떤 태그를 중심으로 파싱해야하는지 알 수 있습니다. title , link의 정보를 .. 2022. 6. 14. [jQuery] AJAX 통신으로 요청 보내고 JSON 파일 파싱하기 AJAX 웹 페이지 웹서버와 데이터를 교환하는 기술로 , 웹서버나 DB에 저장되어있는 데이터를 가져오거나 사용자가 입력한 데이터를 DB에 저장하는 역할을 합니다. 웹페이지가 서버한테 보는것을 req(요청) , 서버가 웹 페이지에 응답하는것을 res(응답)이라고 정의되는데, jQuery의 $.get() 함수를 이용해서 GET 요청을 메세지와 함께 보낼수 있습니다. 첫번째 인자에는 요청 메세지가 입력되고 , 두번째 인자로는 callback 함수를 정의합니다. callback 함수의 첫번째 인자로는 서버의 응답이 들어오고 이것을 출력할 수 있습니다 . $(document).ready(function () { // 버튼을 클릭하면 $("button").click(function () { //"testfile1... 2022. 6. 10. [HTML/JS/jQuery] 용어 정의 리스트 (dl , dt , dd 태그) 위와 같이 용어의 뜻을 보여주는 용어 설명 리스트에 대해서 실습하겠습니다. 용어 정의 리스트 관련 태그 dl 태그 dl 태그는 definition List의 약자로 사전처럼 용어를 설명하는 리스트를 만듭니다. dt 태그 dt 태그는 definition term의 약자로 용어의 이름(제목)을 넣을때 사용합니다. dd 태그 dd 태그는 definition description의 약자로 용어의 정의(설명)을 넣을때 사용합니다. HTML 구조 Item 1 some explanation here. some explanation here. Item 2 some explanation here. some explanation here. Item 3 some explanation here. some explanation.. 2022. 6. 7. [jQuery / JS] DOM, CSS 변경 / 반환하기 (text ,attr , css , show...) 목차 DOM 변경 CSS 조작 show / hide / fade DOM (브라우저 객체)에 반환하거나 변경하는 함수들 $(선택자).func(); ---> func에 대해 배워봅시다! 1. 반환하는 jQuery 함수 (get) $(selector).text() : 선택된 요소 반환합니다 $(selector).html() 선택된 요소의 html 반환합니다 $(selector).val() : 입력 필드/value값을 반환합니다 $(selector).attr(attributeName) : 선택된 요소의 인자로 주어진 것에 해당하는 속성의 값을 반환한다 $(selector).position() : top과 bottom 필드를 가지고 있는 객체를 반환합니다. ex) position 함수 사용법 var pos = $.. 2022. 5. 31. [jQuery] 이벤트 처리 , 기초 세팅 jQuery는 오픈 소스 자바 라이브러리로, js 작성을 더 간편하게 할 수 있습니다. jQuery를 웹사이트에서 실시간 구동을 해주기 위해서는 head 태그에 소스코드를 입력해줘야합니다 핵심은 jQuery 소스코드가 js파일 소스코드보다 더 위에 선언되어야 된다는 것입니다. VScode jQuery 자동완성 extention https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets jQuery 문장의 구조 $("선택자").action(); $("p").show() : 모든 p태그 요소들을 찾아서 화면에 표시 $("#iden").slideup() : id = "iden" 인 요소를 슬라이드업 방식으로 표시한다 $(".c.. 2022. 5. 15. [HTML/JS] 기본 이벤트 처리 다룰 이벤트 처리 Timing 이벤트 (매초마다, 시간이벤트) onclick 이벤트 (클릭시) onload/onunload 이벤트 (웹페이지 진입시) onchange (focus가 해제될시) onmouseover / onmouseout (마우스를 위에 올려놓을시) onmousedown / onmouseup (버튼을 누른 순간 / 누른 손을 뗀 순간) js를 이용한 이벤트 핸들러 Timing 이벤트 주어진 시간 주기에 따라 코드가 실행되도록 하는 함수입니다. 밀리초(milliseconds)는 천 분의 1초를 가리키는 말입니다. 1000milliseconds 가 1초겠죠?? window는 최상위 객체로 생략해도 됩니다! (java의 object격) 이벤트 처리에서 진짜 주의해야하는것은 함수를 인자로 받을때 .. 2022. 5. 2. [HTML/JS] DOM(문서 객체 모델) 기초 목차 DOM이란? element 찾기 element 내용, 속성,CSS 변경 element 추가 및 삭제 DOM(Document Object Model) DOM은 HTML 문서의 계층적인 구조를 트리로 표현한 것 입니다. HTML을 구성하는 모든 요소들을 요소(element) , 속성 (attribute) , 문자(text)로 구분합니다. 태그들 -> element , 태그내의 속성 -> attribute , 태그안에 문자 -> text DOM은 트리구조이기 때문에 부모(parent)와 자식(child)로 구분할 수 있습니다. 부모에서 자식으로 접근을 할수 있는데요, firstchild , lastchild 등등으로 자식 노드로 접근 할 수 있습니다. 그리고 DOM의 함수를 이용해서 다음과 같은 기능을 .. 2022. 5. 2. 이전 1 2 3 다음
