까먹기 위해 기록하는 것이다

1. Jquery 1. Jquery Jquery는 자바스크립트의 DOM 객체 조작을 도와주는 라이브러리 선택자부터 이벤트, 애니메이션 등 DOM객체를 선택하거나 DOM객체에 이벤트를 만들고 애니메이션 효과를 추가할 때 순수 자바스크립트보다 편하게 구현할 수 있다. //순수자바스크립트 선택자 const box = document.getElementById("box"); const box = document.querySelector("#box"); //jquery 선택자 const box = $("#box"); Jquery의 장점 DOM객체를 조작하는 것이 순수 자바스크립트보다 편하고 간단하며 코드가 짧다. Jquery로 구성된 라이브러리들이 다양해서 달력이나 시계 등 순수 자바스크립트로 구현하는 것보다 훨..

1. ES6(Ecma Script 6) 1. const, let의 등장 var 변수는 중복 선언이 가능하고 블록단위 변수가 아니며 호이스팅이 가능한 문제점이 존재하여 ES6부터는 let, const라는 변수 선언 방식이 등장했다. 블록단위 변수 let let은 중복선언 불가능하고 블록단위이며 호이스팅 불가능한 var의 대체 변수 상수를 선언하는 const const변수는 상수를 선언할 때 사용하여 선언과 동시에 초기화가 일어나야 한다. const도 let과 동일하게 블록단위 변수이며 호이스팅 불가능 const는 상수이기 때문에 값의 재할당 불가능 기본적으로 const로 변수를 선언하되 변경될 경우가 있는 변수만 let으로 선언한다. const와 객체 const 변수로 객체를 선언하게 되면 객체안의 속성들..

1. 메소드와 이벤트 1. 메소드(함수, 기능, 펑션) 메소드는 기능을 정의해 놓은 코드 블록 메소드의 선언 //ES5 function 메소드명(파라미터(파라미터도 타입 지정하지 않음)) { 기능정의; } //ES6 const 메소드명 = (파라미터) => { 기능정의; }; ``` 3. return; : 아무것도 반환하지 않는 리턴문을 사용할 수 있다. 메소드의 종료를 의미한다. 특정 조건이 충족됐을 때 함수를 종료시켜야 한다면 return;으로 종료시킨다. 4. 지역변수와 전역변수 - 자바스크립트에서 지역변수는 중괄호 블록('{}')으로 감싸진 블록 안에 선언된 변수를 의미. - 전역변수는 script 태그 안에서 바로 생성한 변수를 전역변수라고 부른다. 전역변수는 해당 html 페이지가 로드되면 생..

1. 자바스크립트의 객체 1. 객체 자바스크립트에서 객체는 웹 화면과 관련된 모든 대상을 가리키는 것을 의미한다. 자바스크립트 객체의 종류 DOM(문서 객체 모델: Doucumnt Object Model) : 웹 문서면 자체도 객체지만 웹 문서 안의 태그들도 객체로 받아서 사용할 수 있다. BOM(브라우저 객체 모델: Browser Object Model) : 브라우저에서 사용하는 정보를 받아오는 객체 모델. navigator, history, location, screen 등이 존재합니다. 내장객체 : String, Array, Date, Math 등 자바스크립트 내부에 구현되어 있는 객체. 사용자정의 객체 : 사용자에 필요에 따라서 직접 구현한 객체 2. 내장객체 Date: 날짜와 시간정보를 나타내주..

1. 배열 1. 자바스크립트 배열 자바스크립트에서 배열은 기본 자료형 중 하나로 되어있다. 배열의 길이를 지정하지 않고 가변적인 배열로 사용할 수 있다. 여러 자료형의 값을 하나의 배열에 담아서 사용할 수 있다. 2. 배열의 메소드 join: 배열의 값들을 하나의 문자열로 합쳐서 반환 reverse: 배열의 순서를 역순으로 바꿔서 반환 sort: 배열을 오름차순으로 정렬 후 반환 splice: 지정한 index 범위 만큼의 데이터 삭제 후 새로운 값 추가 slice: 원하는 구간만큼 잘라서 배열로 반환 pop: 배열의 마지막 요소 꺼내서 반환하고 원본 배열에서 꺼낸 요소 삭제 push: 배열의 마지막 요소 뒤에 새로운 요소 추가

