2회차

Node.js로 구현하는 쇼핑몰 프로젝트 2회차 수업 요약 내용입니다.

자바스크립트란?

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

자바스크립트의 특징

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

자바스크립트 변수

기본자료형

• 숫자형

• 문자형

• Boolean형

객체형

• 리터럴로 표현

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

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

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

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

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]);
}

• 함수로 표현

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

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

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

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 에러발생( 내부에서만 접근가능 )

// 내부 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);

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

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

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

// 멤버변수로도 선언
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();

// 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

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/