programming/JavaScript&jQuery
-
[JavaScript] 함수 선언식과 표현식programming/JavaScript&jQuery 2019. 11. 5. 00:00
1. 함수 선언식 1 2 3 4 5 function area(width, heigth){ return width*heigth; } console.log(area(5,10)); cs 2. 함수 표현식 1 2 3 4 5 6 7 var area = function(width, height) { return width * height; } console.log(area(5,10)); cs 두 방식의 가장 큰 차이점은 함수 표현식은 호이스팅(hoisting) 되지 않는다는 것이다. https://leeborn.tistory.com/entry/자바스크립트-호이스팅이란 지난번 작성한 호이스팅 관련 포스트에서도 적으려 했지만, 호이스팅에 대한 설명이 없어서 따로 적진 않았다. 또, 함수 표현식으로 사용할 때는 익명 함..
-
[JavaScript] 호이스팅이란?programming/JavaScript&jQuery 2019. 11. 4. 00:00
1. 호이스팅이란? 호이스팅이란? Hoisting 호이스팅(hoisting)은 ECMAScript® 2015 언어 명세 및 그 이전 표준 명세에서 사용된 적이 없는 용어입니다. 호이스팅은 JavaScript에서 실행 콘텍스트(특히 생성 및 실행 단계)가 어떻게 동작하는가에 대한 일반적인 생각으로 여겨집니다. 하지만 호이스팅은 오해로 이어질 수 있습니다. developer.mozilla.org 간단하게 설명하면, 자바스크립트에서 함수 및 변수 선언이 코드 순서상 먼저 일어나지 않아도, 실행할 수 있는 것이다. 예를 들어, 호이스팅을 변수 및 함수 선언이 물리적으로 작성한 코드 상단으로 옮겨지는 것으로 가르치지만, 실제로는 그렇지 않습니다. 변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서..
-
[JavaScript] let 그리고 const 사용법programming/JavaScript&jQuery 2019. 11. 3. 00:00
1. ECMA Script 6 줄여서 ES6라고 부르는 스크립트의 버전. 해당 버전에서 let과 const가 새로 생겼다. 이외에도 많은 게 생겼지만 여기선 let과 const만 적어본다. 2. let and const let과 const는 var 혼자서 하던 일을 대체하기 위해서 나왔다. 이전의 JavaScript에서는 var만 사용해도 모든 것을 처리할 수 있었지만, 똑같은 변수 선언 및 재할당이 너무나도 자유로워서, 잘못 사용할 경우가 있었다. 이러한 경우를 "블록 유효 범위"를 가지는 let과 const로 보충할 수 있다. 3. 사용법 let 1 2 3 4 5 6 7 let i = 1; for(let i = 0 ; i
-
[jQuery] each() 사용법programming/JavaScript&jQuery 2019. 10. 31. 00:00
1. each() 배열 같은 여러개의 데이터를 탐색할 때 사용할 수 있는 함수다. text1 text2 text3 text3 위와 같은 코드가 있을때, $("#btnDiv>button")로 접근하면, 길이가 4인 버튼 배열을 가져온다. 이때 저런 배열을 탐색하기 편하게 해주는 함수가 each()다. 2. jQuery $(function(){ $("#btnDiv>button").each(function(index, obj){ console.log(index); console.log(obj); }) }); each로 사용하면 첫번째로 index, 두번째로 객체를 전달해준다. index는 배열의 순서대로 0에서 3까지 나오게 된다. obj는 button 태그 전체를 반환한다. 그래서 인덱스별로, 객체별로 접근..
-
[html&jQuery] $.data()로 data-value 속성 사용하기programming/JavaScript&jQuery 2019. 10. 30. 00:00
1.data-value 속성 test1 button 태그를 기준으로 위와 같이 data를 저장할 수 있다. data-* 의 형태로 변수의 이름을 지정할 수 있다. ex) data-val1, data-max-width, data-length 2.$.data() 제이쿼리의 data() 함수를 통해서 위의 값들을 가져올 수 있다. $("#test1").data('btn-width'); // 200 $("#test1").data('btnWidth'); // 200 data()로 호출할 때는 "data-" 부분은 빼고 호출한다. data()에 작성된 변수명을 보면 다르게 작성되어있지만, 같은 동작을 한다. "-"로 연결된 부분은 camelCase 형태로도 호출할 수 있다. 3.$.attr() attr()로 호출할..
-
[jQuery] .not() 사용법programming/JavaScript&jQuery 2019. 10. 25. 00:00
jQuery .not() 사용법 먼저 아래와 같은 not.html 파일이 있다. test1 test2 test3 test4 test5 그리고 아래와 같은 not.js 파일도 있다. $("#test>button").click(function(){ $(this).text("click"); $("#test>button").not(this).text("unclick"); }); 해당 소스들을 실행하면, 이렇게 버튼이 5개 생기는데, 클릭된 버튼은 "click"로 텍스트가 바뀌고, 나머지 클릭되지 않은 버튼은 "unclick"로 텍스트가 바뀐다. 이때 사용한게 not()인데, not 뒤에 들어가는 요소를 제외하고 반환한다. 그러니까 저기서 this는 클릭된 버튼을 의미하고, $("#test>button") 으로 ..
-
[JavaScript] eval() 사용법과 동적으로 변수 추가하기programming/JavaScript&jQuery 2019. 10. 16. 22:58
eavl() : 문자로 표현된 JavaScript 코드를 실행하는 함수 사용법은 간단하다. eval(String); 문자열을 eval()로 감싸서 실행하면 된다. 설명을 간단한 코드로 만들어본다면 아래와 같이 사용할 수 있다. eval("alert('test')"); // alert("test"); 실행 eval("console.log(1+1)"); // 콘솔에 2가 찍힘 "" 안에 들어있는 문자열들이 JavaScript 코드로 인식되어, alert도 띄우고 console.log도 찍을 수 있게 된다. 그래서 가끔은 동적으로 변수를 추가할 경우에도 eval()을 사용한다. object에 새로운 변수들을 추가하는 경우. 실행 #1 var obj = {}; for(var i = 0; i < 5; i++){ ..
-
[JavaScript&jQuery] 코드에서 클릭 이벤트 발생시키기 (JavaScript)programming/JavaScript&jQuery 2019. 8. 30. 00:04
클릭 이벤트는 보통 $("SELECTOR").click(function(){ alert("selector click"); }); 의 형태로 실제로 클릭되었을 때, 콜백 함수로 실행 내용을 정의한다. 이때 코드에서 클릭 이벤트를 발생시키기 위해선 $("SELECTOR").trigger("click"); 형태로 발생시키거나, $("SELECTOR").click(); 의 형태로도 발생시킬 수 있다.