안녕들 하시죠 !

이번시간에는 자바스크립트의 문서 객체 모델(DOM)에 대해 알아보겠습니다.

 

문서 객체 모델(Document Object Model)

HTML 문서에 접근하고 그 안에 내용물을 마음대로 바꾸거나 새로운 객체를 직접 만들어 문서의 원하는 부위에 삽입 삭제를 할 수 있다.

 

참조 https://poiemaweb.com/js-dom

 

DOM 트리의 노드

 

문서 노드(Document Node)

트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다. 즉, DOM tree에 접근하기 위한 시작점(entry point)이다.

 

요소 노드(Element Node)

요소 노드는 HTML 요소를 표현한다. HTML 요소는 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보를 구조화한다. 따라서 요소 노드는 문서의 구조를 서술한다고 말 할 수 있다. 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 한다. 모든 요소 노드는 요소별 특성을 표현하기 위해 HTML Element 객체를 상속한 객체로 구성된다. (그림: DOM tree의 객체 구성 참고)

 

어트리뷰트 노드(Attribute Node)

어트리뷰트 노드는 HTML 요소의 어트리뷰트를 표현한다. 어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현된다. 따라서 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정할 수 있다.

 

텍스트 노드(Text Node)

텍스트 노드는 HTML 요소의 텍스트를 표현한다. 텍스트 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없다. 즉, 텍스트 노드는 DOM tree의 최종단이다.

참조 https://poiemaweb.com/js-dom

 

DOM | PoiemaWeb

브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM(문서 객체 모델. Document Object Model)을 생성한다. 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하기 위해서는 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉, 모든 요소와 요소의

poiemaweb.com

 

document 객체

document 객체는 window 객체에 포함되며 특정한 엘리먼트들을 포함하고 있다.

주로 문서유형, 색깔, 포맷과 같은 문서 정보에 접근하는 방법을 제공하고있다.

ex) document.body 속성으로 <body> 엘리먼트에 접근할 수 있다.

 

document 객체의 메서드

getElementById("엘리먼트 id") : id 속성이 일치하는 하나의 엘리먼트를 반환한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
 
function selectId(){    
    var getId = document.getElementById("a"); // 변수 getId에 a라는 Id를 가진 엘리먼트를 가져와라.
    getId.style.backgroundColor = "yellow"// getId가 가지고 있는 엘리먼트의 배경색을 yellow로 바꿔라.
}
 
</script>
</head>
<body>
<button onclick = "selectId();">id 'a'인 객체 선택하기</button> <!-- 버튼을 클릭하면 selectId 함수 실행 -->
<div>
<span id="a">1번</span>&nbsp;&nbsp;
<span id="b">2번</span>&nbsp;&nbsp;
<span id="c">3번</span>&nbsp;&nbsp;
</div>
</body>
</html>
cs

 

버튼 클릭 후 

document.createElement("엘리먼트 이름")

새로운 엘리먼트를 생성한다.

 

document.querySelector("CSS 선택자")

특정 엘리먼트 속성등의 정보를 얻기위해 사용하는 document 객체의 메서드.

 

document.ElementsByTagName("엘리먼트 이름")

태그 이름이 일치하는 모든 엘리먼트를 배열의 형태로 반환.

 

document.ElementsByName("name 속성값") 

id 대신 name을 사용하지만 name은 중복 가능하므로 위에있는 ByTagName처럼 배열 형태로 저장됨.

 

document.write()

문서에 내용을 추가한다.

 

document.createTextNode('텍스트')

새로운 텍스트 노드를 생성한다.

 

 

 

'웹 프로그래밍' 카테고리의 다른 글

Javascript의 문서객체모델(DOM)  (0) 2019.07.13
Javascript addEventListener를 이용한 간단한 계산기 만들기  (0) 2019.07.13
HTML Tables  (0) 2019.07.08
Apache Tomcat 설치  (0) 2019.07.08
HTML 기본 태그  (0) 2019.07.08

안녕들 하시죠!

얼마전부터 javascript 공부를 시작했는데요.

이번시간에는 javascript를 이용하여 간단한 계산기를 만들어보며 핵심 기능들을 알아보겠습니다.

 

elementObj.addEventListener(  "이벤트 이름", Fucntion(){}  );

