유혁스쿨

캡슐화 사각형을 의미하는 Rectangle 객체를 만든다고 가정했을때, 다음과 같이 Rectangle생성자 함수를 만들 수 있다. function Rectangle(wth, hgt) { this.width = wth; this.height = hgt; } Rectangle.prototype.getArea = function() { return this.width * this.height; } var rectangle = new Rectangle(5, 10); alert('AREA : ' + rectangle.getArea()); width 속성에 5를 입력하고 height 속성에 10을 입력했으므로 getArea( ) 메서드를 호출하면 50을 출력한다. 하지만, width속성이나 height 속성에 음수..

생성자 함수 new 키워드로 객체를 생성할 수 있는 함수를 의미한다. 이전 포스팅에서 함수로 객체를 생성하는 코드를 구현해보았지만 new 키워드를 사용하지 않았으므로 생성자 함수라고 부를 수 없다. 아래 코드는 Student 생성자 함수를 만드는 코드이다. function Student () { } 생성자 함수의 이름은 일반적으로 대문자로 시작한다. 대문자로 시작하지 않아도 문제 없지만 대부분의 개발자가 지키는 관례 같은 규칙이므로 대문자로 선언한다. 기본적으로 자바스크립트 내부의 생성자 함수들 또한 모두 대문자로 시작하도록 구현되어 있다. 위와같이 생성한 생성자 함수는 아래 코드와 같이 new 키워드로 객체를 생성한다. function Student () { } var student = new Stud..

이전 포스팅에서는 배열 안에 객체를 하나씩 직접 만들어 넣었다. 객체를 하나씩 만들어 배열에 넣으면 서로 다른 형태의 객체를 배열 안에 넣을 수 있다는 장점이 있다. 예를 들어 학생의 정보를 입력할 때 아래 코드와 같이 서로 다른 정보를 입력할 수 있다. var students = []; students.push({ 이름: '안준언' , 국어: 90 , 수학: 95 , 영어: 100 , 과학: 80 }); students.push({ 이름: '이건희' , 국어: 90 , 수학: 85 , 영어: 80 , 과학: 80 }); students.push({ 이름: '황병선' , 국어: 90 , 수학: 90 , 영어: 100 , 과학: 90 }); 위와 같이 개별적으로 객체를 만드는 것은 객체의 특성을 정확히 반..

객체와 배열 객체와 배열을 활용하여 학생들의 성적 총점과 평균을 계산하는 예제를 만들어본다 다음은 현실에 존재하는 student 객체에서 성적을 관리할 때 필요한 속성만 뽑아서 자바스크립트 객체로 만든것이다. 이렇게 현실에 존재하는 객체의 필요한 속성을 추출하는 작업을 "추상화" 라고 한다. 우선 학생데이터를 만든다. //학생 데이터 생성 var student0 = {이름: '안준언', 국어: 90, 수학: 95, 영어: 100, 과학: 80}; var student1 = {이름: '이건희', 국어: 90, 수학: 85, 영어: 80, 과학: 80}; var student2 = {이름: '황병선', 국어: 90, 수학: 90, 영어: 100, 과학: 90}; var student3 = {이름: '유재혁'..

