오늘은 시간이 조금 남아서 부트스트랩의 모달이 아닌 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를 통해 선택된 값을 ..

IBSheetIBSheet는 별도의 개발툴 없이 자바스크립트를 통해 각 기능을 설정함으로써 기능 구현이 가능하다.Ajax 통신을 통해 데이터를 XML 또는 JSON 형태로 받아 화면에 로딩한다. IBSheet는 여러 기능이 제공되는데,각 컬럼별 다양한 데이터 타입과 포맷을 제공한다. 이제 반은 아는 정도가 되었으려나...또 합계/소계/누계 등 숫자연산 기능도 제공한다.결과적으로 IBSheet는 DB에 저장 된 다량의 데이터를 리스트로 조회하거나 입력,수정,삭제하는 경우 유용하게 사용되는 것 같다. 오늘은 IBSheet의 함수를 이용해 특정 기능이 작동되는 데 조건을 주었다.오늘 알게 된 함수는 CellValue와 GetSelectionRows()이다. CellValue(Row, Col) 스크립트에서 사용..

어제 좋아요 기능 구현에 대해 포스팅을 했었다.기능 구현까지는 되기는 했다. 하지만 문제가 있다고 말했었는데.. 문제는 테이블의 INSERT였다.좋아요 테이블을 만들어 사용을 했기 때문에 반드시 Row가 있어야 했다.(기능이 정상적으로 작동한 것은 테스트용으로 몇 개의 Row를 임의로 입력해줬기 때문이다)지금 생각해보면 당연한 일이었는데 그 때는 왜그랬을까.. 어쨌든 Row를 추가시켜줘야했다.그럼 어떤 상황에서 추가를 시켜주면 좋을까 생각을 했다.회원가입 시? 아니면 게시글을 조회할 때? 좋아요를 눌렀을 때?회원가입 시는 적절하지 못했다. 왜냐하면 좋아요 테이블에는 게시글의 번호를 가져오기 때문에..여러 테스트 끝에 게시글 조회 시가 가장 적절하다고 판단했다.게시글을 조회할 때 회원 번호와 해당 게시글 ..

관련 소스는 https://github.com/eeesnghyun/LikeFunction에서 확인하실 수 있습니다. 학부시절 취업성공패키지로 한 학기를 대신한 국비지원교육을 받을 수 있었다.교육당시 재미삼아 개인프로젝트를 진행했었는데 그 때 만들었던 좋아요 기능을 기록에 남기려고 한다.이 기능을 구현하기 위해 3일을 넘게 애먹었던 것 같다... 내가 생각한 로직은 아래와 같다.1)유저가 게시판을 조회 한다.2)좋아요 버튼을 클릭 시 로그인 여부를 파악한다.3)회원 여부를 로그인을 통해 파악한다.(회원이라면 통과, 비회원이라면 회원가입)4)좋아요 클릭시 +1, 취소시 0 이 때, DB(좋아요 테이블을 따로 제작)에는 좋아요 번호가 PK로 등록되어 있으며 게시판 번호와 회원번호는 FK 그리고 좋아요 체크값(..