![[JavaScript]JavaScript 기본 문법 (1)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FmczHr%2FbtrvNTwa4RB%2FlvGkGaH4jy6jgliskfKkik%2Fimg.png)
728x90
이번 글은 유튜버 생활코딩 채널이랑 내가 배우고 느낀 점들을 짬뽕해놨음
https://www.youtube.com/watch?v=dPRtcRwKo-Y&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf
JavaScript란 무엇일까
- <body></body> 에 그냥 1+1이라 적으면 "1+1"이 출력 되지만, 아래의 코드는 "2"가 출력됨
<body>
<script>
document.write(1+1);
</script>
</body>
- 버튼을 만들고 버튼에 "Hi"를 쓰고 버튼을 클릭하면 "hi" 알럿이 뜸
<input type="button" value="Hi" onclick="alert('hi')">
- 텍스트 인풋을 만들고 텍스트 인풋의 상태가 바뀌면 "changed" 알럿이 뜸
<input type="text" onchange="alert('changed')">
- 텍스트 인풋 안에서 키가 눌리면 "key down!" 알럿이 뜸
<input type="text" onkeydown="alert('key down!')">
이처럼 on으로 시작하는 속성들 → event라고 함
💡 f12 누르고 나오는 콘솔창에서 실행하는 js코드는 해당 화면에 바로 실행됨
이런 것들처럼 JavaScript는 동적인 그런 느낌적인 느낌
JavaScript의 기본 문법
JavaScript의 데이터 타입
6가지 데이터 타입이 존재
- Boolean(논리형)
- Null(값이 없는 객체)
- Undefined(선언되기만 하고 초기화를 해주지 않으면)
- Number(정수형, 실수형)
- String(문자열)
- Symbol (new in ECMAScript 6)
자바와는 다름.
Number (숫자)
- 연산자가 중요!
String (문자열)
- '로 시작했으면 '로 끝내고 "로 시작했으면 "로 끝내야 함
- "Hello world".length → 11 (""안에 몇 글자인지 알려줌)
- "Hello World".toUpperCase() → HELLO WORLD (대문자로 바꿔줌)
- "Hello World".indexOf('World') → 6 (몇 번째 인덱스부터 World가 시작되는지 알려줌. 없으면 -1 반환)
- "(공백)hello(공백)".trim() → hello (양쪽 공백 제거)
- 1+1 → 2 (숫자)
- "1"+"1" → 11 (문자열)
💡 암튼 이거보다 훠어어얼씬 많으니까 그때그때 찾아서 쓰면 됨!
JavaScript의 변수와 대입 연산자
변수 선언시 var 을 붙이자
ex) var name = 'abc';
제어할 태그 선택하기
- document.querySelector('선택자') 를 이용
- 'body' 태그의 style을 바꾸겠다는 뜻
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor
='black';
document.querySelector('body').style.color
='white';
">💡 css에서 했던 것처럼 마찬가지로 id 선택자는 앞에 '#', class 선택자는 앞에 '.' , 태그 선택자는 그냥 ''
비교 연산자와 불리언
- 비교연산자 == -> 얘는 값만 비교
- 비교 연산자 === -> 얘는 타입만 비교
1===1 → true
1===2 → false
논리형: boolean
- false
- 공백문자열 ""
- null
- undifined
- 0
-> 다 같은 값으로 나옴
타입 체킹
- typeof 변수명 또는 값;
- typeof (변수명 또는 값);
변수 선언 방법
1. var 변수명; -> 이 때 이 변수의 데이터 타입이 undifined
2. 변수명 = 값;
3. var 변수명 = 값;
변수 종류
- 전역 변수
- function 외부에 선언한 모든 변수
- function 내부에서 var 붙이지 않고 선언한 변수
- 지역 변수
- function 내부에 var 붙이고 선언한 변수
this 활용
<input id="night_day" type="button" value="night" onclick="
var target = document.querySelector('body');
if (document.querySelector('night_day').value==='night'){
target.style.backgroundColor ='black';
target.style.color ='white';
document.querySelector('night_day').value ='day';
} else {
target.style.backgroundColor ='white';
target.style.color ='black';
document.querySelector('night_day').value='night';
}
">
위 코드의 document.querySelector('night_day') 를 자기자신을 나타내는 this 로 치환해서 코드를 간결하게 만들기
<input id="night_day" type="button" value="night" onclick="
var target = document.querySelector('body');
if (this.value==='night'){
target.style.backgroundColor ='black';
target.style.color ='white';
this.value ='day';
} else {
target.style.backgroundColor ='white';
target.style.color ='black';
this.value='night';
}
">💡 중복의 제거
728x90