Hi

slice()일부 요소들을 복사하여 새로운 배열을 만들어 줍니다.첫 번째 parameter : 복사할 요소의 시작 위치 두 번째 parameter : 복사할 요소의 끝위치인데, 끝위치가 포함은 안됨 var users2 = users.slice(1, 3); // index 1 , 2 삭제

첫 번째 파라미터 : 인덱스 값으로 배열의 몇 번째 요소부터 처리할 것인지를 지정 두 번째 파라미터 : 삭제할 요소의 개수 세 번째 파라미터 : 추가할 요소 users.splice(1, 0, {name: '애프터스쿨', age: 25}); // splice()로 요소를 인덱스 1에 추가한 후' users.splice(2, 1); // splice()로 인덱스 2의 요소를 1개 삭제한 후

var Users = [{name: '소녀시대', age: 20}, ....]; Users.forEach(function(item, index) {console.log('배열 요소 #' + index + ' : %s', item.name);});

API 는 버튼이라던지 뭔가를 만들 때 쓰는, 프로그램을 쉽게 제작할 수 있게 미리 만들어 놓은 것들의 모음

Ajax 는 비동기식 자바스크립트 XML 이라고, 웹문서 전체를 받아오는게 아니라,데이터만 받아오는 방식

CommonJs : 자바스크립트를 웹브라우저에서만 쓰는게 아니라, 서버나 일반 pc프로그램 에서도 쓸 수 있도록 하는 자발적인 워킹그룹. 모듈화를 하는 데 표준을 정의 하였다.

모듈 패턴이란, 클로저를 이용한 객체 지향적 프로그래밍이 아닌가?또한 객체 리터럴 형식으로 구성되어 있는 것이지 않을까,, http://webclub.tistory.com/5

네임스페이스 패턴이란, 객체 안에다 모든걸 때려박는 것. 그러면 그 네임스페이스 안에서 전역객체로써 충돌이 되지 않게 하는 것이다. http://webclub.tistory.com/311

basic html code The HTML5 Herald pug 버전doctype html html(lang='en') head meta(charset='utf-8') title The HTML5 Herald meta(name='description', content='The HTML5 Herald') meta(name='author', content='SitePoint') link(rel='stylesheet', href='css/styles.css?v=1.0') body script(src='js/scripts.js') 출처 : https://www.sitepoint.com/a-basic-html5-template/

http://jekyllthemes.org/

npm install http-server -g 설치 한 후 http-server -c-1

어디까지 background로 할지 범위를 설정한다 ex)background-clip: content-box

https://github.com/processing/p5.js/wiki/Positioning-your-canvas

