[JS-자바스크립트]2.기본 (변수, 데이터타입, 연산자, 기타-메소드,제어할태그선택)

@@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@

 

[1]변수

-사용하는 이유: 중복으로 선언해주고, 변할때 그것만 변경

(1)선언

var 변수명;     (변수명은 한눈에 알아볼수있겠금 하는게 좋음) (변수명은 “저장공간” 개념)

(2)값표시

Var 변수명 = 값;

 

 

________________________________________________________________________

 

[2]데이터 타입

1.undefined (값의 유형이 정해지지 않은상태)

값도 없고, 유형도 정해지지 않았음 > 결과에 “undefied”라고 표시됨

밑에는 값이 있긴하지만, 유형이 정해지지는 않았음 > 결과에 “10”이라고 표시됨

2.숫자형(number), 문자형(string), 논리형(boolean)

 

>>>결과 (위의 내용들 결과)

 

 

 

 

________________________________________________________________________

 

[3]연산자

1.산술연산자

(1)기본 사칙연산

1)덧셈(+)  2)뺄셈(-)  3)곱셈(*)  4)나눗셈(/)  5)할당(=)

(2)또다른 방식

1)증가(++)  2)감소(--)  3)나머지(%)  4)할당(+=, -=, /=, %=)

1)증가, 감소

Var x = 10; 

>>>여기서 11로 증가시키고 싶다면 방법은 아래2가지

"후위연산" (할당을 하고 값을 증가)

X++

>>> y는 10이되고, x는 11이됨

"전위연산" (증가를 하고 값을 할당)

++x

>>> y, x 모두 11이됨

>> 뺄셈 등도 동일

 

2)나머지

첫번째건 0 (20나누기10), 두번째건 5 (15나누기10하면 5남음)가 됨

 

3)할당

Z += 1;  >>>이거는 z = z + 1; 과 동일함 (즉, 다시 z에 1을 넣어라) >> 11이됨

Z += 1;  >>>이거는 “단항”연산자,    z = z + 1;  >>>이거는 “다항”연산자

아래는 첫번째 11찍히고, 두번째도 11찍힘 (둘다 동일한 방식임)

______________________________

 

2.비교 연산자

(1)비교(==) 

(2)엄격한 비교(===) 

(3)같지않음(!=) 

(4)엄격한 같지않음(!==)  

(5)크고 작음(<, >, >=, <=)

X는 숫자10, y는 문자10 >> 비교에서는 같음으로 true나오고, 엄격한 비교는 false나옴

 

3.논리 연산자

(1)부정 (!):  값의 부정

(2)and (&&): 조건이 모두 참일경우 처리

(3)or (||): 조건이 하나라도 참일경우 처리

 

______________________________

 

4.삼항 연산자

단항, 다항이 아닌 삼항 연산자

Console,log(변수 = 조건 ? 참 : 거짓);

Z에 값을 부여할건데, x랑 y랑 같으면, 10을 부여, 다르면 11을 부여

 

 

 

 

__________________________________________________________________________________________________________________________

 

[4]기타 (메소드와 제어할 태그 선택)

 

1. 메소드 (method)

1)touppercase

‘hello’.toUppercase()  >> ‘HELLO’ 대문자로 변경해줌

2)indexof

‘hello’.indexOf(‘o’) >>> ‘o’가 몇번째 있는지 알려줌 > 4번째 (0부터 시작)

3)trim (공백 없애줌)

>>>>검색해보면 많이 나옴

 

 

2. 제어할 태그 선택하기

(1)querySelector

Document. querySelector(‘선택할태그’)

(2)style 주기

Document. querySelector(‘선택할태그’).style.속성=’값’ ;

>>>>아래처럼 코딩 (버튼 클릭 시 > 배경색 변경됨)

>>>>>버튼 클릭 시 > 텍스트 색상도 흰색으로 변경해보기

>>>>>day버튼에도 적용하기