'js' 카테고리 - 4 페이지. 웹개발 커뮤니티 블로그

js 자바스크립트 CommonJS, 모듈을 사용한 웹개발 컴포넌트 단위의 모듈을 개발하여 사용하기 위한 자바스크립트 방법으로 CommonJS가 많이 사용됩니다. CommonJS는 AMD와 함께 모듈화를 가능하게 합니다.각 모듈은 Scope, Definition, Usage의 세 가지로 구분되어 사용됩니다. 그럼 아래는 간단한 모듈 선언 및 사용의 예제입니다.<h4 data

View : 1339 / Created : 2017-07-05

js 자바스크립트 익명함수 알아보기 자바스크립트 익명함수(Javascript anonymous function)# 익명함수란?익명함수는 이름이 없는 함수를 말합니다. 함수형 프로그래밍에서는 이름이 없는 함수를 실행, 동작하는 것이 간단합니다. 아래에서 익명함수를 찾아보세요.<div tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off"

View : 2196 / Created : 2017-06-19

js 자바스크립트 객체의 프로퍼티 값을 비교할때 효과적인 방법은? 자바스크립트에서 객체의 프로퍼티 값을 비교할때 가장 효과적인 방법은 무엇일까요?# 자바스크립트 객체의 프로퍼티 값 비교 방법자바스크립트에서 객체의 프로퍼티 값을 비교할때 주의할 부분이 있습니다. 객체의 존재 여부와 프로퍼티 또는 메소드가 존재하느냐 .. 그리고 타입은 일치하느냐입니다. 다시 말하면 아래를 확인해야합니다. <u

View : 1925 / Created : 2017-06-16

js setTimeout() 사용시 delay가 정상 작동하지 않는 문제 자바스크립트에서 시간 지연 후 함수를 호출하기 위하여 setTimeout()을 사용한다. setTimeout()을 수행할 경우 원하는 시간만큼 지연한 뒤 콜백 함수를 호출할 수 있다. 이 경우 각각의 지연 시간이 동일하게 나타날 수도 있는데 뒤에는 이런 문제를 해결하기 위하여 알아보도록 한다.간단하게 1부터 10까지 더하는 예제를 만들어보자. 만약 1부터 10까지 더하는 함수를 만든다면 매우 쉽게 55를 얻을 수 있다

View : 2802 / Created : 2017-06-15

js 자바스크립트 생성자함수의 상속 알아보기 자바스크립트 역시 객체지향언어로 객체와 클래스라는 개념이 존재하고 이를 사용할 수 있습니다. 이때 기존 클래스, 객체가 가지는 프로퍼티와 메소드를 상속 받을 수 있죠.상속에 대한 이해는 매우 중요합니다. 상속은 간단하게 부모가 가진 유전적인 형질을 자손이 이어 받아 사용할 수 있다라고 얘기할 수 있습니다. 그럼 아래는 자바스크립트에서 생성자함수를 사용한 상속 방법에 대하여 알아봅니다.# 자바스크립트 생성자를 사용하여 상속하기</span

View : 845 / Created : 2017-06-12

js ECMAScript 5 및 5.1 알아보기 ECMASript 5 및 5.1은 ECMA-262의 표준화된 스크립트언어로 각각 2009년 4월, 2011년 6월에 공개되었습니다. 아래는 ES 5에 대하여 알아보겠습니다.! ES 5의 주요 특징ES5 의 주요 특징은 아래와 같습니다.- Strict 모드의 추가- 문법의 변화- 프로토타입 추가 및 얻기- 속성 추가, 옵션 얻기- 객체 조작관련 메

View : 700 / Created : 2017-06-12

js ES 6 화살표 함수(Arrow function) 정보 및 예제보기 ES6(ECMA Script 6)의 큰 특징 중 하나인 화살표 함수(Arrow functions)에 대하여 간략하게 알아봅니다.[참고] 화살표 함수?화살표 함수는 => 처럼 화살표 기호를 사용하여 함수를 만들 수 있는 방법으로 기존의 CoffeeScript의 문법에서 사용되던 함수 작성 문법입니다. # ES 6 화살표 함수의 특징<

View : 825 / Created : 2017-06-08

