⏰ 2024.11.29 (D+37)
1. JavaScript의 문자열 객체 생성
✅ 리터럴 표기법 : 문자열 리터럴을 직접 사용하여 생성
var str1 = "안녕 자바스크립트!";✅ String 생성자 함수 : new String()을 사용하여 문자열을 생성
: 이 방법은 문자열을 String 객체로 생성 및 typeof 연산자는 이를 object로 반환var str4 = new String('Hi JS!'); console.log(typeof str1, typeof str4); // string object console.log(str1 instanceof String); // false console.log(str4 instanceof String); // true
2. 문자열 인덱스 접근
🔔 문자열은 유사 배열 형태로 저장되어, 인덱스를 이용해 개별 문자를 추출 가능
console.log(str1[0]); // 첫 번째 문자 출력🔔 Array.from()을 사용하여 문자열을 배열로 변환하고, forEach로 순회 가능
Array.from(str1).forEach(function(item, index){ console.log('%d번째 요소:%s', index, item); });
3. 문자열 길이
📢 문자열의 길이는 length 속성으로 얻기
console.log('str1의 길이:', str1.length); // 10 console.log('str4의 길이:', str4.length); // 6
4. 문자열 꾸미기
💡 문자열 메서드를 사용해 문자열을 HTML 형식으로 꾸미기
document.write('<h2>함수로 텍스트 꾸미기</h2>'); document.write('볼드체(함수):', str1.bold()); document.write('<br/>이탤릭체(태그):<i>' + str1 + '</i>'); document.write('<br/>링크걸기(태그):<a href="https://www.nate.com">' + str1 + '</a>');
5. 대소문자 변경
📢 toUpperCase()와 toLowerCase() 메서드를 사용하여 대소문자를 변경
console.log('대문자로 변경:', str2.toUpperCase()); console.log('소문자로 변경:', str2.toLowerCase());
6. 문자열에서 특정 문자 또는 부분 추출
- charAt(): 특정 인덱스에 있는 문자를 추출
console.log(str3.charAt(3)); // 'J'
- substring(): 문자열의 시작 인덱스와 끝 인덱스를 지정하여 부분 문자열을 추출
console.log('ACADEMY'.substring(3, 7)); // 'DEMY'
- substr(): 시작 인덱스와 길이를 지정하여 부분 문자열을 추출
console.log('ACADEMY'.substr(3, 4)); // 'DEMY'
7. 문자의 아스키 코드값 및 변환
- charCodeAt(): 특정 인덱스에 있는 문자의 아스키 코드값을 반환
console.log('ACADEMY'.charCodeAt(3)); // 68 (D의 아스키 코드)
- fromCharCode(): 아스키 코드값을 문자로 변환
console.log(String.fromCharCode(68)); // 'D'
8. 구분자로 문자열 분리
- split() 메서드를 사용하여 문자열을 배열로 분리 가능
var tel = '010.1234.5678'; console.log(tel.split('.')); // ['010', '1234', '5678']
- 정규 표현식을 사용하여 구분자도 처리 가능
console.log(tel.split(/\./g)); // ['010', '1234', '5678']
9. 문자열 인덱스 찾기
- indexOf(): 찾고자 하는 문자열의 첫 번째 인덱스를 반환
console.log('ACADEMY'.indexOf('A')); // 0 console.log('ACADEMY'.indexOf('CAD')); // 1
- lastIndexOf(): 문자열에서 마지막으로 일치하는 인덱스를 반환
console.log('ACADEMY'.lastIndexOf('A')); // 2
10. 공백 제거
- trim() 메서드를 사용하여 문자열 양옆의 공백을 제거
console.log(' X '.trim()); // 'X'
11. 숫자형식 검사
- 문자열이 숫자 형식인지를 검사하는 함수를 작성
var isNumber = function(str){ for (var i = 0; i < str.length; i++) { if (!(str[i] >= '0' && str[i] <= '9')) return false; } return true; }; console.log(isNumber('12A')); // false console.log(isNumber('12')); // true
12. 이메일에서 도메인 추출
이메일 주소에서 @와 . 사이의 도메인 부분을 추출하는 정규 표현식을 사용 가능
var emails = ['kim@naver.com', 'park@cyworld.com', 'lee@nate.com']; emails.forEach(element => { console.log(element.match(/\w+@(\w+)\.\w+/)[1]); // 'naver', 'cyworld', 'nate' });
13. Math 객체
- Math 객체는 수학 관련 기능을 제공하는 내장 객체
console.log(Math); // Math 객체 전체 출력 console.log(Math.PI); // 원주율 PI 출력
14. Math 메서드 사용 예
- 여러 가지 Math 메서드를 사용하여 수학적인 계산을 수행 가능
✅ 절대값 (abs())
console.log(Math.abs(-10)); // 10✅ 지수 계산 (pow())
console.log(Math.pow(2, 3)); // 8✅ 반올림 (round())
console.log(Math.round(3.159)); // 3✅ 올림 (ceil())
console.log(Math.ceil(3.159)); // 4✅ 내림 (floor())
console.log(Math.floor(3.9)); // 3✅ 랜덤 값 생성 (random()) Math.random()
: 0과 1 사이의 난수를 생성예) 5에서 10 사이의 랜덤 숫자 생성 console.log(parseInt(Math.random() * 6) + 5); // 5~10 사이의 랜덤 숫자
15. 로또 번호 생성기
- 1부터 45까지의 숫자 중에서 중복 없이 6개의 랜덤 번호를 생성하는 기능을 구현한 코드
✅ setRandomNumber 함수
: 이 함수는 주어진 범위 내에서 중복 없이 랜덤 숫자를 배열에 채운다function setRandomNumber(random, start, end) { for (var i = 0; i < random.length; i++) { while (true) { var randomNumber = parseInt(Math.random() * (end - start + 1)) + start; var isDuplicated = false; for (var k = 0; k <= i - 1; k++) { if (randomNumber == random[k]) { isDuplicated = true; break; } } if (!isDuplicated) { random[i] = randomNumber; break; } } } }
- random 배열은 생성된 6개의 숫자를 저장하는 역할
- start와 end는 숫자 범위를 정의
- while문과 중복 확인을 통해 중복되지 않도록 숫자를 배열에 넣는다
✅ showLottoNumber 함수
버튼을 클릭했을 때 실행되는 함수로, 위에서 정의한 setRandomNumber 함수를 호출
로또 번호를 생성하고, 결과를 화면에 출력function showLottoNumber() { var spanNode = document.querySelector('#lotto'); var lotto = new Array(6); setRandomNumber(lotto, 1, 45); spanNode.textContent = lotto.join(' '); }
- lotto.join(' ')는 배열에 저장된 숫자들을 공백으로 구분하여 문자열로 변환하여 화면에 출력
16. HTML 구성
<fieldset>
<legend>로또 발생기</legend>
<button onclick="showLottoNumber();">로또 발생</button>
<span id='lotto' style='font-size:2em;color:red;font-weight:bold;'></span>
</fieldset>- button 클릭 시 showLottoNumber() 함수가 실행되어 랜덤으로 생성된 로또 번호를 화면에 표시
- span 태그 안에 번호가 출력
17. Date 객체 생성
- Date 객체는 JavaScript에서 날짜와 시간 데이터를 다루기 위해 사용
✅ 방법 1: 현재 날짜 및 시간 가져오기
var today = new Date(); console.log('%O, 타입:%s', today, typeof today);
- new Date()를 호출하면 현재 시스템의 날짜와 시간이 포함된 Date 객체가 생성
- typeof 연산자로 객체의 타입을 확인하면 object가 반환
✅ 방법 2: 특정 날짜와 시간 설정
var date2 = new Date(2002, 5, 22, 18, 10, 50); console.log('%s년 %s월 %s일 %s시 %s분 %s초', date2.getFullYear(), date2.getMonth() + 1, date2.getDate(), date2.getHours(), date2.getMinutes(), date2.getSeconds() );
- new Date(년, 월, 일, 시, 분, 초) 형식으로 특정 날짜와 시간을 설정 가능
- 주의: 월(month)은 0부터 시작합니다. 예를 들어, 5는 6월을 의미
18. 날짜 및 시간 수정
- setXXX() 메서드를 사용하면 기존 Date 객체의 값을 수정
date2.setMonth(6); // 월을 7월로 변경 date2.setDate(31); // 일을 31일로 변경 console.log('%s년 %s월 %s일 %s시 %s분 %s초', date2.getFullYear(), date2.getMonth() + 1, date2.getDate(), date2.getHours(), date2.getMinutes(), date2.getSeconds() );
19. 요일 구하기
- getDay() 메서드는 요일을 숫자로 반환
- 0: 일요일, 1: 월요일, ..., 6: 토요일
switch (date2.getDay()) { case 0: console.log('일요일'); break; case 1: console.log('월요일'); break; case 2: console.log('화요일'); break; case 3: console.log('수요일'); break; case 4: console.log('목요일'); break; case 5: console.log('금요일'); break; default: console.log('토요일'); }
20. 두 날짜 사이의 차이 구하기
- getTime() 메서드는 1970년 1월 1일 00:00:00 UTC부터 현재 날짜까지의 시간을 밀리초 단위로 반환
var endDate = new Date('2025-4-17'); // 수료일 var sTime = today.getTime(); // 현재 시간 var eTime = endDate.getTime(); // 수료일 시간 var diffDays = Math.ceil(Math.abs(eTime - sTime) / (1000 * 60 * 60 * 24)); console.log('수료일까지 남은 일수:', diffDays);
- 두 시간의 차이를 계산하고 하루(밀리초 단위)를 나누어 일 수를 구하기
21. 유용한 메서드
✅ Date.now()
: 현재 시간(1970년 1월 1일부터의 밀리초)을 반환console.log(Date.now()); // 예: 1732763714285✅ Date.parse()
: 날짜 문자열을 파싱하여 밀리초 값으로 변환console.log(Date.parse('1970-1-1')); // -32400000 console.log(Date.parse('1970-1-1') + 9 * 60 * 60 * 1000); // 0 (KST 보정)✅ 밀리초 값을 Date 객체로 변환
var temp = new Date(); temp.setTime(Date.now()); // 현재 시간 설정 console.log(temp);
