[SIST] Web_javascript_days06

1. javascript의 hoisting(호이스팅)과 use strict(엄격 모드)

1) hoisting 이란?

브라우저가 자동으로 변수의 선언 또는 함수의 선언 부분을 변수의 초기화 또는 함수를 호출하기 전에 맨 위로 코딩을 이동시켜주는 것을 의미한다.

 

2) use strict(엄격 모드)

- ECMAScript5 도입

- script 태그 안에서 맨 위에 "use strict" 코딩

- 엄격모드를 사용하겠다는 뜻으로 반드시 변수를 선언하고 사용하겠다 라는 의미이다. 

 

>use strict를 사용하지 않았다면 에러가 발생하지 않고 admin으로 결과가 잘 나오게 된다.

---

2. javascript의 자료형, 객체 종류, 값을 포함할 수 없는 자료형, 형변환

1) js 5개의 자료형

• string
• number
• boolean
• object
• function

 

2) js 6개의 객체 종류

• Object = new Object()
• Date = new Date()
• Array = new Array()
• String = new String("")
• Number
• Boolean

 

3) s 값을 포함할 수 없는 2가지 자료형

• null
• undefined

 

4) js 형변환

• 문자열 -> 숫자 Number(), parseInt(), parseFloat()
• 숫자 -> 문자열 숫자 + "", String(숫자) 메서드, (123).toString()
• 날짜 -> 숫자
• var d = new Date();
• Number(d); == d.getTime();
• 날짜 -> 문자열 String(날짜), 날짜.toString()
• 숫자 -> 날짜
• 불린(부울) -> 숫자
• 숫자 -> 불린(부울)

---

3. javascript 화살표 함수 == 람다식

- 람다식은 ES6 도입

- 사용하는 이유? 더 짧은 함수 구문을 작성하여 사용하기 위함

 

예시1)

- 함수 안에 명령문이 한 줄이고, 명령문이 값을 반환하는 경우에는 {}와 return 생략이 가능하다.

 

예시2)

- 매개변수가 1개라면 () 생략이 가능하다

---

4. this 의미

1) Object 안에서의 this는 객체 자기자신을 나타낸다.

 

2) script 안에서의 this는 최상위 부모인 Window 객체를 나타낸다.

 

3) 일반 함수안에 있는 this는 최상위 부모인 window 객체를 나타낸다.

 

4) 이벤트 핸들러 안에 있는 this는 이벤트를 수신한(당한) 객체를 나타낸다.

 

5) 람다식 안에 있는 this는 항상 람다식을 정의한 객체를 나타낸다. 즉, 람다식을 소유한(소유자) 객체 this

---

5. javascript의 class(클래스)

1) javascript에서도 class 키워드를 사용해서 클래스를 선언할 수 있다.(ES6 == ECMAScript2015 도입)

* 클래스 == 객체 설계도

 

2) java에서 멤버변수는 필드, javascript에서 멤버변수는 속성이다.

 

3) 생성자

- 객체를 생성할 때 자동으로 호출되는 함수로 js에서는 속성을 초기화 해준다.

- 생성자의 이름은 무조건 constructor

- 항상 constructor() 생성자를 추가해야한다.

 

4) 클래스 안에 메서드를 선언할 수 있다.

 

예시)

---

6. javascript의 모듈

- 코드를 별도의 파일로 저장해서 관리하겠다는 의미

- import와 export 문을 사용하여 가져오기와 내보내기 가능'

 

* export 내보내기
   1) Named
   2) Default
두 가지 유형으로 내보내기를 할 수 있다. => 다음에 자세히 설명해 주실 예정

 

예시)

- message.js

 

[html 파일의 body]

 

[결과]

---

- person.js

 

[html 파일의 body]

 

[결과]

---

7. javascript의 객체

1) js 객체는 기본형을 제외하면 모두가 js 객체이다.

2) js 기본형? string, number, boolean, null, undefined

3) js 객체? new 연산자를 붙이면 전부 다 객체