특정 이벤트가 발생 했을 시 특정 함수를 실행할 수 있게 해주는 기능

 

사용할 이벤트 종류

click   :   변동이 있을 때 발생.

load   :   HTML문서나 이미지 등을 불러올 때 발생.

 

querySelector("CSS 선택자");

특정 엘리먼트 속성등의 정보를 얻기위해 사용하는 document 객체의 메서드.

 

ex) var element = document.querySelector("div");

     var elements = document.querySelector("CSS 선택자");

 

- 태그 : 엘리먼트의 태그 이름을 기준으로 검색.

- #아이디 : 엘리먼트의 속성 중 id 속성으로 검색.

- .클래스 : 엘리먼트의 속성 중 className 속성으로 검색.

- [속성=속성값] : 엘리먼트의 특정 속성을 지정하여 해당 속성의 값을 비교하여 검색.

 

<body>

1
2
3
4
5
6
7
8
9
10
11
<body>
 
    <input type="number" id="a"> <!-- a라는 id를 가진 number 타입의 엘리먼트  -->
    <br>
    <input type="number" id="b">
    <br>
    <button id="plus">+</button> <!-- plus라는 id를 가진 button 생성 -->
    <button id="minus">-</button>
    <div>결과</div> <!--  계산결과를 나타내는 div 영역 -->
 
</body>
cs

 

아래와 같은 UI 생성.

 

<script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
    addEventListener("load"function() {
 
        var aObj = document.querySelector("#a"); // 변수 aObj에 a라는 id를 가진 입력 엘리먼트를 대입.
        var bObj = document.querySelector("#b");
        var divObj = document.querySelector("div"); // 변수 divObj에 CSS div영역을 대입.
 
        var plusObj = document.querySelector("#plus"); // 변수 plusObj에 plus라는 id를 가진 버튼 엘리먼트를 대입.
        plusObj.addEventListener("click"function() { // plus 버튼을 click 했을때 발생하는 이벤트 작성부.
 
            divObj.innerHTML = parseInt(aObj.value) + parseInt(bObj.value);
            // aObj 와 bObj의 값을 정수형으로 바꿔준 후 div영역에 HTML 코드를 삽입하는 부분.
        });
 
        var minusObj = document.querySelector("#minus");
        minusObj.addEventListener("click"function() {
 
            divObj.innerHTML = parseInt(aObj.value) - parseInt(bObj.value);
 
        });
    });
</script>
cs

 

 

 

 

실행결과

전체코드

 

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>caltest</title>
<script type="text/javascript">
    addEventListener("load"function() {
 
        var aObj = document.querySelector("#a"); // 변수 aObj에 a라는 id를 가진 입력 엘리먼트를 대입.
        var bObj = document.querySelector("#b");
        var divObj = document.querySelector("div"); // 변수 divObj에 CSS div영역을 대입.
 
        var plusObj = document.querySelector("#plus"); // 변수 plusObj에 plus라는 id를 가진 버튼 엘리먼트를 대입.
        plusObj.addEventListener("click"function() { // plus 버튼을 click 했을때 발생하는 이벤트 작성부.
 
            divObj.innerHTML = parseInt(aObj.value) + parseInt(bObj.value);
            // aObj 와 bObj의 값을 정수형으로 바꿔준 후 div영역에 HTML 코드를 삽입하는 부분.
        });
 
        var minusObj = document.querySelector("#minus");
        minusObj.addEventListener("click"function() {
 
            divObj.innerHTML = parseInt(aObj.value) - parseInt(bObj.value);
 
        });
    });
</script>
 
</head>
<body>
 
    <input type="number" id="a">
    <!-- a라는 id를 가진 number 타입의 엘리먼트  -->
    <br>
    <input type="number" id="b">
    <br>
    <button id="plus">+</button>
    <!-- plus라는 id를 가진 button 생성 -->
    <button id="minus">-</button>
    <div>결과</div>
    <!--  계산결과를 나타내는 div 영역 -->
 
</body>
</html>
cs

 

오늘은 여기까지입니다 감사합니다!

 

참고서적 김천호 「No More Copy&Paste 자바스크립트」

'웹 프로그래밍' 카테고리의 다른 글

