클로저 : 함수가 선언 되었을 때의 렉시컬 환경 클로저를 이해하기 전에 먼저 스코프의 개념에 대해 알아야 합니다. 스코프는 함수를 호출 할 때 정해지는 것이 아니라 어디에 선언되었는지에 따라 나뉘게 됩니다. 코드를 보면서 이해해 보겠습니다. pagination 이라는 함수 안에 increase, decrease , status 라는 3가지 내부 함수가 선언되어 있습니다. 내부함수 입장에서 바라보면, pagination 함수는 외부함수 입니다. 함수가 실행되었을 때 관점에서 바라보면, 1] 내부함수가 호출된다. -> 해당 컨텍스트가 실행 컨텍스트 스택에 쌓임 2] 변수 객체, 스코프 체인, this 객체가 결정 3] 스코프 체인이 바인딩 될 때 전역 스코프 -> pagination 스코프 -> 자기 자신을..

사용 언어 : ES6 ,JQuery 목적] li 의 class 명이 Open 혹은 Put 2가지의 ul li 리스트가 있습니다. 그중 Open이 먼저 선택시 선택된 값 은 Put 리스트에서 선택할 수 없게 하는것이 목표입니다. 구조 : div -> ul -> li 의 구조] 화면] 문제 코드] $("#tpOpenDtYmd, #tpPutDtYmd").on("change",function (e) { $(".Open").on("click", function () { if (!($(".Put").children(".selectedhour").text() == '')) { let text = $(".Put").children(".selectedhour").text(); let hour = text.slice(0,..

[환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis ---- 개발 목표 : 기존에 만든 게시판에서 페이징 처리가 가능하도록 기능 추가 [완료화면] 10개씩 보기 20개씩 보기 이전 조회 기능에서 변경점] https://yn971106.tistory.com/77?category=1000475 [포트폴리오 페이지]_9단계_CRUD 게시판 구현_(feat.조회기능 구현) [환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis ---- 개발 목표 : 오라클 디비를 이용해서 게시판 CRUD 중 R(read) 만들기 [완료 화면] [디렉토리] [설명] board에 관한 controller 와 VO.. yn971106.t..

기존 코드 ] $("#" + tabclosename).click(function () { // create 한 template 노드에 해당 아이디를 가진 버튼에 리스너를 Jquery 를 이용하여 부여 }); $(document).on("click", "#" + tabname, function () { // 문서 전체를 기준으로 해당 아이디를 가진 a 테그에 이벤트 부여 }); 수정코드] node.querySelector('a').onclick = function(){ //a 태그 이벤트 부여 } node.querySelector('input[type=button]').onclick = function(){ //여기에 닫기버튼 이벤트 부여 } 핵심] // 템플릿 만드는 곳 let node = documen..

목표] 위와 같이 동작하면서 닫고 새로 열기 전까지는 파일을 로드하거나 통신하지 않도록 하였습니다.] 코드 & 설명] 각각의 메뉴버튼에 리스너를 달아줍니다. openCheck 함수와 createTemplate 함수를 만들어서 사용하였습니다. openCheck 함수] 이전 포스팅에 있는 localstorage를 이용하여 해당 tabname에 맞는 이름이 열려있는지 닫혀있는지를 판별합니다. 만약 열려있으면 true 닫혀있으면 false를 반환합니다. 따라서 위에서 tab이 중복으로 열리는것을 방지한 코드입니다. createTemplate 함수] function creatTemplate(menuname) { //이름 변경 let url; let name; switch (menuname) { case 'menu..

팝업창과 모달창] 팝업창: 열려있는 브라우저 페이지에 다른 브라우저 페이지를 띄우는 것 -> 즉 창과 창 관계이기 때문에 부모의 창을 자식창을 띄워둔 상태에서도 조작이 가능하다. 모달창: 기존의 브라우저 페이지 위에 레이어를 까는 것입니다. 모달창을 띄웠을 때는 부모의 페이지를 조작 할 수 없다. 둘다 부모의 정보를 자식에게 줄 수도, 자식의 정보를 부모에게 전달 할 수도 있다. 오늘은 우선 간단하게 팝업하는 것만 해보았습니다. 목표] 버튼 클릭시 간단하게 팝업이 뜨는 모습입니다. 사용 메소드 : window.open(); https://developer.mozilla.org/ko/docs/Web/API/Window/open Window.open() - Web API | MDN Window 인터페이스인 ..

목표] 위와 같이 textfield에 값 입력시 local 저장소에 저장이 되는 것을 해보았습니다. 우선 사용한 메소드를 알아보겠습니다. 값 저장하기] setItem(keyName, keyValue); window.localStorage.setItem(constant,data); keyName으로 key의 값을 저장 이를 불러오는 방법] getItem('KeyName') let userData = window.localStorage.getItem(constant); 그외 사용가능한 window.localStorage 메소드 제거] localStorage.removeItem('KeyName') 전체 제거] localStorage.clear(); ---XMLHttpRequest--- XMLHttpReques..

