재밌는 이벤트의 세계, JavaScript
💡 JavaScript
자바스크립트는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어를 말해요.
📎 Vanilla JS
바닐라 자바스크립트란 플러그인이나, 라이브러리를 사용하지 않는 순수 자바스크립트를 이야기해요. 즉, 바닐라 자바스크립트 = 자바스크립트 라고 생각하면 돼요.
📎 Script 연결
⚫️내부(Internal) 연결
HTML 문서 내에서 영역을 구분해서 기술하는 방법이에요.
<script>
document.write("Hello World!");
</script>⚫️ 외부(External) 연결
외부 파일에 자바스크립만 작성하여 파일을 불러와 사용하는 방법이에요.
<script src="./welcome.js"></script>⚫️ 인라인(Inline)
태그 안에 직접 기입하는 방법이에요.
<input type="button" onclick="alert('Hello World!')" value="click me!" />📎 웹사이트에서 개발자 도구
웹사이트에 들어가서 키보드 F12를 누르면 개발자 도구를 활성화 시킬 수 있어요. 해당 페이지에서 구현한 HTML, CSS, JavaScript 소스를 확인할 수 있어요.
📎 데이터타입
JavaScript의 변수는 표현하는 값의 종류에 따라서 형식이 구분돼요. 이러한 변수의 종류를 데이터타입이라고 해요.
⚫️ 데이터 타입의 종류
- Number
- String
- Boolean
- Object
- Null : 개발자가 의도적으로 변수의 공간을 비워놓은 상태를 의미해요.
- undefined : 정의되지 않은 상태를 뜻하는데, 처음부터 변수가 선언만 되고 아무런 값도 할당되지 않은 상태를 의미해요. 이 상태의 변수는 어떠한 처리도 불가능해요. (Null 도 아닌 상태)
<script>
// 한 줄 주석
/*
여러 줄 주석
*/
var a = "안녕하세요.";
var b = 123;
var c = '자바스크립트 입니다.';
console.log(a);
console.log(b);
console.log(c);
var inMan = true;
console.log(inMan);
// null - 의도적으로 null 대입
var value1 = null;
console.log(value1);
// undefined - 선언만 된 상태
var value2;
console.log(value2);
</script>📎 연산
⚫️ 사칙연산
<script>
var num1 = 100+30;
var num2 = 100-30;
var num3 = 100*30;
var num4 = 100/30;
var num5 = 100%30;
console.log(num1);
console.log(num2);
console.log(num3);
console.log(num4);
console.log(num5);
</script>
⚫️ 연산
<script>
var num = 100;
console.log(num);
num += 5;
console.log(num);
num -= 3;
console.log(num);
num *= 5;
console.log(num);
num /= 3;
console.log(num);
num %= 3;
console.log(num);
</script>
⚫️ 다양한 연산
<script>
var plus_num = 1;
plus_num = plus_num + 1;
plus_num += plus_num;
plus_num++;
++plus_num;
console.log(plus_num);
var minus_num = 4;
minus_num = minus_num - 1;
minus_num -= 1;
minus_num--;
--minus_num;
console.log(minus_num);
</script>
⚫️ 일치 연산자, 엄격한 일치 연산자
<script>
console.log(1 == 2);
console.log(1 == 1);
console.log("one" == "two");
console.log("one" == "one");
// 자바스크립트는 비슷한 걸 같다고 출력하는 오류가 있다.
console.log(1 == "1"); // true 출력
// 엄격하게 일치 여부 확인
// === : 일치 연산자
console.log(1 === "1"); // false 출력
/*---------------------------------------*/
console.log("---------------------------");
var a;
var b = null;
console.log(a);
console.log(b);
console.log(a == b);
console.log(a === b);
</script>
⚫️ 삼항 연산자
condition ? expTure : expFalse;
- condition : 조건식
- expTrue : 참일 때 실행할 식
- expFalse : 거짓일 때 실행할 식
<script>
// Beer 실행
var age = 26;
// Juice 실행
// var age = 15;
// age가 21보다 크거나 같으면 "Beer"을 실행, 21보다 작으면 "Juice"를 실행
var beverage = (age >= 21) ? "Beer" : "Juice";
document.write(beverage);
</script>다음에 더 JavaScript와 친해질 거예요.🎈
출처
https://media.giphy.com/media/qqtvGYCjDNwac/giphy.gif
https://media.giphy.com/media/26tPplGWjN0xLybiU/giphy.gif