Javascript의 문서객체모델(DOM)  (0) 2019.07.13
Javascript addEventListener를 이용한 간단한 계산기 만들기  (0) 2019.07.13
HTML Tables  (0) 2019.07.08
Apache Tomcat 설치  (0) 2019.07.08
HTML 기본 태그  (0) 2019.07.08

안녕들 하시죠!

이번시간에는 HTML로 테이블을 만들어보겠습니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
cs

 

 

이런식으로 출력됩니다.

테이블 사이에 선을 추가해 주려면 <head></head>에 border 스타일을 추가해줍니다.

 

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
<!DOCTYPE html>
<html>
<head>
<title>Table Ex</title>
 
<style>
table, th, td {
  border: 1px solid black;
}
</style>
 
</head>
<body>
 
<table style="width:5%;">
   <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
 
</body>
</html>
 
cs

 

 

 

 

 

2개의 선이 아닌 깔끔한 1개의 선으로 테이블을 만들고 싶다면 collapse를 추가해줍니다.

 

1
2
3
4
5
6
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
cs

 

 

HTML rowspan

테이블에서 열을 합칠 때 사용합니다.

 

1
<th rowspan ="2">Firstname</th>
cs

 

Fisrtname 만 rowspan을 사용해보겠습니다.

 

이런식으로 열이 합쳐지게됩니다.

조금 깔끔하게 만들어 보겠습니다.

 

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
<table style="width:5%;">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td >Jill </td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
 
<tr>
    <th rowspan="2">Steven</th>
    <th rowspan="2">King</th>
    <td>10</td>
  </tr>
<tr>
   <td>33</td>
</tr>
cs

 

이런식으로 열을 합하거나 colspan을 사용하여 행을 합하여 사용하면 될 것 같습니다.

오늘은 여기까지입니다 감사합니다 !

'웹 프로그래밍' 카테고리의 다른 글

Javascript의 문서객체모델(DOM)  (0) 2019.07.13
Javascript addEventListener를 이용한 간단한 계산기 만들기  (0) 2019.07.13
HTML Tables  (0) 2019.07.08
Apache Tomcat 설치  (0) 2019.07.08
HTML 기본 태그  (0) 2019.07.08

안녕들 하시죠!

이번시간에는 아파치 서버를 설치해 제가만든 HTML을 브라우저에 띄워보겠습니다.

 

http://apache.org/

 

Welcome to The Apache Software Foundation!

Apache Conferences "Tomorrow's Technology Today" since 1998. Intentionally intimate, offering unparalleled educational, networking, and collaboration opportunities. 2019 events are taking place in Washington DC, Chicago, Las Vegas, and Berlin. Join us!

apache.org

아파치 홈페이지로 들어가 제일 밑으로 이동하여 Tomcat 클릭.

 

 

 

왼쪽의 Tomcat 8 클릭 -> Core에 zip으로 받겠습니다.

 

bin -> startup.bat 클릭후 설치

 

 

 

 

설치가 다되도 Tomcat 설치화면은 켜져있습니다.

브라우저를 실행한 후, URL에 localhost:8080 입력.

 

정상적으로 설치가 되었다면 위와 같은 화면이 나옵니다.

이제 제가만든 HTML 을 브라우저에서 실행시켜보겠습니다.

아파치 설치 폴더 -> webapps -> ROOT 에 HTML파일을 넣습니다.

다시 브라우저로 돌아가 제 HTML 파일인 hello.html 을 실행시켜보겠습니다.

localhost:8080/ " 여기에 html 파일명 입력 "

 

localhost:8080/hello.html

 

 

성공했습니다.

오늘은 여기까지입니다 갑사합니다 !

'웹 프로그래밍' 카테고리의 다른 글

Javascript의 문서객체모델(DOM)  (0) 2019.07.13
Javascript addEventListener를 이용한 간단한 계산기 만들기  (0) 2019.07.13
HTML Tables  (0) 2019.07.08
Apache Tomcat 설치  (0) 2019.07.08
HTML 기본 태그  (0) 2019.07.08

 

안녕들 하시죠!

이번시간에는 HTML 기본 태그에 대해 알아보겠습니다.

https://www.w3schools.com 를 참고하며 진행했습니다.

 

HTML5 태그 사용법

<element attribute = "값"> 본문 </element>

HTML5의 기본 태그

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
 
