컬렉션 List의 메소드 중에서 매개변수에 넣는 것 파악하고

반환타입도 파악하면서

해당 반환 타입으로 뭘 할 수 있을지 고민하다가

int타입으로 반환되는 indexOf()를 if문과 연결지어 간단한 출력문구 사용

boolean으로 반환되는 isEmpty()나 remove() 등도 if문 조건으로 사용해봄

이외에도 get이나 다른 str이나 다른 타입 반환을 이용해서 ==이나 equals() 같은 걸 이용해서 값 비교해서

찾는 조건 같은걸로 while, for문 같은 것도 사용해봐야겠다

/******************************** collection 3rd practice ***************************************/	
public void method03() {
    // 3번째 연습할거는 오버라이딩 해제하면서, equals()와 hashCode() 비교
    ArrayList a = new ArrayList(2); // 제네릭 안써서 노란줄 경고
    ArrayList<Student> al = new ArrayList<Student>(2);
    ArrayList<Student> list = new ArrayList<>(1);

    // vo클래스에 있는 오버라이딩된 toStirng(), equals(), hashCoding() 
    // 전부 주석처리


    // add(E e):boolean
    al.add(new Student("ㄱ",100));
    al.add(new Student("ㄴ",90));
    System.out.println(al);			// [ㄱ(100점), ㄴ(90점)]
    // Object의 toString()를 오버라이딩 때문에 주소값이 아닌 객체값이 바로나옴
    // toString() 오버라이딩 안된 경우(오버라이딩 주석처리) 결과값 : [chap12_Collection.A_List.model.vo.Student@6d06d69c, chap12_Collection.A_List.model.vo.Student@7852e922]
    al.add(2, new Student("ㄷ",95));	
    System.out.println(al);	// [chap12_Collection.A_List.model.vo.Student@6d06d69c, chap12_Collection.A_List.model.vo.Student@7852e922, chap12_Collection.A_List.model.vo.Student@4e25154f]
    System.out.println(al); // toString오버라이딩 후 : [ㄱ(100점), ㄴ(90점), ㄷ(95점)]

    // add(int index, E element) 
    list.add(0, new Student("ㄱㄱ",100));
    System.out.println(list);	// [ㄱㄱ(100점)]
    list.add(1, new Student("ㄴㄴ",90));
    list.add(2, new Student("ㄷㄷ",85));
    System.out.println(list);// [ㄱㄱ(100점), ㄴㄴ(90점), ㄷㄷ(85점)]


    // addAll(Collection<? extends E> c) : boolean
    al.addAll(al);
    System.out.println(al);// [ㄱ(100점), ㄴ(90점), ㄷ(95점), ㄱ(100점), ㄴ(90점), ㄷ(95점)]

    // addAll(int index, Collection c) : boolean
    al.addAll(1,al);
    System.out.println(al); // [ㄱ(100점), ㄱ(100점), ㄴ(90점), ㄷ(95점), ㄱ(100점), ㄴ(90점), ㄷ(95점), ㄴ(90점), ㄷ(95점), ㄱ(100점), ㄴ(90점), ㄷ(95점)]
    // toString() 오버라이딩 주석 후 : [chap12_Collection.A_List.model.vo.Student@6d06d69c, chap12_Collection.A_List.model.vo.Student@6d06d69c, chap12_Collection.A_List.model.vo.Student@7852e922, chap12_Collection.A_List.model.vo.Student@4e25154f, chap12_Collection.A_List.model.vo.Student@6d06d69c, chap12_Collection.A_List.model.vo.Student@7852e922, chap12_Collection.A_List.model.vo.Student@4e25154f, chap12_Collection.A_List.model.vo.Student@7852e922, chap12_Collection.A_List.model.vo.Student@4e25154f, chap12_Collection.A_List.model.vo.Student@6d06d69c, chap12_Collection.A_List.model.vo.Student@7852e922, chap12_Collection.A_List.model.vo.Student@4e25154f]



    // 장점1. 크기 제약 x
    // .size() : 인덱스 길이 반환
    System.out.println(al.size()); // 12


    // 장점2. 추가/삭제/정렬 기능처리 간단



    // 삭제
    // remove(int index):E
//		// remove()의 return은 삭제한 값을 돌려준다
//		list.remove(7);
    list.remove(2);
    System.out.println("remove(int index) : "+list); // [ㄱㄱ(100점), ㄴㄴ(90점)]
    System.out.println(list.remove(1)); // ㄴㄴ(90점) <- 대괄호 없고, 지운 객체 반환(pop개념) 
    System.out.println(list); // [ㄱㄱ(100점)]

    Student delList = al.remove(11);
    System.out.println("delList : "+delList);	// delList : ㄷ(95점)
    System.out.println(al);			// [ㄱ(100점), ㄱ(100점), ㄴ(90점), ㄷ(95점), ㄱ(100점), ㄴ(90점), ㄷ(95점), ㄴ(90점), ㄷ(95점), ㄱ(100점), ㄴ(90점)]
    Student delList2 = al.remove(10);
    System.out.println(delList2);  // ㄴ(90점)
    System.out.println(al);			// [ㄱ(100점), ㄱ(100점), ㄴ(90점), ㄷ(95점), ㄱ(100점), ㄴ(90점), ㄷ(95점), ㄴ(90점), ㄷ(95점), ㄱ(100점)]



    // 삭제
    // remove(Object o):boolean
    // 같은 데이터라면 앞에 있는거부터 삭제
    al.remove(new Student("ㄷ",95));
    al.remove(new Student("ㄷ",95));
    System.out.println(al.remove(new Student("ㄷ",95))); // false
    System.out.println(al);			// [ㄱ(100점), ㄱ(100점), ㄴ(90점), ㄷ(95점), ㄱ(100점), ㄴ(90점), ㄷ(95점), ㄴ(90점), ㄷ(95점), ㄱ(100점), ㄴ(90점), ㄷ(95점)]
    // equals()가 오버라이딩이 안되어 있어서 값 비교가 아니라 주소값 비교라 삭제 못한 것.
    System.out.println(al.size());


    // 지네릭 추가 : <String> 
    // equals랑 hashCode가 잘 오버라이딩이 되어있기 때문에 삭제 가능
    ArrayList<String> sList = new ArrayList<>(2);

    sList.add(new String("a"));
    sList.add(1, new String("b"));
    System.out.println(sList);		// [a, b]
    // 제네릭<String> 같은 경우, toString()이 오버라이딩 안되어있거나 데이터 리턴이 없어도 객체값을 잘 내보내줌



    // set(int index, E e)
    // 해당 인덱스 번호에 값  교체
    sList.set(1, new String("changed Capital B"));
    System.out.println(sList);  // [a, changed Capital B]
    al.set(0, new Student("a",50));
    System.out.println(al);		// [a(50점), ㄱ(100점), ㄴ(90점), ㄷ(95점), ㄱ(100점), ㄴ(90점), ㄷ(95점), ㄴ(90점), ㄷ(95점), ㄱ(100점), ㄴ(90점), ㄷ(95점)]


    // get(int index):E
    // 인덱스번호의 엘리먼트 값을 가져온다
    sList.get(0);
    String str = sList.get(1);
    System.out.println(sList);	// [a, changed Capital B]
    System.out.println(str);	// changed Capital B


    // contains(Object) : boolean
    // indexObject : int 
    System.out.println(al.contains(new Student("a",50))); // false


    // int값 데이터 반환된 걸 if문에 적용
    if(al.contains(new Student("ㄱ",100))){
        System.out.println("포함 & 출력");
    }else {
        System.out.println("미포함. 값이 맞다면 equals()오버라이딩 체크해보세여");
    }	// equals()가 오버라이딩 되어있다면 값을 비교하기 때문에 contains()가 작동하고, 
        // 아닐 경우 값이 같더라도 주소값이 비교되기 때문에 작동x
    al.indexOf(new Student("ㄴ",90));
    System.out.println(al.indexOf(new Student("ㄴ",90)));	// 2
    // 반환된 인덱스번호로 if조건문 줘서 실행하기
    if(al.indexOf(new Student("ㄴ",90)) > 0) {
        al.remove(6);
        System.out.println("indexOf의 번호가 0이상이면 객체값 하나 삭제함");	// indexOf의 번호가 0이상이면 객체값 하나 삭제함
    }else {
        System.out.println("조건 미충족. do nothing");
    }

    System.out.println(sList.get(0));	// a
//		if((sList.get(0)) == "a") {
    if((sList.get(0)).equals("a")) {
        System.out.println("true");	// true
    }else {
        System.out.println("false");
    }

    // 반환된 boolean타입으로 while조건 사용하기
    System.out.println("a : "+sList.contains("a")); // true
    int i = 0;
    while(sList.contains("a")) {
        System.out.print(i+" ");	// 0 1 2 3 4 5 6 7 8 9 
        i++;
        if(i>=10) {
            break;	// while문 무한루프 + break문 사용
        }
    }
//		while(true) {
//			System.out.println("====");
//			i++;
//			if(i>=10) {
//				break;
//			}
//		}

//		while(sList.contains("a")) {
//			if(i>=10) {
//				break;
//			}
//			i += 2;
//			System.out.print(i+ " ");
//		}


    // 지네릭<String>과 일반 참조객체<Student>의 오버라이딩 비교
    //  equals메소드와 해쉬코드가 오버라이딩 되지 않으면 주소값이 달라 없는걸로 나옴. 현재는 오버라이딩된 상태


    // clear():void
    al.clear();
    System.out.println(al);// []
    // isEmpty():boolean
    al.isEmpty();
    System.out.println(al.isEmpty()); // true

    if(al.isEmpty()) {
        al.add(new Student("new",10));
        System.out.println(al);  // [new(10점)]
    }

}

