ES(4)
-
[TAB 구현 심화_2]_Spring에서 tab 구현해보기 (feat 자료구조)
저번에 뒤로가기를 구현했을 때 stack 구조를 이용하여 구현하였습니다. 이번에는 탭을 끄고 난뒤 탭이 닫혀있으면 rule에 의하여 닫힌 탭은 content 부분에서 사라지고 나머지 탭이 보여지는 기능을 만들어 보고자 합니다. - 우선 linkedList 를 이용하면 될꺼라 생각해서 시도해 보았으나, 코드가 복잡해지고 구현이 안되었습니다. 이번 포스트는 원인분석과 과정을 써보았습니다. 다음 포스트에는 다른방법으로 시도해 볼 것입니다. 1] 기본적인 linklist 구조 class Node { constructor(data, next = null) { //data와 next를 넣고 next의 디폴트는 null로 지정 왜냐하면 linkedlist의 tail(마지막은) null로 끝나기때문 this.data ..
2022.02.17 -
[JQuery]_JQuery가 인기 있는 이유
JQuery 자바스크립트로 만들어진 라이브러리. DOM 작업을 쉽게 할 수 있게 해줍니다. JQuery는 메소드를 가지고 있는 클래스 -> 프로토타입 방식 그 중에서도 크로스 브라우징 라이브러리 라는 특성이 코드의 라인을 줄여줍니다. 크로스 브라우징 라이브러리 : 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 출력되게 하는 라이브러리 크로스 브라우징 라이브러리가 아니라면, 브라우저 마다 기능을 나눠서 추가해줘야한다.. ex) IE7 이전에는 attachEvent 를 사용하였다. 순기능 자바스크립트 DOM 기능 Ajax 를 손쉽게 플러그인이 많다 효과 : 애니메이션 효과 간단한 예시와 실습 1번] id 요소의 값 수정하기 페이지가 로딩되고 (html과 같은 정적 요소) 이후 script에서 onloa..
2022.01.23 -
[JQuery_load]_Spring 에서 간단한 tab 구현
$Load() 함수 : Ajax 와 같은 통신을 통해 서버로부터 데이터를 불러와 선택된 요소에 넣는 jQuery 입니다. 문법 : $(선택자).load(URL, data, callback 함수); url : 불러올 주소 data : 요청에 사용할 데이터 callback 함수 : 요청에 대한 응답을 처리할 콜백함수 url 에서 #를 이용해 불러온 문서에서 해당 tagid를 가진 부분만 선택적으로 불러올 수도 있습니다. 버튼 2에클릭시 함수를 달고 그 안에 load를 사용하였습니다. #content로 content 라는 아이디를 가지는 div를 대상으로 불러올 것입니다. 불러올 파일은 tabmanager 아래의 tab2.viw.jsp 입니다. load 뒤에 url 부분에 바로 상대경로던 절대경로던 바로 ur..
2022.01.20 -
[createElement, appendChild]_의 개념과 사용
1] Document.createElement : 지정한 태그 이름의 HTML요소를 반환합니다. let element = document.createElement(tagName[, options]); tagName으로는 'div', 'ul', ... 등 html 요소가 사용됩니다. 2] Node.appendChild : 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. var aChild = element.appendChild(aChild); 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킵니다. (문서에 존재하는 노드를 다른 곳으로 붙이기 전에 부모 노드로 부터 지워버릴 필요는 없습니..
2022.01.20