어제 오늘 내일

지난번에는 jQuery를 이용하여 div의 높이와 너비를 읽어오는 방법을 알아보았습니다. [jQuery] div 높이 너비 구하기 (height(), width()) div의 높이, 너비 변경하기 div의 높이와 너비를 구할 때와 마찬가지로 다음 두 함수를 사용할 수 있습니다. height() width() 위 두 함수를 사용하면 픽셀 단위로 요소의 높이, 너비를 지정할 수 있습니다. Hello #myDiv { background-color: yellow; } $('#myDiv').height(200); $('#myDiv').width(200); $('#myDiv').height(200); $('#myDiv').width(200); height()와 width() 함수의 파라미터로 div의 높이와 너비를..

지난번에는 div 안에 text를 추가하는 방법을 알아보았습니다. [jQuery] div 안의 텍스트 변경 text(), html() 이번에는 div 안의 텍스트를 읽어오는 방법입니다. text() 텍스트를 추가할 때와 마찬가지로 텍스트를 읽어올 때도, text() 메소드를 사용할 수 있습니다. 이번에는 파라미터를 전달하지 않고 호출합니다. Hello // Hello const value = $('#myDiv').text(); document.write(" 읽어온 값 : " + value) $('#myDiv').text() id가 myDiv인 div를 선택하고, text() 메소드를 사용하여 div의 텍스트를 읽어옵니다.

jQuery를 이용해서 특정 class를 가지는 요소 갯수를 구하는 방법입니다. 클래스 선택자 / length const my2cnt = $('.my2').length; // 2 document.write(my2cnt); $('.my2').length $('.my2') 클래스 선택자를 이용하여 my2 클래스를 가지는 요소들을 선택합니다. length length 속성을 사용하여 위에서 선택된 요소가 몇개인지 얻어냅니다. 위 예제에서 my2 클래스를 가지는 요소는 2개입니다.

hasClass() jQuery의 hasClass() 메소드를 이용하여 특정 클래스가 존재하는지 확인할 수 있습니다. 예제 .my1 { background-color: yellow; } const hasMy1 = $('#myDiv').hasClass('my1'); // true const hasMy2 = $('#myDiv').hasClass('my2'); // true const hasMy3 = $('#myDiv').hasClass('my3'); // false const hasMy12 = $('#myDiv').hasClass('my1 my2'); // true const hasMy21 = $('#myDiv').hasClass('my2 my1'); // false const hasMy23 = $('#my..

Javascript의 숫자 앞 또는 뒤에 0을 추가하여 특정 자릿수의 문자열을 만드는 방법입니다. padStart(), padEnd() str.padStart(문자열길이 [, 채울문자]) str.padEnd(문자열길이 [, 채울문자]) padStart(), padEnd()는 문자열을 특정 길이로 패딩 하는 데 사용하는 메소드입니다. 이름에서도 알 수 있듯이, padStart()는 문자열의 앞에 '채울 문자'를 넣어서 원하는 길이의 문자열을 만들고, padEnd()는 문자열의 뒤에 '채울문자'를 넣어서 원하는 길이의 문자열을 만듭니다. const num = 1; // 00001 const str1 = num.toString().padStart(5, '0'); // 10000 const str2 = num...

Javascript 함수의 파라미터 기본값을 설정하면 함수를 호출할 때, 파라미터가 전달되지 않으면 설정된 기본값을 사용합니다. 함수 파라미터 기본값 설정하기 function sayhi(greeting='Hi', name='Anna') { document.write(`${greeting}, ${name} `) } sayhi(); // Hi, Anna sayhi("안녕"); // 안녕, Anna sayhi(undefined, "Angela"); // Hi, Angela sayhi("안녕하세요", "영수님"); // 안녕하세요, 영수님 위 예제에서 sayhi() 함수는 greeting과 name, 2개의 파라미터를 입력받습니다. 그리고, 각각의 파라미터의 기본값은 'Hi', 'Anna'로 설정되었습니다. s..

Javascript 문자열의 왼쪽에 붙은 0을 제거하기 위해 다음의 2가지 방법을 사용할 수 있습니다. replace 함수 숫자 변환 parseInt() Number() *, + 를 이용한 숫자 변환 1. replace() 정규식을 이용하여, 문자열의 앞에 있는 '0'을 제거합니다. const num = "00123".replace(/^0+/, ''); replace() 함수는, 정규식에 해당하는 부분(첫번째 파라미터)을, 두 번째 파라미터로 입력받은 문자열로 치환합니다. 정규식 /^0+/ ^ : 문자열의 시작을 의미합니다. 0+ : 0이 1번 이상 반복되는 것을 나타냅니다. 따라서, 이 정규식은 문자열의 시작에서 0이 1개 이상 나타나는 부분을 찾습니다. const str1= '00123'; const..

max(), min() _.max(array) 배열에서 최대값을 구합니다. 배열이 비어있거나 falsy값이 전달되면 undefined를 리턴합니다. _.min(array) 배열에서 최소값을 구합니다. 배열이 비어있거나 falsy값이 전달되면 undefined를 리턴합니다. 예제 1 const arr = [1, 0, -1, 5, -1]; // 최소값 const min = _.min(arr); // -1 // 최대값 const max = _.max(arr); // 5 document.write(min); document.write(' '); document.write(max); lodash의 max(), min() 함수를 이용하여 배열의 최대값과 최소값을 구했습니다. 예제 2 const arr = [1, 0..

Math.floor() 함수 원단위의 금액을 절사하기 위해서는 Math.floor()라는 함수를 사용합니다. Math.floor() 소수점 이하를 버림하는 함수입니다. [Javascript] 반올림(round), 올림(ceil), 내림(floor) - 소수점, 음수,자리수 지정 [Javascript] 반올림(round), 올림(ceil), 내림(floor) - 소수점, 음수,자리수 지정 올림(Math.ceil()) Math.ceil() 함수 정수 올림 (음수 포함) 자릿수 지정 내림(Math.floor()) Math.floor() 함수 정수 내림 (음수 포함) 자릿수 지정 반올림(Math.round()) Math.round() 함수 정수 반올림 (음수 포함) 자 hianna.tistory.com 예제 c..

Object에 특정 이름의 key가 존재하는지 확인하기 위한 방법입니다. in 연산자 hasOwnProperty() 1. in 연산자 객체에 특정 키가 존재하는지 체크하기 위해서, in 연산자를 사용할 수 있습니다. 객체에 특정키가 존재하면 true를 리턴하고, 존재하지 않으면 false를 리턴합니다. const obj = { name: 'anna', age: 20 }; document.write('name' in obj); // true document.write(' '); document.write('address' in obj); // false 2. hasOwnProperty() hasOwnProperty() 메소드를 이용할 수도 있습니다. 마찬가지로, 객체에 특정키가 존재하면 true를 리턴하고..