<h1>This is a Heading</h1>
<h2>This is a Heading</h2>
<h3>This is a Heading</h3>
 
<p>This is a paragraph.</p>
<p>This is a <br> paragraph.</p>
 
<!-- HTML5 연습 -->
 
</body>
</html>
cs

 

 

<!DOCTYPE html> : HTML 타입을 명시해주며 가장 윗줄에 작성한다.

<html> </html> : 문서의 가장 큰 구성 요소로서, 코드의 시작과 끝을 알린다.

<head> </head> : 문서 윗부분에 들어가는 머릿말. 문서의 정보를 가지고 있다.

<body> </body> : HTML 문서의 본문, 모든 내용이 들어있다.

<title> </title> : 인터넷 브라우저 상단의 상태바에 나타낼 타이틀 글귀 작성부분.

<!-- --> : 주석.

 

 

 

HTML의 img 태그

 

1
<img src= https://www.w3schools.com/html/w3schools.jpg alt="W3Schools.com" width="104" height="142">
cs

 

<img> : 이미지 태그.
src : 이미지 경로.
alt : 이미지를 불러오지 못할 경우 문자열을 지정하기 위한 값, 수많은 검색엔진은 이미지 정보를 alt 속성을 통해 얻는다.

width, height : 이미지 사이즈.

 

위의 코드에 이미지 태그를 추가한 모습

 

오늘은 여기까지입니다 감사합니다 !

'웹 프로그래밍' 카테고리의 다른 글

Javascript의 문서객체모델(DOM)  (0) 2019.07.13
Javascript addEventListener를 이용한 간단한 계산기 만들기  (0) 2019.07.13
HTML Tables  (0) 2019.07.08
Apache Tomcat 설치  (0) 2019.07.08
HTML 기본 태그  (0) 2019.07.08

안녕들 하시죠!

이번시간에는 Java 언어를 이용하여 원형큐를 구현해보겠습니다.

아래에 인터페이스에 있는 메소드를 오버라이딩하여 사용해보겠습니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
interface QueueInterface {
 
    public void newQueue(int Qsize); // 새로운 큐를 생성하는 메소드
 
    public abstract boolean isFull(); // 큐가 포화상태인지 검사하는 메소드
 
    public abstract boolean isEmpty(); // 큐가 비어있는지 검사하는 메소드
 
    public abstract boolean enqueue(Object ob); // 큐에 데이터를 삽입하는 메소드
 
    public abstract Object dequeue(); // 큐에 들어있는 데이터를 삭제하는 메소드
 
    public abstract Object peek(); // 다음번 dequeue 될 데이터 출력하는 메소드
}
cs

 

- 변수 선언과 public void newQueue

 

1
2
3
4
5
6
7
8
9
10
11
12
13
private int front; // 출력 포인터
private int rear; // 삽입 포인터
private int Qsize; // 전체 큐의 사이즈
private char[] QArray; // Qsize를 이용하여 전체 배열 생성
 
@Override
public void newQueue(int Qsize) { // 큐를 생성하는 메소드
    front = 0//
    rear = 0// 맨처음 출력,삽입 포인터가 큐의 0번지를 가리키고 있다.
    this.Qsize = Qsize;
    QArray = new char[Qsize];
    System.out.println("사이즈는 : " + Qsize);
}
cs

 

- public boolean isFull(), public boolean isEmpty()

 

1
2
3
4
5
6
7
8
9
10
11
12
@Override
public boolean isFull() { // 큐가 포화 상태인지 검사하는 메소드
    if (((rear + 1) % this.Qsize) == front) { // 원형큐의 핵심 코드, 아래에서 그림과 함께 설명.
        return true;
    } else {
        return false;
    }
}
@Override
public boolean isEmpty() { // 큐가 이어있는지 검사하는 메소드.
    return rear == front; // rear와 front는 데이터가 삽입되기 전에만 같은 위치를 가리키기 때문에 큐가 비어있는 상태검사에 사용.
}
cs

 

 

 

- public boolean enqueue

 

