하위 태스크 1
실습 HTML/JS 파일 생성
index.html,basic.js를 만들어 콘솔 실습 환경 구성
index.html:
<!doctype html>
<html>
<head>
<script src="./basic.js"></script>
</head>
<body></body>
</html>basic.js:
console.log("Hello, JavaScript!");웹브라우저에서 index.html을 연 결과는 다음과 같다.
하위 태스크 2
변수/상수 선언 및 출력
let,const를 사용해 여러 값 선언·출력
basic.js:
const name = "홍길동";
const job = "요리사";
let age = 23;
age += 1;
console.log(name); // 홍길동
console.log(job); // 요리사
console.log(age); // 24웹브라우저에서 index.html을 연 결과는 다음과 같다.
하위 태스크 3
자료형 및 typeof 확인
Number, String, Boolean, null, undefined 값을 만들고
typeof로 확인
basic.js:
const name = "홍길동"; // 문자열
const age = 30; // 숫자
const developer = true; // 불리언
const nickname = null; // null
const organization = undefined; // undefined
console.log(typeof name); // string
console.log(typeof age); // number
console.log(typeof developer); // boolean
console.log(typeof nickname); // object
console.log(typeof organization); // undefined웹브라우저에서 index.html을 연 결과는 다음과 같다.
하위 태스크 4
템플릿 리터럴 사용
백틱을 사용해 읽기 좋은 문자열 메시지 생성
basic.js:
const name = "홍길동";
const age = 30;
const developer = true;
console.log(`${name}(${age}세)는 개발자입니다: ${developer}`);웹브라우저에서 index.html을 연 결과는 다음과 같다.
하위 태스크 5
묵시적/명시적 형 변환 비교
"10" + "5"와Number("10") + Number("5")비교
basic.js:
const inputOne = "10";
const inputTwo = "5";
console.log(inputOne + inputTwo); // 105
console.log(Number(inputOne) + Number(inputTwo)); // 15
console.log(parseInt(inputOne) + parseInt(inputTwo)); // 15
console.log(parseFloat(inputOne) + parseFloat(inputTwo)); // 15
console.log(String(inputOne) + String(inputTwo)); // 105
console.log(Boolean(inputOne) + Boolean(inputTwo)); // 2웹브라우저에서 index.html을 연 결과는 다음과 같다.
하위 태스크 6
NaN 관련 함수 테스트
isNaN,Number.isNaN동작 차이를 예제로 확인
isNaN은 매개변수로 전달된 값을 숫자형으로 형 변환하는 반면, Number.isNaN은 그렇지 않다는 차이가 있다.
basic.js:
console.log(isNaN(12)); // false
console.log(Number.isNaN(12)); // false
console.log(isNaN("12")); // false
console.log(Number.isNaN("12")); // false
console.log(isNaN(parseInt("십이"))); // true
console.log(Number.isNaN(parseInt("십이"))); // true
console.log(isNaN("NaN")); // true
console.log(Number.isNaN("NaN")); // false
console.log(isNaN(undefined)); // true
console.log(Number.isNaN(undefined)); // false웹브라우저에서 index.html을 연 결과는 다음과 같다.
