본문 바로가기
반응형

Language/JavaScript94

[JavaScript] arr.splice() - 배열 데이터 추가/제거/교체/추출 하기 Array.prototype.splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. 한마디로 splice() 메서드를 가지고 push/pop/unshift/shift 역할을 다 할 수 있다고 생각하면 된다. ▷ 구문 array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) start : 배열의 변경을 시작한 인덱스이다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정된다. (음수로 설정될 경우 배열의 끝에서부터 요소를 세어나가 array.length - n 번째 인덱스를 가르키며, 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정된다.) deleteCount : 배열에서 제거할.. 2020. 11. 5.
[JavaScript] arr.map() - 배열의 데이터들을 가공하여 새로운 배열을 만들어 사용하기 Array.prototype.map() 메서드는 기존 배열 데이터를 조건에 맞게 가공하여 새로운 배열을 만들어주는 메서드이다. 가장 많이 사용되는 배열 메서드들 중에 하나로 알아두면 좋다. ▷ 구문 arr.map(callback(currentValue[, index[, array]])[, thisArg]) callback : 새로운 배열 요소를 생성하는 함수 (세 가지 인수를 가진다.) currentValue : 처리할 현재 요소이다. index : 처리할 현재 요소의 인덱스를 의미한다. array : map() 메서드를 호출한 배열을 의미한다. thisArg: callback 함수를 실행할 때 this로 사용되는 값 ▷ 예제 1) Array.prototype.map() 기본 사용 방법 var arr =.. 2020. 10. 17.
[JavaScript] 배열, 객체 반복문 (ft. forEach 문 , for ~ in 문) - 배열 및 객체 반복문 사용- 배열과 객체의 반복문에 대해 알아보도록하자. 일반 for문을 사용할 순 있지만 제목에 나와있는것처럼 본문은 forEach문과 for~in문을 사용할 경우다. 1. 배열 반복문 (forEach) var targetArr = ['mine','it','record','tistory']; targetArr.forEach(function(item,index,arr){ console.log(item,index,arr[index]); }); forEach 구문에 대해 알아보자. forEach(function(item, index, arr){ ... }) for문과 다르게 forEach는 배열의 길이만큼 알아서 반복된다. 각각의 매개변수가 의미하는것은 다음과 같다. item : 배열의 .. 2020. 10. 13.
[JavaScript] 숫자를 문자로, 문자를 숫자로 변환하기 script를 사용하면서 숫자를 문자로 변환 또는 문자를 숫자로 변환하는 경우가 굉장히 많이 생긴다. 숫자를 문자로, 문자를 숫자로 변환하는 여러가지 방법에 대해 알아보자. 개인적으로 무조건 알아둬야 하는 방법이라 생각된다. 1. 숫자를 문자로 변환하는 방법 일반적으로 3가지 방법이 있는데, 아래와 같다. 1) 숫자로 된 변수 뒤에 더블쿼터 혹은 싱글쿼터를 붙이는 방법 2) String 함수를 사용하는 방법 3) toString 함수를 사용하는 방법 각각 어떤식으로 사용하는지 예제를 통해 확인해보자. ▷ 예제 1) 일반적인 3가지 방법을 이용하여 숫자를 문자로 변환하기 var num1 = 10000; var num2 = 50000; var num3 = 100000; var text1 = num1 + ''.. 2020. 8. 19.
[JavaScript] Uncaught Error: Syntax error, unrecognized expression: [value=] - Uncaught Error: Syntax error, unrecognized expression: [value=] 에러 - 개발을 하다 아래와 같은 에러가 발생하였다. jquery-3.2.1.min.js:2 Uncaught Error: Syntax error, unrecognized expression: [value=] at Function.ga.error (jquery-3.2.1.min.js:2) at ga.tokenize (jquery-3.2.1.min.js:2) at ga.select (jquery-3.2.1.min.js:2) at Function.ga [as find] (jquery-3.2.1.min.js:2) at r.fn.init.find (jquery-3.2.1.min.js:2) at n.. 2020. 6. 23.
[JavaScript] window.open 함수를 사용한 윈도우 팝업 창 띄우기 - window.open 함수를 사용한 팝업 창 띄우기 - 개발을 하다보면 꼭 한번쯤은 팝업창을 띄우기 마련인데 여기서도 많이들 갈리는게 윈도우 팝업을 띄워야만 하는 기능이 있고 레이어 팝업을 띄워야만 하는 기능이 존재한다. 사실 레이어 팝업 자체는 그냥 간단하게 태그와 css를 활용하여 만드는게 전부라 따로 정리해둘건 없고 이번 게시글에서는 window.open 함수에 대해 알아보고자 한다. 구문은 다음과 같다 var windowPop = window.open(url, windowName, [windowFeatures]); window.open 함수 매개변수의 역할에 대해 알아보자. ▷var windowPop 변수 (반환값) - 새로 만든 window popup 창의 객체이며 반환값이 없으면(윈도우를 .. 2020. 5. 5.
[JavaScript] URL 파라미터 값 가져오기 (feat. location.search / getParameterByName) - URL 파라미터 값 가져오기 - URL상에 보이는 파라미터나 location.href를 이용하여 이동할때 보내는 파라미터 값을 스크립트로 가져와서 사용해 보도록하자. 기본적으로 자바스크립트 내장 함수인 location.search를 이용하여 URL 물음표 뒤에 있는 파라미터들을 가져올 수 있다. 위와같이 파라미터 정보를 가져왔으니 이제 원하는 값을 뽑아와야하는데 여기저기 찾아보면 사람들이 잘 선언해둔 함수들이 존재한다. 역시 잘 만들어둔건 잘 사용해야 옳다고 생각된다. 코드를 통해 접근해보자. 1. 정규식 표현을 이용한 함수. function getParameterByName(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var.. 2020. 2. 21.
[JavaScript] CKEditor4 사용하기 2 (적용 및 이미지 업로드) - CKEditor4 적용 및 이미지 업로드 사용하기 - CKEditor를 사용하면서 이미지관련돼서 좀 헤맸는데 한번 알아보도록하자. 앞서 설치 및 다운로드까지 완료하여 불러오기까지 됐다면 태그를 가지고 바로 적용시켜보자. 이런식으로 선언해주면 아래와같은 화면이 나오며 바로 사용이 가능하다. 사실 여러 사용 방법이 있을수 있지만 나는 이 방법밖에 모른다. 이제 여기서 작성한 내용은 CKEditor가 제공해주는 메서드를 통해 저장하고 불러올 수 있지만 나같은 경우에는 그냥 에디터 모양만 빌려오고 내용은 따로 DB에 저장해두는 방향으로 하였다. 여기서 추가적으로 본문내용과 함께 이미지를 함께 실어서 저장하고싶다라고 한다면 구현이 필요하다. 위에서 작성한 코드를 약간 수정해주자. 이제 이미지를 저장할 imag.. 2020. 2. 17.
[JavaScript] CKEditor4 사용하기 1 (다운로드 및 설치) - CKEditor4 다운로드 및 설치하기 - CKEditor는 게시판을 만들때 다양한 기능이 내재되어 있는 라이브러리라고 생각하면된다. 많이 쓰이는지는 모르겠으나 의외로 많이들 알고 있는 에디터이다. 최신버전이 있겠지만 CKEditor4버전으로 사용해봤기 때문에 기록해두고자 한다. 우선 CKEditor 공식사이트로 들어가주자. https://ckeditor.com/ WYSIWYG HTML Editor | Collaborative Rich Text Editor | CKEditor Rock-solid, Free WYSIWYG Editor with Collaborative Editing, 200+ features, Full Documentation and Support. Trusted by 20k+ comp.. 2020. 2. 4.
반응형
TOP

티스토리툴바