기본 1. 상수 표기법 상수는 const로 선언된 변수이며, 대문자와 _ 로만 나타낸다. 2. null과 undefined의 차이 null은 값이 할당되지 않았거나 알 수 없는 상태 undefined은 값이 할당되지 않은 상태 값이 할당되지 않았을 때는 명시적으로 null 사용한다. 3. 자료형 원시 자료형: 한 가지만 표현 가능한 것 (int, string) 객체: 데이터들의 집합 심볼: 객체의 고유 식별자 4. 형변환 문자형으로 형변환: String 숫자형으로 형변환: Number 5. 동등연산자와 일치연산자 동등연산자(==): 값만 일치하면 된다. (0 == false ==> true) 일치연산자(===): 값과 자료형이 일치해야 한다. (0 === false ==> false) 6. 논리연산자의 ..

script script 태그엔 자바스크립트 코드가 들어간다. 브라우저는 이 태그를 만나면 안의 코드를 자동을 처리한다. 외부 스크립트 자바스크립트 코드의 양이 많을댄, 소분하여 저장할 수 있음 스크립트가 길어지면 별개의 분리된 파일을 만들어 저장하는 것이 좋다. --> 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문. --> 새로 다운받지 않고 캐시에서 가져와 사용함. 트래픽 절약 및 웹 페이지 속도 상승!!! src 속성이 있으면 태그 내부의 코드는 무시된다. 따로 사용하고 싶다면 스크립트 두 개로 분리시켜야 정상적으로 실행된다. 변수(variable) let 과 var 만들어진지 오래 된 스크립트에서는 let 대신 var라는 키워드를 통해서 변수를 설정한다. var 은 let 과 거..

변수와 상수는 무엇일까? 변수는 변할수 있는 수이다. 영어로는 variable 즉, 값이 언제든지 변할 수 있다. var v = 1; 이렇게 v = 1 이라는 수를 정해주었지만 나중에 v=2 혹은 3 다른 원하는 수로 바꿀 수 있다. var v = 1; var v = 2; console.log(v); #2 var를 사용할 때 문제는 무엇일까? var는 변할 수 있다는 점이 장점이자 단점이다. 어떤 변하면 안되는 값 x가 있다고 가정하자 그뒤에 코드가 너무길고 복잡해 프로그래머가 x를 변경한다면 프로그램이 제대로 작동하지 않을 것이다 또한 오류도 나지 않는다. 이를위해 한번정해두면 변하지 않는 값이 필요해졌다. const const는 constant의 약자이며 상수라고 부른다. 상수의 상은 항상상자이다. ..

자료구조란 데이터에 편리하게 접근하고, 변경하기 위해서 데이터를 저장하거나 조작하는 방법을 말한다. 만약에 사과를 담는 용기가 필요하다고 생각해보자. 사과를 멀리 가지고 가려는 목적이라면 바퀴가 달려있는 수레 같은게 필요할 수 있다. 자주자주 꺼내 먹기 위한 용기가 필요하다면 손을넣어 꺼낼수있는 백이나 바구니 같은 형태가 적합하다고 할수있겠다. 어떤 자료구조를 선택하느냐에 따라 퍼포먼스가 달라진다. 일반적으로 자주 사용되는 구조들 Array(List) 배열 데이터가 순차적으로 있는것 그 이유는 메모리상에 물리적으로 순차적으로 저장되기 때문이다. 인덱스가 있기 때문에 조회가 가능하다. (인덱스로 조회가 가능하다) 순차적인 데이터를 다루기 적절하다. 단점은 할당된 메모리가 다 사용되면 리사이징하기 때문에 그..

