티스토리

호다닥

검색하기

블로그 홈

호다닥

3jun.tistory.com/m

개발자가 되고싶은 비전공자의 블로그

구독자: 1

방명록 방문하기

주요 글 목록

Capturing 과 Bubbling ko.javascript.info/bubbling-and-capturing 버블링과 캡처링 ko.javascript.info capturing 과 bubbling 을 컨트롤하기 위한 꿀팁!! if ( event.target !== event.currentTarget ) { return; } /* 위 코드를 각각의 eventListner 에 삽입해준다. */ cf) event.stopPropagation(); event.stopImmediatePropagation(); stopPropagation 이나 stopImmediatePropagation 은 부모 컨테이너에서 작동하는 event의 동작에 영향을 미칠 수 있기 때문에 사용을 권장하지 않는다. 공감수 0 댓글수 0 2020. 12. 27.
PoiemWeb: JS 요약 프로그래밍 언어 약속된 구문 (문법, Syntax)로 구성된 프로그래밍 언어를 사용하여 기계어를 대신 전달한 후, 컴파일러 (Compiler) 혹은 인터프리터(Interpreter)를 통해 기계어로 반환한다. *** 구문(Syntax) & 의미(Semantics) Javascript 자바스크립트는 일반적으로 프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API, 즉 DOM, BOM, Canvas, XMLHttpRequest, Fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web worker 등을 아우르는 개념이다. 특징 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다... 공감수 0 댓글수 0 2020. 10. 26.
dataset 사용하기 dataset 을 사용하기에 앞서 HTML에 data attribute를 customize 해줘야한다. Home About Skills My Work Testmonials Contact dataset attribute를 customize 하기 위해서는 data-(변수명) 으로 작성하고 value를 주면 된다. 그럼 dataset 에 -link라는 변수에 값들을 할당한 것이다. const navbarMenu = document.querySelector(".navbar__menu"); navbarMenu.addEventListener("click", (event) => { console.log(event.target.dataset.link); }); 공감수 0 댓글수 0 2020. 10. 11.
CSS basics box-sizing : ( content-box (defualt) / border-box ) --subject-font: 32px;font-size: var(subject-font); border-box 는 box size를 결정할 때 border까지 합한다. 즉, padding 과 border를 모두 포함한다. 기본값인 content-box는 컨텐츠만 지정한다. position : ( static / absolute (default) / relative ) static은 기본값으로 아무런 효과 없다. relative 는 원래 있던 자리를 기준으로 이동한다. absolute 는 근접한 부모 중에 기본값인 static이 아닌 부모의 기준에서 움직인다. 중간에 position: relative 인 부모가 없.. 공감수 0 댓글수 0 2020. 10. 2.
JS. function에서의 console.log 와 return function에서 console.log 와 return의 차이 5번째 줄 코드에서 greetNicolas 는 sayHello 함수의 리턴값이다. 다시 말해 greetNicolas는 sayHello의 실행된 결과값이다. 하지만 sayHello 함수는 아무것도 반환하지 않았다. greetNicolas에 반환값을 주고 싶으면 아래와 같이 sayHello 함수에 return , 반환값을 부여하면 된다. return 값을 주어 나만의 function 만들기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 const calculator = { plus: function (a, b) { return a + b; }, minus: function (a, b) { ret.. 공감수 0 댓글수 0 2020. 6. 25.
Javascript Event - Codeit(Javascript로 배우는 '인터랙티브 웹') Event (이벤트) HTML 요소들에게 일어날 수 있는 일들 사용자가 요소를 클릭한다 마우스가 요소 위로 올라온다. 마우스가 요소 밖으로 나간다. 페이지 로딩이 끝난다. 사용자가 키보드를 누른다. 이런 이벤트가 일어났을 때 어떤 동작들이 일어나도록 할 수 있는데, 이런 동작을 가능하게 하는 것이 Event Handling 이다. 사용예시1 사용예시2 HTML 부분에는 Javascript 코드를 최대한 적게 넣어야 코드가 깔끔해보인다. 사용예시의 코드들을 아래처럼 작성하면 좀 더 깔끔해보인다. jQuery vs 순수 자바스크립트 이벤트를 등록하는 jQuery 코드의 예시는 아래와 같다. $('#home').on('click', clickHome); $('#seoul').on('click', clickSe.. 공감수 0 댓글수 0 2018. 10. 2.
for 문/ while 문 의 차이 - Codeit(Javascript로 배우는 '인터랙티브 웹') 일반적으로 반복 횟수가 예측 가능할 때는 for 문을 사용하는 것이 가독성이 더 좋고, 반복 횟수를 예측할 수 없으면 while 문을 사용하는 것이 더 적합한 경우가 많다. 로그인 모듈 사용자에게 아이디와 비밀번호를 입력받아서 '로그인' 시키는 모듈을 아래 두 가지 방법으로 만들어보자. 1. 다섯 번의 기회만 주는 모듈 2. 성공할 때까지 기회를 무제한으로 주는 모듈 횟수제한 ( for문 ) // 로그인 성공 여부를 보관하는 변수 var login = false; // 최대 다섯 번의 기회를 준다 for (var i = 0; i < 5; i++) { // 아이디와 비밀번호를 입력 받는다 var id = window.prompt("아이디를 입력하세요"); var password = window.prompt.. 공감수 1 댓글수 0 2018. 10. 1.
break문 / continue문 - Codeit(Javascript로 배우는 '인터랙티브 웹') break 문 만약 while 문의 조건부분과 상관없이 반복문에서 나오고 싶으면 break문을 쓰면 된다. var i = 100; while (true) { // i가 23의 배수면 반복문을 끝냄 if (i % 23 == 0) { break; } i = i + 1; } console.log(i); 115 continue 문 만약 현재 진행되고 있는 수행부분을 중단시키고 바로 조건부분을 다시 확인하고 싶으면 continue 문을 쓰면 된다. var i = 0; while (i < 15) { i = i + 1; // i가 홀수면 console.log(i) 안하고 바로 조건부분으로 돌아감 if (i % 2 == 1) { continue; } console.log(i); } 2 4 6 8 10 12 14 공감수 0 댓글수 0 2018. 10. 1.
Array / Date - Codeit Array 배열의 길이 length 속성은 배열의 길이를 담고 있다. var brands = ['Apple', 'Coca-Cola', 'Starbucks']; console.log(brands.length); 3 배열에서 특정 값 찾기 문자열에서 썻던 indexOf가 배열에서도 똑같이 동작한다. array.indexOf(item) 을 하면 array 배열에 item이 포함되어 있는지 확인 할 수 있다. 만약 포함되어 있다면 item이 있는 인덱스가 리턴된다. 포함되어 있지 않다면 -1이 리턴된다. 여러번 포함되어 있으면 처음 발견된 인덱스가 리턴된다. var brands = ['Apple', 'Coca-Cola', 'Starbucks']; console.log(brands.indexOf('Starbuck.. 공감수 0 댓글수 0 2018. 9. 30.
Math / String - Codeit Math 절대값 (Absolute Number) console.log(Math.abs(-10)); console.log(Math.abs(10)); 10 10 최댓값 (Maximum) console.log(Math.max(2, -1, 4, 5, 0)); 5 최솟값 (Minimum) console.log(Math.min(2, -1, 4, 5, 0)); -1 거듭제곱 (Exponentiation) console.log(Math.pow(2, 3)); console.log(Math.pow(5, 2)); 8 25 제곱근 (Square Root) console.log(Math.sqrt(25)); console.log(Math.sqrt(49)); 5 7 반올림 (Round) console.log(Math.round(2.. 공감수 0 댓글수 0 2018. 9. 30.
자바스크립트 DOM / Event - Udemy(부트스트랩4와 함께하는~) DOM (Document Object Model) : 자바스크립트로 웹 페이지를 제어하도록 해준다. document.getElementsByTagName() : 태그 이름으로 요소 찾기 document.querySelector() : 선택자 이름으로 요소 찾기 document.getElementsByClassName() : 클래스 이름으로 요소 찾기 document.getElementsById() : ID 이름으로 요소 찾기 → h1 태그를 가진 모든 요소들을 배열형태로 담은 다음 0번째 인덱스의 요소를 temp 변수에 넣는다. Event 이벤트는 웹페이지에서 사용자가 행한 행위에 반응하는 것을 의미한다. 일반적으로 빠르게 이벤트를 적용할 때는 인라인(inline) 방식을 사용한다. 체계적으로 이벤트 처.. 공감수 0 댓글수 0 2018. 9. 22.
JavaScript: 삼항연산자란? JavaScript: What is the ternary operator 출처 : codeburst.io, Brandon Morelli 해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다. 삼항연사자와 함께 쓰인 if문을 간결하게 하는 방법과 4가지 예시를 함께 배울 것이다. 전형적인 IF 문 우리가 사람들의 나이를 가지고 있고, 만약 그들이 운전을 할 수 있는 나이라면 true 값을 할당하고 그렇지 않으면 false를 할당하고자 한다. 그리고 운전을 하기 위해서는 16세 이상이어야 한다고 가정해보자. 이 시나리오에서 IF문은 아래와 같을 것이다. let age = 20; let d.. 공감수 0 댓글수 0 2018. 8. 23.
JavaScript: 숏서킷 평가가 뭐야? JavaScript: What is short-circuit evaluation? 출처 : codeburst.io, Brandon Morelli 해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다. variable들을 쉽게 할당하기 위해 논리적인 OR( || )을 어떻게 사용할지 배우기. 3가지 논리적인 연산자들 자바스크립트에는 3가지 논리연산자들이 있다. AND && OR || NOT ! 오늘 우리는 OR || 에 대해 배워볼 것이다. 자바스크립트에서 OR 연산자는 모든 피연산자함수가 true일 때, true를 return한다. true || true; // true true ||.. 공감수 0 댓글수 0 2018. 8. 20.
Javascript & spread 연산자 Javascript & The spread operator 출처 : codeburst.io, Brandon Morelli 해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다. 이게 무엇처럼 보이나? 점 세개 : . . . 이것은 무엇일까? spread 연산자는 여러개의 elements / variables / arguments가 예상되는 곳에서 표현식을 확장시켜준다. 몇가지 예시를 통해 spread 연산자가 정확히 무엇인지 알아보자. middle 이라는 배열을 만든다. middle 배열을 포함하는 두번째 배열을 만든다. 결과값을 기록한다. var middle = [3, 4]; var.. 공감수 0 댓글수 0 2018. 8. 14.
Javascript: 초보자를 위한 템플릿 리터럴 & 태그 기능 JavaScript: Template Literals & Tag Functions for Beginners 출처 : codeburst.io, Brandon Morelli 해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다. 대부분의 사람들이 그러는 것처럼 나는 click-bait title들을 싫어한다. 하지만 진지하게 "당신 코드의 가독성을 즉시 높여줄 간단한 한가지 트릭"이라는 제목을 사용하겠다. Back-tick은 당신의 친구입니다. 템플릿 리터럴은 작은 따옴표( ' )나 따옴표( " ) 대신 back-tick( ` )을 사용한다. console.log(`Hello World`.. 공감수 1 댓글수 0 2018. 8. 9.
Javascript: 초보자를 위한 정규식(Regular Expressions) 배우기 JavaScript: Learn Regular Expressions for Beginners 출처 : codeburst.io, Brandon Morelli 해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다. 자바스크립트에서 정규표현식은 문자열에서 문자조합과 대응시키기 위해 사용되는 객체이다. 첫번째 정규표현식 만들기 정규표현식을 만드는 방법에는 2가지가 있다. 하나는 정규표현식 리터럴 방식이고 하나는 정규표현식 생성자 함수를 사용하는 것이다. // Regular Expression Literal - Uses slashes ( / ) to enclose var option1 = /c.. 공감수 0 댓글수 0 2018. 8. 7.
초보자를 위한 Javascript: 'new' 예약어 JavaScript For Beginners: the 'new' operator 출처 : codeburst.io, Brandon Morelli 해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다. 4가지 법칙 new 예악어가 무엇인지 이해하는 것은 new 예악어를 이해하는 가장 간단한 방법이다. new 예악어를 사용할 때, 4가지의 일들이 발생한다. 새로운 빈 객체를 만들어낸다. this를 새로 만들어진 객체에 bind한다. 새로 만들어진 객체에 "__proto__"라 불리는 property를 더한다. 이것은 constructor 함수의 prototype 객체를 의미한다. retur.. 공감수 2 댓글수 4 2018. 8. 2.
Javascript : 도대체 IIFE가 뭐야? JavaScript: What the heck is an Immediately-Invoked Function Expression? 출처 : codeburst.io, Brandon Morelli 해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다. Function Declaration vs. Function Expression 함수 선언식 vs 함수 표현식 IIFE가 얼마나 유용한지 배우기에 앞서 우리는 함수 선언식과 표현식이 어떤 것들인지 이해해야한다. 우선 전형적인 함수 선언식에 대해 배워볼 것이다. **FUNCTION DECLARATION** function doSomething.. 공감수 0 댓글수 0 2018. 7. 26.
Javascript : 초보자를 위한 화살표 함수 JavaScript: Arrow Functions for Beginners 출처 : codeburst.io, Brandon Morelli 해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다. Benefit #1 : Shorter Syntax 화살표 함수의 첫번째 이점은 문법을 간결하게 할 수 있다. 우선 일반인 함수를 한번 보자. function funcName(params) { return params + 2; } funcName(2); // 4 위 코드는 화살표 함수를 만들어야 하는 2가지 이유 중 한 가지에 대해 잘 보여준다. : 문법을 짧게 할 수 있다. 화살표 함수를 사용하.. 공감수 0 댓글수 0 2018. 7. 21.
Javascript : 초보자를 위한 'This' The Keyword ‘This’ for Beginners 출처 : codeburst.io, Brandon Morelli 해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다. This 는 다소 복잡한 개념이지만, 이제부터 설명할 5가지 일반적인 법칙을 이해한다면 this 를 어떻게 사용할지, 언제 사용할 지 결정하는데 도움이 될 것이다. 물론 이 법칙들이 모든 경우를 설명할 수 있는 것은 아니지만 특수한 경우를 제외하면 대부분의 상황에서 도움이될 것이다. #Global Object 크롬 개발자 콘솔을 열고 Console.log(this); 를 입력하면 // Window {...} 가.. 공감수 0 댓글수 0 2018. 7. 17.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.