DOM(Document Object Model)

A.Node객체

노드 = 객체 = 태그
노드 : 태그를 객체와 시켜서 보는 것

글자가 안에 들어갈 수 있으면 다 텍스트 노드

1.텍스트노드가 있는 노드 생성

createElement()

요소 노드를 만듦

// createElement(): 요소 노드를 만듦
var title = document.createElement('h3'); // <h3></h3>  // createElement() : h3이라는 요소를 만들겠다

createTextNode()

텍스트 노드를 만듦

// createTextNode(): 텍스트 노드를 만듦
var textNode = document.createTextNode('안녕'); // <h3></h3>

appendChild()

노드(요소)를 요소의 마지막 자식으로 추가

// appendChild(): 노드(요소)를 요소의 마지막 자식으로 추가
title.appendChild(textNode); // <h3>안녕</h3>    // <h3> 이 안에 안녕을 집어넣음 </h3>
// 어펜드차일드 : 이어붙이는 것이 어펜드. 자식으로 이어붙이는 것. 
// 타이틀 h3안에다가 집어넣겠따 애리어1 어펜드 div 안에다가 붙여넣겠d다
// title만 넣어도 되는 것

document.getElementById('area1').appendChild(title);
// area1을 id로 가진 div를 찾아서 자식으로 title을 넣어줌 
// title안에 이미 textNode가 들어갔기 때문에 title만 집어넣어주면 된다.

