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..

020 _ 자바스크립트에서 숫자 다루기 [적용] 자바스크립트에서 수를 계산하고 싶을 때 [내용] 숫자는 자바스크립트의 기본 데이터 타입 중의 하나로 정수와 소수(실수)를 사용하며, 타입은 Number이다. const a = 10; // 결과: 10 const b = 1.23; // 결과: 1.23 const c = -5; // 결과: -5 [수의계산] 수의 계산으로 다음과 같은 작업이 가능하다. 작업 예시 수학 계산하기 10의 2승 계산하기 어림 계산하기 세금을 포함한 금액을 정수로 산출하기 삼각 함수 다루기 애니메이션의 궤적 구하기 임의의 수(random) 다루기 애니메이션에 임의 값(움직임) 부여하기 [진수의 표현] 자바스크립트에서는 10진수 외에도, 2진수, 8진수, 16진수 등의 표현이 가능하다...

019 _ 자바스크립트에서 진위 여부(true or false) 판별하기 (Boolean) [적용] 브라우저 버전에 따라 알림창을 띄우고 싶을 때 입력 항목에 따라 확인 버튼을 무효화하고 싶을 때 [내용] A 조건의 경우 A 작업, B 조건의 경우 B 작업 등 조건에 따라 처리를 구분하는 것은 프로그래밍의 필수 요소이다. 자바스크립트의 데이터 타입 중 하나인 Boolean은 참과 거짓의 진위 여부 판별을 위한 데이터 타입이다. [예시1] 다음의 예제코드를 통해 boolean 데이타 타입의 사용을 확인해보자 JavaScript const a = 10; const b = 20; console.log(a b); // 결과: false [예시2] 주로..