레드아이

이번에는 앞의 예제를 통하여 네이버 웹툰에 업데이트된것들 제목을 긁어보았다. 일단 업데이트 이미지의 테그를 확인하였다. 이 테그가 업데이트 이다. 클래스 네임이 ico_updt를 포함하는 thumb클래스의 다음 태그에 제목과 링크가 있어서 그걸 사용하였다. ///////////// 요일 전체에서 받아오는 것 var request = require('request');var cheerio = require('cheerio'); var url = "http://comic.naver.com/webtoon/weekday.nhn"; request(url, function(err, res, html){ if(!err){ var $ = cheerio.load(html); $(".thumb").has('.ico_upd..

이번에는 봄 여름 가을 겨울 위의 4개의 이미지를 클릭하면 나머지 이미지가 바뀌는것을 만들어 보려고한다.

이번에는 간단한 예제로 제 블로그의 전체보기에서 제목을 받아오는 예제를 해보았습니다. 1,2 번째줄은 request와 cheerio를 사용하겠다고 선언해주는 부분입니다.C로치면 include와 비슷한 부분입니다. 그리고 원하는 사이트의 url주소를 변수에 저장해놓고 request() 로 소스코드를 받습니다. 뒤에 html 변수에 소스코드가 저장되게 됩니다. 중간 .each부분은 jQuery와 비슷한데 클래스네임 tit의 자식 태그 a 를 각각 하나씩 돌아다니는 것입니다. link.text는 내용을 리턴해주고 .attr('href')는 값을 리턴합니다. 이 사진은 결과 출력 화면입니다. console.log를 이용하여 확인하였습니다.

JSON 은 데이터 교환을 손쉽고 통합된 방법으로 하기위한 포맷 형식이다. 서로 다른 시스템간에 객체를 교환하기 좋다. 기존에는 XML이 대부분 사용되었지만 더 간편하고 직관적인라는 이유로 JSON을 선호하고있다. 속성:값 형식으로 이루어져있다. 자료형으로는 수, 문자열, Boolean, 배열, 객체, null이 있다. 수는 정수(1,-4,0,26 ...) 와 실수 고정소수점 표기법(3.14, -22.85...)와 실수 부동소수점 표기법(1.4e-8, 866.55E+10 ...)이 존재한다. 문자열은 항상 큰 따음표로 묶어야하고 유니코드 문자들이 나열된다. 배열은 대괄호로 나타낸다. 배열의 각 소요는 기본자료형이나 객체, 배열이 올 수 있다. 각 요소들은 쉼표로 구분된다. 객체는 이름:값 쌍의 집합으로 ..

일단 Node.js를 설치해보자 개발환경은 window7 64비트이다. https://nodejs.org/en/공식 홈페이지에 들어가면 바로 다운로드 할 수있다. 안정적인 버전인 4.2.6을 다운받았다. 넥스트 쭉 누르면서 설치하면된다. npm까지 동시에 설치된다.스크래핑을 위해서는 request와 cheerio 라이브러리가 많이 도움되므로 그것을 설치한다. 윈도우+r 을 눌러 cmd 를 입력하면 명령어 프롬프트 창을 바로 띄울수 있다.npm install request cheerio를 하면 바로 설치된다.

이번에 6개월간 교육을 들으면서 조금만한 프로젝트들을 해보려고한다. 첫번째로 네이버나 다음에서 내가보는 웹툰들을 들고와서 나만의 웹툰 목록을 만드는 것이다. 웹페이지 내용을 긁어오는 스크래핑 기술과 html을 간단히 만들 수 잇는 기술만 있으면 쉽게 완성 할 수 있을것 같다. Node.js로 스크래핑을 하고 JSON포맷으로 변경 후 HTML에서 JSON포맷을 이용하여 목록을 출력하고자 한다.

method('parameter') -> getmethod('parameter1', 'parameter2') -> set 어트리뷰트 값 가져오기$(function(){var val = $('#nameField').attr('value');alert(val);});혹은 $('#nameField').val(); 도 가능 이것을 추천 어트리뷰트 속성과 값 추가하기$(function(){$('#nameField').attr('value', '별명을 입력하시오');}); 자바스크립트는 method chain 방식으로 자신을 리턴해준다 따라서 $(function(){//method chain$('#nameField').attr('value', '별명을 입력해주시오').attr('name', 'userName');}..

children() 아래 엘리먼트들 선택$(function(){$('#wrapper').children().css('color', 'red');}); next() 엘리먼트 바로 다음 형제 엘리먼트 선택, 내 바로 밑에 동생$(function(){$('#wrapper .first').next().css('color', 'red');}); nextAll() 다음에 존재하는 형제 엘리먼트들 모두 선택, 동생 모두$(function(){$('#wrapper > ul > .first').nextAll().css('color', 'red');}); nextUntil() 1번의 형제 엘리먼트 중 5번전까지의 형제 엘리먼트 모두 선택$(function(){$('#wrapper > ul > .first').nextUnt..

html에서 자바스크립트 파일을 추가하는 것이다. C언어의 include와 동일하다. $(document).ready(function(){$('#element').css('color' , 'red');$('.a').css('color', 'blue');}); 소스코드 밑까지 실행이 끝나면 여기로 돌아와 실행을 한다. $(function(){$('#element').css('color' , 'red');});와 같다. element아이디 선택$(function(){$('#element').css('color','red');}); elements 클래스 선택$(function(){$('.elements').css('color', 'red');}); ul아이디를 가지고있는 ul태그의 자식 태크 li 중 ele..