// div를 area1 을 찾아서 자식으로 title을 넣어줌 
// title안에 이미 textNode가 들어갔기 때문에 title만 집어넣어주면 된다.

2.텍스트노드가 없는 노드 생성

이미지 태그 만들기

document.createElement('img');

+이미지 소스 경로 지정

function test2(){ 
	// createElement(): 요소 노드를 만듦
  var imgTest = document.createElement('img'); // img태그만듬
  //텍스트가 필요없기에 createTextNode() 생성할 필요 x 
  // but, img파일의 소스 경로지정은 해줘야한다

  imgTest.src = "<https://www.telegraph.co.uk/content/dam/Pets/spark/royal-canin/happy-puppy.jpg?imwidth=1240>";
  imgTest.width = '150';
  imgTest.height = '100';
  imgTest.myProperty = 'abc'; // 이런 속성이 없어서 안들어감... 근데 강제로 넣을 수 있다.

  // 아래코드 넣어 차이가 뭐지?
  imgTest.setAttribute('myProperty','ABC');   // 이렇게 강제로 넣어줌

  document.getElementById('area2').appendChild(imgTest);  // div에 위 imgTest 넣음.
}

B.innerHTML

innerText와 차이

innerText: 요소 또는 노드의 텍스트 내용을 반환

// 목표 : 버튼 누르면 데이터행 추가되도록 만들 것
var board = document.getElementById('board');

