자바스크립트 기초 - 1

자바스크립트 코드의 위치

 

자바스크립트는 크게 4가지 위치에 작성할 수 있다.

1.  HTML 태그의 이벤트 리스너 속성에 작성

     ex)

onclick = "this.src='banana.png'"
onmouseover = "this.src='banana.png'"

2. <script></script> 태그에 작성

     - 웹 페이지 내 여러번 삽입할 수 있다.

     ex)

<script> 
    function over(obj) { obj.src="media/banana.png"; } 
    function out(obj) { obj.src="media/apple.png"; } 
</script>

3. 별도의 자바스크립트 파일에 작성

    - 코드를 중복해서 작성하지 않아도 된다.

ex)

<script src=“파일이름.js”>
// html5 부터 코드 추가 작성x
</script>

4. URL 부분에 작성

 

자바스크립트로 HTML 콘텐츠 출력

1. document.write()

    - 브라우저 윈도우에 바로 출력

    ex)

    document.write("hello world");

2. document.writeln()

    - 빈칸 출력 (개행 문자 X)

 

자바스크립트 다이얼로그

1. 프롬프트 다이얼로그

    - 사용자로부터 문자열을 입력받아 리턴(무조건 문자열로 받음)

2. 확인 다이얼로그

    - 메세지를 출력하고 확인 취소(true/false)가 있는 다이얼로그 출력

3. 경고 다이얼로그

    - 메세지와 확인버튼이 있는 다이얼로그 출력

 

자바 스크립트 변수 종류

- 자바 스크립트에는 변수 타입이 없음

- 변수에 저장되는 값에 대한 제약이 없음

 

1. var    - 변수 중복 선언이 가능하다. (문제점)2. let    - 변수 중복 선언이 불가능하다. (var의 문제점 보완)3. const    - 한번 정해진 상수는 변경할 수 없다.

 

변수의 사용 범위(scope)와 생명(life)

변수 종류	선언
전역 변수	함수 밖에서 선언 혹은 var/let 키워드 없이 아무 곳에서나 선언
지역 변수	함수 내에 let으로 선언
블록 변수	let으로 if, while, for 등 블록 내에 선언

*var는 함수 외부에서 선언하는 전역 변수가 된다.* 전역변수와 지역변수의 이름이 같을 때 전역변수에 접근하고 싶다면 , this 키워드를 사용한다.

 

자바스크립트 객체

- 여러개의 프로퍼티와 메소드로 구성되있다.

프로퍼티 : 객체의 고유한 속성(변수)

메소드 : 함수

 

객체의 종류

1. 코어 객체

    - 기본 객체로 표준 객체 

    - 어디서나 사용 가능

2. HTML DOM 객체

     - HTML 태그들을 객체화 함으로써 문서의 내용과 모양을 제어할 수 있다.

3. 브라우저 객체

     - 자바스크립트로 브라우저를 제어한다.

 

사용자 객체 만들기

1. 직접 객체 만들기

     1-1.  new Object();

let account = new Object();
account.owner = "황기태"; // 계좌 주인 프로퍼티 생성 및 초기화
account.code = "111"; // 코드 프로퍼티 생성 및 초기화
account.balance = 35000; // 잔액 프로퍼티 생성 및 초기화
account.inquiry = inquiry; // 메소드 작성
account.deposit = deposit; // 메소드 작성
account.withdraw = withdraw; // 메소드 작성

     1-2. 리터럴 표기법 - 가장 많이 사용한다.

let account = {
// 프로퍼티 생성 및 초기화
owner : "황기태", // 계좌 주인 프로퍼티 추가
code : "111", // 계좌 코드 프로퍼티 추가
balance : 35000, // 잔액 프로퍼티 추가
// 메소드 작성
inquiry : function () { return this.balance; }, // 잔금 조회
deposit : function(money) { this.balance += money; }, // 저금. money 만큼 저금
withdraw : function (money) { // 예금 인출, money는 인출하고자 하는 액수
// money가 balance보다 작다고 가정
this.balance -= money;
return money;
}
};

2. 프로토타입을 만들고 객체 생성

     - 프로토 타입 : 객체 모양을 가진 틀

function Student(name, score) {
this.univ = "한국대학"; // this.univ을 이용하여 univ 프로퍼티 작성
this.name = name; // this.name을 이용하여 name 프로퍼티 작성
this.score = score; // this.score를 이용하여 score 프로퍼티 작성
this.getGrade = function () { // getGrade() 메소드 작성
if(this.score > 80) return "A";
else if(this.score > 60) return "B";
else return "F";
}
}

let kitae = new Student("황기태", 75); // Student 객체 생성
let jaemoon = new Student("이재문", 93); // Student 객체 생성
document.write(kitae.univ + ", " + kitae.name + "의 학점은 " + kitae.getGrade() + "<br>");
document.write(jaemoon.univ + ", " + jaemoon.name + "의 학점은 " + jaemoon.getGrade() + "<br>")