1
2
3
4
5
6
7
8
9
10
11
12
@Override
public boolean enqueue(Object ob) {
    if (isFull()) { // 큐가 가득차 있지 않다면 삽입.
        System.out.println("큐가 꽉 차 있습니다.");
        return false;
    } else {
        rear = (++rear) % this.Qsize; // 아래 그림에서 설명
        QArray[rear] = (char) ob; // 삽입포인터 rear가 가리키는 공간에 데이터 삽입.
        System.out.println(ob + "를 " + rear + "번째에" + " 삽입");
        return true;
    }
}
cs

 

- 원형큐의 원리

맨처음 삽입포인터(rear) 와 출력포인터(front)는 [0]번지를 가리키고 있습니다. ( 1번그림 )

맨처음 데이터가 삽입되게되면 삽입포인터(rear)가 [1]번지로 이동하게되고 출력포인터(front)는 [0]번지를 그대로 가리키고있습니다. ( 2번그림 )

 

1번, 2번 그림

 

데이터가 계속 삽입되며 [3]번지까지 차게되면 포화상태가 됩니다. ( 4번그림 )

 

3번, 4번 그림

이렇게 포화가 된 상태에서 dequeue() 메소드를 이용해 데이터를 삭제하려고 한다면,

출력포인터(front) 가 [1]번지로 이동하고 데이터를 삭제하게 됩니다. ( 5번그림 )

 

5번, 6번 그림

 

이제 [1]번지의 데이터가 삭제되었으니 데이터를 추가할 공간이 생겼습니다.

enqueue() 메소드를 이용해 데이터를 삽입하려고 한다면,

삽입포인터(rear) 가 [0]번지로 이동하고 데이터를 삽입하여 다시 포화상태가 됩니다. ( 6번그림 )

 

* 핵심코드

 

6번그림에서 [3]번지를 가리키고있던 삽입포인터(rear) 가 [0]번지로 이동하려면,

 

1
rear = (++rear) % this.Qsize;
cs

 

이라는 코드가 필요하게됩니다.

[3]번지에 데이터를 삽입한 후 (++rear) 연산을 통해서 rear는 4가 되어있습니다.

4를 나머지연산(%)를 통해서 Qsize인 4로 나누게 되면 0이 나오기 때문에 다시 [0]번지로 이동하여 데이터를 삽입할 수 있습니다.

 

- public Object dequeue()

 

1
2
3
4
5
6
7
8
9
10
11
12
@Override
public Object dequeue() {
    if (isEmpty()) {
        System.out.println("큐가 비어있습니다.");
        return -1;
    } else {
        front = (++front) % this.Qsize;
        System.out.println(QArray[(front) % Qsize] + "를 삭제");
        return QArray[front];
    }
}
 
cs

 

- public Object peek() 

 

1
2
3
4
5
@Override
public Object peek() {
    System.out.println(QArray[(front + 1) % this.Qsize]);
    return QArray[(front + 1) % this.Qsize];
}
cs

 

원형큐 전체코드

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
interface QueueInterface {
    
    public void newQueue(int Qsize); // 새로운 큐를 생성하는 메소드
 
    public abstract boolean isFull(); // 큐가 포화상태인지 검사하는 메소드
 
    public abstract boolean isEmpty(); // 큐가 비어있는지 검사하는 메소드
 
    public abstract boolean enqueue(Object ob); // 큐에 데이터를 삽입하는 메소드
 
    public abstract Object dequeue(); // 큐에 들어있는 데이터를 삭제하는 메소드
 
    public abstract Object peek(); // 다음번 dequeue 될 데이터 출력하는 메소드
    
}
 
public class MyQueue implements QueueInterface {
 
    private int front; // 출력 포인터
    private int rear; // 삽입 포인터
    private int Qsize; // 전체 큐의 사이즈
    private char[] QArray; // Qsize를 이용하여 전체 배열 생성
 
    @Override
    public void newQueue(int Qsize) { // 큐를 생성하는 메소드
        front = 0//
        rear = 0// 맨처음 출력,삽입 포인터가 큐의 0번지를 가리키고 있다.
        this.Qsize = Qsize;
        QArray = new char[Qsize];
        System.out.println("사이즈는 : " + Qsize);
    }
 
    @Override
    public boolean isFull() { // 큐가 포화 상태인지 검사하는 메소드
        if (((rear + 1) % this.Qsize) == front) { // 원형큐의 핵심 코드, 아래에서 그림과 함께 설명.
            return true;
        } else {
            return false;
        }
    }
 
