자바스크립트 (13) 썸네일형 리스트형 [JavaScript] Number객체&String객체의 기본 메소드/ 2021.11.10 1. Number 객체의 기본 메소드 (1) 숫자 N번째 자릿수까지 출력하기 : toFixed() 소수점 이하 몇 자리까지만 출력하고 싶을 때 사용하는 메소드이다. 소수점 아래 2자리까지 출력하고 싶다면 toFixed(2), 3자리까지 출력하고 싶다면 toFixed(3)형태로 사용한다. (2) NaN과 Infinity 확인하기 : isNaN(), isFinite() 어떤 숫자가 NaN인지 또는 Infinity인지 확인할 때는 Number.isNaN()메소드와 Number.isFinite()메소드를 사용한다. 이 메소드들은 숫자 자료형뒤에 온점을 찍고 사용하는 것이 아니라 Number뒤에 점을 찍고 사용한다. 먼저 isNaN() 메소드를 사용해보자. NaN과 비교하면 모든 값이 false로 나오므로 isN.. [JavaScript] 객체의 속성과 메소드, 프로토타입 객체 / 2021.11.09 1. 객체 자료형 속성과 메소드를 가질 수 있는 모든 것은 객체이다. 따라서 배열도 객체이다. 예시를 통해 알아보자. 아래 예시는 a라는 이름의 배열을 선언한 후 배열에 속성을 지정하는 예제이다. 또한 함수도 객체이다. 아래 예시는 함수 b를 선언하고 함수에 속성을 지정하는 예제이다. 함수는 '실행이 가능한 객체'라는 특이한 자료이다. 함수는 객체의 특성을 완벽하게 가지고 있으므로 자바스크립트에서는 함수를 일급 객체에 속한다고 표현하기도 한다. 2. 기본 자료형 자바스크립트에서는 실체가 있는 것(undefined와 null 등이 아닌 것) 중에 객체가 아닌 것을 기본자료형이라고 부른다. 숫자, 문자열, 불이 바로 기본 자료형이다. 이러한 자료형은 객체가 아니므로 속성을 가질 수 없다. 다음은 기본 자료형.. [JavaScript] 콜백 함수, 화살표 함수, 타이머 함수 / 2021.10.30 1. 콜백 함수 자바스크립트는 함수도 하나의 자료형이므로 매개변수로 전달할 수 있다. 이렇게 매개변수로 전달하는 함수를 콜백 함수라고 한다. (1) 예시를 통해서 알아보자. 함수 callThreeTimes를 호출할 때에 매개변수로 함수 print를 넘겨받았다. callThreeTime에서 변수 i가 0부터 2까지 변하면서 매개변수로 전달했던 함수를 callback(i)형태로 호출한다. 따라서 print함수가 print(0) -> print(1) -> print(2) 차례로 호출되는것이다. (2) 위의 코드를 익명 함수를 사용해 나타내보자. 1 - 1. forEach() 콜백 함수를 활용하는 가장 기본적인 함수는 forEach() 메소드이다. forEach() 메소드는 배열이 갖고 있는 함수로써 단순하게 .. [JavaScript] 외부 script 파일 읽어들이기 / 2021.10.15 HTML안에 script 태그를 만들고 그 안에 자바스크립트 코드를 입력할 수 도 있지만 자바스크립트파일을 따로 만들수도 있다. 프로그램의 규모가 커지만 파일 하나가 너무 방대해지기때문에 파일을 분리하는 것이 좋다. (1) 별도의 자바스크립트 파일 만들기 먼저 html과 같은 폴더에 자바스크립트 파일(확장자 .js)를 만들어준다. (2) html에서 자바스크립트 파일 읽어들이기 외부 자바스크립트 파일을 읽어들일 때도 script태그를 사용한다. 그리고 src 속성에 읽어들일 파일의 경로를 입력하면된다. (3) 간단한 프로그램 실행시켜보기 HTML의 script태그보다 외부자바스크립트를 읽어들이는 코드가 위에 있으므로 test.js파일이 먼저실행된다. 그리고 자바스크립트의 상수 sample의 값이 html.. [JavaScript] 객체 / 2021.10.15 1. 객체 (object) 객체는 실제로 존재하는 사물이다. 위 그림을 예로 들면 사람이 하나의 객체인 것이다. 그리고 그 사람의 이름이나 나이 같은 것을 속성이라고 한다. 배열또한 객체이다. 배열을 typeof로 실행해보면 object라는 문자열이 출력되는데 이때 출력한 object가 객체라는 의미이다. 객체와 배열에 다른 점이 있다면 배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키를 사용한다. 예시를 통해서 알아보자. 위 코드의 객체를 그림으로 나타내면 다음과 같다. * 객체의 요소(속성)에 접근은 객체['Key'] 혹은 객체.key로 한다. 코드를 실행해보면 객체의 속성이 출력되는것을 확인할 수 있다. 2. 속성과 메소드 배열의 요소와 마찬가지로 객체의 속성도 모든 형태의 자료형을 가질 수.. [JavaScript] 함수 / 2021.10.15 1. 익명 함수 함수는 코드의 집합을 나타내는 자료형이다. function () {} - 함수의 장점 : (1) 반복되는 코드를 한 번만 정의해놓고 필요할 때마다 호출하므로 코드의 반복을 줄일 수 있다. (2) 긴 프로그램을 기능별로 나눠 여러 함수로 나누어 작성하면 모듈화로 전체 코드의 가독성이 좋아진다. (3) 기능별(함수별)로 수정이 가능하므로 유지보수가 쉽다. 예시를 통해서 알아보자. 정의한 함수안에는 총 4줄의 코드가 들어있다. 만약 이 코드를 함수가 아니라 일일이 다 적는다면 4줄 8줄 12줄 이런 식으로 늘어날 것이다. 그러나 함수를 선언하면 여러 코드를 한 번에 묶어서 실행할 수 있으며 필요할 때마다 호출하여 반복적으로도 사용할 수 있다. 아래는 함수를 두 번 호출한 결과이다. 2. 선언적.. [JavaScript] 반복문(for in, for of, for, while) / 2021.10.13 1. for in 반복문 배열과 함께 사용할 수 있는 반복문은 for in 반복문이다. for in 반복문은 배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용한다. for (const 반복 변수 in 배열 또는 객체) { 문장 } 예시를 통해서 알아보자. 여기서 i 변수가 차례대로 0, 1, 2, 3 이다. i 변수로 배열의 요소에 접근한다. 따라서 콘솔창을 확인해보면, 사과부터 차례대로 출력이된다. 2. for of 반복문 for in 반복문과는 다르게 for of 반복문의 반복 변수에는 인덱스의 번호가 아니라 인덱스의 요소의 값이 들어간다. for(const 반복 변수 of 배열 또는 객체){ 문장 } 위의 for in문 코드를 for of문으로 바꿔보자. 콘솔 창을 확인해보면 똑같이 출력되는.. [JavaScript] 배열 / 2021.10.12 1. 배열 배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형이다. 배열은 대괄호[ ]를 사용해 생성하고 내부의 값을 콤마 (,) 로 구분해 입력한다. 배열 내부에 들어있는 값을 요소라고 한다. 예시를 통해서 알아보자. 배열 array를 선언하고 배열의 요소들을 대입해주고 콘솔창에 array를 입력하면 요소의 개수와 요소들이 출력된다. 또한 array 라고 입력한 아랫줄의 ▶를 클릭하면 인덱스 번호마다 요소와 인덱스의 길이를 볼 수 있다. 2. 배열 요소에 접근하기 배열의 기본적인 조작법은 문자열과 비슷하다. 각각의 요소에 접근하려면 배열바로 뒤에 대괄호[인덱스번호]로 접근한다. 자바스크립트에서는 인덱스번호가 0번부터 시작한다. 배열[인덱스] - 인덱스 번호에는 계산식을 넣을 수 있다. 3. .. 이전 1 2 다음
