728x90
반응형

분류 전체보기 476

객체 Object - 3 ( 객체와 배열 )

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

객체 Object - 2 (객체 속성 동적 관리, 배열을 통한 데이터관리)

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

객체 object - 1( 객체란? / for in 반복문 / in, with 키워드)

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

FullCalendar API main.js 형태 분석 2

지난 포스팅 때에는 타입스크립트 문법으로 유추했지만 오늘 다시 보니 그냥 기본문법으로 구현된 것 일수도 있겠다 유추되었다. var FullCalendar = (function (exports){ /* 코드 생략 */ }({})); 자바스크립트 기본서 책을 한번 읽고나서 객체인줄 알았으나 책을 두번째 읽으며 블로그에 정리하고 다시 파일을 보니우측에 function이라는것이 이제서야 눈에 들어왔다. 식별자 변수명이 대문자인것으로 보아 생성자 함수로 유추된다. 익명 함수문법을 사용한 생성자 함수 선언이다. 선언적 생성자 함수로 구현하면 아래와 같지 않을까? function fullcalendar (exports) { } var fullCalendar = new FullCalendar(); 마지막 괄호의 중괄호..

API/FullCalendar 2022.01.23

짧은 조건문 (논리합 || or 논리곱 &&)

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

자바스크립트

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

이벤트 - DOM Level 2 : 표준 이벤트 모델

인라인 이벤트 모델이나 고전 이벤트 모델은 한 번에 하나의 이벤트 리스너만을 가질 수 있다. 이러한 DOM Level 0 이벤트 모델들의 단점을 보완하려고 만들어진 이벤트 모델이 DOM Level 2 이벤트 모델이다. DOM Level 2 이벤트 모델에는 인터넷 익스플로러 이벤트모델과 표준 이벤트 모델이 있다. DOM Level 2 ˙인터넷 익스플로러 이벤트 모델 ˙attachEvent(eventProperty, eventListener) : 이벤트 연결 ˙detachEvent(eventProperty, eventListener) : 이벤트 연결 제거 ˙표준 이벤트 모델 표준 이벤트 모델은 웹 표준을 만드는 W3C에서 공식적으로 지정한 DOM Level 2 이벤트 모델이다. 한번에 여러 가지의 이벤트 리..

이벤트 - DOM Level 0 : 인라인 이벤트 모델 (디폴트 이벤트 - 유효성 검사)

인라인 이벤트 모델은 HTML페이지의 가장 기본적인 이벤트 연결 방법이다. Click 위 코드와 같이 인라인 이벤트 모델은 HTML태그 요소노드에 이벤트 속성을 추가하여 구현한다. 이벤트 속성에는 다음과 같이 자바스크립트 코드를 작성하여 실행할 수 있다. Click 이벤트 속성에 여러 줄의 자바스크립트 코드도 입력이 가능하다. Click 하지만 이벤트 속성에 여러줄의 코드를 사용하면 지저분해져 가독성이 떨어진다. 이 경우 스크립트 코드로 함수를 구현한 뒤 함수를 호출하는 방식을 많이 사용한다. Click 위 코드와 같이 이벤트를 호출할 때 매개변수를 넣었다. 이벤트 객체를 전달하는 방법이다. 이러한 이벤트 객체를 PointerEvent 라고 한다. 클릭하여 이벤트가 호출되면 콘솔창에 이벤트 객체에 대한 ..

이벤트 - DOM Level 0 : 고전 이벤트 모델

이벤트 이벤트는 키보드를 이용해 버튼을 입력하거나 마우스 클릭과 같이 다른것에 영향을 미치는 것을 의미한다. 자바스크립트에는 다음과 같은 이벤트가 있다. ˙ 마우스 이벤트 ˙ 키보드 이벤트 ˙ HTML 프레임 이벤트 ˙ HTML 입력 양식 이벤트 ˙ 유저 인터페이스 이벤트 ˙ 구조 변화 이벤트 ˙ 터치 이벤트 이벤트는 애플리케이션 사용자가 발생시킬 수도 있고 애플리케이션이 스스로 발생시킬 수도 있다. 이전 포스팅들 에서 DOM객체를 관리하고 컨트롤할 때 다음과같은 코드를 사용해왔다. window.onload = function () { }; window객체의 onload속성에 함수자료형을 할당하는 것을 "이벤트를 연결한다" 라고 한다. 이때 load를 이벤트 이름 또는 이벤트 타입 (EventType) ..