    @Override
    public boolean isEmpty() { // 큐가 이어있는지 검사하는 메소드.
        return rear == front; // rear와 front는 데이터가 삽입되기 전에만 같은 위치를 가리키기 때문에 큐가 비어있는 상태검사에 사용.
    }
 
    @Override
    public boolean enqueue(Object ob) {
        if (isFull()) { // 큐가 가득차 있지 않다면 삽입.
            System.out.println("큐가 꽉 차 있습니다.");
            return false;
        } else {
            rear = (++rear) % this.Qsize; // 아래 그림에서 설명
            QArray[rear] = (char) ob; // 삽입포인터 rear가 가리키는 공간에 데이터 삽입.
            System.out.println(ob + "를 " + rear + "번째에" + " 삽입");
            return true;
        }
    }
 
    @Override
    public Object dequeue() {
        if (isEmpty()) {
            System.out.println("큐가 비어있습니다.");
            return -1;
        } else {
            front = (++front) % this.Qsize;
            System.out.println(QArray[(front) % Qsize] + "를 삭제");
            return QArray[front];
        }
    }
 
    @Override
    public Object peek() {
        System.out.println(QArray[(front + 1) % this.Qsize]);
        return QArray[(front + 1) % this.Qsize];
    }
}
cs

 

오늘은 여기까지입니다 갑사합니다 !

'백준 & 알고리즘' 카테고리의 다른 글

Java 원형큐 구현  (0) 2019.06.23
Java 링크드리스트 구현  (0) 2019.06.22
백준 10828번 (스택)  (0) 2019.05.10
백준 2750번 (버블정렬)  (0) 2019.05.01
백준 1000번  (0) 2019.04.16

안녕들 하시죠!

이번시간에는 Java 언어를 사용해 링크드리스트(이중 연결 리스트)를 구현해보겠습니다.

아래에는 제가 사용할 클래스와 메소드입니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public class LinkedList {
    
        Node head;
        Node rear;
        int size = 0;
    
        void firstNode(int data) {} // 첫번째 Node 생성
        void addRearNode(int data) {} // 뒷단에 Node 삽입
        void addHeadNode(int data) {} // 앞단에 Node 삽입
        int readData(int index) {} // 특정 데이터 읽기
        void printData() {} // 전체 데이터 출력
        boolean removeNode(int index) {} // 특정 노드 삭제
        boolean removeAllNode() {} // 전체 노드 삭제
        
        class Node {
            Node(int data) {
                this.data = data;
            }
            int data;
            Node front = null;
            Node back = null;
        }
}
cs

 

기본적인 Node의 구성입니다.

값이 들어있는 data, 앞에있는 Node를 가리키고 있는 front, 뒤에있는 Node를 가리키고 있는 back

 

앞에있는 Node를 head, 뒤에있는 Node를 rear라고 구성합니다.

 

- void firstNode

 

1
2
3
4
5
6
7
void firstNode(int data) {
        Node newNode = new Node(data);
        head = newNode;
        rear = newNode;
        size++;
        System.out.println("firstNode(int data) 실행");
    }
cs

 

Node가 한개도 없는 상황에서 첫번째 Node를 생성하는 메소드입니다.

앞,뒤에 어떤 Node도 존재하지 않기 때문에 head와 rear 둘다 첫번째 Node를 가리키게 됩니다.

Node가 생성되었으니 size를 증가시켜줍니다.

 

 

- void addRearNode

1
2
3
4
5
6
7
8
9
10
11
12
void addRearNode(int data) {
        if (size != 0) {
            Node newNode = new Node(data);
            rear.back = newNode; // ①
            newNode.front = rear; // ②
            rear = newNode; // ③
            size++;
            System.out.println("addRearNode(int data) 실행");
        } else {
            System.out.println("firstNode(int data) 실행시켜주세요");
        }
    }
cs

 

맨뒤에 Node를 삽입하는 메소드입니다.

 

간단하게 생각하면,

현재 맨뒤를 가리키고 있는 rear의 뒷자리에 새로운 Node를 삽입하고 서로 가리키고있는 화살표를 바꿔주고 맨뒤에 새로 삽입된 Node를 rear로 만들어주는 과정입니다.

 

 

