언더스코어JS 객체 합치기 _.extend() 함수 사용법_.extend()를 사용하여 여러 객체를 합칠 수 있습니다.target 객체에 obj1, obj2 ... 여러 개의 객체의 속성을 덮어씌워 합칩니다. 두 번째 인자부터는 하나의 객체만을 합치거나 가변인자로 여러 개의 객체를 넘겨 합칠 수 있습니다._.extend(target, obj1, obj2, ...)target 객체에 속성을 덮어 씌우는 형태입니다. a 객체와 b 객체를 선언한 후 extend() 함수를 사용하면 a에 b의 속성인 age가 추가됩니다.var a = { name : "kim", hobby : "movie"}var b = { age : 3};_.extend(a, b);console.log(a);cons..
JavaScript
2019. 12. 17. 00:30
[jQuery] 제이쿼리 $.each() 함수에서 break문 continue문 사용하는 방법
[이전글] [jQuery] 제이쿼리 $.each() 함수 100% 활용하기! jQuery $.each() 함수에서 break 문 continue문 사용하는 방법초보 개발자가 제이쿼리의 $.each() 함수를 사용하면서 가장 간과하는 부분이 $.each()가 함수가 아닌 반복문이라고 생각하는 부분입니다. 이글을 보고 계신다면 break와 continue문이 가장 가까이 있는 반복문을 중지하거나 현재 반복회차를 건너 뛰는 키워드라는것을 알고 계실겁니다.그러나 $.each() 함수는 반복문이 아닌 단순히 배열이나 객체를 순회하면서 그때마다 callback을 실행시켜주는 함수일뿐 반복문이 아니기 때문에 break와 continue문이 먹히지 않습니다.다음 코드를 보도록 하죠. 보기 편하도록 배열과 callbac..
JavaScript
2019. 7. 27. 16:27
[JavaScript] 자바스크립트로 form 태그의 input 검증(validation) 후에 수동으로 submit 처리하기
자바스크립트로 form 태그의 input 검증(validation) 후에 수동으로 submit 처리하기기본적으로 태그를 사용하여 입력한 데이터를 웹서버로 전송할때 태그의 type="submit"을 통해 전송버튼을 만들어 사용합니다.input submit의 경우 form 안에 있는 모든 input의 value를 전송하게 되는데, 이경우 각 input에 값이 입력되었는지 등의 여부를 검증(validation)할 수 없습니다.따라서 이 경우 으로 버튼을 하나 만들고 onClick 이벤트를 직접 핸들링하여, 버튼을 클릭했을 때 각 입력값을 검증한 후 수동으로 submit 처리 해주어야 합니다.예제다음은 form의 입력값을 검증하고 수동으로 submit 처리하는 예제입니다. git링크 ..
JavaScript
2019. 6. 5. 22:54
[JavaScript] 자바스크립트의 자료형(Data Type)
자바스크립트(JavaScript)의 자료형어떤 언어를 공부하든 기초로 자료형을 공부하게 됩니다. 자바스크립트는 조금은 특이한 자료형들을 가지고 있습니다. 자바스크립트에는 다음과 같은 자료형들이 있습니다.자바스크립트는 기본데이터 타입인 boolean, number, string과 null, undefined가 있고 이들을 제외하고는 모든 값들이 객체입니다. 자바스크립트에서의 null과 undefined는 그 자체로 값을 가지고 있습니다.그러나 boolean, number, string은 객체처럼 다루는 것이 가능하기 때문에 null과 undefined를 제외하면 모든 값들을 객체로 다룰 수 있습니다.추가적으로 말하자면 자바스크립트는 굉장히 유연한 언어입니다. 조금만 잘못해도 컴파일시 수많은 오류를 내뿜는 ..
JavaScript
2019. 6. 3. 14:09
[JavaScript] JavaScript란? 자바스크립트 언어 설명 및 탄생배경 및 특징
자바스크립트(JavaScript)란? 자바스크립트는 왜 'Java' 스크립트가 되었나?자바스크립트는 인터프리터 기반의 언어로서 브라우저에 내장된 자바스크립트 엔진(인터프리터) 위에서 동작하는 동적 타입 언어입니다.자바스크립트는 원래 모카라는 이름을 가진 언어로 넷스케이프사의 브랜든 아이크에 의해 개발되었습니다. 그러다가 라이브 스크립트라는 이름으로 바뀐 후 넷스케이프와 Java를 개발한 썬마이크로시스템즈가 함께 마케팅 조약을 체결하면서 자바스크립트로 이름이 바뀌었습니다. 당시에 잘나가던 Java를 앞에 붙여줌으로써 자바스크립트를 많이 알릴 수 있게 된 것이죠.두 언어의 이름에 둘 다 Java가 들어가지만 실제 언어의 패러다임이나 추구하는 바는 엄청난 차이가 있습니다. 흔히들 인도와 인도네시아만큼 다르다고..
JavaScript
2018. 7. 3. 00:13
[jQuery] DOM 생성 및 추가하기
jQuery DOM 생성 및 추가하기jQuery는 매우 간단하게 DOM 객체를 생성할 수 있으며, 원하는 위치에 생성한 DOM 요소를 추가할 수 있도록 다양한 메서드를 지원하고 있습니다.DOM 객체 생성하기jQuery에서는 $(DOM 문자열) 형식만으로도 DOM 객체를 생성할 수 있습니다.$('domTest>');추가적인 별다른 조작 없이 DOM 객체가 생성됩니다. 다만 생성한 DOM 객체를 문서 요소들 사이에 끼워넣지 않은 상태입니다. 제대로 생성되었는지 콘솔에 찍어 확인해봅니다.DOM 객체가 생성되었고 이미 문서에 생성되어 있는 DOM 객와 다름없이 text() 메서드 또한 사용 가능한것을 볼 수 있습니다.DOM객체 원하는 위치에 추가하기DOM 객체를 생성한 후에는 원하는 위치에 추가해주어 사용자 입..
JavaScript
2018. 7. 2. 15:03
[jQuery] html() 와 appendTo()로 추가했을때의 차이점
html() 와 appendTo()로 추가했을때의 차iv점DOM 요소를 특정 위치에 추가할때 html() 메서드와 appendTo() 메서드의 차이점은 무엇일까요? html() 메서드는 innerHTML에 값을 대입(set) 해준다는 점이고, appendTo() 메서드는 기존 값에 추가 해준다는 점 입니다. 다음과 같이 각각 메서드를 두 번씩 실행했을때의 차이점이 무엇일까요? 단 문서의 body 태그는 비어있는 상태입니다.메서드 실행 전 body 요소의 상태appendTo()를 두 번 실행했을 때$('domTest').appendTo('body');$('domTest').appendTo('body');html()를 두 번 실행했을 때$('body').html('domTest');$('body').html..
JavaScript
2018. 7. 1. 00:40
[jQuery] jQuery 필터 메서드 사용법
이전글[jQuery] jQuery 선택자(Selector) 필터 총정리jQuery 필터 메서드이전글에서는 jQuery에서 사용하는 선택자 문법 및 필터 구문을 알아보았습니다. 예를 들어 두 번째 td를 선택할때에는 0부터 시작하는 index를 기준으로 :eq(1)을 선택자 필터로 사용하여 얻어올 수 있습니다.$('td:eq(1)');그런데 필터구문은 선택자로도 제공되지만 jQuery의 메서드로도 제공되고 있습니다. 위의 구문은 eq(indext) 메서드로 다음과 같이 바꾸어 사용이 가능합니다.$('td').eq(1); //선택한 td 요소들 중 1번 index 요소 (즉 두번째 요소);이뿐만 아니라 jQuery 셀렉터 문법과 대응되는 기능의 다양한 메서드들을 제공하고 있습니다.filter() 메서드fil..
JavaScript
2018. 6. 27. 05:30
[Underscore.js] 언더스코어 JS 템플릿 엔진 사용하기
언더스코어 JS(Underscore.JS) 템플릿 엔진 사용하기Underscore.JS(이하 언더스코어)는 자바스크립트 유틸리티(여러 가지 편의를 도와주는) 라이브러리입니다. 언더스코어라는 이름이 의미하는 바와 같이 언더스코어는 모든 함수들을 _를 사용합니다. jQuery가 $를 사용하는 것과 같습니다.언더스코어는 여러 가지 다양한 유틸성 함수들을 제공하기 때문에 수많은 자바스크립트 프로젝트에서 사용 중이며, 프로젝트 이외에도 여러 자바스크립트 프레임워크나 라이브러리에서 자체적으로 언더스코어를 기본으로 사용하기도 합니다.그 중 언더스코어에 있는 기능 중 하나인 템플릿 엔진 기능을 사용해 보도록 하겠습니다. 언더스코어에는 Java 진영의 JSP와 같은 스크립트 템플릿 방식의 엔진을 제공합니다. 템플릿을 텍..
JavaScript
2018. 6. 27. 01:00
[jQuery] DOM 요소 제거하기 - remove(), empty() 메서드
jQuery DOM 요소 제거하기다음과 같이 body가 구성되어 있을때 span 요소를 제거하기 위한 방법으로 두 가지가 있습니다. remove() 메서드를 사용하거나 empty() 메서드는 사용하는 방법입니다.remove() 메서드사용법은 $(selector).remove() 이며, selector 에 해당하는 DOM 요소를 제거합니다.span 요소가 통째로 제거됩니다.empty() 메서드사용법은 $(selector).empty() 이며, selector 에 해당하는 DOM 요소의 내용을 (제거)비웁니다.따라서 셀렉터로 잡은 span 요소가 아닌 그 내부(하위)의 요소들이 제거됩니다.text() 또는 html() 메서드로 제거하기DOM 요소의 textContent 속성과 innerHTML 을 제어하는 ..