배열과 Array객체 2 : ECMAScript Array [ forEach( ), map(), filter(), every(), some(), reduce(), reduceRight() ]

HTML5와 함게 출현한 자바스크립트 표준안을 ECMAScript5 라고 부른다 ECMAScript5는 기존의 자바스크립트에서 객체 관련 부분을 많이 보완했다. ECMAScript5는 인터넷 익스플로러 8 이하에서는 지원하지 않으므로 익스플로러 9 이상이나 그 외의 브라우저에서 테스트 해야한다. 확인메서드 Array.isArray( ) : 배열인지 확인한다. typeof 키워드로 Array객체의 자료형을 확인하면 문자열 'object'가 나오므로 Array객체임을 확인하려면 constructor( ) 메서드로 자료형을 비교하는것을 응용해야 한다. var array = new Array(52,273,103,57,32); if (array.constructor == Array) { console.log(ar..

배열과 Array객체 1

배열과 Array객체 배열 배열이란 여러 개의 변수를 한꺼번에 다룰 수 있는 자료형이다. 자바스크립트에는 문자열, 숫자, 불, 함수, 객체, 정의 되지 않은 undefined 자료형 까지 총 6가지 자료형이 있다. 배열은 object 객체 중 하나이다. 자바에서는 배열을 {중괄호}로 생성하지만 자바스크립트에서는 배열을 [대괄호]로 생성한다. 대괄호 안에 쉼표로 구분해 자료를 입력한다. 배열 안에 입력된 값을 배열요소 element라고 부른다. var array = [273, 32, 103, 57, 52]; 위와 같이 배열을 선언하며 다섯 개의 요소가 있는 배열이다. 배열에는 어떠한 종류의 자료형도 배열 요소가 될 수 있다. var array = [273, 'String', true, function(){..

문자열과 String객체 (메서드체이닝기법) , ECMAScript5 - trim( ) 메서드

자바스크립트에서 문자열 데이터는 다음과같이 변수에 저장하여 사용한다. var string = 'string문자열'; var stringLiteral1 = 'Hello world'; var stringLiteral2 = 'Hello world'; console.log('리터럴문자열1 == 리터럴문자열2 : ',stringLiteral1 == stringLiteral2); console.log('타입 체크 : ',typeof stringLiteral1, typeof stringLiteral2) console.log('리터럴문자열1 === 리터럴문자열2 : ',stringLiteral1 === stringLiteral2); var stringLiteral = 'Hello world'; var stringCon..

숫자와 Number 객체

자바스크립트에서 숫자 데이터는 다음과같이 변수에 저장하여 사용한다. var number = 273; var numberLiteral1 = 273; var numberLiteral2 = 273; console.log('리터럴숫자1 == 리터럴숫자2 : ',numberLiteral1 == numberLiteral2); console.log('타입 체크 : ',typeof numberLiteral1, typeof numberLiteral2) console.log('리터럴숫자1 === 리터럴숫자2 : ',numberLiteral1 === numberLiteral2); var numberLiteral = 273; var numberConstructor = new Number(273); console.log('리터..

Object 객체

object 객체는 자바스크립트의 최상위 객체이다. 자바스크립트의 가장 기본적인 내장 객체는 Object 객체로 정확히는 Object 생성자 함수로 만든 인스턴스지만 간단하게 Object 객체라고 표현한다. Object객체 생성 var object = {}; var object = new Object(); Object객체의 메서드 constructor( ) : 객체의 생성자 함수를 나타낸다. hasOwnProperty( ) : 객체가 name속성이 있는지 확인한다. isPrototypeOf( ) : 객체가 object의 프로토타입인지 검사한다. propertyIsEnumerable( ) : 반복문으로 열거할 수 있는지 확인한다. toLocaleString( ) : 객체를 호스트 환경에 맞는 언어의 문자열..