용어
자바스크립트(JavaScript) VS 모던 자바스크립트(modern JavaScript)
자바스크립트
기존에 사용하던 웹 브라우저에서 실행되는 간단한 인터랙션 기능을 사용하게 한다.
모던 자바스크립트
모던 자바스크립트는 ES6(2015년) 버전 이후에 등장한 최신 버전에 자바스크립트를 이야기 합니다.
기존의 자바 스크립트에 비해 많은 기능을 추가하고 개선
내장 객체(built-in object)
사용자 정의 객체 (스스로 생성)
내장 객체(built-in object)
- 미리 정의 되어 있는 객체
- 문서 객체 모델(DOM) 문서 뿐만 아니라 웹 문서안에 포함된 이미지, 링크, 텍스트, 필드 등 모두 객체로 관리 됩니다.
브라우저 객체 모델(BOM): 웹 브라우저에 정보를 객체로 관리
문서 객체 모델(DOM)과 브라우저 객체 모델(BOM)은 모두 자바스크립트에서 사용할 수 있는 미리 정의된
내장 객체(built-in object) 중의 하나 입니다.
DOM은 HTML, XML 등의 웹 문서의 내용과 구조를 객체로 관리하는 반면에 BOM은
웹 브라우저의 창, 화면, URL 등과 같은 브라우저 정보를 객체로 관리합니다
DOM과 BOM은 각각의 역할이 다르며, 자바스크립트로 웹 페이지를 다양하게 조작하기 위해
둘 다 사용되어야 합니다.<script>
// 사용자 정의 객체
// 관례상 객체를 대문자 표기해 준다.
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
const personKim = new Person('킴', 30, 'male');
console.log(personKim);
console.log(personKim.name);
</script>
<script>
// 일반 함수에 형태
function calc(n1, n2) {
return n1 + n2;
}
// 사용하는 모양
let result = calc(200, 200);
console.log(result);
</script>
<script>
// 모던 자바 스크립트 객체 프로토 타입
class Student {
constructor(name) {
this.name = name;
}
sayHi() {
alert(this.name);
}
}
// 사용하는 모습
let student = new Student("John");
student.sayHi();
</script>
