반응형 Programing/JavaScript12 [JavaScript] 배열에서 조건에 맞는 값만 추출하기! filter 함수 사용법 배열에서 특정 조건에 해당하는 값만 추출하고 싶을 때 filter 함수를 이용하면 조건에 충족하는 값만 추출할 수 있습니다. 사용방법이 그렇게 어렵지 않기 때문에 간단하게 사용할 수 있습니다. 예시를 몇가지를 들어서 사용방법에 대해서 알아보도록 하겠습니다. filter 함수 var arrays = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]; arrays = arrays.filter(function(val, idx) { console.log(val); // 결과 : 1, 3, 5, 7, 9, 11, 13, 15 17, 19 배열안의 값 console.log(idx); // 결과 : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 배열의 순번 return val; // 리턴 }); .. 2022. 9. 27. [JavaScript] 문자열 구분자로 자르기 split 특정 문자열을 기준으로 값을 구분 할 때가 있습니다. 구분자가 있다면 javascript에서는 특정 구분자를 이용하여 문자를 잘라 배열 형태로 받을 수 있습니다. javacript의 split 함수를 이용하면 되는데, 간단하하게 이용하는 방법에 대해서 알아보도록 하겠습니다. 구분자로 문자열 자르기 var animals = '강아지;사자;고양이;말;기린'; // 동물 목록 console.log(animals) // 결과 '강아지;사자;고양이;말;기린' var animal = animals.split(';'); // 동물들 구분자인 ;(세미콜론)으로 split console.log(animal) // 결과 ['강아지', '사자', '고양이', '말', '기린'] console.log(animal.length.. 2022. 9. 23. [JavaScript] 변수 타입 확인 방법 typeof JavaScript의 변수들의 타입을 확인이 필요할 때가 있습니다. 타입을 체크하여 특정 타입만 활용할 때 필요할 수 있습니다. JavaScript의 기본 함수로 간단하게 체크가 가능합니다. 사용 예제를 통해 간단하게 사용방법에 대해서 알아보도록 하겠습니다. 변수의 타입 확인하기 var typeA = [1, 2, 3]; var typeB = 123; var typeC = '123'; // typeof 함수로 변수의 타입 체크 console.log(typeA); // 결과 'object' console.log(typeB); // 결과 'number' console.log(typeC); // 결과 'string' // type 활용 예제 if (typeof(typeA) == 'object') { consol.. 2022. 9. 23. [JavaScript] 세자리 콤마 정규식으로 처리하기 숫자로 된 부분을 화폐로 표시하기 위해 일반적으로 3자리 마다 콤마를 표기해줘야 할 때가 있습니다. JavaScript의 정규식을 이용하면 간단하게 처리가 가능합니다. 간단하기 때문에 바로 확인 해보겠습니다. 정규식으로 세자리 숫자마다 콤마 var number = 10000000; // number 변수에 숫자 입력 console.log(number); // 결과 10000000 number = number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); // 정규식으로 변환 console.log(number); // 결과 10,000,000 위의 예제와 같이 일반적인 숫자를 정규식으로 변환하면 3자리 숫자마다 ,(콤마)를 입력하여 화폐 단위처럼 변한 것을 확인할.. 2022. 9. 23. [JavaScript] 시간 지연 함수과 시간 반복 함수 setTimeout, setInterval Javascript에서는 특정 시간이 지난 후 이벤트가 호출되도록하는 함수와 특정 시간마다 반복이 되게하는 함수가 있습니다. 이벤트를 반복하거나 일정시간을 지연하고 실행해야 되는경우가 간혹 생기는데 이런 경우 사용할 수 있습니다. 각 함수는 setTimeout과 setInterval입니다. 해당 함수를 사용하는 방법에 대해서 간단하게 알아보도록 하겠습니다. 시간 지연 함수 setTimeout setTimeout(function() { // setTimeout 함수 console.log(1); // 실행 할 이벤트 }, 5000); // 5000ms -> 5초 // 5초 뒤 // 결과 1 setTimeout 함수는 일정 시간을 지연한 뒤 함수 안에 있는 이벤트를 실행하는 함수입니다. 위의 예제와 같이 사용.. 2022. 9. 23. [JavaScript] 삼항연산자란? 삼항연산자 조건문 사용방법 Javascript에서는 조건문 중에 삼항연산자라는 조건문이 존재합니다. 여러 조건문(If, Swich Case 등..) 이 있지만 삼항연산자에 대해서 간단히 알아보도록 하겠습니다. 삼항연산자의 형태는 아래와 같습니다. 조건 ? 참 : 거짓 굉장히 간단하며 소스 예제를 통해서 보겠습니다. var count = 1; // count에 1이라는 숫자 입력 console.log(count); // 출력 : 1 count = count == 1 ? '맞음' : '틀림'; // 삼항연산자로 비교, 조건 ? 참 : 거짓 console.log(count); // 출력 : 맞음 상단과 같이 조건에 맞으면 첫번째 값이 호출되며, 조건에 맞지 않으면 두번째 값이 호출되는 것을 확인할 수 있습니다. 삼항연산자는 if els.. 2022. 9. 20. [JavaScript] 숫자, 문자 배열 간단하게 정렬하는 방법 Sort 자바스크립트의 배열에서 숫자나 문자를 가지고 있는 변수들이 있는데 순서가 뒤죽박죽일때, 정렬이 필요할 때가 있습니다. 간단하게 sort 함수를 이용하여 정렬을 할 수 있는데요. 간단하게 이 함수를 이용하여 정렬하는 방법에 대해서 알아보겠습니다. 상단의 예제와 같이 순서가 없이 숫자로 이루어진 배열(Array)이 존재합니다. 콘솔을 이용하여 출력해보면 입력 되어있는 순서대로 출력이 되는 것을 확인할 수 있습니다. 숫자 배열 정렬 방법 숫자로 되어있는 배열을 정렬하는 방법은 상단의 화면과 같습니다. 사용 방법은 [변수].sort(function(a, b) { return a - b; } ); 위와 같이 실행하면 정렬된 숫자들이 변수 array에 입력되어 출력되는 것을 확인할 수 있습니다. 숫자 배열 역순 정.. 2021. 8. 2. [JavaScript] 문자열 대문자 소문자 변환 하기 toUpperCase(), toLowerCase() 변수를 대문자나 소문자로 변환하는 방법은 아주 간단하기 때문에 바로 적용이 가능하고 확인하실 수 있습니다. 문자열 변환에 사용되는 함수 사용방법은 소문자 -> 대문자 "문자열".toUpperCase() 대문자 -> 소문자 "문자열".toLowerCase() 기억하면 됩니다. 아래에 예시를 통해 간단히 확인만 해보도록 하겠습니다. 변수 s에 입력된 소문자 "abcd"를 대문자로 변환하는 예시입니다. toUpperCase()를 이용하여 문자열이 모두 대문자로 출력되는 것을 상단의 출력 결과를 통하여 확인할 수 있습니다. 이번에는 반대로 변수 l에 입력된 대문자 "ABCD"를 소문자로 변환하는 예시입니다. toLowerCase()를 이용하여 모두 소문자로 변환되어 출력되는 것을 확인할 수 있습니다. 마지막으로.. 2020. 7. 27. [JavaScript] 특정 문자 또는 문자열 포함 여부 및 위치 찾기 indexOf() 스크립트의 변수에서 특정 문자나 문자열이 포함되었는지 확인하기 위해 자주 사용되는 방법인 indexOf의 사용방법에 대해 알아보겠습니다. indexOf는 해당 문자에 대한 위치의 값을 반환하고 일치하지 않을 때에 -1의 값을 반환합니다. 간단하게 사용방법을 통하여 알아보도록 하겠습니다. 변수 하나를 선언하여 "ABCD"라는 문자열을 입력했습니다. 이 변수에 특정 문자가 포함되어있는지 확인해보겠습니다. indexOf의 기본 사용 형태는 "문자열".indexOf("찾을 문자열"); 입니다. 위의 예시에서는 val 변수에 "B"라는 문자가 포함되어있는지 확인하는 예시입니다. "B"라는 문자가 포함되어있고 "ABCD"의 1번째 위치(0번 부터 시작)를 반환하여 1을 출력하는 것을 확인할 수 있습니다. 이번에는 .. 2020. 7. 27. [JavaScript/자바스크립트] Switch Case 문 예제로 배워보기 이번 포스팅에서는 자바스크립트의 제어문 중 하나인 Switch(스위치)문에 대해서 알아보겠습니다. Switch문도 일반적인 제어문과 같이 조건에 따라 실행하거나 실행하지 않는 제어문이며, 간단하게 사용할 수 있습니다. 기본형태는 아래와 같다고 할 수 있습니다. switch(값) { case 값1: 행위1; break; case 값2: 행위2; break; default: 행위3; break; } Switch 안에 값을 입력받고 그 안에서 Case 구문을 입력하여 Case에 맞는 값이 들어왔을 때 조건이 실행되는 구조입니다. Switch / Case / Default / Break 4가지의 구문입니다. 설명으로 하는 것보다 예제를 통하여 보도록 하겠습니다. 상단의 예제화면입니다. testSW라는 함수를 하.. 2020. 5. 2. JavaScript에서 Base64 Encode Decode 방법과 예제로 확인하기 Base64를 이용한 암호화를 할 때가 있는데 JavaScript에서도 간단히 사용할 수 있습니다. 바로 아래는 한글이 아닌 값을 base64로 암호화하거나 복호화 하는 방법입니다. /* 암호화 Encode */ btoa('12345'); // MTIzNDU= /* 복호화 Decode */ atob('MTIzNDU='); // 12345 한글을 포함한 경우에는 정상적으로 변환이 되지 않기때문에 encodeURI를 이용하여 데이터를 한번 감싸서 변환하셔야 합니다. 한글 데이터는 아래와 같이 암·복호화를 하시면 되겠습니다. /* 암호화 Encode */ btoa(encodeURIComponent('한글')); // JUVEJTk1JTlDJUVBJUI4JTgw /* 복호화 Decode */ decodeURIC.. 2019. 12. 9. 자바스크립트 alert(경고창), confirm(선택창), prompt(입력창) 사용 방법 인터넷을 사용하다 보면 간혹 알림이나 경고의 메시지를 나타내는 작은 창을 접하신 적이있으실텐데, 자바스크립트를 이용하여 사용자들에게 무엇인가를 알려야 될 때 자주 사용하는기능입니다. 알림을 나타내는 스크립트는 alert , confirm , prompt 가 존재합니다.상단의 스크립트 모두 사용자들에게 텍스트를 출력해주는 스크립트지만 조금씩 기능이달라서 상황에 맞게 필요한 스크립트를 이용하면 됩니다.사용법이 간단하고 자바스크립트의 기본이지만, 많이 사용되는 스크립트이기 때문에이번 포스팅으로 알고가시게 되면 많은 도움이 되실거라 생각됩니다. JavaScript alert, confirm, prompt 사용 방법 alert(경고창) 사용 방법 alert을 호출하는 기본 스크립트 구성입니다. html을 호출하면.. 2018. 12. 16. 이전 1 다음 반응형
