030_자바스크립트 문자열에서 문자 다루기 (문자열에서 문자 추출하기) [적용] 지정한 위치의 문자를 추출하고 싶을 때 [문법] 메소드 의미 반환 문자열.charAt([인덱스]*) 지정한 인덱스의 문자를 추출 문자 * 인덱스는 생략 가능하다 [내용] 문자열에서 원하는 부분만을 추출할 때 사용한다. charAt()는 지정한 인덱스 위치의 문자를 반환한다. JavaScript 'JavaScript'.charAt(3); // a 'JavaScript'.charAt(); // J(인수 생략 시 기본값은 인덱스 0의 위치) [예시] 검색창에 입력한 글자와 일치하는 검색 결과를 나타내는 샘플을 만들어보자. li 태그를 사용하여 결과를 나타내며, 한글과 영문의 속성을 가진다. charAt()을 사용해 일치하는 결과를..

029_자바스크립트에서 문자열 검색하기 (부분 검색) [적용] 지정 문자열의 포함 여부를 확인하고 싶을 떄 입력폼의 부적절한 문자를 체크하고 싶을 떄 [문법] 메소드 의미 반환 대상문자열.includes(검색대상문자열, [검색시작인덱스]*) 문자열 포함 여부 확인 진리값 대상문자열.startsWith(검색대상문자열, [검색시작인덱스]*) 문자열 시작 문자 확인 진리값 대상문자열.endsWith(검색대상문자열, [검색시작인덱스]*) 문자열 종료 문자 확인 진리값 * 검색 시작 인덱스는 생략 가능 [내용] includes(), startsWith(), endsWith()를 사용하면 지정 문자열의 포함 여부를 확인할 수 있다. includes()는 위치에 상관없이 지정 문자열이 포함되어 있다면 true를 반환..

028_자바스크립트에서 문자열 검색하기 (인덱스 검색) [적용] 원하는 문자열의 위치를 확인하고 싶을 때 [문법] 메소드 의미 반환 대상문자열.indexOf(검색대상문자열, [검색시작인덱스*]) 문자열 시작 인덱스 숫자 대상문자열.lastIndexOf(검색대상문자열, [검색시작인덱스*]) 문자열 종료 인덱스 숫자 대상문자열.search(정규표현) 숫자 *검색시작인덱스는 생략가능 [예시1] 문자열 내에서 특정 문자열을 검색할때... indexOf()는 지정한 문자열의 인덱스 위치를 반환하며, 값은 0부터 시작한다. 문자열의 첫 번째 문자는 위치가 0이며, 다섯 번째 문자의 경우 인덱스의 값은 4이다. 문자열을 찾을 수 없는 경우에는 -1이 반환된다. 영문은 대소문자를 구별하여 검색한다. JavaScript..

027_자바스크립트 문자열의 공백 처리하기 trim() [적용] 문자열 양단의 공백을 제거하고 싶을 때 [내용] 문자열 양 끝의 공백을 제거하는 것을 '트리밍(Trimming)' 이라고 하며, trim()은 양단의 공백을 제거한 문자열을 반환한다. 공백은 스페이스, 탭, 줄바꿈 문자를 의미하며, 양단이 아닌 문자열 사이의 공백은 제거되지 않는다. [문법] 메소드 의미 반환 문자열.trim() 문자열 양 끝의 공백을 제거 문자열 [예시] JavaScript // 양단에 공백이 있을 때 const targetString1 = ' 안녕하세요 '; const trimmedString1 = targetString1.trim(); console.log(trimmdedString1); // 결과: '안녕하세요' //..

026_자바스크립트 문자열의 길이(문자의 수) 확인하기 length() [적용] 입력폼에서 문자열의 길이를 확인하고 싶을 때 [문법] 속성 의미 타입 문자열.length 문자열의 길이 (문자의 수) 숫자 Array.from(문자열).length 문자열의 길이 (문자의 수) 숫자 [예시] '문자열.length'로 문자열의 길이(문자의 수) 확인이 가능하다. 다음에서 확인해 보자 JavaScript '노는아빠'.length; // 4 'JavaScript'/length; // 10 [예시2] 텍스트 영역(Textarea)에 입력 중인 문자의 수를 카운팅하는 샘플을 확인해 보자 HTML index.html 현재 0글자를 입력하였습니다. JavaScript main.js /** 텍스트 영역(textarea) *..

