chocoboy

간단하다. Method 일반적으로 다음과 같이 쓰는데, 이유는 여기에 적혀있다. 모든 코드는 위에서 아래로 순차적으로 발동되는 성질이 있는데, Jquery 같은 경우에는 `${document}.ready()` 를 통해서 JavaScript 같은 경우에는 document.addEventListener("DOMContentLoaded", function() 이것을 통해서 HTML이 발동하고나서 js가 발동하도록 하는 의미이다. 여기에 적혀있다. HTML이 모두 Loaded가 될 때 까지 기다리고 시작하겠다는 명령이다. To be continue..

자그마치 3시간 걸렸다. 아 ... 하다보니 이렇게 시간이 많이 흘렀다. 그래도 오늘은 새로 구매한 키보드로 타이핑하니까 기분이 매우~~ 조다~ 역시 집에서는 녹축을 쓰는게 좋지 않나....ㅎㅎ.. 그럼 바로 들어가보자 Method 이번엔 아무것도 알지 못하는 사람이 보았을 때도 쉽게 따라 할 수 있게 만들어 보겠따. 일단 파일 구조를 다음과 같이 잡아준다. 이제 코드를 짜줄것이다. index.jsp 설명을 읽어보면 되겠다. geo.js 이렇게 되면 Loading 페이지가 작동되었다가 0.6초 뒤에 display = 'none' 가 되어버리니 로딩 페이지가 로드가 된 뒤 자동으로 사라지는 역할을 하게된다. 이렇게 있다가 다음 로딩이 떳다가 사라지게 된다. 예제 코드는 아래 남겨두겠다. index.jsp ..

시간이 많이 없으므로 진짜 간략한 모달창을 만들었음으로.. 더 멋있는 모달창을 만들고 싶으신분은... 창의적으로 더 만들어보시길 권장합니다...ㅎㅎ.. Method 일단 모달 스타일은 다음 처럼 잡았습니다. .jsp에는 뭐 따로 추가 해준것은 없습니다. js const modalButton = document.createElement('button'); const modalContent = document.createElement('ul'); modalButton.innerHTML = '회원가입'; modalContent.innerHTML += ` 정말로 회원가입 하시겠습니까? `; modalContent.style.display = 'none'; const openModal = () => { modal..

내가 자바에서 사용 했을 때는 string 와 integer 를 전환 해줄 때 사용했던 것 같은데 자바스크립트에서도 비슷하게 사용 되는 것 같다. Method 그래서 valueOf 를 통해서 산술 연산자로 바꾸어 주어야한다. obj가 산술연산이 가능해져서 x가 15값이 나오는 것을 확인 할 수 있다. 그치만 이러한 방법으로 더 간단하게 뽑아 볼 수도 있다. 그럼 20000 To be continue..

entires() 를 사용하는 이유는 object에 담긴 데이터들을 간혹 볼 수 있다. object [ name : james, age : 29 ] 다음 처럼 데이터가 담긴 경우를 Array [ "name ", "james" ] Array [ "age", "29" ] 그냥 배열처리를 해줄 수 있기 때문에 entries() 를 사용한다. Method 자 그럼 이걸 entires() 로 씌워보자 이렇게 되면 간단하게 배열 처리로 필요한 데이터 들을 가져 올 수 있다. example 지금까지 entires() 사용하는 이유와 어떻게 사용하는지 알아보았다. 그럼 20000 To be continue..

자바스크립트 forEach() 사용방법에 대해서 바로 들어가보자. Method 간단하게 사용하면 이런 의미이다. 객체안에 담긴 데이터를 모두 뽑아낸다. 다음을 직접 디버그 찍어서 정말 그렇게 나오는지 확인 해 보겠다. 다음을 보면 확실히 forEach 의 기능이 다음과 같이 Object 형식으로 키/값 키/값 이런식으로 나오는것을 확인 할 수 있다. 즉, 너의 모든 데이터를 끄집어 낼게 이럴 때 사용하는게 좋은 것 같다. 하지만 사용하다보면 가공된 ? 즉, 내가 갖고싶은 데이터만 가져오게 할 수도 있다. 다시 forEach 앞으로 돌아가보자. 그렇기 때문에 apiClass 를 디버그 찍어놓으면 다음과 같이 배열을 따져 해당된 데이터를 가져오게 된다. 즉, api["설치"] 애 해당된 데이터를 forEac..

클릭 이벤트를 직접 주는 방법을 설명하고자 한다. onClick(); Method 일반적으로 addEventListener를 많이 사용해서 함수를 호출 하는 경우도 많지만 굳이 그렇게 사용하지 않고 직접적으로 호출 할 수 있다. 다음처럼 버튼 안에다가 onClick="함수명()" 이렇게 선언해주면 자동으로 자바스크립트 내의 함수를 호출 시킨다. 정말 잘 작동 되는것을 확인 할 수 있다. 개발자 모드에 들어가서 확인해보면 당연하게 함수를 잘 호출 하고 있다. 그리고 input 에도 사용 할 수 있다. To be continue..

자바스크립트를 중간에 멈추게 만들고 싶으면 console.stop(); 다음 이벤트를 사용하면 된다. Method 다음처럼 아래에 새로 만들어질 요소들이 있는데, console.stop(); 을 만나게 되면 아래로 넘어가지 않고 멈추지게 된다. 이제 여기서 진짜 콘솔스탑이 들어오게 되면 다음과 같이 작동을 하게되고 바로 끝나게 되는 프로세스가 나타난다. 그러면 다음과 같이 버튼이 하나 없어진것을 확인 할 수 있다. To be continue..

바로 들어가자 Method 간략하게 설명을 해보자면 contains 란 녀석은... 맞으면 실행, 틀리면 실행하지마 이런 역할을 하는 속성을 지녔다. contains contains 의 경우 삼항연산자를 굳이 사용하지 않아도 된다. 다음 처럼 if 문을 사용하여도 상관은 없다. on이 없으니까 innerHTML 에서 off 를 띄우고 on이 생기니까 참 값이니 on이 생긴다. To be continue..

일단 classList 가 무엇인지 알아야겠다. Method classList의 특성은 읽기 기능의 특성이라고 보면된다. 사용가능한 속성으로는 add, remove, toggle 이 세가지가 있다. add는 class 를 추가 하는것 remove는 class 제거 하는 것 toggle은 추가 제거 하는 것. add 사용법은 간단하다. 다음 적어 놓을 부분을 유심히 보면 되겠다. 저렇게 사용하면 개발자 모드본 결과 newButton.classList.add(); 로 인해 class 안에 class1, class22, class55 요소가 생성 된 것을 확인 할 수 있다. revmove는 간단해서 생략하겠다. toogle 토글 기능은 말 그래도 추가 하였다가, 제거 하도록 하는 기능이다. this.class..