원래는 계산기를 계속 만들고 싶었지만... 생각보다 생각해야 할 것과 새롭게 배워야 할 것이 많았고 무엇보다 시험기간이라 시간을 많이 쏟을 수 없기 때문에... 오늘은 생활코딩 내용 정리를 하도록 한다.
이걸로 이 책은 마무리다! 오예
객체 활용하기 - 메소드 만들기
Javascript는 객체 지향 프로그래밍을 지원하는 언어이다.
따라서 객체를 이용해 더욱 효율적으로 개발하는 것이 가능하다!
객체에 소속된 변수를 프로퍼티 , 함수를 메소드 라고 부른다.
이번에는 메소드를 추가하는 방법을 배워본다.
Body라는 객체가 존재한다고 하자.
var Body = {
}이 안에 메소드를 추가하려면, 프로퍼티를 추가하는 것과 같은 방식으로 작성하면 된다.
var Body = {
setColor : function(color) {
document.querySelector('body').style.color = color;
}
}여러 개의 메소드를 추가하고 싶다면, 메소드 사이에 쉼표를 넣어주어야 한다.
var Body = {
setColor : function(color) {
document.querySelector('body').style.color = color;
} ,
setBackgroundColor : function(color) {
document.querySelector('body').style.backgroundColor = color;
}
}파일로 쪼개서 정리 정돈하기
css를 style.css와 같은 파일로 분리시켜 모든 페이지에 스타일을 적용했듯이, Javascript도 파일 하나로 코드를 분리하여 여러 파일에 적용하는 것이 가능하다.
만약 저장한 파일의 이름이 file.js라면, 아래의 코드를 head에 작성하면 된다.
<script src="file.js"></script>이런 방식을 사용하게 되면, 페이지를 열 때마다 그 페이지에 저장되어 있는 js 파일을 다운로드하게 되어, 비효율적인 것은 아닐까 걱정될 수 있다. 하지만, 브라우저에는 캐싱이라는 기능이 있어, 한 번 다운로드된 파일은 다시 저장하기 않고 저장된 파일을 그대로 불러와 사용한다고 한다. 따라서, 오히려 이렇게 파일을 분리하는 것이 유지보수 면에서도 편리하고, 네트워크 적으로도 스크립트 코드를 매번 불러오지 않아도 되어 비용이 절감되는, 모든 면에서 더 효율적인 방법이다.
이렇게 기본적인 html, css, javascript의 공부를 마쳤다.
다음은 계산기를 계속 만들어보거나, 만약 너무 힘들게 느껴진다면 보고 따라할 수 있는 다른 튜토리얼을 보고 공부하면서 위 세 언어를 적어도 만들고 싶은 것을 만들 정도로는 능숙하게 다룰 수 있도록 노력하려고 한다.
하지만 지금은 시험기간이기 때문에, 일단은 밀린 시험공부를 먼저 마치려고 한다!^^