025_자바스크립트에서 문자열 다루기 [적용] 문자열 길이를 확인하고 싶을 때 문자열을 검색하고 싶을 때 문자열을 추출하고 싶을 때 문자열을 변환하고 싶을 때 문자열을 나누고 싶을 때 문자열을 겹합하고 싶을 때 [내용] 문자열은 자바스크립트의 기본 데이터 타입 중 하나. '(작은따옴표), "(큰따옴표), `(백틱)으로 문자열을 감싸며, 타입은 String이다. const a = 'JavaScript'; // 문자열 'JavaScript' const b = "노는아빠"; // 문자열 '노는아빠' const c = `웹디자인`; // 문자열 '웹디자인' 문자열은 다음과 같은 작업등이 가능하다. 속성 내용 예시 문자열.length 문자열 길이를 확인하기 문자열 'JavaScript'의 길이를 구한다 대상문자열..

024_삼각 함수 사용하기 [적용] 삼각 함수 계산을 사용하고 싶을 때 좌표에서 각도를 구하고 싶을 때 호를 그리는 애니메이션 효과를 주고 싶을 때 [내용] 사인, 코사인, 탄젠트 등 삼각 함수 계산을 위한 메소드. 캔버스와 SVG에서 애니메이션 효과를 줄 때 자주 사용된다. 다음을 통해 사용법을 확인해 보자. [문법] 메소드(속성) 의미 반환(타입) Math.PI 원주율 숫자 Math.cos(값) 코사인 (cos) 숫자 Math.sin(값) 사인 (sin) 숫자 Math.tan(값) 탄젠트 (tan) 숫자 Math.acos(값) 코사인 역함수 (acos) 숫자 Math.asin(값) 사인 역함수 (asin) 숫자 Math.atan(값) 탄젠트 역함수 (atan) 숫자 Math.atan2(y좌표, x좌표..

023_수학(계산) 함수 사용하기 [적용] 절대값을 구하고 싶을 때 제곱을 구하고 싶을 때 대수를 구하고 싶을 때 [내용] Math 객체에는 그래프와 애니메이션 표현을 위한 수학 계산용 메소드가 있다. 이외에도 많은 메소드가 있으며 대표적으로 다음과 같이 사용한다. [문법] 메소드(속성) 의미 반환 Math.abs(값) 절대값을 계산 숫자 Math.pow(값1, 값2) 값1의 값2승을 계산 숫자 Math.sign(값) 값의 부호 계산(-10은 -1, 20은 1, 0은 0) 숫자 Math.sqrt(값) 제곱근을 계산 숫자 Math.log(값) 자연 로그를 계산 숫자 Math.exp(값) 지수 함수를 계산 숫자 Math.E 자연 로그 e를 반환 숫자 [예시] Math.abs(-10); // -10의 절대값은..

022_임의의 수 (random number) 다루기 [적용] 임의의 확률을 사용해 작업을 처리하고 싶을 때 애니메이션에 임의의 값을 부여하고 싶을 때 [내용] Math.random()은 0 이상 1 미만의 부동 소수점 유사 함수를 반환한다. [문법] 메소드 의미 반환 Math.random() 부동 소수점의 유사 난수를 반환 (0 이상 1 미만) 숫자 [예시1] Math.random(); // 0 이상 1 미만 임의의 소수 Math.floor(Math.random() * 100); // 0 이상 100 미만 임의의 정수 10 + Math.floor(Math.random() * 10); // 10 이상 20 미만 임의의 정수 [예시2] 버튼을 누를 때마다 색상을 임의로 바꾸는 샘플 코드를 통해 Math.r..

021_어림 계산하기 (반올림, 올림, 버림) [적용] 소수점을 버리는 계산을 할 때 화면 크기를 정수로 조절할 때 [문법] 메소드 의미 반환 Math.round(값) 반올림하기 숫자 Math.floor(값) 버림하기(값보다 작고 제일 가까운 정수 반환) 숫자 Math.ceil(값) 올림하기(값보다 크고 제일 가까운 정수 반환) 숫자 Math.trunc(값) 값의 정수 부분만을 반환 숫자 어림 계산은 위의 메소드를 사용하며, 다음을 참고해 사용방법을 익혀보자 Math.round(6.24); // 결과: 6 Math.floor(6.24); // 결과: 6 Math.ceil(6.24); // 결과: 7 Math.trunc(6.24); // 결과: 6 Math.round(7.8); // 결과: 8 Math.f..