어제 오늘 내일

이번 포스팅에서는 Javascript에서 숫자를 배열로 바꾸는 2가지 방법을 소개합니다. Array.from() split(), map() 1. Array.from() Array.from(arrayLike[, mapFn[, thisArg]]) Array.from() 함수는 유사배열객체(array like object)나 반복가능한객체(iterable object)를 얕은 복사(shallow-copy)하여 새로운 Array 객체를 만들어서 리턴합니다. 파라미터 arrayLike 필수 입력값 배열로 변환하고자 하는 객체(array like object 또는 iterable object)를 입력합니다. mapFn 배열의 요소(element)들에 호출할 맵핑 함수. thisArg mapFn 내에서 this로 사..

Javascript에서 Number()와 parseInt()는 문자열을 숫자로 변환할 때 주로 사용됩니다. 이번에는 두 함수의 차이점을 정리해보도록 하겠습니다. Number() Number 객체는 숫자를 표현하는 wrapper 객체입니다. Number 객체는 Java나 C#에서의 double과 비슷합니다. 즉, Number 객체는 소수점 이하 17자리를 표현할 수 있습니다. Number()는 Number 객체의 Constructor로, Number 객체를 생성합니다. parseInt() parseInt()에 대한 설명은 이전의 포스팅을 참조하세요. [Javascript] 문자열 숫자로 변환하기 (1) - parseInt() 지난번에는 문자열이 숫자인지 아닌지 체크하는 방법을 알아보았습니다. [Javasc..

이번 포스팅에서는 사용자가 체크박스를 선택했을 때, 텍스트 박스를 활성화하고 체크박스 선택을 해제했을 때, 텍스트 박스를 비활성화 하는 방법을 정리해보도록 하겠습니다. 체크박스 선택 시, 텍스트박스 활성화/비활성화 하기 다음 예제는 아래와 같이 동작합니다. 체크박스 선택 했을 때 텍스트 박스 활성화 텍스트 박스에 포커스 체크박스 선택해제 했을 때 텍스트 박스 비활성화 텍스트 박스 입력값 초기화 기타 의견 입력 function toggleTextbox(checkbox) { // 1. 텍스트 박스 element 찾기 const textbox_elem = document.getElementById('my_text'); // 2-1. 체크박스 선택여부 체크 // 2-2. 체크박스 선택여부에 따라 텍스트박스 활성..

체크박스는 2개의 상태를 가집니다. checked unchecked 이번 포스팅에서는 체크박스의 상태를 확인하는 예제를 정리해보았습니다. 체크박스의 체크여부 확인하기 체크하세요 function is_checked() { // 1. checkbox element를 찾습니다. const checkbox = document.getElementById('my_checkbox'); // 2. checked 속성을 체크합니다. const is_checked = checkbox.checked; // 3. 결과를 출력합니다. document.getElementById('result').innerText = is_checked; } checkbox가 선택되었는지 확인하기 위해서 checkbox element를 선택하고,..

이번에는 CSS를 사용하여 버튼(element)을 숨기는 방법과 사용자 이벤트가 발생하였을 때 Javascript를 사용하여 버튼을 숨기고 다시 보일수 있는 방법(토글)을 정리하였습니다. [CSS] 버튼 숨기기 display : none; visibility : hidden; [Javascript] 버튼 숨기기, 보이기 (토글) display 속성 visibility 속성 1. [CSS] 버튼 숨기기 display : none; #btn2 { display : none; } 위 예제에는 원래 3개의 버튼이 존재 합니다. (버튼1, 버튼2, 버튼3) display: none; display 속성값을 none으로 설정하면 해당 버튼은 화면에서 사라지고, 더 이상 화면에서 공간을 차지하지 않게 됩니다. 이 예..

localStorage는 세션이 변경되어도 데이터 정보가 그대로 유지됩니다. 이번에는 localStorage 데이터에 만료 시간을 설정하고, 일정 시간이 지나면, 데이터를 이용할 수 없도록 하는 방법을 알아보도록 하겠습니다. Step1. 데이터 저장 시 만료일자 설정하기 // 만료 시간과 함께 데이터를 저장 function setItemWithExpireTime(keyName, keyValue, tts) { // localStorage에 저장할 객체 const obj = { value : keyValue, expire : Date.now() + tts } // 객체를 JSON 문자열로 변환 const objString = JSON.stringify(obj); // setItem window.localSt..

이번에는 localStorage 사용법을 정리해보았습니다. localStorage란? localStorage에 아이템 추가, 읽기 localStorage에 객체, 배열 저장하기 localStorage에 값 삭제하기 localStorage에 값 전체 삭제하기 localStorage의 아이템 갯수 구하기 localStorage의 key 이름 찾기 전체 key, value 가져오기 localStorage란? localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있습니다. 저장한 데이터는 세션간에 공유됩니다. 즉, 세션이 바뀌어도 저장한 데이터가 유지됩니다. 그럼 이제부터 localStorage를 사용하는 방법을 알아보겠습니다. setItem() - key, value..

이번에는 Javascript를 사용하여 사용자가 버튼 클릭시 특정 노드를 복사하고, 그 노드를 복사하는 방법을 정리하였습니다. cloneNode() Javascript에서 노드를 복사할 때는 cloneNode() 라는 함수를 사용합니다. node.cloneNode(); node.cloneNode(deep); 파라미터 deep : optional. true/false 값을 넣어준다. 해당 노드의 자식 노드까지 복사하려면 true 해당 노드만 복사하려면 false 리턴값 cloneNode 복사한 새로운 노드를 리턴한다. 노드 복사하기 - cloneNode() 만나서 반가워요 .red-border { border : 1px solid red; height : 1em; } function copyDiv() { ..

Javascript에서 함수를 주기적으로 반복적으로 실행하고 종료하기 위해서는 다음의 함수를 사용합니다. setInterval() clearInterval() setInterval() setInterval() 함수는, 일정시간 주기로, 반복적으로 함수나 코드를 수행하는 함수입니다. 이 함수는 다음의 매개변수를 입력 받습니다. function : 주기적, 반복적으로 실행할 함수 delay millisecond (optional) : 시간 간격 (밀리세컨드 단위), 1초=1000밀리세컨드 function parameters (optional) : 첫번째 파라미터의 함수에 전달할 파라미터를 나열합니다. ex) param1, param2, param3.... 이 함수는 다음 값을 리턴합니다. intervalID..

Javascript에서 정의한 Object를 그대로 출력하면 아래와 같이 [object Object] 값이 출력됩니다. const obj = { x : 'x', y : 'y', z : { z1: 'z1' } }; document.write(obj); JSON.stringify() 함수 사용하기 만약, 객체(Object)의 값을 출력하고 싶으면, JSON.stringify() 함수를 사용하여 객체를 JSON 문자열로 변환해 주어야 합니다. JSON.stringify() 함수에 대한 자세한 설명은 지난 포스팅을 참조하세요. [Javascript] 객체를 JSON으로 변환하기 [Javascript] 객체를 JSON으로 변환하기 Javascript에서 사용하는 객체(Object)를 네트워크를 통해 전송하려면 어..