js 함수 오버로딩(Overloading)란 무엇이고 자바스크립트에서 차이점 웹개발에서 함수를 사용할때 배우게 되는 함수 오버로딩(Overloading)에 대하여 알아봅니다. 이 것은 무엇이고 자바 그리고 자바스크립트에서의 차이점은 무엇일까요?# 함수 오버로딩(Function overloading)먼저 함수 오버로딩에 대하여 알아보겠습니다. 함수 오버로딩

View : 823 / Created : 2017-06-07

js 자바스크립트 클로저를 알아보고 다양한 예제 알아보자 자바스크립트의 클로저(Closure)에 대하여 자세히 정리한 내용이 없는 것 같아 이번 포스팅을 기회로 클로저에 대한 설명과 예제를 모두 담아보려합니다.# 클로저(Closure)란?클로저에 대하여 가장 기본적인 정의는 다음과 같습니다."클로저는 내부함수로 외부함수의 스코프에 존재하는 변수와 파라미터에 접근

View : 2069 / Created : 2017-05-31

js 자바스크립트 타입 숫자로 바꾸는 다양한 방법 자바스크립트에서 타입을 숫자로 변경하는 방법은 매우 많습니다. 아래는 이런 방법들을 알아보려합니다.# parseInt() 사용하기자바스크립트의 순수 함수인 parseInt()를 사용하는 방법입니다.<div tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widge

View : 1096 / Created : 2017-05-26

js 자바스크립트 배열의 중간값을 삭제하는 방법 자바스크립트에서 배열을 삭제, 제거하는 방법에 대하여 알아보려합니다. 아래는 배열을 삭제하는데 자주 사용되는 splice() 메소드에 대하여 알아보고 간단한 실행 예제입니다.<img data-cke-saved-src="/static/uploads/2017/ef89_592bd0b8.jpg" src="/static/uploads/2017/ef89_592bd0b8.jpg" class="postImg" style="display: block; marg

View : 10014 / Created : 2017-05-17

js 자바스크립트 객체에서 일부값 삭제하는 방법 자바스크립트 객체가 가진 값, 프로퍼티 및 메소드를 제거하는 방법입니다.객체의 프로퍼티, 메소드를 제거하는 방법으로 delete 키워드를 사용합니다. delete를 사용하면 선택한 프로퍼티 또는 메소드를 쉽게 제거할 수 있습니다. 그럼 아래 예제를 봐주세요.# 객체 프로퍼티, 메소드 삭제하는 방법아래의 obj라는 객체가 존재하는 경우 속성값 no를

View : 9622 / Created : 2017-05-11

js 자바스크립트 객체를 문자열 string으로 변환하는 방법은? 자바스크립트의 객체 타입을 문자열 형태로 변환, 바꾸는 방법을 알아봅니다. 어떻게하면 객체를 string으로 변환할 수 있을까요?# 자바스크립트 객체를 문자 타입으로 바꾸는 방법만약 obj라는 객체가 다음과 같이 있다고 생각해봅니다.obj = { id: 0, name: 1}이때 위 값을 보이는 그대로 문자 타입으로만 바꾼다면<

View : 18886 / Created : 2017-05-11

js 자바스크립트 배열을 텍스트로 변환, 바꾸기 자바스크립트 배열을 텍스트로 변환, 바꾸는 방법에 대하여 알아봅니다.여러개의 값을 가지는 배열을 하나의 텍스트로 합치는 방법이 필요할 수 있습니다. 이 경우 어떻게 해야할까요? 자바스크립트는 이때 사용 가능한 내장함수 join()을 제공합니다. join()은 배열에 적용이 가능하며 기준이 되는 문자열을 추가하여 하나의 긴 텍스트로 변환해줍니다.# 자바스크립트 배열을 문자열로 변환하기, join()간단하게 예를들어 알

View : 8880 / Created : 2017-05-11