JQuery 자바스크립트로 만들어진 라이브러리. DOM 작업을 쉽게 할 수 있게 해줍니다. JQuery는 메소드를 가지고 있는 클래스 -> 프로토타입 방식 그 중에서도 크로스 브라우징 라이브러리 라는 특성이 코드의 라인을 줄여줍니다. 크로스 브라우징 라이브러리 : 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 출력되게 하는 라이브러리 크로스 브라우징 라이브러리가 아니라면, 브라우저 마다 기능을 나눠서 추가해줘야한다.. ex) IE7 이전에는 attachEvent 를 사용하였다. 순기능 자바스크립트 DOM 기능 Ajax 를 손쉽게 플러그인이 많다 효과 : 애니메이션 효과 간단한 예시와 실습 1번] id 요소의 값 수정하기 페이지가 로딩되고 (html과 같은 정적 요소) 이후 script에서 onloa..

1] Document.createElement : 지정한 태그 이름의 HTML요소를 반환합니다. let element = document.createElement(tagName[, options]); tagName으로는 'div', 'ul', ... 등 html 요소가 사용됩니다. 2] Node.appendChild : 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. var aChild = element.appendChild(aChild); 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킵니다. (문서에 존재하는 노드를 다른 곳으로 붙이기 전에 부모 노드로 부터 지워버릴 필요는 없습니..

DOM 을 이용한 객체에 이벤트 리스너를 달아서 동작시키기. 이전에 했던 것과 비슷해서 설명은 주석에 달아놨습니다.

이전에 한 Fetch API 의 경우 예시를 만들어서 보내고 받았습니다. 이번에는 실전에서 사용하고 있는 값들의 경우에 대해 공부해보았습니다 fetchdata의 경우 회사, 프로젝트에서 주어지는 API 명세를 보고 어떤 값을 전달해야하는지 파악후 형식에 맞춰서 작성해 줍니다. 위는 예시입니다. 해당값을 fetch 를 이용해서 작성해 보았습니다 Promise를 좀더 구체적으로 써서 resolve와 reject가 잘 보이게 하였고, fetch() 의 첫번째 인자로는 url을 이후에는 option을 전달하였습니다 일단 기본적으로 headers method body는 기본으로 들어가야 하며, headers 또한 api 명세에 따릅니다. 프로젝트에 맞춰 https://developer.mozilla.org/ko/..

DOM 용어] DOM -> document Object Model BOM - > Browser Object Model jQuery는 실무에서 가장많이 사용하는 자바스크립트 DOM 작업을 좀 더 쉽게 처리할 수 있또록 도와주는 라이브러리 웹 브라우저 관점] W3C DOM- 과 브라우저 DOM dom 은 정의부분과 구현부분으로 나누어진다. 정의부분은 W3C 에서 규칙,규약을 명시하는 문서 실제로 동작하는 구현 소스코드는 IE, Chrome, Firefox, Safari 업체가 구현한다. html 문서-> dom 객체가 된다 (Parsing 단계) -> DOM 객체를 가지고 브라우저는 화면을 만든다. 클래스의 인스턴스(객체) 를 만들게 되고 이를 개발자들이 접근해서 사용하게 된다. DOM - Node] htm..