안녕하세요, 코린이의 코딩 학습기 채니 입니다.
개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.
Javascript
- 웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체지향 프로그래밍 언어
Javascript 작성 방식
① html 태그의 inline 이벤트 속성에 작성
<li onclick="alert('안녕');">html태그의 inline 이벤트 속성에 작성</li>
② 내부 script 태그 - head 태그 안, body 종료 태그 전
head 태그 안
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ol>li {
cursor: pointer;
}
</style>
<script>
// alert('123'); // 브라우져가 문서를 해석하면서 바로 실행!
console.log('123');
//함수 선언
function foo() {
console.log("foooooooooo");
}
//함수 호출
foo();
</script>
</head>
body 태그 종료 전
<body>
<h1>Javascript</h1>
<ol>
<li onclick="alert('안녕');">html태그의 inline 이벤트 속성에 작성</li>
<li>내부 script태그 - head 태그 안, body 종료태그전</li>
<li>외부 script태그 - 현재 페이지에서 load</li>
</ol>
<script>
console.log(456);
foo();
function bar() {
console.log("baaaaaaaaaar");
}
</script>
</body>
③ 외부 script 태그 - 현재 페이지에서 load
// 스크립트 영역
function abc() {
console.log("abc");
}
console.log("main js 실행..");
<script src="js/main.js"></script>
<script>
abc(); //main.js에 선언된 함수 호출
</script>
Dynamic Typing
- Javascript에서는 대입된 값에 따라 변수의 자료형이 결정
HTML 코드
<body>
<h1>자료형</h1>
<button onclick="test1();">Dynamic Typing</button>
</body>
Javascript 코드
변수 선언 → let 키워드 사용
상수 선언 → const 키워드 사용
<script>
function test1() {
let k; // 변수 선언
k = 123; // 값 대입
console.log(typeof k, k); //number 123
k = '안녕';
console.log(typeof k, k); //string 안녕
}
</script>
이렇게 변수의 자료형을 미리 지정해주지 않아도, 대입된 값에 따라 변수의 자료형이 결정되는 것을 확인할 수 있습니다.
상수
const s; //'const' declarations must be initialized. 오류발생
s = '안녕';상수는 상수 선언과 값 대입이 동시에 이루어져야 합니다.
자료형
- string
- number
- boolean
- object
- function
- undefined
HTML 코드
<body>
<h1>자료형</h1>
<button onclick="test2();">자료형</button>
</body>
Javascript 코드
☞ string
<script>
function test2() {
// string
const s = 'Helloworld'; // 쌍따옴표/홑따옴표 가능
// s = "ByeWorld"; // Uncaught TypeError: Assignment to constant variable.
console.log(typeof s, s);
}
</script>
상수는 값 변경이 불가하므로 s = "ByeWorld"; 시 오류가 발생합니다.
typeof를 통해서 상수 s의 자료형을 확인해보니 string으로 확인 되며, 쌍따옴표/홑따옴표 모두 사용 가능합니다.
☞ number
//number
// 정수/실수 구분하지 않음
const a = 100;
console.log(typeof a, a);
console.log(10 / 3);
number 타입은 정수/실수에 대한 구분이 없으며, typeof로 확인해보니 number 타입으로 확인됩니다.
또한 정수/실수에 대한 구분이 없기 때문에 연산 결과 그대로가 출력되는 것을 확인할 수 있습니다.
☞ boolean
// boolean
// true, false
const bool = true;
console.log(typeof bool, bool);
const bool2 = !true;
console.log(typeof bool2, bool2);
boolean 타입은 true, false의 값을 가지며, typeof으로 확인해보니 boolean 타입으로 확인됩니다.
또한, not (!) 연산자를 통해 boolean의 값을 뒤집는 것도 가능한 것으로 확인됩니다.
☞ object
생성자 함수 호출
// obejct
const today = new Date(); // 생성자 함수 호출 -> 객체 생성
console.log(typeof today, today);
생성자 함수를 호출하여 객체를 생성해 date를 받아왔으며, object 타입으로 확인됩니다.
배열
// 배열
const arr = [1, 2, 3];
console.log(typeof arr, arr);
console.log(arr[0], arr[1], arr[2]);
배열 또한 object 타입으로 확인되며, 인덱스를 통해서 요소를 가져올 수 있습니다.
요소
// 요소 (속성명:속성값) - 리터럴로 객체 생성
const obj = {
name : '홍길동',
n : 123.456,
married : false,
favoriteNums : [9, 12, 34],
friend : {
name : '고길동',
age : 25
}
};
console.log(typeof obj, obj);
console.log(obj.name);
console.log(obj.n);
console.log(obj.married);
console.log(obj.favoriteNums);
console.log(obj.friend);
요소 또한 object 타입으로 확인됩니다.
☞ function
// function
function foo() {
console.log('foo')
}
console.log(typeof foo, foo);
함수 자체를 호출한 것이므로 'foo'가 출력되는 것이 아닌 foo함수 코드가 출력됩니다.
☞ undifined
// undifined
let k;
console.log(typeof k, k);
let m = '안녕하세요';
m = undefined; // 값 제거 용
실제 값이 대입 되지 않았기 때문에 타입 또한 undefined, 값 또한 undefined입니다.
undefined를 이용하여 값을 초기화하는 용도로도 사용할 수 있습니다.
