Javascript
Javascript
앞서 정리한 HTML과 CSS가 집의 구조와 인테리어들을 담당하는 언어였다면, Javascipt는 집의 기능을 담당하는 언어이다.
사용 방식으로는 내장 방식과 링크 방식이 있다.
- 내장 방식: head, body, head와 body사이, body아래 등 HTML의 내부 어디든 사용이 가능하다.
- 간단하게 만들 수 있다.
- 특정 페이지에서만 작동하는 기능일 경우 내장 방식으로만 따로 구현이 가능하다.
- 링크 방식: CSS파일 처럼 Javascript 파일을 따로 만들어서 링크하는 방식이다.
- JS코드의 양이 많아지면 파일로 관리하는 편이 편하다.
- 같은 기능을 다른 페이지에서 사용하고 싶을 때 JS파일 링크만 걸어서 사용 가능하다.
- 유지 보수 용이성이 편리하다.
표기법
dash-case: the-quick-brown-fox-jumps-over-the-lazy-dog
snake_case: the_quick_brown_fox_jumps_over_the_lazy_dog
camelCase: theQuickBrownFoxJumpsOverTheLazyDog
ParcelCase: TheQuickBrownFoxJumpsOverTheLazyDog
Zero-based Numbering: 0기반 번호 매기기 // 특수한 경우를 제외하고 0부터 숫자를 시작한다.
데이터 종류
String : 문자열, 문자형 데이터 따옴표를 사용.
Number : 숫자형 데이터, 정수 및 소수점 숫자를 나타냄.
Boolean : 참, 거짓 데이터. true, false 두 가지 값만 가지는 데이터
Undefined : 미할당 데이터. 값이 할당되지 않은 상태를 표기.
Null : 빈 데이터. 어떠한 값이 의도적으로 비어 있음을 의미할 때 사용.
Object : 데이터 꾸러미. 키:값의 쌍으로 이루어져 있음.
Array : 배열 데이터. 여러 데이터를 순차적으로 저장. 데이터 요소를 쓸 때에는 대괄호를 사용한다.
자료형 데이터가 어떠한 데이터인지를 알고 싶을 때는 "typeof" 를 쓴다. 데이터 요소를 쓸 때에는 대괄호를 사용한다. tpyeof에 arry나 null에 사용하면 "object" 결과 값을 얻는다.
형 변환
- 문자로 변환: String( );
- 숫자로 변환: Number( );
이렇게 형 변환을 시켜준 뒤 데이터에 알맞은 값을 입력해야 Error가 생성되지 않는다.
변수
variable; 변수: 데이터를 저장하고 참조하는 데이터의 이름 ex) var, let, const
-
var: 재할당, 재선언이 가능하다.
- ex) var name = "김아무개" 이 뒤에 var name = "이아무개"가 또 선언이 가능하다.
문제점
- 중간의 같은 이름의 변수를 다시 선언해도 기존의 변수에 덮어 씌워짐.
- 변수가 블록단위에서 끝나는 것이 아니라, 자기 맘대로 전역으로 돌아다니고 영향력을 행사함.
- 재선언 가능한 것이 장점 같을 수는 있지만, 위와 같은 문제들로 현업이나 유지보수에는 힘들수가 있다.
-
let: 재할당 가능, 재선언 불가.
-
let c; // 선언과 값의 초기화를 동시에 하지 않아도 됨.
c = 5
c = 10
c = 15 // 이처럼 재할당이 가능하다.let c = 123; // 이미 위에 c = 5 라고 선언을 해놓아서 재선언이 불가능하다.
-
-
const: 재할당, 재선언이 불가능하다. 선언과 동시에 초기화되어야 함.
cosnt b = 3
b = 5 // 재할당 불가능
const b = 5 // 재선언 불가능
-
변수의 기본 규칙
- 변수 이름으로는 문자 / 숫자 / $ / _ 만 사용 가능하다.
- 첫 글자는 숫자가 오면 안된다.
- 예약어 사용 불가.
- 예약어: 특별한 의미를 가지고있어, 변수나 함수 이름으로 사용할 수 없는 단어.
- 예약어: 특별한 의미를 가지고있어, 변수나 함수 이름으로 사용할 수 없는 단어.
- 변수의 이름은 읽기 쉽도록 한다.
- 상수는 대문자로 선언해서 구별 쉽게 한다.
-
문자와 변수를 동시에 쓰고 싶을 때
- 메소드의 매개 변수로 넣어서 사용.
- ex) console.log("문자",변수,"문자");
- +연산자를 사용해서 변수를 문자로 변환 후 더하여 사용
- ex) console.log("문자" + 변수 + "문자");
- 백틱 문자 사용
- 문자 앞 뒤에 백틱 기호를 쓰고, 문자를 쓰다가 변수를 쓰고 싶으면${variable} 처럼 쓰면 된다. // 백틱기호는 키보드에서 ~물결기호 쓸 때 shift를 사용하지 않고 누르면 나온다.
- 메소드의 매개 변수로 넣어서 사용.
연산자
-
기본 연산자
- % : 나머지 연산자
- 홀수 판단: num % 2==1 이면 홀수
- 홀수 판단: num % 2==0 이면 짝수
- ** : 거듭제곱
- 2**3 = 8
- 3**3 = 27
- % : 나머지 연산자
-
연산자 줄여 쓰기
- num = num + 5 -> num += 5
- num = num - 5 -> num -= 5
- num = num 5 -> num = 5
- num = num / 5 -> num /= 5
-
증가, 감소 연산자
- Num++;
- Num--;
-
비교 연산자
- 일치 연산자(=== or ==)
변수의 값 뿐만 아니라 자료형 까지도 비교가능- A==B: A와B의 값이 같으면 true, 아니면 , false
- A===B: A와 B의 값과 data type이 같으면 true, 아니면 false
- A!=B: A와 B의 값이 다르면 true, 아니면 false
- A!==B: A와 B의 값이 다르면 true, 아니면 false
- 일치 연산자(=== or ==)
-
대소 비교
- 값의 크기를 비교하는 연산자 <, >, <=, >=
- A < B: A보다 B가 크면 true, 아니면 false
- A > B: A보다 B가 작으면 true, 아니면 false
- A <= B: B가 A보다 크거나 같으면 true, 아니면 false
- A >= B: B가 A보다 작거나 같으면 true, 아니면 false
- 값의 크기를 비교하는 연산자 <, >, <=, >=
-
논리 연산자
- || : or, 여러개 중 하나라도 trur면 true 즉, 모든값이 false 일때만 false를 반환
- && : and, 모든값이 true면 true, 즉, 하나라도 false면 false를 반환
- ! : not, true면 false, false면 true
함수
-
특정 동작(기능)을 수행하는 일부 코드의 집합(부분)
- 키워드: function
- 함수의 이름: camelCase로 함수릐 이름 작성
- 함수 선언문 vs 함수 표현식
- (매개변수): 함수 내부에서 사용할 변수
- {스코프}: 함수의 내부 코드
- return: 함수 내부 코드의 최종 결과값을 보관하기 위한 키워드
-
function sayHello(){console.log('Hello');} // 함수 선언문 : 어디서든 호출 가능
-
let sayHello = function(){console.log('Hello');} // 함수 표현식: 코드에 도달하면 생성
매개변수 함수
- 매개변수 1개, 함수 선언문
- function sayHello1(text){ return text }
- 매개변수 2개, 함수 선언문
- function sayhello2(text, name){ return "벡틱"${text}! ${name}"벡틱") }
- 매개변수 2개, 함수 표현식 // 내부 스코프를 console.log로 작성
- const sayHello3=funtion (text, name){ console.log("벡틱"&{text}! ${name}"벡틱")}
- 매개변수 2개, 화살표 함수
- const sayHello4=(text, name)=>{ return "벡틱"${text}! ${name}"벡틱"}
- 매개변수 1개, 함수 선언문