js CommonJS란 무엇이고 활용하는 방법 자바스크립트에서 사용되는 CommonJS에 대하여 간략하게 알아봅니다.@ CommonJS의 간략한 정보- 자바스크립트의 모듈화를 위한 프로젝트 중 하나 임- 2009년 ServerJS의 이름으로 시작해 다시 CommonJS로 이름이 변경됨- CommonJS를 구분하는 가장 쉬운 방법으로 require()와 module.exports를 사용하는 것으로 판단할 수 있음. (ECMA Script 모듈의 경우 import,

View : 1348 / Created : 2017-05-05

js 자바스크립트 Date() 객체에 날짜 설정하는 방법 자바스크립트에서 Date 내장객체에 날짜를 설정하는 방법을 알아보겠습니다. 아래의 방법처럼 오늘 날짜의 값을 변수 myDate에 저장하여 얻을 수 있습니다.var myDate = new Date();이제 위 변수를 사용하여 다양한 값을 가져오거나 설정할 수 있습니다. 만약 일자를 2일로 설정할 경우 아래

View : 7901 / Created : 2017-05-02

js 자바스크립트에서 DOM 메소드 parentNode, parentElement의 차이점은? 자바스크립트의 DOM 메소드 parentNode, parentElement의 차이점을 알아봅니다.먼저 이 둘의 차이점을 알아보는 이유는 이 둘이 거의 동일하게 동작하기 때문입니다. 둘 다 부모 요소에 접근해 엘리먼트를 리턴합니다. 이런 이유로 둘 중 어느 것이라도 사용할 수 있지만 차이점을 알아두면 더 좋겠죠.차이점을 알아보면 parentElement는 Element n

View : 923 / Created : 2017-04-28

js 자바스크립트에서 부모의 몇번째 자식에 해당하는 지 알아내는 방법 바로 위의 부모로부터 몇 번째 자식요소인지 자바스크립트를 사용하여 알아내는 방법입니다.function getIndex(selector) { var elem = document.querySelector(selector); for(var i = 0; i < elem.parentNode.childNodes.length; i++) { if (elem.parentNode.childNod

View : 2807 / Created : 2017-04-28

js 자바스크립트 스크롤과 관련된 이벤트 정보 자바스크립트에서 스크롤 이벤트를 구현하는 방법입니다.document.addEventListener('scroll', function() { ...});document 또는 window에 addEventListener를 사용해야 동작합니다. 스크롤 이벤트는 body 등에 바로 적용하면 동작하지 않을 수 있습니다.'wheel'document.addEventListener('w

View : 731 / Created : 2017-04-27

js if 또는 switch 조건문을 객체로 바꾸어 사용하는 방법 자바스크립트에서 조건문을 약식으로 표현하거나 one line 표기법 등 매우 유용한 방법들이 많습니다. 그런데 다른 방법도 존재하는데 바로 객체를 사용하는 방법입니다. 정확히는 객체의 프로퍼티를 사용합니다.# 조건문에서 if, switch 대신에 객체의 프로퍼티 사용하는 방법객체의 프로퍼티를 사용하면 분기문으로 사용하는 것이 가능합니

View : 1066 / Created : 2017-04-27

js 자바스크립트를 사용하여 숫자가 음수인지 양수인지 확인하는 방법은? 자바스크립트를 사용하여 숫자가 음수인지 양수인지 알려면 여떻게하면 될까요? 그리고 항상 양수만 또는 항상 음수만 얻는 방법도 알아봅니다.# 자바스크립트 양수, 음수 판단하기양수와 음수의 기준이 되는 0을 사용하여 그 여부를 판단할 수 있습니다. 즉 0보다 작으면 음수이

View : 1575 / Created : 2017-04-26

js hls.js에서 에러 이벤트(error handling)를 처리하는 방법은? hls.js를 사용하는 경우 발생하는 에러 이벤트를 처리, 핸들링 하기 위하여 아래와 같이 에러 이벤트를 등록할 수 있습니다.# HLS 에러 이벤트 처리 방법만약 생성한 인스턴스의 이름이 hlsVideo인 경우 아래와 같이 에러를 발생합니다.<div tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_

View : 6066 / Created : 2017-04-25

js Javascript에서 문자를 base64로 인코딩, 변환하는 방법은? 자바스크립트(Javascript)에서 문자를 base64로 인코딩, 변환하는 방법입니다. 먼저 base64로 인코딩하는 경우는 무엇이 있을까요?! 언제 base64로 인코딩하는가데이터베이스에 전송할 때 이미지인 경우 base64 타입을 요구하는 경우가 있을 수 있습니다. 보통 이미

View : 25465 / Created : 2017-04-25

js CKEDITOR를 사용하여 AJAX 데이터를 에디터에 추가하는 방법 CKEDITOR를 사용하여 AJAX로 불러온 데이터를 추가하는 방법입니다. 아래 방법이 유용한 이유는 CKEDITOR를 사용하여 다른 방법으로 텍스트를 추가할 경우 함께 추가된 img 및 태그 요소가 적용되지 않을 수 있습니다. 이 경우 아래 방법을 사용하면 모두 정상적으로 코드가 추가되게 됩니다. 그럼 아래 코드를 봐주세요.# CKEDITOR 에디터 html 코드 적용하는 예제소스<div tabindex="-1" contenteditable=

View : 4758 / Created : 2017-04-24

js 유용한 자바스크립트 변수의 네이밍 규칙은? 코드스타일과 관련된 질문입니다. 유용한 자바스크립트 변수의 네이밍 규칙은? 어떤게 있는지 간략하게 알아봅니다.! 자바스크립트 코드 스타일 알아보기자바스크립트에서 변수나 함수를 선언할 때 사용할 수 있는 유용한 네이밍, 코딩 스타일 가이드와 관련된 정보를 알아보려고 합니다.@ 선언시 카멜, 헝가리, 언더스코어 등의 표기법 사용하기의미가 있는 형

View : 1047 / Created : 2017-04-19

js 자바스크립트를 사용하여 이벤트 추가 및 제거하기 자바스크립트를 사용한 이벤트 사용에 대하여 알아보고자합니다. 먼저 자바스크립트에서 말하는 이벤트는 무엇일까요? 그리고 클릭 등의 이벤트를 어떻게 사용하는지 아주 간단한 예제를 만들어 같이 알아봅니다.# 자바스크립트 이벤트자바스크립트에는 정해진 동작 또는 계획에 의하여 이벤트를 발생시킬 수 있습니다. 이 이벤트는 미리 등록한 콜백함수를 호출하고 실행하게 되는데 자바스크립트에는 사용 가능한 다양한 <span data-cus

View : 7648 / Created : 2017-04-18

js [자바스크립트] resize 이벤트 연속해서 발생하지 않도록 하는 방법은? 자바스크립트의 이벤트 중 resize는 페이지 사이즈가 바뀌면 계속해서... 일반적으로 픽셀단위로 발생합니다. 만약 연속해서 발생하지 않도록 하는 방법은 무엇이 있을까요?가장 간단한 방법으로 clearTimeout을 활용하는 방법이 있습니다. 아래의 코드를 봐주세요.

View : 930 / Created : 2017-04-06

js 자바스크립트에서 스크롤을 화면 끝으로(마지막) 이동시키는 방법은? 만약 현재 브라우저 화면에서 스크롤 끝으로 이동하려면 어떻게할까요?브라우저 끝으로 이동하는 방법으로 scrollIntoView()를 사용할 수 있습니다. 이를 사용하려면 아래처럼 실행합니다.element.scrollIntoView(true or false)scrollIntoView는 특정 요소의 위치로 바로 이동시켜주는 자바스크립트 함수입니다.만약 문서의 가장 끝으로 이동하려면? body 요소를 기준으

View : 3368 / Created : 2017-04-06

js 자바스크립트 원하는 소수점까지만 계산하여 보여주는 방법은? 자바스크립트 원하는 소수점까지만 계산하여 보여주려먼 어떻게할까요? 아래에서 자세히 알아봅니다.# 자바스크립트 소숫점 단위 변경하기먼저 자바스크립트에서 소수점 단위를 원하는 값으로 바꾸는 방법으로 내장함수 .to

View : 1387 / Created : 2017-04-03

js 자바스크립트를 사용하여 특정 엘리먼트로 화면을 이동시키는 방법은? 자바스크립트를 사용하여 만약 특정한 영역 및 엘리먼트의 위치로 스크롤을 위치하려면 어떻게 해야할까요? 예를들어 회원가입을 원할 경우 입력폼이 보이는 곳으로 스크롤을 위치하는 방법이 필요합니다. 이때 가능한 방법은 아래처럼 세 가지를 생각해볼 수 있습니다.i. #id를 a 태그 링크로 사용(Anchor 사용방법)ii. focus() 이벤트를 사용하는 방법은iii. scrollIntoView() 메소드를 사용하는 방법은<span data-custom-style="ct

View : 23233 / Created : 2017-03-30

CATEGORIES

LATEST POSTs 최근 등록된 포스팅 목록