var num = 1;
var title = '제목임다';
var user = 'user01';
var count = 1;
var date = new Date();
//데이터에 대한 행이 추가되게 할거임
// tr이 존재해야겠다. 추가하려면 
// 그안에 데이터 집어넣을 수 있도록해야하니 
// td들도 만들어야겠다. 

board.innerHTML += '<tr><td>' + num + '</td>'
                    + '<td>' + title + '</td>'
                    + '<td>' + user + '</td>'
                    + '<td>' + count + '</td>'  // getFullYear(): 날짜의 전체 연도(4자리)를 반환
                    + '<td>' + date.getFullYear() + "-" + (date.getMonth()+1)
                             + "-" + date.getDate() + "</td></tr>";

// 자바 jdbc에서 sql 연결 시 쿼리문 작성처럼 js도 html을 작동할 수 있게 코드적기
// 데이터행 추가할려면 기본적으로 tr이 존재해야함
// tr에 데이터 집어넣을 수 있게하려면 td도 만들어줘야한다
// innerHTML문 안에는 html에서 하던 테이블만들기 구조 그대로 하되 넣고 싶은 데이터만 변수처리

// innerHTML
// 태그 안에 있는 데이터 가져오거나 추가하기위해 사용

            // 우리는 지금 하는건 추가하는것임
            // 근데 innerHTML은 HTML이라고 이름이 되어있지?
            // 여기에 들어가있는 태그들을 HTML로 인지해서 바꿔줄 수 있어
            // 이런 스트링값들을 태그로 인지시킬 수 있어
            // innerHTML이라서 가능한것임!! 태그로 인지시키고싶다할때 사용!!
            // 얘랑 비슷하게 생긴애가 innerText라는 애가 있는데,
            // 걔는 태그가 아니라 그냥 텍스트로 찍혀버림
            // 텍스트는 말 그대로 문자 자체로 인지해서 태그로 인식못함..
            // 정말 글자만 보고싶을때 사용하는애

// innerHTML은 str값들을 태그로 바꿔서 인지 시킬 수 있다
// innerHTML라서 가능함. 다른 애들도 다 가능x
// innerText 안에 들어가는 글자만 보고 싶다 // 태그를 아무리 넣어도 인지x

// 태그도 좀 필요하면 innerHTML 

}

C.스타일 지정

CSS 적용시키는 JS코드

area4.style.backgroundColor = 'black';

area4 변수 객체의 style속성에 접근

백그라운드 컬러 속성에 접근 후 대입연산자(=)를 통해 black 속성값을 넣어준 것

<button onclick="test4();">실행확인</button>
<div id="area4" class="area"></div>
<script>
  function test4() {
      var area4 = document.getElementById('area4');
      
      area4.**style**.**backgroundColor** = 'black';  // 배경색 변경
      area4.**style**.**borderRadius** = "100px";     // borderRadius : 테두리 둥글게
      area4.**style**.**transition** = 'all 2s'       // transition : 모양이 2초에 걸쳐 천천히 바뀜
      // 트랜지션 - 2초안에 끝내라고 css적용
  }
</script>

D.노드 삭제

변수명.remove()

<button onclick="test5();">실행확인</button>
<div id="area5" class="area"></div>
<script>
    function test5() {
        var area5 = document.getElementById('area5');
        area5.**remove**();
        area5.**remove**();
        // 노드를 삭제하는 방법 , area5가 삭제가 됨.
    }
</script>