1. 조건문 1. ifelse ifelse 자바와 동일하게 if(조건1) { //조건1이 true일 때 실행 } else if(조건2) { //조건1이 false이고 조건2가 true일 때 실행 } ... else { //위의 모든 조건이 false일 때 실행 } 2. switch ~ case ~ default 1. switch(변수) { case 값1: //변수가 값1일 때 실행 break; case 값2: //변수가 값2일 때 실행 break; ... default: //변수가 위의 모든 값이 아닌 다른 값일 때 실행 } 2. 반복문 1. for for(let(var) 초기화 식; 조건식; 증감식) { //반복 실행 } 2. while while(조건식) { //반복 실행 } 3. do~while d..

1. 연산자 1. 산술연산자 산술연산자는 Java와 모두 동일하다. +, -, *, /, %, --, ++ 연산방식은 모두 Java의 산술연산자의 연산방식과 동일하다. 2. 대입연산자 =, +=, -=, *=, /=, %= 과 같이 Java의 대입연산자와 모두 동일하다. 3. 비교연산자 ==, >, >=,

1. Variables(변수) 1. JavaScript의 변수 자바스크립트의 변수는 타입이 존재하지 않는다. 기본 자료형인 숫자형, 문자열, 논리형, 배열, 객체, undefined, null 7개의 자료형이 존재하긴 하지만 변수를 선언할 때 자료형을 지정할 수가 없다. 자료형 유추 기능을 통해서 할당되는 변수에 값에 의해 자동적으로 자료형이 정해진다. 자료형을 지정하지 않다보니까 에러잡기가 힘들어져 최근에는 타입스크립트(자바스크립트 + 타입)라는 언어가 유행한다. //ES5 var num = 1; -> 숫자형으로 사용. var numStr = "1"; -> 문자열이나 숫자형으로 사용 var sum1 = num + 2; => 3 var sum2 = numStr + 2; => 3 //ES6 const nu..

1. JavaScript 1. JavaScript란 JavaScript는 1995년에 넷스케이프에서 제작한 인터프리터 언어이다. 인터프리터가 각각의 브라우저에 내장되어 있다. OS에서 동작하는 것이 아닌 브라우저에서 동작한다. HTML이 웹 문서의 구조를 담당하고 CSS가 웹 문서의 디자인을 담당한다면 JavaScript는 웹 문서를 동적으로(다이나믹하게) 구성할 수 있게 해준다. JavaScript의 특징 HTML 웹 문서의 태그들을 제어할 수 있다. 사용자에 의해 이벤트(사용자가 행하는 동작)가 발생했을 때 스타일을 바꾼다던지 애니메이션 효과를 준다던지 등과 같은 태그 제어가 가능하다. 다양한 라이브러리나 API가 존재하여 개발 기간을 단축을 시킬 수 있다. 데이터 시각화, 차트, 그래프, 통계등에 ..

1. 반응형 웹 1. 반응형 웹이란? 요즘은 pc보다 모바일이나 태블릿으로 웹 사이트에 접속하는 경우가 많은데 모바일이나 태블릿에서 PC에서 보던 웹 사이트 화면은 글씨도 너무 작고 레이아웃도 맞지 않아서 보기 불편한 점이 있다. 따라서 모바일이나 태블릿 같은 기기들의 화면에 대응하기 위해 기기의 화면사이즈에 따라 레이아웃을 변경하거나 글자 크기를 키우는 등 기기에 알맞는 형태의 웹 사이트를 표출하는 것을 반응형 웹이라고 한다. 2. 모바일 기기를 위한 뷰포트 반응형 웹 디자인에서 기본적으로 알아야 할 것이 뷰포트다. 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있다. 뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 부분을 말한다. 뷰포트 지정하기 head 태그 사이에 작..