① : rear의 back의 뒤로 향하는 화살표를 새로 삽입될 newNode를 가리키게 만든다. ( rear.back = newNode )

② : 새로 삽입될 newNode의 앞으로 향하는 화살표를 현재 rear를 가리키게 만든다. ( newNode.front = rear )

③ : 화살표를 바꿔 서로 가리키게 만들었으니 새로 삽입될 newNode를 맨뒤(rear)로 만들어준다. ( rear = newNode )

 

- void addHeadNode

앞에서 설명한 addRearNode와 비슷하게 이번엔 맨앞단에 Node를 삽입하는 메소드입니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
void addHeadNode(int data) {
        if (size != 0) {
            Node newNode = new Node(data);
            head.front = newNode; // 현재 가장 앞에있는 head Node의 앞으로 향하는 화살표가 새로 삽입될 newNode를 가리키게 만든다.
            newNode.back = head; // 새로 삽입될 newNode의 뒤로 향하는 화살표가 현재 head인 Node를 가리키게 만든다.
            head = newNode; // 새로 삽입될 newNode를 맨앞(head)로 만들어준다. 
            size++;
            System.out.println("맨앞에 " + data + " 들어감");
        } else {
            firstNode(data); // 현재 삽입되어있는 Node가 없다면 새로 추가.
        }
    }
cs

 

 

 

- int readData

특정 Node의 data 읽기.

1
2
3
4
5
6
7
8
9
10
11
12
13
int readData(int index) {
        int result = 0;
        try {
            Node node = head; // 맨앞 Node 부터 시작.
            for (int i = 1; i < index; i++) {
                node = node.back; // 한칸씩 뒤로 이동하며 특정위치(index)를 찾고, 값을 result에 저장.
            }
            result = node.data;
        } catch (Exception e) {
            System.out.println("Exception 발생");
        }
        return result;
    }
cs

 

- void printData

전체 Node의 data 출력.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
void printData() { 
        if (size > 0) {
            try {
                Node node = head; // 맨앞 Node부터 시작.
                for (int i = 0; i < size; i++) {
                    System.out.print(node.data + " ");
                    node = node.back; // 한칸씩 뒤로 이동하며 모든 Node의 data 출력.
                }
            } catch (Exception e) {
                System.out.println("Exception 발생");
            }
        } else {
            System.out.println("출력데이터가 없습니다.");
        }
    }
cs

 

- boolean removeNode

