🎨 Web_Front end/JavaScript
변수와 자료형 그리고 연산자
변수 : 프로그램 실행 중에 발생하는 데이터를 저장하기 위해서는 저장하기 위한 메모리를 확보해야 하는데 이 메모리 확보하는 것을 "변수를 선언한다"라고 한다. 자료형 : 변수를 선언할 때에는 그 변수에 어떤 성격의 자료를 저장할 것인지 그 성격을 정해 주어야 하는데 그것을 "자료형"이라고 한다. 자바에서는 변수를 사용하기 전에 반드시 그 변수를 어떤 자료형으로 사용할 것인지 선언하고 사용해야 한다. 자료형 설명 기본형 number(숫자) 따옴표 없이 표기한 숫자를 나타냄 string(문자열) 작은따옴표(')나 큰따옴표(")로 묶어 나타냄 boolean(논리형) 참(true), 거짓(false)란 두가지 값만 가지고 있는 유형 undefined 자료형을 지정하지 않았을 때의 유형 null 값이 유효하지 않..
ES2015(ES6)
1. const, let 변수를 재선언 하는 경우 기존의 값은 삭제가 되고 새로운 값이 덮힌다. 간단한 코드가 아닌, 길고 복잡한 코드에서는 사람이기에 기존의 선언해둔 변수의 존재를 잊고 재선언하는 경우에는 문제가 발생이 될 수 있다. 이를 보완하기 위해 추가된 변수 선언 방식이 let과 const이다. 1) let 중복선언 불가, 재할당 가능 let title = 'book'; console.log(title); // book let title = 'movie'; console.log(title); //Uncaught SyntaxError: Identifier 'title' has already been declared title = 'music'; console.log(title);//music le..
이벤트
이벤트의 종류 이벤트는 키보드를 이용해 버튼을 입력하거나 마우스 클릭과 같이 다른 것에 영향을 미치는 것을 의미한다. 자바스크립트에는 다음과 같은 이벤트가 있다. 마우스 이벤트 키보드 이벤트 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을 빼고, 변수..
