앞서 객체와 클래스에 대해 정리를 했었다.그 중간에 인스턴스에 대한 언급이 있어서 혹여 설명이 필요한 분들이 있을까해서 다시 공부도 할겸 정리를 해본다.인스턴스를 이해하기 위해서는 먼저 생성자에 대한 개념이 있어야 한다. 생성자(Constructor) 생성자는 객체가 생성될 때 실행되는 메소드이다.자세하게 말하면 클래스가 인스턴스화 될 때 클래스의 멤버 변수(멤버 필드라고도 함)를 초기화해주는 기능을 한다. 모든 클래스는 (반드시)한 개 이상의 생성자를 가진다. 커피에서 원두같은 존재(?)라고도 할 수 있을 것 같다. 이러한 생성자는 우리가 선언을 하지 않을 경우 기본 생성자(Default)로 존재한다. 객체와 클래스에서 예시로 보였던 Cafe 클래스의 기본 생성자를 만들어봤다.※생성자는 클래스와 같은 ..

객체와 클래스 자바는 객체지향의 언어이다. 객체를 이해하기 위해서는 클래스의 개념도 알아야 한다. 또 인스턴스가 무엇인지도 알아야 한다. 객체는 뭘까. 구글링을 조금만 해봐도 객체에 대한 다양한 정보들을 얻을 수 있다. 저마다 말하는 내용이 비슷해 보이면서 달라서 헷갈릴 수 있지만 결국 그 뜻은 같다. 간단하게 객체는 클래스를 사용하여 만들어진 것이다. 즉, 클래스는 객체를 만들기위한 틀이 된다. 아래 예를 통해 이해를 조금 도와봤다. 사람들이 자주 찾는 카페. 카페에는 다양한 종류의 음료들이 있다. 커피부터 에이드, 쥬스 등등... 이러한 카페를 클래스라고 생각하자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 package biz.test; public ..

예전에 학교에서 프로젝트를 할 때만 해도 인터페이스를 뭔가 진행 과정(?)때문에 사용을 했었던 것 같습니다. 확실히 개념을 짚고 넘어갔어야 하는 부분이었는데 말이죠. 그래서 최대한 이해하기 쉽게 정리를 해봤습니다. 인터페이스(Interface) 인터페이스는 메소드만 선언되어 있고 실제 구현은 되어있지 않다. 우리는 인터페이스를 상속받은 클래스에서 (인터페이스에서)선언된 메소드를 가져다 입맛에 맞게 쓸 수 있다. 이는 팀 단위의 프로젝트를 하게 되면 효율적으로 사용할 수 있는 장점이 있다. 또 자바에서는 다중 상속을 허용하지 않는데 인터페이스는 인터페이스간의 다중 상속이 가능하다. 인터페이스의 메소드는 기능적인 구현이 아닌 선언만 되어있는 추상메소드이기 때문이다. 아래 샘플 코드를 보며 알아보자. PayI..

오늘은 시간이 조금 남아서 부트스트랩의 모달이 아닌 div로 모달창을 만들어봤다. 매우 간단하게! 먼저 로 쓰인 코드마우스 오버 시에 아래 이벤트가 발생하게 되고 div의 id를 가지고 숨겨진 div를 display시켜준다.+ 추가로 display되는 div안에 이미지 및 텍스트를 넣을 수 있다. 123456789101112131415161718192021222324252627function mousehover(e){ var background = document.getElementById("background"); var popup = document.getElementById("popup"); var emp_nm = document.getElementById(e.getAttribute('id')).g..

간단한 태그의 id값 가져오기function mousehover(e){ alert("ID : " +document.getElementById(e.getAttribute('id')).getAttribute('id'));}라이언

document.getElementById()를 사용하면 HTML 태그의 속성들을 변경해줄 수 있다. 간단하게 아래 코드를 통해 몇 개만 알아보면, - 배경색 변경 : document.getElementById().style.backgroundColor="#색상";- 디스플레이 유무 : document.getElementById().style.display="none(or block)";- URL입력 : document.getElementById().src="url 입력"; 보통 태그안에서 사용하는 style 속성의 font-weight라던지, background-color같이 '-'로 나누어져있는 부분은 이어 붙인 뒤 대문자 처리를 해준다. 1234567891011121314151617181920212..

JQuery를 마지막으로 사용해서인지 자바스크립트 일부 속성을 간혹 까먹는다. 안타깝게도 입사 후 JQuery기반은 지금껏 만져본 적이 없다..그래서 이번에 가장 많이 쓴(?) document.getElementById() 속성을 기록해두려고 한다. document.getElementById('ID값') document.getElementById('LSH')는 id값이 LSH인 HTML 요소를 가져온다. 이렇게 가져온 id값을 통해 라디오 박스 또는 셀렉트 옵션값 설정, 특정 값 입력, 스타일 변경 등 다양한 행위를 할 수 있게 된다. 먼저 innerHTML에 대해 소개한다. innerHTML은 내부 HTML을 문자열로 가지고 있기 때문에 DOM을 쉽게 조작할 수 있다. ☞ DOM이란?쉽게 innerHT..

SELECT BOXSELECT BOX를 이용해 어떤 이벤트를 실행하고자 할 때는 주로 onchange 이벤트를 사용한다.onchange는 input이나 select 등의 데이터가 변경될 때 호출되는 이벤트이다. 아래 예제는 OnChange()라는 함수를 만들어 셀렉트 박스의 인덱스 번호를 구해서 이미지를 바꿔봤다.select option의 인덱스는 0부터 시작하며 라이언을 선택하면 1, 어피치를 선택하면 2가 된다. document.getElementById("KaKaoF").selectedIndex는 KaKaoF라는 id값을 가진 SELECT BOX의 인덱스 번호를 가져온다. 그리고 document.getElementById("KaKaoF").options[인덱스 번호].value를 통해 선택된 값을 ..