웹
[JavaScript] 자바스크립트 객체(object) (1) : 참조 및 생성
자바스크립트 객체 - JS의 기본 타입은 객체(object) - 객체 : 이름과 값으로 구성된 프로퍼티의 정렬되지 않은 집합 - 함수가 객체의 프로퍼티의 값으로 오면, 메소드(method0라고 부른다 - 객체의 프로퍼티 및 메소드 참조 객체이름.프로퍼티이름 객체이름["프로퍼티이름"] 객체이름.메소드이름() var person = { name: "홍길동", birthday: "030219", pId: "1234567", fullId: function() { return this.birthday + this.pId; } }; person.name // 홍길동 person["name"] // 홍길동 person.fullId() // 0302191234567 person.fullId; // function ()..
[JavaScript] 자바스크립트 함수(function) (2) : 미리 정의된 전역 함수
미리 정의된 전역 함수 (predefined functions) - JS는 사용자 편의를 위해 다양한 기능의 여러 전역 함수를 미리 정의하여 제공한다 - 어떤 타입의 객체에서도 바로 사용 가능 eval() : 문자열로 표현된 자바스크립트 코드를 실행하는 함수 eval("문자열"); var x = 10, y = 20; var a = eval("x + y"); // 30 var b = eval("y * 3"); // 60 document.write(a + " " + b); isFinite() : 전달된 값이 유한한 수인지를 검사하여 결과를 반환한다. 인수가 숫자가 아니라면 숫자로 변환하여 검사한다 isFinite(검사할값); isFinite(123); // true isFinite(123e100); // t..
[JavaScript] 자바스크립트 함수(function) (1) : 정의, 유효범위, 호이스팅, arguments, 디폴트 매개변수
자바스크립트 함수 - 자바스크립트에서는 함수도 하나의 타입(datatype)이다 - 다른 함수 내에 중첩되어 정의될 수 있다 함수의 정의 - function 키워드로 시작하며 함수이름, 매개변수, 실행문으로 구성된다 function 함수이름(매개변수1, 매개변수2,...) { 함수가 호출되었을 때 실행하고자 하는 실행문; } 함수의 호출 - 정의된 함수는 프로그램 내에서 호출되어야 비로소 실행된다 - (예) 함수의 정의 및 호출 // 함수의 정의 function addNum(x, y) { return x + y; } // 함수의 호출 var sum = addNum(3, 5); // 함수 addNum()을 호출하면서, 인수로 3과 5를 전달합니다. // 함수의 호출이 끝난 뒤에는 그 반환값을 변수 sum에..
[JavaScript] 자바스크립트 배열(array) : 생성 및 활용
배열 (array) : 이름과 인덱스로 참조되는 정렬된 값의 집합 - 요소 (element) : 배열을 구성하는 각각의 값 - 인덱스 (index) : 배열에서의 위치를 가리키는 숫자 자바스크립트에서 배열 특징 1. Array 객체로 다룬다 2. 배열 요소의 타입이 고정되어 있지 않아, 같은 배열에 있는 요소들끼리 타입이 서로 다를 수 있다 3. 인덱스가 연속적이지 않아도 되며, 특정 요소가 비어있을 수도 있다 배열의 사용 배열의 생성 - 문법 1. var arr = [배열요소1, 배열요소2,...]; // 배열 리터럴을 이용하는 방법 2. var arr = Array(배열요소1, 배열요소2,...); // Array 객체의 생성자를 이용하는 방법 3. var arr = new Array(배열요소1, 배..
[JavaScript] 자바스크립트 제어문 : 조건문, 반복문, 루프 제어(label, continue, break)
제어문 (control flow statements) : 프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문 조건문 (conditional statements) : 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문 ▶ if 문 - 표현식의 결과가 참(true)이면 주어진 실행문을 실행하고, 거짓(false)이면 아무것도 실행하지 않는다 - 문법 if (표현식) { 표현식의 결과가 참일 때 실행하고자 하는 실행문; } - (예) var x = 10, y = 20; if (x == y) { document.write("x와 y는 같습니다."); } if (x y) // 실행될 실행문이 한 줄뿐이..
[JavaScript] 자바스크립트 연산자 : 산술, 연산자 우선순위, 대입, 증감, 비교, 논리, 비트 연산자
산술 연산자 (arithmetic operator) - 사칙 연산을 다루는 연산자 - 두개의 피연산자를 가지는 이항 연산자 - 피연산자들의 결합 방향 : 왼쪽에서 오른쪽 산술 연산자 설명 + 더하기 - 빼기 * 곱하기 / 나누기 % 나머지를 반환 var x = 10, y = 4; document.write(x + y + " "); // 14 document.write(x - y + " "); // 6 document.write(x * y + " "); // 40 document.write(x / y + " "); // 2.5 document.write(x % y); // 2 ▶ 항 : 연산이 실행 가능하기 위해 필요한 값이나 변수 연산자의 우선순위(operator precedence)와 결합 방향(ass..
[JavaScript] 자바스크립트 타입 : 타입 변환
타입 변환 (type conversion) - 자바스크립트는 타입 검사가 매우 유연한 언어다 - 자바스크립트의 변수는 타입이 정해져 있지 않고, 같은 변수에 다른 타입의 값을 다시 대입할 수 있다 > 묵시적 타입 변환 (implicit type conversion) - 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환하여 사용한다 10 + "문자열"; // 문자열 연결을 위해 숫자 10이 문자열로 변환됨. "3" * "5"; // 곱셈 연산을 위해 두 문자열이 모두 숫자로 변환됨. 1 - "문자열"; // NaN - 세 번째 예제에서 문자열은 의미에 맞게 숫자로 자동 타입 변환이 불가능하므로, NaN 값을 반환한다 ▶ NaN (Not a Number) 정의되지 않은 값이나 표..
[JavaScript] 자바스크립트 타입 : 기본 타입, 변수
기본 타입 > 타입 (data type) : 프로그램에서 다룰 수 있는 값의 종류 - 자바스크립트에서 미리 정의하여 제공하는 타입들을 기본 타입이라고 한다 - 기본 타입은 원시 타입(숫자, 문자열, 불리언, 심볼, undefined)과 객체 타입으로 나눌 수 있다 > 숫자 타입 (number type) - 자바스크립트는 다른 언어와 달리 정수와 실수를 구분하지 않고, 모든 수를 실수로만 표현한다 - 매우 큰 수나 작은 수를 표기할 때는 e 표기법을 사용할 수 있다 var firstNum = 10; // 소수점을 사용하지 않은 표현 var secondNum = 10.00; // 소수점을 사용한 표현 var thirdNum = 10e6; // 10000000 var fourthNum = 10e-6; // 0..
[JavaScript] 자바스크립트 기본 : 개요, 문법, 출력, 적용
자바스크립트 (JavaScript) > 자바스크립트 : 객체 (object) 기반의 스크립트 언어 - HTML은 웹의 내용, CSS은 웹을 디자인, JS로는 웹의 동작을 구현한다 - 주로 웹 브라우저에서 사용되지만, Node.js 같은 프레임 워크를 사용하면 서버 프로그래밍에서도 사용할 수 있다 - 컴퓨터, 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있다 > 자바스크립트의 역사 - 1995년 Netscape의 Brendan Eich에 의해 만들어졌다 - Mocha, LiveScript의 이름을 거쳐 JavaScript라는 이름으로 변경됨 > 자바스크립트의 특징 - 객체 기반의 스트립트 언어 - 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다 - 객체 지향형 ..
[CSS] CSS3 (4) : 버튼, UI, 다중 칼럼 레이아웃, 플렉서블 박스 레이아웃, 미디어 쿼리
CSS3 버튼 (button) > CSS3 버튼 - 다양한 모양의 버튼을 만들 수 있다 - 태그 뿐만 아니라 태그와 태크로도 만들 수 있다 button 태그 a 태그 - (예) 마우스를 올리면 배경색이 변하는 버튼 - (예) 그림자 효과 설정 버튼 - (예) 버튼을 사용하지 못하게 설정 - 사용 금지된 버튼은 반투명하게 보인다 - (예) float 속성을 이용하여 만든 버튼 > 다양한 형태의 버튼 예제 - 애니메이션 효과를 이용하여 버튼에 다양한 효과를 줄 수 있다 - (예) 마우스를 올리면 버튼의 표시 내용이 바뀌는 예제 - (예) 버튼을 눌면 버튼 위로 다른 색상이 물결처럼 퍼지는 예제 - :active와 :after 선택자를 이용하여 transition 효과를 설정하여 구현 - (예) 진짜 버튼을 ..