iframe 이란? HTML의 iframe은 인라인 프레임을 나타냅니다. 인라인 프레임은 현재 HTML 문서 내에 다른 문서를 포함시키는 데 사용됩니다. 'src'속성은 iframe을 차지하는 문서의 URL을 지정하는 데 사용됩니다. 이처럼 iframe은 내 페이지에 다른 페이지를 삽입하는 tag입니다. iframe tag를 사용하여 삽입할 수 있습니다. 속성으로써 width, height등을 줄 수 있습니다. document내에 다른 html document를 삽입하는데 그치지 않고 그 둘을 상호작용하게 할 수는 없을까? 이 둘사이에 정보를 주고 받을 수 있는 루트가 존재합니다 . 그것이 postMessage() 입니다. const handleReviewCount = () => { window.pare..

call과 apply는 함수 호출시 this 가 가르켜야할 주체를 명시 할 수 있습니다. const foo= { value:1, addValue:function(n1,n2){ this.value += (n1+n2) } } const bar = { value:10 } person.addAge.apply(bar, [1,3]); // 14 person.addAge.call(bar,10) // 20 위와 같이 foo 객체에 소속된 addAge를 사용할때 this.에 해당하는 주체를 bar로 변경시켜준것입니다. call과 apply의 차이점은 두번째 인수로 arguments 배열을 넘겨준다는 것이다. 가변인수를 사용할때 사용하면 됩니다. bind는 함수를 객체에 바인딩 할 때 씁니다. const monkey={ ..

window.onpopstate 같은 document에 관한 두개의 히스토리 엔트리에 변화가 일어날 때마다, popstate event가 window 객체에 붙게 된다. 만약 활성화된 엔트리가 history.pushState() 메서드나 history.replaceState() 메서드에 의해 생성되면, popstate 이벤트의 state 속성은 히스토리 엔트리 state 객체의 복사본을 갖게 된다. history.pushState() 또는 history.replaceState()는 popstate 이벤트를 발생시키지 않는 것에 유의한다.popstate 이벤트는 브라우저의 백 버튼이나 (history.back() 호출) 등을 통해서만 발생된다. 그리고 그 이벤트는 같은 document에서 두 히스토리 엔트..

이번 포스트에서는 전개 연산자(spread operator)를 이용해서 간편하게 객체를 복사하는 방법에 대해 알아보겠습니다. 배열의 복사는 [...arr]를 이용하면 됩니다. const arr = [1, 2, 3]; const cp = [...arr]; cp.push(4); console.log(arr); // [1, 2, 3] console.log(cp); // [1, 2, 3, 4] 객체의 복사는 {...obj}를 이용하면 됩니다. const obj = { a: 1, b: { c: 2 } }; const cp = {...obj}; cp.a = 2; cp.b.c = 3; console.log(obj); // {a: 1, b:{c: 3}} console.log(cp); // {a: 2, b:{c: 3}}..

자바스크립트에서 비디오 요소가 현재 재생 중인지 여부를 확인할 수 있는 방법입니다. var video = $('#myVideo').get(0); if (video.paused) { video.play(); } else { video.pause(); } 자바스크립트로 할 때는 var video = document.getElementById('myVideo'); if (video.paused) { video.play(); } else { video.pause(); }

var divs = $('div > div'); for(var i = 0; i < divs.length; i+=3) { divs.slice(i, i + 3).wrapAll(''); }

ES6 Defaults / Overrides Pattern Object.assign() 함수는 첫 번째 Object에 그다음 Object(들)을 병합해 주는 것으로서, 아래 코드를 아래와 같은 방법으로 작성할 수 있습니다. // Object.assign(target, ...sources) Object.assign([target 객체], [여러개의 객체] ) 첫 번째 인자는 target sources 오브젝트는 target 오브젝트에 병합 리턴값으로 target 오브젝트 반환 var defaults = { bar: 'no', baz: 'works!' }; function foo (options) { var settings = Object.assign({}, defaults, options), bar = s..

!!연산자를 사용하여 boolean 변환 function Account(cash) { this.cash = cash; this.hasMoney = !!cash; } var account = new Account(100.50); console.log(account.cash); // 100.50 console.log(account.hasMoney); // true var emptyAccount = new Account(0); console.log(emptyAccount.cash); // 0 console.log(emptyAccount.hasMoney); // false +연산자를 사용하여 숫자 변환 function toNumber(strNumber) { return +strNumber; } console.l..

Array.forEach() 반복문은 Array 객체에서만 사용가능한 메서드 입니다. (ES6부터는 Map, Set 등에서도 지원) let array = [1,2,3,4]; array.forEach((x) => { console.log(x); }) //logs 1,2,3,4 for...in 반복문은 객체의 속성을 반복하여 작업을 수행할 수 있습니다. 인덱스 순서가 중요하지 않은 객체에 사용하는 것이 좋습니다. let obj = { "a":1, "b":2 }; for(let k in obj){ console.log(k) } //logs a,b for...of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다. let array = [1,2,3,4]; for(let x of array){ cons..

웹문서를 스펙에 맞게 작성하였는지 http://html5.validator.nu 를 이용하여 쉽게 확인할 수 있습니다. 하지만 웹 페이지에서 확인하는 방식이기 때문에 자동 테스트를 만들기 어려워집니다. 모질라에서도 같은 고민을 하였는지 자동 테스트를 위해 python과 node.js에서 사용할 수 있는 html5-lint라는 것을 만들어서 사용하고 있습니다. html5-lint 모듈은 validator를 다시 구현하는 방식이 아니라 html5.validator.nu로 post request를 날려 결과를 가져오는 방식으로 동작합니다. 하지만 이렇게 하면 테스트할 때마다 html5.validator.nu 에 request를 요청하게 되므로 모질라에서는 클론 페이지를 만들어서 사용하고 있었습니다. 지금은 클..

Declarations #let let을 통한 변수 선언은, var를 통한 변수 선언과 다르게 hoisting 하지 않는다. 즉, 변수가 선언된 이후부터 변수가 유효하고 그전에는 해당 변수를 사용할 수 없다. var hoisting 된 변수를 실수로 선언 전에 사용할 경우 그 변수는 undefined가 된다. 하지만 let을 사용하면, 변수를 hositing 하지 않을 뿐 아니라, 변수를 선언한 블록 안에서 선언 전에 해당하는 이름을 사용하는 것을 에러로 처리한다. function es5() { var i; for (i = 0; i < 10; i += 1) { doSomething(); } // i is 10 } function es6() { for (let i = 0; i < 10; i += 1) { ..

자바스크립트는 3가지의 undefined 존재합니다. 타입으로서의 undefined 우선 undefined는 자바스크립트 기본 타입 입니다. ES5 까지는 다음과 같은 6가지 Built-in type이 있었습니다. undefined는 그중 하나입니다. number, boolean, string, object, null, undefined 값으로서의 undefined undefined는 undefined 타입의 유일한 값입니다. 값이 할당되지 않은 변수 혹은 값이 할당되지 않은 프로퍼티는 undefined가 됩니다. var a; // undefined var b = {}; b.c; // undefined; 또한, 리턴문이 없는 함수나 리턴하는 값이 없는 리턴문으로 끝나는 함수의 실행 결과도 undefine..

다들 웹개발을 할때 떼어놓을수 없는 언어중 하나가 javascript가 아닐까 한다요즘엔 세상이 좋아져서 여러가지 라이브러리들을 많이 나오고 있는데 물론 나 역시jQuery 를 자주 이용한다… 이유는 단하나! 편하니까..native 로 코딩하면 상당히 불편하기 때문에 그걸 어느 정도 간소화해준다고나 할까..하지만 jQuery 라도 native 를 먼저 알아야 라이브러리도 쉽게 쓰는법..js 코딩을 하면서 javascript 성능 향상 팁 을 소개한다. 1. Loop문 많은 사람들이 루프문을 사용할때 for문이나 while 을 많이 사용할것이다.그중에 for문을 제일 많이 쓸텐데 아래 코드를 보자 for (var i=; i < array.length; i++) { //code } 여기서 length 는 배..

마지막 여분의 콤마.. 아래처럼 배열의 마지막 요소 다음에 콤마가 남아 있는 경우가 있습니다. 로직상의 미스일 경우도 있고 프로그래밍의 편의상 남겨둔 경우도 있으나 상황에 따라 구문에러인 경우도 있고 정상적으로 동작하는 경우도 있으므로 여분의 콤마는 배제하여 일관적으로 동작할 수 있도록 합니다. var arr = ['item1','item2',]; // 마지막 콤마는 삭제

자바스크립트의 window.open으로 새 창을 열 때 잘못된 인수로 오류가 나오는 경우가 있습니다. // window.open(url, name, specs, replace); window.open('url','Popup Win','width=450,height=350,scrollbars=no'); 위와 같이 새 창 이름(Popup Win) 부분에 (띄어쓰기)가 들어가면 오류가 나게 됩니다. window.open을 사용할 때는 띄어쓰기를 사용하지 않고 이어서 적으시는 것 주의하세요.

자바스크립트에서 현재 숫자에서 가장 가까운 값 (차이값의 절대값의 최소값일 때의 데이터) 구하기 var data = [10,15,20,25,30]; var target = 21; // 21에 가장 가까운값 찾기 var near = 0; var abs = 0; // 여기에 가까운 수 '20'이 들어감 var min = 100; // 해당 범위에서 가장 큰 값 for (var i = 0; i < data.length; i++) { abs = ((data[i] - target) < 0) ? -(data[i] - target) : (data[i] - target); if (abs < min) { min = abs; //MIN near = data[i] // 가까운 값 } } console.log(target +..

// IE label+img 버그 해결 (function(){ if(document.all && navigator.appVersion.indexOf("MSIE")>-1 && navigator.appVersion.indexOf("Windows")>-1){ var domLabel = document.getElementsByTagName("label"); var len = domLabel.length; for(var i=0; i < len ; i++){ //console.log(domLabel[i].childNodes.item(0).tagName ); /* if(domLabel[i].hasChildNodes() && domLabel[i].childNodes.item(0).tagName == "IMG"){ do..

jQuery를 이용하여 작성하는 경우 $('#text').click(function() { $(this).select(); }); 자바스크립트로 쓰는 경우 function btnClick (obj) { obj.select(); }

페이지에서 DOM뿐만 아니라 리소스 호출까지 완료 되었을 경우 실행됩니다. $(window).on('load', function(){ // 실행 }); window.onload = function(){ // 실행 }; 소스와 상관없이 DOM만 생성되어도 실행이 됩니다. 즉, 이미지와 같은 리소스를 요구하는 페이지일 경우 이미지의 로딩 완료에 상관없이 진행됩니다. $(document).ready(function(){ // 실행 });

모바일에서 레이어 팝업을 띄우고 본문에서 스크롤이 안되게 하려면 $('body').on('touchmove', function(e){ e.preventDefault() }); 반대로 레이어 팝업을 닫고 다시 스크롤을 되게 해제 하려면 $('body').off('touchmove');

키코드표 ←(백스페이스) = 8 TAB = 9 ENTER = 13 SHIFT = 16 CTRL = 17 ALT = 18 PAUSEBREAK = 19 CAPSLOOK = 20 한/영 = 21 한자 = 25 ESC = 27 스페이스 = 32 PAGEUP = 33 PAGEDN = 34 END = 35 HOME =36 ←(중간) = 37 ↑(중간) = 38 →(중간) = 39 ↓(중간) = 40 INSERT = 45 DELETE = 46 0 = 48 1 = 49 2 = 50 3 = 51 4 = 52 5 = 53 6 = 54 7 = 55 8 = 56 9 = 57 A = 65 B = 66 C = 67 D = 68 E = 69 F = 70 G = 71 H = 72 I = 73 J = 74 K = 75 L = 76 M..

.map() 인자값: currenValue, index, array 요소를 일괄적으로 변경 var arr = ['foo', 'hello', 'diamond', 'A'] var arr2 = arr.map((v) => v.length) // 각 요소의 글자 길이값 반환 console.log(arr2) // [3, 5, 7, 1] .filter() 요소를 걸러내어 배열로 true/false 반환, 없으면 빈 배열 var arr = [4, 15, 377, 395, 400, 1024, 3000] var arr2 = arr.filter((v) => (v % 5 === 0)) console.log(arr2) // [15, 395, 400, 3000] .find() 단 하나의 요소만 반환, 여러 개 있으면 처음값만 반..

jQueryMobile의 swipteleft, swipright를 쓰지 않고 모바일에서 손가락 터치에 반응하도록 구현 방법입니다. jQuery 터치 이벤트 중 하나인 touchstart와 touchmove를 사용하면 간단합니다. nextSlide를 다음 화면으로 슬라이드 하는 이벤트, prevSlide를 이전 화면으로 슬라이드하는 이벤트라 가정해 보면 아래 같이 간단하게 구현할 수 있습니다. var startX = {}; var endX = {}; $slider.on({ 'touchstart': function(e){ startX = event.touches[0].pageX; }, 'touchmove': function(e){ endX = event.touches[0].pageX; var fnX = st..

일반적으로 javascript에서 == 을 하게 되면 값을 비교한다. 데이터 타입이 String, Int, Long 관계없이... 값만 같으면 true를 리턴했지만... === 3개짜리는 데이터 타입과 값이 같은 경우에 true를 리턴한다. !== 는 당연히 반대겠죠~ === This is the strict equal operator and only returns a Boolean true if both the operands are equal and of the same type. These next examples return true a === 2 b === 4 !== This is the strict not equal operator and only returns a value of true i..

조건 연산자는 조건식의 결과에 따라 수행되는 값을 결정하는 연산자입니다. 참과 거짓을 판단할 수 있는 조건식을 제시한 후에 참일 경우와 거짓일 경우의 값이 나타납니다. C = (조건)?A:B 조건이 참일 경우 C에 A를 대입하고 거짓일경우 B를 대입함

http://css-tricks.com/examples/jQueryStop/ Full Cycle of Animation on Hover/Off Goals: Animate wide on mouseEnter Animate back on mouseLeave No matter what, perform a complete wide/back cycle Not queue up animations on multiple hovers Be smooth NOT Using .stop(); The smoothness of this is perfect, but the animations queue up. $("div").hover(function(){ $(this).animate({ width: "200px" }); }, fun..