# 배운 내용
- JavaScript는?
- 문법
- 변수
- 함수
- 객체
- Prototype
1. JavaScript
JavaScript는?
웹페이지에서 능동적으로 바뀌는 컨텐츠를 만들어주는 언어이다.
JIT 컴파일러를 도입함으로서 기존의 인터프리터 방식보다 느린 실행 속도를 개선하였다.
자바의 장단점
장점
- 다른 언어에 비해 간단하고 배우기가 쉬움(물론, 깊이 들어갈 수록 어렵다-상대적인 부분)
- HTML과 같이 플랫폼에 독립적이다.
- 시스템의 부담이 적다.
단점
- 코드의 보안성이 취약하다.
- 내장함수의 한계를 가지고 있다.
- 디버깅 및 개발도구가 부족하다(최근에 개선이 많이 된 상태)
HTML 내에서 JavaScript 사용 방법
<head>에 선언
<body>에 선언
2. 문법
JavaScript는 고급 언어는 아니지만 고급 언어가 가지고 있는 대부분의 문법들을 가지고 있다. C의 문법구조와 유사하며 문맥은 Java와 유사하다.
코드 작성시 유의사항
코드 작성시 유의사항
문법 종류 및 예제
문법 종류 및 예제
- 출력문 : console.log(typeof 변수이름);
- null값과 undefined의 차이 : null은 null이라는 값이 존재하는 것이고 undefined는 아예 값이라는 것이 존재하지 않는 상태를 말한다.
- 변수에 함수를 담을 수 있다. 함수를 담게되면 그 변수는 함수의 역할을 수행한다.
- 기존에 데이터타입을 선언한 변수에 새롭게 데이터타입을 선언하면 새롭게 바꾼 타입으로 변경된다.
- eval(), parseInt() 함수는 문자를 정수형으로 바꿔주는 역할을 수행한다.
하지만 더 나아가 parseInt는 정수형 변환 뿐만 아니라 자체판단하여 정수형으로 바꾸어준다. - ===는 형변환을 제외한 진짜 값 만을 비교한다.
3. 변수
데이터를 보관하는 장소로 메모리상에 값을 저장할 수 있는 장소이다.
전역변수와 지역변수로 나눌 수 있다.
- 선언 방법 : var 변수이름 = 변수;
- var 초기값은 undefined값이 출력, 특정 값을 지정하지 않고 선언하여 초기화 할 시에는 null값을 선언한다.
변수 예시
- 전역변수 : 함수 밖에서 선언된 변수(필드로서 전체 다 사용한다.)
- 지역변수 : 함수 안에서 선언된 변수(함수 내에서만 사용 가능하다.)
- 지역변수보다 함수에 대한 변수가 먼저 출력이 된다.
- 함수에서 지역변수를 출력하기 위해 this. 를 사용하게 되는데 여기서의 this.는
window.로서 사용된다.
4. 함수
함수는?
프로그램 내에서 특정 작업을 수행하기 위해 사용하는 기능이다.
함수 선언 방법
- 함수를 선언할 때 <head> 내에서 선언한다.
- 선언 방법 : function 함수이름(매개변수1, 매개변수2, …..){함수 내용}
내부 함수 선언
내부 함수 선언 예시
- <script type></script>를 내부에서 선언한다.
외부 함수 선언
외부 함수 선언 예시
inoutcommon 파일 내용
- js 파일을 따로 생성하여 함수를 만든다.
- 이 파일을 src로 호출하여 가져와 선언 할 수 있다.
함수 선언의 종류
함수 선언 예시
- 선언적 함수 : 함수를 바로 선언하여 생성한 함수를 말한다.
- 함수 내에 지역변수를 선언하고 해당 변수를 return해준다.
- console문을 이용하여 함수를 출력한다.
- 익명 함수 : 변수에 함수를 대입하여 함수를 만든다.
- 변수 선언과 동시에 함수를 선언하여 변수에 함수를 넣는다.
이 변수는 또한 다른 변수에 전달이 될 수 있다. - 함수의 매개변수 값 내에도 함수가 들어갈 수 있다.
- foo 변수의 함수의 매개변수 값이 function이면 foo함수를 출력한다.
- 함수 내에서 함수를 return이 가능하다.
- foo2 변수에 함수 내에서 return을 할 함수를 선언하고 foo2에 대한 변수를 지정하고 변수();를 하면 함수값 그대로가 출력된다.
함수 선언 예제
함수 선언 예제 1
- 전역변수는 value1, printFunc() 함수 안에 있는 지역변수는 value2이다.
- printValue 함수는 value값을 return하는데 지역변수보다 전역변수보다 먼저 출력된다.
- console문을 통해 printValue를 출력하면 value2값이 출력된다.
함수 선언 예제 2
- printValue는 value를 return하고있다.
- printFunc은 func 매개변수 값을 가지고 있으며 value2 값을 가진 변수를 가지고 있다.
- 여기서 printFunc(printValue);는 이미 printValue값이 들어갔기 때문에 return된 value1 값이 출력된다.
5. 객체
객체는?
데이터와 그 데이터에 관련된 동작을 포함한 개념이며 식별이 가능하고 자신의 속성을 가지고 있는 것을 말한다.
프로퍼티(Property) & 메소드(Method)
프로퍼티 예시
- 프로퍼티는 객체에 대하여 ‘.’을 이용하여 객체의 속성을 사용할 수 있다.
- myCar(객체).model(속성) = “sonata”; 를 이용하여 객체의 속성은 sonata 라는 값을 할당시켰다.
메소드 예시
- 메소드는 동작을 수행하는 객체를 동작하기 위해 지시(정의)하는 역할을 한다.
- 메소드에 대한 생성자를 생성하고 new 연산자를 통해 값을 선언하고 호출시키면 해당 값이 출력된다.
객체 생성 방법
- new Object()를 이용한 객체 생성
- 문자형 표기(리터럴)에 의한 객체 생성
- 생성자 함수에 의한 객체 생성
객체 생성 방법 예시
- Object 객체 생성은 가장 간단히 객체를 생성할 수 있다.
데이터타입 변수명 = new Object();를 이용하여 변수이름 객체를 생성할 수 있다. - 객체.(프로퍼티)속성으로 값을 선언하고 출력이 가능하다.
- Object 객체는 재사용 및 재정의의 한계가 있다. (속성을 하나밖에 정의하지 못하기 때문)
- 리터럴 객체 생성은 배열, 임의의 자바스크립트 표현, 값을 포함 가능하다.
Key와 Value값으로 구분하여 선언한다. - 데이터타입 변수명 = {객체 이름1 : 객체 값, 객체 이름2 : 객체 값, …..}로 선언 가능하다.
- 코드를 구현하기 위해 display명의 메소드를 사용하여 this.를 사용하여 선언하고
변수명.display();를 통해 출력한다. - 번외로 함수도 마찬가지로 객체취급이 가능하여 함수명.속성을 통하여 출력이 가능하다.
- 퀴즈는 위에서 나타낸 것과 동일하게 리터럴 형식으로 변수를 선언하고 프로퍼티를 통하여 속성값을 선언하고 return하는 함수도 선언하여 출력한다.
- 생성자 함수 객체 생성은 객체의 속성과 메소드를 정의하기 위한 함수이다.
- 함수명(매개변수1, 매개변수2, …..){this.속성1 = 속성값;, this.속성1 = 속성값;, ….}로 선언한다.
- 예제에서는 grade를 student객체에 선언하여 매개변수를 동일하게 사용할 수 있게 해주었다.
- 각 메소드별로 return값을 주고 toString을 통하여 출력하였다.
- 여기서 출력메소드를 생성하고 new 연산자를 통하여 출력해도 무방하다.
Ex) var stu1 = new student(‘홍길동’,90, 80, 70); - 배열 생성을 통해 배열 내에 객체 들을 넣어줄 수 있다.
자바와는 다르게 대괄호로 선언한다. - .puch()를 이용하여 배열 내에 객체를 생성하여 각 함수의 매개변수 값을 넣어준다.
- for-in문을 통하여 i가 배열 최대까지 반복할 때 toString을 통하여 화면에 출력되도록 한다.
6. Prototype
Prototype은?
함께 사용할 수 있는 공통의 메모리 공간을 가진 객체로서 새로운 속성과 메소드를 추가할 때 사용한다.
프로토타입 예시
프로토타입 예시
- 먼저 프로토타입을 사용하기 전에 함수를 선언하여 객체를 생성할 준비를 한다.
- 프로토타입이 없다면 student객체별로 일일이 toString(), getSum(), getAverage() 를 입력해야하는 수고스러움이 있음 때문에 중복되는 내용을 프로토타입에 담는다.
- 프로토타입 선언 : 함수명.prototype = {프로토타입 내용1, 프로토 타입 내용2, ….}
- 해당 생성자들을 출력하기 위해 배열을 선언하여 push로 객체를 생성하여 매개변수의 값을 넣어준다.
- for-in문으로 최대배열값까지 반복하고 toString으로 출력해준다.
'KOSTA' 카테고리의 다른 글
| KOSTA 교육 (This, Window, DOM, AJAX, JQuery) (0) | 2021.03.24 |
|---|---|
| KOSTA 교육(내장객체, Array, String, Date, 정규표현식, 이벤트) (0) | 2021.03.19 |
| KOSTA 교육 (HTML5, 시맨틱 마크업, CSS, link, Font, 박스모델, 테이블&테두리 속성) (0) | 2021.03.17 |
| KOSTA 교육(HTML, Tag, div, ol, ul, li, head, meta, body, form, h, input, type) (0) | 2021.03.16 |
| KOSTA 교육 (데이터 모델링, 엔티티 타입, 정규화) (0) | 2021.03.15 |
