New 병아리 개발자

# 자바스크립트를 이용한 새로고침

## window.location.reload()

<a onclick="window.location.reload()"><i class="fas fa-sync-alt"></i></a>

## history.go()

<a onclick="history.go(0)"><i class="fas fa-sync-alt"></i></a>

## window.location.href=window.location.href

<a onclick="window.location.href=window.location.href"><i class="fas fa-sync-alt"></i></a>

## 자동 새로고침

<META HTTP-EQUIV="refresh" CONTENT="시간">

시간에 10 입력시 10초마다 자동 새로고침된다.

# 자바 크롤링

## 준비물

• Jsoup : 자바로 만들어진 HTML parser로 DOM 구조를 추적하거나 CSS 선택자를 이용, 데이터를 찾아 추출할 수 있다.

## 라이브러리 추가

https://jsoup.org/download 접속하여 Jsoup jar파일을 모두 다운로드 후 프로젝트에 추가해 준다.

## 사용

• ajax인 경우에는 해당방법으로 가져올 수 없음

public class CrawlingService {
	public void getCrawling() {
		// Jsoup를 이용해서 "사이트" 크롤링
		String url = "사이트 주소"; //크롤링할 url지정
		Document doc = null;	//Document에 페이지의 전체 소스가 저장된다
		
		try {
			doc = Jsoup.connect(url).get();
		} catch (IOException e) {
			e.printStackTrace();
		}
		//select를 이용 원하는 태그를 선택(select는 원하는 값을 가져오기 위한 중요한 기능이다.)
		Elements element = doc.select(".covid19_datagroup");  
			
		element.select("em"); 

		String str = element.text();
		
		System.out.println("확인 : " + str); 

		System.out.println("============================================================");

		//Iterator을 사용 하나씩 값을 가져오기
		Iterator<Element> ie1 = element.select("strong.rank").iterator();
		Iterator<Element> ie2 = element.select("strong.title").iterator();
		        
		while (ie1.hasNext()) {
			System.out.println(ie1.next().text()+"\t"+ie2.next().text());
		}
		
		System.out.println("============================================================");
	}
}

• 아래의 경우 ajax 크롤링 가능

String url = "https://www.sejong.go.kr/prog/fluInfo/listAjax.do";
		Document doc = null;
		try {
			doc = Jsoup.connect(url)
			        .header("origin", "https://www.sejong.go.kr/") // same-origin-polycy 로 인한 설정
			        .header("referer", "https://www.sejong.go.kr/") // same-origin-polycy 로 인한 설정
			        .ignoreContentType(true) // json 받아오려면 타입무시를 해야하는듯?
			        .get();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		String json = doc.select("body").text();

# 자바스크립트 2차원 배열 생성, 사용

• 자바스크립트는 한번에 2차원 배열을 생성할 수 없다. ( var arr = [][]; 한번에 2차원 배열 선언 불가능 )
• 자바스크립트는 진정한 2차원 배열이 없다.
• 자바스크립트의 2차원 배열은 1차원 배열에 또 다른 배열 객체를 추가하여 2차원 배열을 만드는 방법을 사용한다. 

## 생성방법

• 별도의 함수를 만들어서 2차원 배열을 생성하는 방법

// 별도의 함수를 만들어서 2차원 배열을 생성하는 방법
function arr2Create(rows, columns) {

    var arr = new Array(rows);
    
    for (var i = 0; i < rows; i++) {
        arr[i] = new Array(columns);
    }
    
    return arr; 
}

var arr = arr2Create(3, 3); // arr[3][3]

• Arry 객체에 배열생성함수를 추가하여 2차원 배열을 생성하는 방법

// Arry 객체에 배열생성함수를 추가하여 2차원 배열을 생성하는 방법
Array.matrix = function (m, n, initial) {
    var a, i, k, mat = [];
    for (i = 0; i < m; i += 1) {
        a = [];
        for (k = 0; k < n; k += 1) {
            a[k] = initial;
        }
        mat[i] = a;
    }
    return mat;
};

// matrix(행, 열, 기본값)
var arr = Array.matrix(5, 2, 0);

# 셀렉트 박스 링크 연결하기

• 셀렉트 박스에 링크를 연결하기 위해서는 아래와 같이 진행하면 된다.

// 현재 창에서 선택된 링크를 연결하는 경우 location.href=""; 를 이용한다.
<select name="cateItemName" id="cateItem" onchange="if(this.value) location.href=(this.value);">
  <option>포털 선택</option>	
  <option value="https://www.naver.com">네이버</option>
  <option value="https://www.daum.net">다음</option>
</select>

//새 창에서 선택된 링크를 연결하는 경우 window.open=""; 를 이용한다.
<select name="cateItemName" id="cateItem" onchange="if(this.value) window.open=(this.value);">
  <option>포털 선택</option>	
  <option value="https://www.naver.com">네이버</option>
  <option value="https://www.daum.net">다음</option>
</select>