데이터 타입
데이터 타입으로는 크게 string, number, boolean, object, null, undefined 이 있다.
null vs undefined null : 의도적으로 값이 없음을 명시하기 위해 할당하는 값 undefined : 변수를 선언했지만 값이 할당되지 않았을 때 자바스크립트 엔진이 암묵적으로 초기화 하는 값데이터 타입은 typeof 를 이용하여 확인할 수 있으며, 타입을 변경하는 방법은 다음과 같다.
[예시 코드]
Number("35") // 문자 35 를 숫자 35 로 변경합니다.
String(24) // 숫자 24 를 문자 "24" 로 변경합니다.
String(true) // 불린 true를 문자 "true"로 변경합니다.
JavaScript
복사
연산자
산술연산자•
+, -, *, /, %
문자타입에 더하기 연산자 사용 가능 비교연산자(엄격한 동치연산자)좌우 값을 비교할 때 사용하며 boolean 값을 반환한다.
•
=== : 같다
•
!== : 같지 않다
•
<=, >=, >, <
==, != (느슨한 동치연산자)두 연산자는 타입은 무시한 채 값만 비교한다. 따라서 10 == “10” 이 True 가 된다.
논리연산자 : boolean 값을 반환한다.
•
&&, ||, !
조건문
특정 조건을 만족하면 실행하며, 핵심은 시작과 끝점이 존재한다는 것이다.
조건문 안의 조건의 범위는 점점 좁아져야 한다. 조건 1 에서 대부분 걸러지고, 조건 2 에서는 조건 1 보다 좁은 범위가 남아야 한다.
[예시 코드]
// if문 적용
if(1+1 === 2) {
console.log("정답입니다!") // 정답입니다!
}
// if ... else문 적용
if(1+1 === 3) {
console.log("정답입니다!")
} else {
console.log("틀렸습니다!") // 틀렸습니다!
}
// if , else if , else 문 적용
if(3학년>=13) {
console.log("초등학교 1학년은 13살 이상입니다.")
} else if(3학년<13 && 3학년>=8) {
console.log("3학년은 13살 미만 8살 이상입니다.") // 3학년은 13살 미만 8살 이상입니다.
} else {
console.log("3학년은 8살 미만입니다.")
}
// 마지막 예시는 에러가 뜰 것 입니다. 컴퓨터는 3학년이 뭔지 모르기 때문입니다.
// 마지막 예시는 우리의 상식선에서의 예시입니다. 해당 코드가 잘 작동되게 하고싶으시다면 컴퓨터에게 3학년의 개념을 알려주시면 됩니다.
JavaScript
복사
반복문
for 문의 구문[예시 코드]
for( let 변수 = 0 ; 조건식 ; 증감식 ){
// 반복해서 실행할 코드
}
JavaScript
복사
break; : 정상 종료 이전에 종료continue; : 명령문을 실행하지 않고 다음 반복으로 건너뛰기
수학객체
자바스크립트의 수학기능을 사용하는 명령어이다.
수학객체 | 기능 | 수학객체 | 기능 |
Math.max(수1, 수2 . . .) | 최대값 찾기 | Math.round(숫자) | 반올림 |
Math.min(수1, 수2 . . .) | 최소값 찾기 | Math.ceil(숫자) | 올림 |
Math.random() | 0과 1사이의 랜덤 수 생성 | Math.floor(숫자) | 버림 |
Math.sqrt(숫자) | 루트 |
.padStart(parameter 1, parameter 2) parameter 1 : 자리수 지정
parameter 2 : 지정한 자리수 만큼 문자가 차지 않으면 넣을 문자DOM
DOM 이란?Document Object Model 의 줄임말로, 웹 브라우저가 정적인 웹페이지를 변경하거나 조작하기 위해 HTML 파일을 자바스크립트 객체로 만들어준다.
언제 사용하는가?DOM 은 <HTML></HTML> 을 자바스크립트 객체로 만든 것이다. 따라서 자바스크립트로 HTML 을 수정, 변경하거나 HTML 에 작성된 내용을 자바스크립트 변수에 담아서 사용하는 등에 이용된다.
[예제 코드]
// HTML 파일
철수는 사과를 먹습니다.
맹구는 바나나를 먹습니다.
영희는 피자를 먹습니다.
훈이는 치킨을 먹습니다.
HTML
복사
// JAVASCRIPT 객체
document = {
head: ,
body: {
children: [
철수는 사과를 먹습니다.
,
맹구는 바나나를 먹습니다.
,
영희는 피자를 먹습니다.
,
훈이는 치킨을 먹습니다.
]
}
}
// 객체로부터 정보 가져오기
console.log(document.body.children[0].id) // apple
console.log(document.body.children[0].innerText) // 철수는 사과를 먹습니다.
console.log(document.body.children[0].innerHTML) // 철수는 사과를 먹습니다.
// ID로 HTML 태그값 가져오기
const text1 = document.getElementById('apple'); //
철수는 사과를 먹습니다.
console.log(text1.innerHTML); // 철수는 사과를 먹습니다.
// CLASS로 HTML 태그값들 가져오기
const text2 = document.getElement**s**ByClassName('food');
console.log(text2[**0**].innerHTML); // 영희는 피자를 먹습니다.
console.log(text2[**1**].innerHTML); // 훈이는 치킨을 먹습니다.
// 자바스크립트로 HTML 및 속성 변경하기
document.getElementById('apple').setAttribute('style', 'color: red;')
document.getElementById('banana').innerHTML = '맹구는 노란 바나나를 맛있게 먹습니다.'
//
//
//
철수는 사과를 먹습니다.
//
맹구는 노란 바나나를 **맛있게** 먹습니다.
//
영희는 피자를 먹습니다.
//
훈이는 치킨을 먹습니다.
//
//
JavaScript
복사