자바스크립트에서의 함수형 프로그래밍배열의 각 원소 총합 구하기function reduce(func, arr, memo) { var len = arr.length; var i = 0; var accum = memo; for(; i

함수형 프로그래밍의 개념함수의 조합으로 작업을 수행함을 의미 중요한 것은 이 작업이 이루어 지는 동안 작업에 필요한 데이터와 상태는 변하지 않는다는 점 순수 함수(Pure function) : 외부에 아무런 영향을 미치지 않는 함수 고계 함수(Higher-order function) 함수를 또 하나의 값으로 간주하여 함수의 인자 혹은 반환값으로 사용할 수 있는 함수 내부 데이터 및 상태는 그대로 둔 채, 제어할 함수를 변경 및 조합함으로써 원하는 결과를 얻어내는 것이 중요한 특성 -> 높은 수준의 모듈화가 가능하다는 점 순수 함수의 조건을 충족하는 함수 구현으로 모듈 집약적인 프로그래밍이 가능하다.

상속객체 프로토타입 체인을 이용하여 상속을 구현해낼 수 있다. 클래스 기반 전통적인 상속 방식을 흉내 클래스 개념 없이 객체의 프로토타입으로 상속을 구현하는 방식(프로토타입을 이용한 상속 -> 객체 리터럴을 중심으로 철저히 프로토타입을 이용하여 상속을 구현해낸다.)프로토타입을 이용한 상속부모 객체의 프로퍼티에 접근할 수 있고, 자신만의 프로퍼티를 만들 수도 있다.function create_object(o) { function F() {} F.prototype = o; return new F(); } var person = { name: "zzoon", getName: function() { return this.name; }, setName: function(arg) { this.name = arg; ..

클래스, 생성자, 메서드자바스크립트는 거의 모든 것이 객체이고, 특히 함수 객체로 많은 것을 구현해낸다. 클래스, 생성자, 메서드도 모두 함수로 구현이 가능하다.function Person(arg) { this.name = arg; this.getName = function() { return this.name; }; this.setName = function(value) { this.name = value; } } var me = new Person("zzoon"); console.log(me.getName()); // (출력값) zzoon me.setName("iamhjoo"); console.log(me.getName()); // (출력값) iamhjoo클래스 및 생성자의 역할을 하는 함수가 있고,..

객체지향 언어로서, 클래스 기반의 언어와 프로토타입 기반의 언어의 차이클래스 기반 언어 : 클래스로 객체의 기본적인 형태와 기능을 정의하고, 생성자로 인스턴스를 만들어서 사용할 수 있다. 클래스에 정의된 메서드로 여러 가지 기능을 수행할 수 있다. ex) Java, C++ 정확성, 안전성, 예측성 등의 관점에서 클래스 기반 언어는 프로토타입 기반의 언어보다 좀 더 나은 결과를 보장한다. 프로토타입 기반의 언어 : 객체의 자료구조, 메서드 등을 동적으로 바꿀 수 있다. 프로토타입 기반의 언어는 동적으로 자유롭게 객체의 구조와 동작 방식을 바꿀 수 있다는 장점이 있다. Javascript는 프로토타입 기반의 언어!

클로저클로저의 개념외부 함수의 컨텍스트가 반환되더라도 변수객체는 반환되는 내부 함수의 스코프 체인에 그대로 남아있어야만 접근할 수 있다. 이것이 바로 -> 클로저 : 이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수 ex) outerFunc에서 선언된 x와 같은 변수를 자유 변수(Free variable)라고 한다. closure라는 이름은 함수가 자유 변수에 대해 닫혀있다(closed, bound)는 의미. -> 자유 변수에 엮여있는 함수 (우리말로 표현하자면) - 자바스크립트로 클로저를 구현하는 전형적인 패턴 -function outerFunc() { var x = 1; return function() {

https://blog.jetbrains.com/webstorm/2014/07/how-webstorm-works-completion-for-javascript-libraries/

animate.css 라는 사이트가 있다. https://daneden.github.io/animate.css/ 여기서 가져온 코드를 animate.css 라는 파일을 만들어 html에 링크를 걸어준다. link(href='/stylesheets/animate.css' rel='stylesheet') 사용방법은 if ($this.is('[selected]')) { $this.find('.icon').removeClass('animate bounceIn'); $this.removeAttr('selected'); } else { $this.find('.icon').addClass('animate bounceIn'); $this.attr('selected', ''); }클래스를 add 하고 remove하는 식..

* box-sizing: border-box body padding: 0 margin: 0

string에는 여러가지 함수가 있다. join() : string 배열을 연결해서 하나의 string으로 만들기 split() : string 쪼개서 string 배열로 만들기 includes() : string에 어떤 글자가 있는지 없는지, true or false

http://blog.naver.com/PostView.nhn?blogId=sjpotato&logNo=40150731304&redirect=Dlog&widgetTypeCall=true

스코프 체인자바스크립트에서는 for(){}, if{}와 같은 구문은 유효 범위가 없다. 오직 함수만이 유효 범위의 한 단위가 된다. 이 유효 범위를 나타내는 스코프가 [[scope]] 프로퍼티로각 함수 객체 내에서 연결 리스트 형식으로 관리 되는데, 이를 '스코프 체인' 이라고 한다. 각 실행 컨텍스트의 변수 객체가 구성 요소인 리스트와 같다. 각각의 함수는 [[scope]] 프로퍼티로 자신이 생성된 실행 컨텍스트의 스코프 체인을 참조한다. 함수가 실행되는 순간 실행 컨텍스트가 만들어지고, 이 실행 컨텍스트는 실행된 함수의 [[ scope]] 프로퍼티를 기반으로 새로운 스코프 체인을 만든다 전역 실행 컨텍스트의 스코프 체인이 변수 객체의 스코프 체인은 자기 자신만을 가진다. 변수 객체의 [[scope]]..

실행 컨텍스트 생성 과정function execute(param1, param2) { var a = 1, b = 2; function func() { return a + b; } return param1 + param2 + func(); } execute(3, 4);활성 객체 생성실행 컨텍스트가 생성되면 자바스크립트 엔진은 해당 컨텍스트에서 실행에 필요한 여러가지 정보를 담을 객체를 생성하는데, 이를 "활성 객체"라고 한다. 활성 객체 : 앞으로 사용하게 될 매개변수나 사용자가 정의한 변수 및 객체를 저장하고, 새로 만들어진 컨텍스트로 접근 가능하게 되어있다. 엔진 내부에서 접근할 수 있다는 것이지 사용자가 접근할 수 있는건 X arguments 객체 생성활성 객체는 arguments 프로퍼티로 이 ar..

실행 컨텍스트 개념콜 스택(Call Stack) : 함수를 호출할 때 해당 함수의 호출 정보(ex C언어 - 함수의 호출정보 등으로 함수 내 지역변수 혹은 인자값 등)가 차곡차곡 쌓여있는 스택 실행 컨텍스트는 콜 스택에 들어가는 실행 정보 하나와 비슷하다. "실행 가능한 자바스크립트 코드 블록이 실행되는 환경" 실행 컨텍스트가 형성되는 경우 - 전역 코드, eval() 함수로 실행되는 코드, 대부분 프로그래머는 함수로 실행 컨텍스트를 만든다 현재 실행되는 컨텍스트에서 이 컨텍스트와 관련 없는 실행 코드가 실행되면, 새로운 컨텍스트가 생성되어 스택에 들어가고 제어권이 그 컨텍스트로 이동한다. ex)console.log("This is global context"); function ExContext1() ..

프로토타입 체이닝프로토타입의 두 가지 의미자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원 OOP 상속에 근간이 되는 프로토타입과 프로토타입 체이닝. (자바스크립트는 클래스 개념이 없다) '프로토타입' 객체 : 생성된 객체의 부모 객체 자바스크립트의 모든 객체는 자신의 부모인 프로토타입 객체르 가리키는 참조 링크 형태의 숨겨진 프로퍼티가 있다. 이러한 링크를 암묵적 프로토타입 링크라 부른다. == [[Prototype]] 링크 함수 객체의 prototype 프로퍼티와 객체의 숨은 프로퍼티인 [[Prototype]] 링크를 구분해야 한다. // Person 생성자 함수 function Person(name) { this.name = name; } // foo 객체 생성 var foo = new P..

입력 양식 이벤트이벤트 이름설명change입력 양식의 내용을 변경할 때 발생합니다.focus입력 양식에 초점을 맞추면 발생합니다.focusin입력 양식에 초점이 맞추어지기 바로 전에 발생합니다.focusout입력 양식에 초점이 사라지기 바로 전에 발생합니다blur입력 양식에 초점이 사라지면 발생합니다.select입력 양식을 선택할 때 발생합니다(input[type="text"] 태그 및 textarea 태그 제외)submitsubmit 버튼을 누르면 발생합니다.resetreset 버튼을 누르면 발생합니다. ex) 이름 : 비밀번호: submit 이벤트는 form 태그에서 발생하는 이벤트$(document).ready(function() { $('#my-form').submit(function(event)..

윈도우 이벤트윈도우 이벤트는 윈도우 객체만 사용할 수 있는 이벤트가 아니라 window 객체와 document 객체 이외에 img 태그 등이 사용할 수 있는 이벤트이벤트설명ready문서 객체가 준비 완료되면load문서 객체를 불러들일 때 발생합니다unload문서 객체를 닫을 때 발생합니다resize문서 객체의 크기를 변화시킬 때 발생합니다scroll문서 객체를 스크롤할 때 발생합니다.error에러가 있을 때 발생합니다 window 객체에 scroll 이벤트를 연결. window 객체는 별도의 선택자가 없으므로, 곧바로 문서 객체를 넣는다는 것을 주의한다.$(document).ready(function() { $(window).scroll(function() { var scrollHeight = $(win..