new Number(), new String(), new Boolean()

+ Date, Math, 배열, 함수, object 등등

 

4) js 객체도 변수이다.
var person = {
       이름: 값,
       이름: 값,
       이름: 값,
       메서드:function () {}

};

 

* javascript에서 모든 함수는 객체 메서드 이다.

alert()도 window 객체의 메서드

function test() {} 만들어도 window 객체의 메서드

---

- 객체에 새로운 속성 추가하기 : 객체명.새로운속성명 = 속성값;

- 객체에 있는 속성을 제거하기 : delete 객체명.속성명; OR delete 객체명['속성값']

- 객체에 있는 메서드 호출하기 : 객체명.메서드명()

- 객체에 새로운 메서드 추가하기 : 객체명.메서드명 = function() {}

 

예시)

 

* new Object()로 객체를 생성할 수 있지만 권장하지 않는다. -> 성능 저하

---

[ 객체 접근자 ] = 객체에 접근할 수 있는

- Getter/Setter == 객체접근자 => ECMAScript5 도입

 

예시)

---

[ 객체 생성자 ] 

- 객체를 만들 때 사용되는 함수를 객체 생성자라고 한다.

- 대문자를 시작으로 이름을 짓는다.

 

* 아래 목록들도 다 객체 생성자이다.

• new String()
• new Number()
• new Boolean()
• new Object()
• new Array()
• new RegExp()
• new Funtion()
• new Date()

 

예시)

 

1) 객체 생성자를 통해서 속성을 추가하는 것은 불가능

    But 방법이 없는 건 아니다. 'prototype 속성'을 사용해서 추가 가능하다.

 

2) 객체 생성자를 사용해서 생성된 객체를 통해 속성을 추가하는 것은 가능하다.

 

3) 메서드 추가도 객체 생성자를 사용해서 생성된 객체를 통해 추가하거나 prototype 속성을 사용

---

[ 중첩된 객체 ] = 객체 안에 객체가 있다.

예시1)

 

예시2)

---

8. call() / apply() 메서드

- 다른 객체의 메서드를 불러서 처리한다.

 

- 차이점?

  매개변수가 있는 경우에는..

   call 메서드는 매개변수를 나열해서 사용

   apply 메서드는 매개변수를 배열에 담아서 사용

 

예시1) 매개변수가 없는 경우

 

결과)

---

예시2) 매개변수가 있는 경우

---

9. setTimeout()과 clearTimeout() / setInterval()과 clearInterval()

setTimeout() - 시간이 지난 후에 함수를 호출

clearTimeout() - setTimeout() 메서드를 종료시킴

setInterval() - 시간 간격마다 함수를 호출

clearInterval() - setInterval() 메서드를 종료시킴

---

setTimeout / clearTimeout 코드예시1)

 

[결과]

- setTimeout을 누르면 시계가 나오고 1초 후에 함수를 계속 호출하면서 시간이 지나는 것처럼 보여짐

- clearTimeout을 누르면 시계가 멈춤

---

setInterval / clearInterval 코드예시1)

 

[결과]

- setInterval을 누르면 시계가 1초 간격마다 실행

- 1초 뒤에 함수가 실행되기 때문에 시계를 호출하는 함수를 1번 실행

- clearInterval을 누르면 시계가 멈춤

---

setTimeout / clearTimeout 코드예시2)

 

[결과]

- 버튼을 누르면 해당 html 문서에 있는 모든 내용을 실시간으로 입력하는 것처럼 보여줌

- \n은 개행하는 코드로 <br> 태그로 변경

- 스크롤은 사용자가 움직이지 않으면 그대로 있는 상태

---

setInterval / clearInterval 코드예시2)

 

[결과]

- 버튼을 누르면 해당 html 문서에 있는 모든 내용을 실시간으로 입력하는 것처럼 보여줌

- \n은 개행하는 코드로 <br> 태그로 변경

- 스크롤은 body의 높이에 따라서 맨 아래로 내려지고 있음