> For the complete documentation index, see [llms.txt](https://incheol-jung.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://incheol-jung.gitbook.io/docs/study/nodejs/2018-01-16-nodejs-2st.md).

# 2회차

## 자바스크립트란?

자바스크립트는 웹 페이지와 상호 작용 하도록 만들어진 스크립트 언어이다. ECMAScript의 핵심 기능을 제공하고 있으며, 문서 객체 모델(DOM)을 통해 웹 페이지 콘텐츠를 조작하는 메서드와 인터페이스를 제공한다. 또한, 브라우저 객체 모델(BOM)을 통해 브라우저와 상호작용하는 메서드와 인터페이스를 제공한다. 자바스크립트는 스크립트 언어미여, 웹에서 사용하는 인터프리터 언어이다. 컴파일이 필요 없으며, HTML 웹 페이지를 통해 스크립트를 삽입하면 웹 브라우저를 통해서 동작하게 된다.

## 자바스크립트의 특징

자바스크립트는 HTML문서와 함께 처리되므로, 일반 프로그래밍 언어보다는 기능이 제한적이다. 자바스크립트의 특징은 다음과 같다. 1) 자바스크립트는 객체 기반의 언어이다. 하지만 상속과 클래스라는 개념이 없다. 2) 자바스크립트는 인터프리터 언어로서 클라이언트의 웹 브라우저에 의해 해석되고 실행된다. 브라우저마다 약간의 차이가 존재한다. 3) 자바스크립트는 HTML문서 내에 기술되고 HTML문서와 함께 수행된다. 4) 자바스크립트는 HTML에 연상, 제어 등 프로그래밍적인 요소를 추가하고, 클라이언트의 자원을 활용할 수 있게 한다.

## 자바스크립트 변수

### 기본자료형

* 숫자형
* 문자형
* Boolean형

### 객체형

* 리터럴로 표현

  var로 변수를 선언하고 멤버간에는 ,로 구분한다. 

```javascript
var a = {
    numberVal : 111,
    arrayVal : "zzz",
    arrayList : [1,2,3],
    Speack : function(){
        consoloe.log("function");
    }
}
console.log(a);
```

```javascript
console.log(a.numberVal);
=> 111
console.log(a.arrayVal );
=> zzz
```

```javascript
var a = {
    numberVal : 111,
    arrayVal : "zzz",
}
a.addNumber = 222;
console.log(a.addNumber);
```

```javascript
var a = {
    numberVal : 111,
    arrayVal : "zzz",
    arrayList : [1,2,3],
    speack : function(){
        consoloe.log("function");
    }
}

for(var property in a){
    console.log(   property + "/ " + a[property]);
}
```

* 함수로 표현

  내부가 어떻게 구현되었나 생각하지 않고 제공되는 함수와 변수를 사용한다. 

  사용하는 입장에서는 코드 분석이 용이하고 좀 더 깔끔해보일 수 있다. 

```javascript
function test(name, title){
    this.name = name;
    this.title = title;
}
var myTest = new test( "park" , "jjjj")
console.log(myTest.name);
```

```javascript
function test(name, title){
    this.name = name;
    this.title = title;
      var private = “private variable”;
}
var myTest = new test( "park" , "jjjj")
console.log(myTest. private);
// undefined 에러발생( 내부에서만 접근가능 )
```

```javascript
// 내부 private변수 접근법
function test(name, title){
    this.name = name;
    this.title = title;
    var privateVal = "private variable";
    this.privatePrint = privateVal; 
    // 접근할 공용변수 생성
}
var myTest = new test( "park" , "jjjj");
console.log(myTest.privatePrint);
```

```javascript
function Car(){
    this.name = "My Car";
}

Car.prototype.move = function(){
    console.log(this.name + " move");
}   // prototype으로 멤버추가

var myCar = new Car();
myCar.move();
```

```javascript
// 멤버변수로도 선언
function Car(){
    this.name = "My Car";
}
Car.prototype.color = "red";
Car.prototype.move = function(){
    console.log(this.name + " is " + this.color);
}
var myCar = new Car();
myCar.move();
```

```javascript
// New키워드를 이용한 구현
function Car(){
    this.name = "super name";
    this.showName = function(){
        console.log(this.name + " is print");
    }
}
function Taxi(){
    var _super = new Car();
    _super.name = "taxi name";
    return _super;
}
var myTaxi = new Taxi();
myTaxi.showName();

console.log(myTaxi instanceof Car);
//True
console.log(myTaxi instanceof Taxi);
//False
```

```javascript
var abc = 1;   // global 범위
function test(){ 
    var bbb = 2;
    console.log(abc); // 여긴 접근가능 상위를 참조했으므로
}
test();
console.log(bbb); //bbb가 선언되지 않았다는 오류 발생
```

## JQeury 연습

### Accordion

URL : <https://nodejs.junyoung.me/jquery-accordion/>

### 댓글작성

URL : <https://nodejs.junyoung.me/jquery-comment/>

### 스톱워치

URL : <https://nodejs.junyoung.me/jquery-stop-watch/>

### 슬라이더

URL : <https://nodejs.junyoung.me/jquery-slider/>