이벤트의 종류 이벤트는 키보드를 이용해 버튼을 입력하거나 마우스 클릭과 같이 다른 것에 영향을 미치는 것을 의미한다. 자바스크립트에는 다음과 같은 이벤트가 있다. 마우스 이벤트 키보드 이벤트 HTML 프레임 이벤트 HTML 입력 양식 이벤트 유저 인터페이스 이벤트 구조 변화 이벤트 터치 이벤트 1. 이벤트 관련 용어 window객체의 onload속성에 함수 자료형을 할당하는 것을 "이벤트를 연결한다"라고 한다. 이때 load를 이벤트 이름, 또는 이벤트 타입이라고 하며 onload를 이벤트 속성이라고 한다. 또한 이벤트 속성에 할당한 함수를 이벤트 핸들러라고 한다. 2. 고전 이벤트 모델 고전 이벤트 모델로 이벤트를 연결하고 제거하는 방법이다. 고전 이벤트 모델을 사용한 이벤트 연결 Click 고전 이벤..
1. 함수란? 데이터를 저장할 때 변수를 선언하여 저장 했다. 하지만 변수에는 코드를 저장할 수 없기 때문에 함수를 이용해서 코드를 메모리에 저장 했다가 필요할 때마다 호출하여 사용한다. 1) 기본 함수 정의문 함수 정의문 : 함수를 사용하여 코드를 저장한 것 function 함수명() { 코드; } 다음과 같이 익명함수(함수명이 없는 함수)를 선언하고 변수에 참조해도 된다. 참조 변수 = function() { 코드; } 함수 정의문 안에 작성된 코드는 바로 실행되지 않는다. 함수는 메모리에 할당되어 대기중인 상태로 있는 함수가 호출되면 실행된다. 함수명(); 또는 참조 변수(); 일반 함수 정의 방식과 익명 함수 선언 참조 방식의 차이점 일반 함수 정의는 함수 호출시 호이스팅 기술을 지원한다. 그러나..
1. 객체란? 자바스크립트는 객체 기반 언어이다. 객체는 기능 또는 속성으로 구성되어 있다 종류 : 내장 객체, 브라우저 객체 모델(BOM), 문서 객체 모델(DOM) 2. 내장 객체 자바스크립트 엔진에 내장되어 있어서 필요한 경우에 생성해서 사용할 수 있다. 내장 객체란, 브라우저의 자바스크립트 엔진에 내장된 객체를 말한다. 필요한 경우 객체를 생성해서 사용할 수 있고, 내장 객체로는 문자, 날짜, 배열, 수학, 정규 표현 객체 등이 있다. 1) 날짜 객체 날짜나 시간 관련 정보를 제공받고 싶을 때는 날짜 객체(Date Object)를 생성한다. 날짜 객체를 생성하는 기본형 var 참조변수 = new Date("연/월/일"); // 큰따옴표 안에 쓸 때는 그냥 해당 월 그대로 쓰기 var 참조변수 = ..
1. 제어문 프로그램의 흐름을 제어할 수 있도록 도와주는 문장을 말한다. 조건에 따라 특정 코드를 실행시키는 조건문 일치하는 경우의 값이 있을 경우에만 특정 코드를 실행 시키는 선택문 코드를 지정한 횟수 만큼 반복해서 실행 시키는 반복문 유형 설명 구조 조건문 조건에 따라 다음 문장을 선택적으로 실행 if문 if~else문 다중 if~else문 switch~case문 반복문 동일한 명령을 여러번 처리하거나 특정 연산을 반복적으로 처리 for문 while문 do~while문 보조 제어문 조건문을 만나면 건너뛰거나 반복 수행을 종료(반복문 내에서 사용) continue문 break문 2. 조건문 조건문은 조건식의 값이 참(true)인지, 거짓(false)인지에 따라 자바스크립트 코드를 제어한다. 1) if문..
1. 연산자란? 일반적으로 사칙연산등을 하는 일련의 작업을 연산작업이라고 한다. 종류 : 산술, 문자 결합, 대입(복합대입), 증감, 비교, 논리, 삼항 조건 연산자 2. 산술연산자 이항 산술 연산자 의미 + 덧셈 - 뺄셈 * 곱셈 / 나눗셈 & 나머지 3. 문자 결합 연산자 더하기 연산에 문자형 데이터가 한 개라도 들어있으면 다른 데이터들은 자동으로 문자형 데이터로 형변환된다. 4. 대입 연산자 연산된 데이터를 변수에 저장할 때 사용한다. 복합대입연산자 5. 증감 연산자 연산된 데이터를 변수에 저장할 때 사용한다. 변수 ++ : 먼저 변수가 실행되고, 1을 더한다. ++ 변수 : 먼저 1을 더하고, 변수를 실행한다. 변수 -- : 먼저 변수가 실행되고, 1을 뺀다. -- 변수 : 먼저 1을 빼고, 변수..
1. 변수란? 변수는 변하는 데이터를 저장할 수 있는 메모리 공간 하나의 데이터만 저장 데이터의 종류 : 문자형, 숫자형, 논리형, Null 변수 선언 var 키워드를 변수명 앞에 붙임 한글 사용이 불가능 영문, 숫자, _ , $ 사용가능 단어와 단어의 조합이라면 두 번째 글자의 첫 글자는 대문자로 표기 (Camel 표기법) var 변수형; 또는 var 변수명=값; 변수에는 하나의 값만 넣을 수 있다. 만약 변수에 100을 저장하고 30을 다시 저장하면 기존 100은 삭제되고 30이 저장된다. 2. 변수에 저장할 수 있는 자료형 1) 문자형 (String) 문자형은 큰따옴표(" ")나 작은따옴표(' ')로 감싸고 있다. 문자형 데이터에 HTML 태그를 포함하여 출력하면 태그로 인식한다. var 변수="사..
1. CSS 선택자 1) HTML 선택자 특정한 HTML태그를 선택해서 직접 적용한다. 여기가 레드 여기가 블루 2) 전체 선택자 HTML 페이지 내부의 모든 태그를 선택한다. h1도 레드 p태그도 레드 3) ID 선택자 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용한다. 이때 #을 써서 구분해 준다. CSS3 Selector Basic CSS3 Selector Basic CSS3 Selector Basic 4) CLASS 선택자 특정한 클래스의 여러 요소를 한 번에 선택할 때 사용한다. 이때 .을 써서 구분해 준다. Lorem ipsum 2. 속성 선택 문법 기호 속성 선택자는 특성한 속성을 가진 태그를 선택할 때 사용한다 기본 속성 선택자 : 특정한 속성의 존재 유무와 속성 값을 판별할 때 사..
