'JavaScript' 카테고리의 글 목록

# JavaScript (40)

JavaScript 2020. 2. 12. 22:59

[Underscore.js] 언더스코어 배열 관련 함수 정리

UnderscoreJS 배열 관련 함수 정리언더스코어JS의 배열 관련 함수를 정리해 보았습니다.언더스코어의 함수들은 함수적인 스타일과 객체지향형 스타일 두 가지로 사용이 가능합니다._.first([5, 4, 3, 2, 1]) 또는_([5, 4, 3, 2, 1]).first() 둘 다 사용 가능참고 URLhttps://underscorejs.org/_.first(array)배열의 첫 번째 요소를 리턴합니다._.first([5, 4, 3, 2, 1]);=> 5_.initial(array)배열의 마지막 요소를 제외 후 리턴합니다._.initial([5, 4, 3, 2, 1]);=> [5, 4, 3, 2]_.last(array)배열의 마지막 요소를 리턴합니다._.last([5, 4, 3, 2, 1]);=> 1_..

JavaScript 2019. 12. 17. 23:10

[Underscore.js] 언더스코어JS 객체 합치기 _.extend() 함수 사용법

언더스코어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문이 먹히지 않습니다.다음 코드를 보도록 하죠. 보기 편하도록 배열과 callback ..

JavaScript 2019. 12. 16. 21:23

[jQuery] 제이쿼리 $.each() 함수 100% 활용하기!

jQuery $.each() 함수 100% 활용하기!jQuery의 $.each() 함수는 배열의 요소나 Map 또는 객체의 속성을 반복할 수 있도록 하는 함수입니다. 개인적으로 매우매우 자주 사용하는 함수이기도 합니다. jQuery뿐만 아니라 underscoreJS같은 자바스크립트 유틸리티 라이브러리들에도 쉽게 볼 수 있는 함수(사용법은 라이브러리마다 다를 수있음)입니다.기본적인 javascript의 for문과의 차이점이라면 for문에는 조건식에 배열의 length만큼의 범위 지정을 해주어야 하고 증감식을 매번 써주어야 하는데에 반해 each()는 이러한 조건을 써주지 않아도 되기 때문에 코드를 더 보기 편하고 배열 뿐만 아니라 DOM 객체나 일반 객체 등에도 사용이 가능하다는 점이 있습니다.$.each..

JavaScript 2019. 11. 29. 09:00

[JavaScript] button 태그에서 a 태그처럼 href 설정하여 링크 이동하기

자바스크립트로 button 태그를 a태그처럼 사용하여 링크 이동하기 태그가 아닌 태그를 a태그처럼 사용하여 경로를 이동하고 싶은 경우 두 가지 방법을 사용해볼 수 있습니다. 기본 객체인 location 객체의 href 속성을 onclick 이벤트 시에 원하는 경로로 수정하는 방식으로 버튼에 직접 설정하는 방식입니다.이동전체적인 코드이동등록버튼을 누르면주소창 경로가 바뀜과 동시에 해당 경로로 이동합니다. local에서 서버 없이 테스트 했기 때문에 파일경로로 인식하였지만 정상적인 웹 환경에서는 제대로 동작합니다.

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를 앞에 붙여줌으로써 자바스크립트를 많이 알릴 수 있게 된것이죠.두 언어의 이름에 둘 다 자바가 들어가지만 실제 언어의 패러다임이나 추구하는바는 엄청난 차이가 있습니다. 흔히들 인도와 인도네시아만큼 다르다고 하는데, 실제로..

JavaScript 2018. 12. 17. 22:21

[jQuery] data-xx 속성을 추가해주는 data()함수에 대해

참고글[jQuery] jQuery DOM 요소에 속성 추가, 수정 및 제거하기[자바스크립트] 데이터 속성(data-xxx)에 대해jQuery data-xx 속성을 추가해주는 data()함수에 대해HTML5는 개발자가 DOM 객체에 데이터를 저장해두기 위해 속성을 아무렇게나 정의해서 사용하지 않도록 data-xxx와 같이 data-로 시작하는 속성을 사용하도록 권고합니다. 예를 들어 태그에 사용자의 나이를 저장해두기 위해 age 속성을 넣어두고 싶은 경우 이 아닌 과 같이 사용하도록 권고하는 것입니다. data() 함수 사용이에 따라서 jQuery에서도 HTML5 표준에 맞춰 data- 속성을 쉽게 다룰 수 있도록 data(key, value) 함수를 지원하고 있습니다. data() 함수는 key와 ..

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 객체를 생성한 후에는 원하는 위치에 추가해주어 사용자 ..

1 2 3 4

도로락