어제 오늘 내일

Javascript에서 사용할 수 있는 메시지 박스 3종류 alert confirm prompt 1. alert function handleOnClick() { alert('Hello!!'); } alert()은 사용자가 확인 버튼을 누를때까지 메세지를 보여주는 창입니다. 2. confirm function handleOnClick() { let like = confirm("좋아요 눌러주실거죠?"); document.getElementById('result').innerText = like; } confirm()은 사용자에게 메세지를 보여주고, [확인/취소] 중 둘 중 하나를 선택하도록 합니다. confirm()은 사용자가 [확인]을 선택하면 true를 리턴하고, [취소]를 선택하면 false를 리턴합니..

2개 이상의 객체를 합쳐서 하나의 객체로 만드는 방법 4가지를 소개합니다. 반복문 사용하기 Object.assign() Spread Operator (전개연산자) _.merge() (lodash 라이브러리) 1. 반복문 사용하기 const obj1 = { name : 'banana', price : 1000 }; const obj2 = { name : 'banana', price : 2000, count : 10 }; // merge object 함수 function mergeObj(obj1, obj2) { const newObj = {}; for (let att in obj1) { newObj[att] = obj1[att]; } for(let att in obj2) { newObj[att] = obj2..

Javascript에서 URL에 포함된 파라미터(쿼리스트링)의 값을 읽어오는 방법입니다. 현재 페이지의 URL과 파라미터 읽기 특정 파라미터 값 읽기 특정 파라미터가 있는지 체크하기 파라미터 추가, 변경, 삭제하기 전체 파라미터 목록 가져오기 1. 현재 페이지의 URL과 파라미터 읽기 현재 페이지의 URL을 가져오는 방법과 쿼리스트링을 가져오는 방법은 지난 포스팅에서 소개했습니다. [Javascript] 현재 페이지 URL 가져오기 간단하게 다시 정리하면 현재 페이지의 URL을 가져오기 위해서는 아래와 같이 하고, // "https://hianna.tistory.com/325?category=764998" window.location.href 전체 URL중 쿼리스트링(파라미터)만 가져오고 싶은 경우에는 ..

Javascript에서 현재 페이지의 URL 주소를 가져오는 방법을 소개합니다. window.location (Location 객체) 현재 페이지의 URL을 알아오기 위해 window.location 속성을 사용할 수 있습니다. window.location 속성에 접근하면 Location 객체에 접근할 수 있는데 이 Location 객체의 속성들을 사용해서 현재 페이지의 URL 정보를 알아낼 수 있습니다. // "https://hianna.tistory.com/325?category=764998" window.location.href // "https:" window.location.protocol // "hianna.tistory.com" window.location.host // "hianna.tis..

Javascript에서 값이 정수인지 실수인지 체크하는 2가지 방법을 소개합니다. Number.isInteger() 함수 나머지 연산자(%) 활용 1. Number.isInteger() 함수 document.writeln(Number.isInteger(10)); // true document.writeln(Number.isInteger(0)); // true document.writeln(Number.isInteger(-10)); // true document.writeln(Number.isInteger(123.1)); // false Number.inInteger() 함수는 파라미터로 입력받은 값이 정수인지 판단합니다. 가장 간단하게, 데이터가 정수인지 판단할 수 있는 방법입니다. 하지만, 이 함수는 ..

Javascript에서 빈 객체를 체크하는 방법입니다. Object.keys() 함수 반복문 사용하기 lodash library 사용하기 1. Object.keys() 함수 function isEmptyObj(obj) { if(obj.constructor === Object && Object.keys(obj).length === 0) { return true; } return false; } const obj1 = {}; const obj2 = {name: 'js'}; const str = "Javascript"; document.writeln(isEmptyObj(obj1)); // true document.writeln(isEmptyObj(obj2)); // false document.writeln(i..

Javascript에서 특정 객체가 배열인지, 그리고 그것이 배열이라면 빈 배열인지 확인하는 방법입니다. 빈 배열 체크하기 const arr1 = []; const arr2 = [1, 2]; const obj = {}; const str = ""; function isEmptyArr(arr) { if(Array.isArray(arr) && arr.length === 0) { return true; } return false; } document.writeln(isEmptyArr(arr1)); // true document.writeln(isEmptyArr(arr2)); // false document.writeln(isEmptyArr(obj)); // false document.writeln(isEmpt..

Javascript의 문자열에서 줄바꿈을 표현하는 2가지 방법을 소개합니다. escape 문자 사용하기 템플릿 리터럴(Template literals) 사용하기 1. escape 문자 사용하기 const str = 'a\nb\nc\n'; document.getElementById("result").innerHTML=str; 문자열에 New Line을 뜻하는 '\n' 이스케이프 문자를 넣어주면 줄바꿈됩니다. 2. 템플릿 리터럴(Template literals) 사용하기 const str =`a b c`; document.getElementById("result").innerHTML=str; 문자열 안에 escape문자인 '\n'을 사용하면, 가독성이 떨어지는 단점이 있습니다. 문자열을 정의할 때 따옴표( ..

배열에 있는 값들이 몇번이나 중복 되는지 찾는 방법을 소개합니다. forEach() 이용하기 reduce() 이용하기 Map 객체 이용하기 1. forEach() 이용하기 const arr = ['a', 'b', 'a', 'b', 'c']; const result = {}; arr.forEach((x) => { result[x] = (result[x] || 0)+1; }); document.write(JSON.stringify(result)); const arr = ['a', 'b', 'a', 'b', 'c']; 중복되는 값을 가지는 배열이 있습니다. const result = {}; 중복된 값의 갯수를 저장하기 위한 Object를 선언하였습니다. arr.forEach(callback함수); 배열(arr..

for문을 이용하여 테이블 생성하기 for 반복문을 이용해서 테이블을 동적으로 생성하는 예제입니다. const rowCnt = 5; const columnCnt = 2; document.write(''); for (let i = 0; i < rowCnt; i++) { document.write(''); for (let j = 0; j < columnCnt; j++) { document.write(''); document.write(i + ", " + j); document.write(''); } document.write('') } document.write(''); 테이블은 아래와 같이 가장 바깥을 태그로 감싸고, 하나의 row를 표현하는 태그, 그리고 그 안의 데이터를 표현하는 태그로 작성할 수 있습..