일상, 핸드메이드 감성 플라워 소품샵

Arrow Function은 ES6 문법으로 항상 익명 함수이다. 기본 구조 (문법) var func1 = function() { console.log('test1'); } => var func2 = () => console.log('test2'); 매개 변수 없는 경우, var func = () => console.log('test'); func(); // test 매개 변수 하나인 경우, var func1 = x => x; var func2 = (x) => x; func1('test'); // test func2('test'); // test 매개 변수 여러개인 경우, var func1 = (x, y) => x + y; var func2 = (x, y) => { return x + y; } func1..

ECMASCRIPT 란 자바스크립트 언어의 표준 규격을 뜻한다. ES6는 자바스크립트 표준 규격 버전6 라는 의미를 가진다고 생각하면 된다. ES6 이전에는 변수를 선언할 수 있는 키워드가 var 였으나, let, const 가 추가되어 이를 사용하여 변수를 선언할 수 있다. 간단한 특징 var - 변수 재선언 가능하기 때문에, 필요할 때마다 변수를 편리하게 사용할 수 있다는 장점이 있지만, 코드량이 많은 경우, 같은 이름의 변수명을 남용하게 된다면, 파악하기도 힘들고, 문제가 생길 수 있다. let - 변수 재선언 불가능 - 변수 재할당 가능 let name = '변수 선언'; console.log(name); name = '변수 재할당'; console.log(name); let name = '변수 ..

JavaScript new Date() 함수로 현재 날짜와 시간을 구하는 방법 1. 현재 날짜 구하기 let today = new Date(); console.log(today); 2. 현재 날짜 년-월-일 포맷으로 구하기 let today = new Date(); // 년도 getFullYear() let year = today.getFullYear(); // 월 getMonth() (0~11로 1월이 0으로 표현되기 때문에 + 1을 해주어야 원하는 월을 구할 수 있다.) let month = today.getMonth() + 1 // 일 getDate() let date = today.getDate(); // 일 console.log(year + '-' + month + '-' + date); 3. ..

data() 1. 속성 추가 - $(selector).data(key, value) key는 string type의 변수로 말 그대로 데이터가 저장될 key 값이다.value는 object type으로 javascript에서 지원하는 모든 type의 데이터를 저장할 수 있다. 2. 속성 가져오기 - $(selector).data(key) key는 위에서 저장한 데이터를 가져오기 위한 key 값이다.key를 생략하여 .data()로 사용도 가능하며, 결과는 해당 엘리먼트에 저장된 모든 데이터들이 JSON 형식으로 나온다. 3. 속성 삭제 - $(selector).removeData(key) key는 string type으로 삭제할 데이터의 key값이다. attr() 1. 속성 추가 - $(selector)..

* $(document).ready 는 DOM (Document Object Model) 객체만로드(이미지 로드 전) 되자마자 처리합니다. 문법$(document).ready(function() { // DOM 이 모두 로드된 후 실행할 코드를 입력하세요.}); 위와 같이 사용하며, 아래와 같이 축약 문법으로도 사용이 가능합니다. $(function() { // DOM 이 모두 로드된 후 실행할 코드를 입력하세요.}); * $(window).load 는 해당 페이지의 모든 외부 리소스, 이미지 등이 로드 된 후에 처리합니다. 문법$(window).load(function() {// 모든 외부 리소스, 이미지 등이 로드된 후 실행할 코드를 입력하세요.});

1. 객체란 - 객체는 기능(Method) 또는 속성(Property)을 가지고 있다. 객체.메서드();객체.속성;객체.속성 = 값; 2. 객체의 종류 - 자바스크립트의 객체는 크게 내장 객체, 브라우저 객체 모델 (BOM), 문서 객체 모들 (DOM) 내장 객체- 자바스크립트 엔진에 내장- 필요한 경우 생성해서 사용할 수 있음- 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등 브라우저 객체 모델 (BOM)- 브라우저에 계층적으로 내장되어 있는 객체들을 브라우저 객체 모델이라 함.- window, screen, location, history, navigator 객체 등- 브라우저(window)는 document와 location 객체의 상위 객체임 문서 객체 모델 (..

자바에서의 this - 인스턴스 자신을 가르키는 참조 변수즉, this가 객체 자신에 대한 참조 값을 가지고 있다.주로 매개변수와 객체 자신이 가지고 있는 멤버 변수명이 같을 경우, 이를 구분하기 위해 사용한다. 자바의 경우 this에 바인딩되는 객체가 하나지만,자바스크립트에서의 this는 해당 함수 호출 방식에 따라 this에 바인딩 되는 객체가 달라지기 때문에 전혀 다른 의미를 갖는다. 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 1. 함수 호출 - 기본적으로 this는 전역 객체에 바인딩 된다.전역함수, 내부함수, 콜백함수 관계 없이 this는 전역 객체에 바인딩된다. 2. 메서드 호출 - 함수가 객체의 프로퍼티 값이면 메서드로서 호출된다.메서드..

load()- 외부 콘텐츠를 가져올 때 사용 $(요소선택).load(url, data, 콜백 함수) $.ajax()- 데이터를 서버에 HTTP POST, GET 방식으로 전송이 가능하며, (X)HTML, XML, JSON, 텍스트 유형에 데이터를 요청할 수 있는 통합적인 메서드 $.post(), $.get(), $.getJSON() 메서드의 기능을 하나로 합쳐 놓은 것이라고 보면 됨. $.ajax({url : '전송 페이지(액션 페이지)', // 데이터 전송 및 요청할 외부 주소를 입력type : '전송 방식", // get, postdata : '전송할 데이터',dataType : '요청한 데이터 타입' // 서버로부터 반환 받아올 데이터 형식을 지정// html, xml, json, text, jso..

Ajax (Asynchronous JavaScript and Xml) 란? - Ajax는 Asynchronous JavaScript and Xml의 약자로 비동기식 서버와 통신하는 방식입니다. 이 때 XML을 이용하고, 최근에는 JSON (JavaScript Object Notation)을 많이 사용합니다. 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미를 지닙니다. (비동기성을 통해 페이지 전체를 refresh 하지 않고 일부분만 업데이트를 할 수 있습니다.) 결과가 주어지는 시간이 길어져도 그 시간 동안 다른 작업을 할 수 있으므로 조금 더 효율적으로 자원을 사용할 수 있는 장점이 있습니다. jQuery를 이용한 Ajax jQuery에서는..

키보드 접근성이란 - 마우스 이벤트를 등록했을 때 만약 현재 마우스가 없더라도 제이쿼리로 만든 최소한의 기능을 키보드만으로 사용할 수 있도록 보장하는 것을 말함. 키보드 접근성을 고려하여 마우스 이벤트를 등록할 때는 포커스를 이동할 수 있는 요소들인 와 태그, 또는 입력 요소인 , , 태그 에 이벤트를 등록해야 함. 마우스 이벤트 마우스 이벤트에 대응하는 키보드 이벤트 mouseover() 마우스 커서가 선택한 요소에 올라갔을 때 이벤트 발생 focus() 선택한 요소에 포커스가 이동했을 때 이벤트 발생 mouseout() 마우스 커서가 선택한 요소에 벗어났을 때 이벤트 발생 blur() 선택한 요소에 포커스가 다른 요소로 이동되어 사라졌을 때 이벤트 발생 $('.btn').on('mouseover, f..