Front/JavaScript29 [꿀정보] JavaScript (JS) 소스코드 들여쓰기 쉽게 정리하기 [꿀정보] JavaScript (JS) 소스코드 들여쓰기 쉽게 정리하기 소스코드 들여쓰기를 맞출 때, 전체 Select를 하고 [Ctrl + Shift + f] 를 누르면 자동으로 맞춰주는데, js 파일이나 가끔 들여쓰기가 스페이스바로 세팅되어있거나 어떤 이유로 단축키가 안먹는 경우가 있다. 이런 경우 js 코드를 beautiful 하게 정리해주는 사이트가 있다. Online JavaScript beautifier beautifier.io 엉망진창인 코드를 넣으면 이쁘게 정리해준다! Front/JavaScript 2021. 2. 26. [Javascript] Array.prototype.every( ) - 배열의 반복메서드 : break 문 활용하고 싶다? [Javascript] Array.prototype.every( ) - 배열의 반복메서드 : break문 활용하고 싶다? 자바스크립트 배열에서 제공하는 반복 메서드 forEach, some, every - every를 한 번 살펴보자. 보통 반복문을 사용할 때는 forEach를 사용하는데, 원하는 요소를 찾은 뒤 더 이상 for문을 돌고 싶지 않은 경우 break문 을 사용하려 해 본 적이 있을 것이다. forEach 에서는 break 를 제공하지 않을 뿐더러 break 문과 같은 코드를 구현하려면 try - catch를 사용하는 등 코드의 길이도 구조도 복잡해진다. 이 때 사용하기 좋은 every 메서드를 살펴보자 Array.prototype.every() callback 함수가 false를 반환하는 .. Front/JavaScript 2021. 2. 9. [Javascript + CSS3] 화면 스크롤 내릴 때, 이미지 객체 FadeIn 효과 표출 간단하게 구현하기 [Javascript + CSS3] 페이지의 이미지 객체 FadeIn 애니메이션 효과로 표출 간단하게 구현하기 1. CSS3 /*화면에 표출되기 전*/ .animatable { visibility: hidden; animation-play-state: paused; } /*화면에 표출된 후*/ .animated { animation-name: fadeInUp; visibility: visible; animation-fill-mode: both; animation-duration: 2s; animation-play_state:running; } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; tr.. Front/JavaScript 2020. 10. 26. [Javascript] 순수 자바스크립트 영역 캡쳐 후 이미지로 저장하기 [Javascript] 순수 자바스크립트 영역 캡쳐 후 이미지로 저장하기 - CSS screenshot.css /* 캡쳐 시 배경 어둡게 */ #screenshot_background { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; display: block; opacity: 0.3; text-align: center; box-sizing: border-box; z-index: 2147483647; border-color: black; border-style: solid; } /* 캡쳐 영역만 밝게 하기 위한 요소 */ #screenshot:before, #screenshot:after { border: none !important;.. Front/JavaScript 2020. 9. 2. [JavaScript] 자바스크립트 변수(var/let/const) 선언 방식의 차이 [JavaScript] 자바스크립트 변수(var/let/const) 선언 방식의 차이 구분 var let const 공통점 변수를 선언하는 방식, 어떤 변수타입이든 선언 가능 차이점 재할당 가능 재할당 가능 재할당 불가능 재선언 가능 재선언 불가능 재선언 불가능 function-level-scoped block-level-scoped block-level-scoped 이들의 차이점을 이해하기 위해 예제로 살펴보자. 1. 선언과 할당 ▶ var - 자바스크립트 가장 많이 사용하는 변수 선언 방식 중 하나인 var는 변수 선언 시 할당되는 값이 유동적으로 변경될 수 있다. var color = "RED"; console.log(color);// output : RED var color = "BLUE"; co.. Front/JavaScript 2020. 8. 12. [JavaScript] 자바스크립트 빈 객체 확인하는 방법 [JavaScript] 자바스크립트 빈 객체 확인하는 방법 자바스크립트에서 빈 객체를 확인할 때, 다음과 같은 조건문을 사용해왔다면 이 글을 꼭 참고하라구요! // typeof obj === 'Object' if(obj == null){ console.log('빈 객체!') } if(obj == {}){ console.log('빈 객체!') } if(obj == ''){ console.log('빈 객체!') } 이렇게하면 빈 객체라 하더라도 절대 원하는 조건문의 코드를 완성할 수 없다. Array(배열) 같은 경우는 length라는 속성이 있기 때문에 length 값으로 확인할 수 있지만, Object(객체)는 어떻게 확인할까? 바로 Object.keys 속성을 활용하면 된다. var obj = { 'a.. Front/JavaScript 2020. 6. 20. [JavaScript] addEventListener callback Function이 즉시 실행된다 ? [JavaScript] addEventListener callback Function이 즉시 실행된다 ? EventTarget의 addEventListener() 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다. target.addEventListener(type, listener[, options]) 보통 이벤트를 등록할 때 일반적으로 다음과 같이 작성한다. document.getElementById('btn01').addEventListener('click', function(){ console.log('hello~'); }); document.getElementById('btn02').addEventListener('click', function(){ console.log('h.. Front/JavaScript 2020. 2. 25. [JSP 오류] The JSP specification requires that an attribute name is preceded by whitespace [JSP 오류] The JSP specification requires that an attribute name is preceded by whitespace 오류 로그 심각: Servlet.service() for servlet jsp threw exception org.apache.jasper.JasperException: /WEB-INF/jsp/road/management.jsp (line: 1, column: 84) The JSP specification requires that an attribute name is preceded by whitespace Jsp 페이지 헤더에 다음 코드처럼 UTF-8"과 pageEncoding 띄어쓰기를 하지 않았을 때의 오류이다. 해결 방법 Front/JavaScript 2020. 2. 21. [Native JS] jQuery 없이 순수 자바스크립트로 클래스 제어하기 (classList) [Native JS] jQuery 없이 순수 자바스크립트로 클래스 제어하기 (classList) jQuery class 제어 소스 $('#ele').addClass('on'); $('#ele').addClass('on normal'); $('#ele').removeClass('on'); $('#ele').removeClass('on normal'); $('#ele').hasClass('on'); $('#ele').hasClass('on normal'); $('#ele').toggleClass('on'); javascript class 제어 소스 var ele = document.getElementById('ele'); ele.classList.add('on'); ele.classList.add('on',.. Front/JavaScript 2020. 2. 17. [JavaScript] Closure 클로저 응용하기(Feat. Naver Map Api 마커 이벤트 리스너 등록) [JavaScript] Closure 클로저 응용하기(Feat. Daum 지도 Api, Naver 지도 Api 이벤트 등록) 평소 Daum Map api 서비스를 이용하다가 처음으로 Naver Map api 서비스를 사용하게 되었다. 1. 사건의 전말 : Daum Map api 마커 클릭 이벤트 등록 과정 - 여러 개의 마커를 반복문으로 올리면서 동시에 해당 마커에 대한 인포윈도우 등록을 하는데 그 때 마커 클릭 시 해당 인포윈도우창이 열리도록 이벤트를 등록한다. 코드는 다음과 같다 for(var i in markerObj){ kakao.maps.event.addListener(markerObj[i], 'click', function(){ openInfoWindow(this.key);// openInfo.. Front/JavaScript 2020. 1. 8. [Error] 이클립스 JavaScript "Invalid Regular Expression Options" 빨간 줄 없애기 [Error] 이클립스 JavaScript "Invalid Regular Expression Options" 빨간 줄 없애기 에러로그 : Syntax error on token "Invalid Regular Expression Options", no accurate correction available 위 에러 문구는 이클립스 자체의 javascript validator에 의해서 표시되는 것으로 설정을 해제할 수 있다. 프로젝트 구현 자체에는 이상은 없었지만 에러 표시가 나는 것이 계속 눈에 보였다. 프로젝트 속성(Properties) - Builders 항목에서 JavaScript Validator를 해제하고 Applay and Close 하면 된다. Front/JavaScript 2019. 12. 30. [JavaScript] 자바스크립트 함수 호출 방법2 :내가 원하는 객체를 this로? [JavaScript] 자바스크립트 함수 호출 방법2 :내가 원하는 객체를 this로? 자바스크립트에서 가장 자주 쓰이는 함수 호출 방법에 관한 게시물을 먼저 보고 오자 [JavaScript] 자바스크립트 this , 이해 쏙쏙~! [JavaScript] 자바스크립트 this , 이해 쏙쏙~! this는 함수 내에서 함수 호출 맥락(context)를 의미한다. 즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. 먼저 함수를 호출하.. haenny.tistory.com 이번 게시물에서는 Function의 prototype인 call, apply 메소드를 이용한 함수 호출 방법에 대해 알아보도록 하자. Function.prototype.call 함수 call 메소드는 다른 객.. Front/JavaScript 2019. 12. 26. 이전 1 2 3 다음 추천 글 728x90 반응형