데이터 타입과 연산자
+a) typeof null ==> "object"를 반환하지만 null은 "object"가 아님
+a) Boolean( ) => [0, '', null, undefined, NaN] 입력시 false로 반환,
그 외 나머지는 true 반환
연산자
-
산술연산자 => +, -, *, /, %(몫 제외한 나머지)
-
비교연산자 => <, >, <=, >=, ===(같음), !==(같지않음)
+a)엄격한 동치연산자, 느슨한 동치연산자
비교연산자에는 == 과 != 도 있음
이 두 연산자는 타입은 무시한채 값만 비교 (값만 맞으면 true로 판단)
다시 말해, 10 == "10" 의 결과로 true를 반환
따라서, 안정성이 떨어질 수 있으므로 실무에서 잘 사용하진 않음
실무에서는 엄격한 동치 연산자인 === 과 !==을 주로 사용
- 논리 연산자
| and (양쪽 모두 true여야 true) | or (한쪽만 true여도 true) | not (값을 반전시킴) |
|---|---|---|
| (true) && (true) => true | (false) II (true) => true | !(false) => true |
+a) 거짓같은 값
거짓같은 값(Falsely)는 문맥에서false로 평가되는 값
조건문
if( 조건1 ) {
// 조건1이 참이면 실행
} else if( 조건2 ) {
// 조건1은 거짓, 조건2는 참이면 실행
} else {
// 모두 거짓이면 실행
} -
기본적으로
if(조건)은 true,else(조건)은 false -
조건문에는 시작점과 끝점이 존재
-
if문은 특정 조건이 참일 때 명령문을 실행, 거짓인 경우에는else문 실행 -
else if문은 중첩 가능
- 조건문 예시
const password1 = "입력받은 비밀번호" // 사용자가 입력한 비밀번호를 변수에 저장
const password2 = "입력받은 비밀번호확인" // 사용자가 입력한 비밀번호확인을 변수에 저장
if(password1 === password2) {
alert('회원가입을 축하합니다.')
} else {
alert('비밀번호가 다릅니다. 다시 한번 확인해 주세요.')
}
- 조건문 truthy, falsey
-truthy = 데이터가 존재함 (falsey를 제외한 모든 데이터)
-falsey = 데이터 없음 (undefined, null, 0, "", NaN...) -조건문 if( ) 안에 별 다른 조건 지정 안 할경우, 값이 존재하면 true 존재하지 않으면 false 반환
- 조건문의 판단
↑
- 위 조건문에서 매개변수
storageData에는 객체를 담은 배열 데이터가 담김
- 만약
storageData가 존재하지 않는다면 없는 데이터의 하위 항목인complete를 찾는 것은 불가능하기에 에러가 발생
반복문
- For문
for (초기식; 조건식; 증감문) { for(let i=0; i<5; i=i+1) {
반복실행 내용 } console.log("hello")
} =====> }
- 반복문 예시
const classmates = ["철수", "영희", "훈이", "민수" , "민지" ]
for(let i=0; i<=4; i=i+1) {
console.log(classmates[i] + "어린이")
}
// 결과
// 철수어린이
// 영희어린이
// 훈이어린이
// 민수어린이
// 민지어린이+a) 반복문과 조건문 활용
for 반복문 안에 조건문이 들어있는 방식
수학객체
Javascript에서는 수학과 관련된 기능과 속성을 가진 객체를 제공
수학객체 메서드를 이용하면 수학과 관련된 작업들을 빠르고 편리하게 처리 가능
- 수학객체 종류
최대값
Math.max(4, 29, 1, 12) => 29
최소값
Math.min(4, 29, 1, 12) => 1
반올림
Math.round(2.712) => 3
올림
Math.ceil(4.1) => 5
버림
Math.floor(12.8) => 12
랜덤
Math.random() => 0.822...(0 ~ 1 까지의 임의의 수)
루트
Math.sqrt(2) => 1.414...
절대값 변환
Math.abs(-2) => 2
+a) 랜덤번호 생성
DOM (Document Object Model)
정적인 웹페이지를 변경하거나 조작하기 위해 HTML 파일을 Javascript 객체로 만들어 줌
Javascript에서 HTML을 읽어오고, HTML에서 작동하는 기능을 Javascript에서 제어하는 방식으로 상호작용
-
사용법
document. getElementById("tagID"). InnerText
HTML파일로 가서 "tagID" 란 ID가진 태그 선택해서 제어(컨트롤)한다
+a)getElementByid( )=> 요소 중에 해당 id값을 가진 태그를 선택queryselector( )=> name, id, class 제한 없이 해당 선택자로 태그를 선택
ex. queryselector(#id), queryselector(.class)
-
DOM 사용 예시
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
+a) InnerText, Value, focus()
InnerText =<tag>와</tag>사이의 Text 제어
Value =<input>같이 종료태그 없는<TAG>의 Text 제어
*[InnerText, Value] 불러오는 값은 String 형태로 가져옴
innerHTML = Text 입력(해당 Text에 직접 태그를 달아주는 것 가능)
focus() = 해당 태그를 입력상태로 만듬
blur() = 태그의 focus 상태를 잃게 만듬
.style.color = 색상 속성 넣거나 변경
.style.display = 화면상에 보이게 할지 여부 결정 (block | none)
setAttribute(속성, 속성값) = 해당 태그의 속성과 값 넣거나 변경
ex. setAttribute(href, http://google.com)
↓ ↓ ↓
<div href="http://google.com">
