목록javascript/Tutorial (31)
웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)
상속- 기존에 생성자함수 또는 객체를 기반으로 새로운 생성자 함수나 객체를 만들어 내는 것- 부모 요소로 부터 속성과 메서드를 물려 받는 것 ex 1) 상속받기// money 매개변수를 받는 Price 생성자 함수 생성function Price(money){ // p 변수에 매개변수로 받은 money 저장 var p = money; // 메서드 선언 , 결과값으로 p 를 리턴 this.getP = function(){ return p; };}// prototype공간에 getMoneyPlan메서드 선언 Price.prototype.getMoneyPlan= function(){ // getP 에 저장된 값을 12로 나눠서 결과값 리턴 return this.getP() / 12;}// money 매개변수를 ..
instanceof- 생성자 함수를 통해서 만들어진 객체를 instance 라 한다. - 객체가 어떤 생성자 함수를 통해 생성됬는지 확인할때 사용 ex) // 생성자 함수 선언function Option(name){ this.n = name;}// car 변수에 생성자 함수에 매개변수를 던져 객체 생성var car = new Option('genesis');// car 변수의 객체가 Option함수를 통해 생성되었는지를 확인console.log(car instanceof Option);
new 키워드- 생성자 함수를 사용해서 객체를 생성할때에 사용 new 키워드 사용예)// 생성자 함수 선언function Car(name){ // 키 설정, 매개변수로 받은 name 값을 n 으로 담는다. this.n = name;}// car 변수에 new키워드를 사용해 생성자 함수에 매개변수를 던져서 저장var car = new Car('genesis');// car의 n 속성 출력 console.log(car.n); new 키워드를 사용하지 않았을 경우)// 생성자 함수 선언function Car(name){ this.n = name;}// car 변수에 생성자 함수에 매개변수를 던져서 저장var car = Car('genesis');// car의 n 속성 출력 console.log(n); new ..
생성자 함수- new키워드를 사용해 객체를 생성하는 함수- 생성자 함수 안에서는 this 키워드를 사용해 객체 속성을 지정- 일반적으로 생성자함수 이름은 대문자로 시작하는 것이 개발자들간의 관례 ex ) // 4개의 매개변수를 받는 함수선언function Option(name, price, mission, color){ // 객체선언 및 키 설정 this.n = name, this.p = price, this.m = mission, this.c = color;}var car = []; // 배열선언// car 배열에 push 로 new키워드를 사용해 데이터 값을 밀어 넣는다.car.push(new Option('genesis', 5000, 'auto', 'black'));car.push(new Optio..
함수를 활용한 객체 생성같은 패턴의 객체를 하나하나 생성하게 되면 내용이 많아질 경우 지루하고 시간이 많이 들게 된다. 붕어빵을 예로 들자면, 붕어빵을 모두 수제작으로 만들게 된다면 모양부터 굽기 까지 엄청난 시간과 노력이 필요하다. 하지만 이 붕어빵을 붕어빵 기계의 틀에 넣고 굽게 되면 짧은 시간안에 대량생산이 가능하다. 이렇듯 객체를 고정된 형태의 틀에서 뽑아 낸다면 쉽게 객체를 생성 할 수 있다. ex) 함수로 객체 생성하기 // 4개의 매개변수를 받는 함수선언function option(name, price, mission, color){ var carReturn={ // 객체선언 및 키 설정 n : name, p : price, m : mission, c : color }; return carR..
push()어떠한 정보를 밀어넣는 것 ex) 배열에 데이터 밀어 넣기var car = []; // 배열 선언// car 배열에 push 로 brand, product, color 키와 값을 입력car.push({brand:'h', product:'Genesis', color:'black'});car.push({brand:'h', product:'Grandeur', color:'white'});car.push({brand:'k', product:'k7', color:'blue'});console.log(car); // 화면에 출력car 배열안에 push로 밀어 넣은 데이터값이 들어가 있는 것을 확인 할 수 있다.
객체- {}를 사용해 생성- 배열과 상당히 유사- 배열과 마찬가지로 모든 형태의 자료형을 가질 수 있다.- 배열은 요소에 접근할때 인덱스를 사용 하지만 객체는 키를 사용한다. 객체의 생성var ex = {number:123,string:'객체',boolean:true,array:[1,2,3,4,5],method:function(){}} 예) 자동차 객체 생성var car = { brand : 'h', price : 3000, color : 'white', transmission : 'auto', option : 'ecs, tcs, wheel, sunroof '} 위의 예제를 표로 나타내면 아래와 같다. 키 요소 brand h price 3000 color white transmission auto opt..
함수를 매개변수로 받기함수도 자료형중의 하나이므로 매개변수로 던질 수 있다. ex1) 익명함수로 던질때 // variable 선언, 매개변수로 아래의 함수를 output으로 받는다.function variable (output){ output(); // 받은배개 변수를 실행} variable (function (){ //variable 함수 실행, 매개변수로 함수를 던진다. console.log('Function CallReturn');}); ex2) 선억적 함수로 받을때// variable 변수 실행, 매개변수로 함수 action을 output으로 받는다. function variable (output){ output(); //output 실행}function action(){ // 화면에 Functi..
함수 익명함수함수에 이름을 선언하지 않고 변수에 참조한 형태를 말한다. 익명함수의 선언 및 호출var 함수이름 = function(){ // 함수를 선언 console.log('function') // 함수 호출시 function을 화면에 출력 }함수이름(); // 함수 호출 선억적함수일반적 함수의 형식으로 다음과 같은 방법으로 선언한다. 함수의 선언function 함수이름(){문장 }함수이름(); // 함수호출 위 코드는 익명함수와 같은 기능을 수행한다. 변수는 같은 이름으로 다시 선언하면 나중에 선언한 변수가 기존변수를 덮어 씌우는 것과 마찬가지로 함수도 같은 이름으로 선언된 것이 있으면 나중에 작성한 것이 우선한다. ps. 웹브라우져는 script 내부 내용을 한줄한줄 읽기 전에 선언적 합수를 먼저..
반복문 똑같은 일을 여러번 반복 해야 할때 일을 간편하게 처리하기 위해서 사용하는 것으로 다음과 같은 코드는 화면에 'print'라는 단어를 3번 반복시켜 출력해 준다.console.log('print'); console.log('print'); console.log('print');console.log('print');console.log('print');console.log('print');console.log('print');물론 저렇게 사용하는 경우는 없겟지만 이것을 수백번 이상 실행시키려고 할경우 이것을 복사해서 붙여 넣는 것은 상당히 지루한 일이 아닐 수 없다.while, do while, for, for in 문등의 반복문을 이용해서 여러번 반복되는 일들을 간편하게 처리 할 수 있다. whi..