처음 객체를 생성하는 시점 이후에 속성을 추가하거나 제거하는 것을 "동적으로 속성을 추가한다" 혹은 "동적으로 속성을 제거한다" 라고 표현한다. 이번 포스팅에서는 객체의 속성을 동적으로 추가 및 제거하는 방법을 알아본다. 객체 속성 동적 추가 아래와 같이 빈 객체를 생성한다. var student = {}; 동적으로 속성을 추가하는법은 아래 코드와 같이 구현한다 student.이름 = '남궁댕'; student.취미 = '폰게임'; student.특기 = '삑사리'; student.장래희망 = '프로그래머'; 메서드도 객체의 속성이므로 동일한 방법으로 추가할 수 있다. student.toString = function () { var output = ''; for (var key in this){ if(..

여러 변수를 한꺼번에 모아 사용하는 자료형에는 배열이 있다. 하지만 자바스크립트 기본 자료형은 숫자, 문자, 불, 객체, 함수, undefined로 배열이라는 자료형은 없다. alert(typeof([])); 코드를 실행하면 object임을 확인할 수 있다. 이 때 출력된 object가 바로 '객체' 이다. 객체 개요 var array = ['사과', '바나나', '망고', '딸기']; 배열에는 '인덱스'와 '요소'가 있다. 각각의 배열요소를 사용하려면 다음과 같이 배열 이름뒤에 인덱스로 접근한다. var array = ['사과', '바나나', '망고', '딸기']; array[0] // 사과 array[2] // 망고 배열은 객체를 기반으로 만들어졌으므로 배열과 객체는 상당히 유사하다. 다른점이 있다면..

짧은 조건문 논리 연산자의 특성을 조건문으로 사용한다. 논리합 조건문 true || ____ 논리합 연산자는 좌변이 참이면 우변을 실행하지 않는다. true || alert('우변 실행'); false || alert('우변 실행'); 첫 번째 문장은 좌변이 참이므로 우변을 무시하지만 두번째 문장은 좌변이 거짓이므로 우변이 참인지 거짓인지 검사하고 그 과정에서 경고창을 출력한다. 논리합 연산자를 사용한 짧은 조건문을 정리하면 다음과 같다. (불 표현식) || (불 표현식이 거짓일 때 실행 할 문장) function (e){ var event = e || window.event ; } 위 코드는 e가 정의되어있는 데이터면 변수에 e를 저장하고 e가 정의되어 있지 않은 undefined 상태이면 window..

개요 자바스크립트 JavaScript 는 웹 브라우저에서 많이 사용하는 프로그래밍 언어이다. 자바스크립트는 본래 넷스케이프의 브랜든 아이히 Brendan Eich라는 사람에 의해 '모카' 라는 이름으로 만들어졌다. '모카'는 곧 라이브 스크립트라는 이름으로 개발됐고, 이후 넷스케이프가 썬 마이크로시스템과 함께 라이브 스크립트에 자바스크립트라는 이름을 붙이고 본격적으로 발전하기 시작한다 썬 마이크로 시스템에서 개발한 자바 프로그래밍 언어와 이름을 같게 하는 마케팅 조약을 채결했으며, 이름은 비슷하지만 완전히 다른 프로그래밍 언어이다. 활용 초기의 웹 페이지는 변화되지 않는 정적인 글자들로만 꾸며졌었다. 웹은 하이퍼링크라는매개체로 웹 문서가 연결된 하나의 거대한 책에 불과했다. 하지만 자바스크립트가 나오고 ..

함수를 리턴하는 함수 지난 포스팅에서 함수를 매개변수로 전달하는 콜백함수에 대해 살펴보았다. 함수를 매개변수로 전달할 수 있다는 것은 함수를 리턴하는 함수도 만들수 있지 않을까 function retufnFunction() { return function() { alert("Hello Function"); } } returnFunction()(); retufnFunction() 함수를 호출하면 함수가 리턴되기 때문에 괄호를 한 번 더 사용하여 리턴되는 함수를 한번 더 호출한다. 다음과 같이 자기 호출 함수 형태로 바꿀수 있다. (function() { alert("Hello Function"); }) (); function returnFunction() { return (function() { alert..

내부함수 내부함수는 프로그램의 규모가 커질수록 다른사람과 함께 프로그램을 개발하게 되는데 이때 발생하는 여러가지 충돌을 막기위한 방법중 하나이다. 다음과 같은 형태로 구현한다. function 외부함수 () { function 내부함수1() { //함수 코드 } function 내부함수2() { //함수 코드 } //함수 코드 } 피타고라스를 정리하는 함수 pythagoras()를 만들어 내부함수를 구현해본다. function pythagoras(width,height) { return Math.sqrt(width*width + height*height); } 숫자를 제곱하는 부분은 피타고라스에서 자주 사용되는 내용이므로 별도의 square()함수로 구현한다. function square(x) { ret..

매개변수와 리턴값 매개변수와 리턴값을 갖는 함수는 다음과 같이 정의한다. function 함수이름 (매개변수1, 매개변수2, 매개변수3, ...) { return 리턴값; } 함수를 호출할 때 (소괄호)안에 값이나 변수등의 인자값을 주입하는것을 매개변수라고 한다. 함수를 선언할 때 사용할 매개변수를 ,쉼표와 함께 (소괄호) 안에 지정해준다. 어떤식으로 활용하는지 다음과같이 구현해본다. function f(x) { return x * x ; } alert(f(3)); 호출되는 f(x) 함수의 매개변수는 x이고 return 내용은 인자값으로 받은 매개변수를 서로 곱하는 식이다. 따라서 매개변수 x에 정수값 3을 담아 호출한다면 3*3 = 9의 값을 반환한다. 함수를 호출하는 쪽과 정의된 함수를 연결하는 매개..

함수 함수는 코드의 집합을 나타내는 자료형으로 크게 익명함수와 선언적 함수로 나뉜다. 코드의 집합이라는 의미는 {중괄호} 내부에 코드를 선언한다는 뜻이다. 함수가 호출되면 {중괄호} 내부에 선언된 코드 내용을 실행시킨다. 익명 함수 var 함수 = function() { }; 선언적 함수 function 함수 () { }; 익명 함수는 변수를 선언하고 선언된 변수에 저장하여 사용된다. 선언적 함수는 변수에 저장하지 않고 이름을 부여하여 사용된다. 함수호출 자바스크립트에서 함수는 하나의 자료형이지만 다른 자료형과 다르게 (괄호)를 열고 닫음으로써 코드를 실행한다. 이렇게 함수를 실행하는 것을 함수를 호출한다 라고 표현한다. 함수(); 익명 함수를 호출할 때에는 함수가 저장된 변수의 변수명(); 과 같이 호..