특정위치의 Node 삭제.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
boolean removeNode(int index) {
        if ((index <= size && index > 0&& size > 0) {
            if (index == 1) {// head를 지울때
                head = head.back; // head를 뒤로 한칸 옮긴다.
                head.front = null;
            } else if (index == size) {// rear를 지울때
                rear = rear.front; // rear를 한칸 앞으로 옮긴다.
                rear.back = null;
            } else { // head나 rear가 아닌 중간에 있는 Node를 지울때
                Node node = head;
                for (int i = 1; i < index; i++) {
                    node = node.back;
                }
                node.front.back = node.back; // ①
                node.back.front = node.front;
            }
            size--;
            return true;
        } else {
            System.out.println("index 범위X");
            return false;
        }
    }
cs

 

 

① : 중간에 있는 Node를 삭제했으니, 앞 뒤의 Node들을 화살표로 연결해 주는 과정입니다.

 

- boolean removeAllNode

전체 Node 삭제.

1
2
3
4
5
6
boolean removeAllNode() {
        head = null;
        rear = null;
        size = 0;
        return true;
    }
cs

 

LinkedList 전체 코드

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
public class Linkedlist {
 
    Node head;
    Node rear;
    int size = 0;
    
    // 아무것도 없는 상태에서 새로운 Node 추가
    void firstNode(int data) {
        Node newNode = new Node(data);
        head = newNode;
        rear = newNode;
        size++;
        System.out.println("firstNode(int data) 실행");
    }
 
    // 뒷단에 Node 추가
    void addRearNode(int data) {
        if (size != 0) {
            Node newNode = new Node(data);
            rear.back = newNode; // ①
            newNode.front = rear; // ②
            rear = newNode; // ③
            size++;
            System.out.println("addRearNode(int data) 실행");
        } else {
            System.out.println("firstNode(int data) 실행시켜주세요");
        }
    }
 
    // 맨앞단에 Node 추가
    void addHeadNode(int data) {
        if (size != 0) {
            Node newNode = new Node(data);
            head.front = newNode; // 현재 가장 앞에있는 head Node의 앞으로 향하는 화살표가 새로 삽입될 newNode를 가리키게 만든다.
            newNode.back = head; // 새로 삽입될 newNode의 뒤로 향하는 화살표가 현재 head인 Node를 가리키게 만든다.
            head = newNode; // 새로 삽입될 newNode를 맨앞(head)로 만들어준다. 
            size++;
            System.out.println("맨앞에 " + data + " 들어감");
        } else {
            firstNode(data); // 현재 삽입되어있는 Node가 없다면 새로 추가.
        }
    }
 
    // 특정 위치(index) Node Data 읽기
    int readData(int index) { // 특정 노드의 data 읽기
        int result = 0;
        try {
            Node node = head; // 맨앞 Node 부터 시작.
            for (int i = 1; i < index; i++) {
                node = node.back; // 한칸씩 뒤로 이동하며 특정위치(index)를 찾고, 값을 result에 저장.
            }
            result = node.data;
        } catch (Exception e) {
            System.out.println("Exception 발생");
        }
        return result;
    }
 
    // 전체 노드의 data 출력
    void printData() { 
        if (size > 0) {
            try {
                Node node = head; // 맨앞 Node부터 시작.
                for (int i = 0; i < size; i++) {
                    System.out.print(node.data + " ");
                    node = node.back; // 한칸씩 뒤로 이동하며 모든 Node의 data 출력.
                }
            } catch (Exception e) {
                System.out.println("Exception 발생");
            }
        } else {
            System.out.println("출력데이터가 없습니다.");
        }
    }
 
    // 특정 위치(index) Node 삭제
    boolean removeNode(int index) {
        if ((index <= size && index > 0&& size > 0) {
            if (index == 1) {// head를 지울때
                head = head.back; // head를 뒤로 한칸 옮긴다.
                head.front = null;
            } else if (index == size) {// rear를 지울때
                rear = rear.front; // rear를 한칸 앞으로 옮긴다.
                rear.back = null;
            } else { // head나 rear가 아닌 중간에 있는 Node를 지울때
                Node node = head;
                for (int i = 1; i < index; i++) {
                    node = node.back;
                }
                node.front.back = node.back; // ①
                node.back.front = node.front; // ②
            }
            size--;
            return true;
        } else {
            System.out.println("index 범위X");
            return false;
        }
    }
 
    // 전체 Node 삭제
    boolean removeAllNode() {
        head = null;
        rear = null;
        size = 0;
        return true;
    }
 
    class Node {
        Node(int data) {
            this.data = data;
        }
 
        int data;
        Node front = null;
        Node back = null;
    }
}
cs

 

오늘은 여기까지입니다 감사합니다 !

'백준 & 알고리즘' 카테고리의 다른 글

Java 원형큐 구현  (0) 2019.06.23
Java 링크드리스트 구현  (0) 2019.06.22
백준 10828번 (스택)  (0) 2019.05.10
백준 2750번 (버블정렬)  (0) 2019.05.01
백준 1000번  (0) 2019.04.16

안녕들 하시죠!

이번시간에는 오라클 11g 설치에 대해 알아보겠습니다.

 

먼저 아래의 URL을 통해 Oracle 홈페이지로 들어갑니다.

https://www.oracle.com/kr/index.html

 

 

다운로드로 들어가보겠습니다.

 

 

Database 11g Express Edition 버전으로 설치해보겠습니다.

 

 

Windows x64 버전으로 다운받겠습니다.

 

 

로그인을 하게되면 바로 다운로드가 됩니다.

 

 

setup.exe 를 실행해주세요.

 

다음

 

 

 

아래의 비밀번호는 중요하니 기억해둬야 합니다.

 

 

 

 

이제 시작화면에서 SQL PLUS를 찾습니다.

 

사용자명 : system

비밀번호 : 위에서 설정한 비밀번호

 

다음에 접속됨:

이 나오게 되면 설치가 끝납니다.

 

오늘은 여기까지입니다 감사합니다 !

'Database' 카테고리의 다른 글

오라클 11g 설치  (0) 2019.05.28

+ Recent posts