Small Grey Outline Pointer 'TIL' 태그의 글 목록 (7 Page)
본문 바로가기

TIL196

[레츠기릿JS] 계산기 만들기 순서도를 먼저 그린다 사람이 계산기를 사용할 때 어떤 순서로 쓰는지 생각해본다 하지만 사람이 계산기를 이용할 때는 예를들어 100을 입력하려고 하면 100을 한꺼번에 바로 입력하는게 아니다 1, 0, 0 이렇게 숫자를 한자리씩 입력하는 것이다 그 후, 연달아 계산하는 방법들의 절차도 하나씩 생각해 본다 하지만 자바스크립트 프로그램의 순서도를 만들 때 사용자 이벤트를 기준으로 순서도를 끊어야 한다고 했다 입력한 숫자를 저장할 변수와 선택한 연산자를 저장할 변수도 생성해야 한다 사용자의 입력 직전에는 항상 대기가 걸린다는 것을 유념해야 한다 앞으로 순서도를 짤 때는 처음처럼 간단하게 짜도 되지만, 코드로 옮기려면 언제 대기가 걸리는지 체크해서 이벤트를 더 작은 단위로 쪼개주는 것이 좋다 10 - 5를 예를 .. 2023. 4. 23.
프로그래머스 접미사 배열 JS 접미사 배열 어떤 문자열에 대해서 접미사는 특정 인덱스부터 시작하는 문자열을 의미합니다. 예를 들어, "banana"의 모든 접미사는 "banana", "anana", "nana", "ana", "na", "a"입니다. 문자열 my_string이 매개변수로 주어질 때, my_string의 모든 접미사를 사전순으로 정렬한 문자열 배열을 return 하는 solution 함수를 작성해 주세요 function solution(my_string) { var answer = []; var strLen = my_string.length; for(var i=0;i 2023. 4. 21.
[레츠기릿JS] 배열 기본 const fruits = ['사과', '오렌지', '배', '딸기']; 배열의 자릿수는 0부터 시작 인덱스(index) : 배열의 자릿수 요소(element) : 배열 내부의 값 const fruits = ['사과', '오렌지', '배', '딸기']; console.log(fruits[0]); //사과 console.log(fruits[1]); //오렌지 console.log(fruits[2]); //배 console.log(fruits[3]); //딸기 배열안에 있는 값들의 자료형이 모두 같지 않아도 된다 배열 안에 다른 배열이나 변수를 넣을 수 있다 const arrayOfArray = [[1, 2, 3], [4, 5]]; arrayOfArray[0]; // [1, 2, 3] const a = 10.. 2023. 4. 17.
[레츠기릿JS] 끝말잇기 만들기 세 가지의 대화상자 const number = parseInt(prompt('몇 명이 참가하나요?'),10); alert(number); const yesOrNo = confirm('맞나요?'); prompt : 사용자로부터 값을 입력 받는다 alert : 사용자에게 경고 메세지를 표시 confirm : 사용자의 확인을 요구 (확인 / 취소) 선택자 querySelector / querySelectorAll 1번째 참가자 제시어: 입력 선택자 사이에 공백(띄어쓰기)을 주어 구분한다 document.querySelector('선택자 내부선택자 내부선택자...'); document.querySelector('body #target button...'); //body태그 안에 있는 id값이 target인 태그.. 2023. 4. 4.
프로그래머스 Javascript Lv.0 옹알이(1) 머쓱이는 태어난 지 6개월 된 조카를 돌보고 있습니다. 조카는 아직 "aya", "ye", "woo", "ma" 네 가지 발음을 최대 한 번씩 사용해 조합한(이어 붙인) 발음밖에 하지 못합니다. 문자열 배열 babbling이 매개변수로 주어질 때, 머쓱이의 조카가 발음할 수 있는 단어의 개수를 return하도록 solution 함수를 완성해주세요. var babbling = ['aya','yee','u','maa','wyeoo']; babbling.forEach((word)=>{ if(word.includes('aya')){ console.log('yes!!!!'); console.log(word.includes('aya')); } }); //yes!!!! //true var babbling = ['ay.. 2023. 4. 2.
[인간JS되기] this를 분석할 수 없는 케이스 제로초님 강의 보고 정리중 addEventListener의 this는 무엇일까 const obj = { addEventListener : function(eventName, callback){ callback(obj); // this가 window -> 땡 }, }; header.addEventListner('click',function(){ console.log(this); //this가 header }); - 결론 : 위의 코드만 봐서는 this를 알 수 없다! 왜냐? this는 호출할 때 정해지는데, addEventListner 함수호출은 어디서 되는지 알 수 없음. - 공식문서를 보면 일반적으로 addEventListener의 this는 앞에 붙은 객체,태그로 되어있다고 명시되어 있다 따라서, 공.. 2023. 3. 28.
[인간JS되기] 자바스크립트의 this 제로초님 인간JS되기 강의 보고 정리 자바스크립트의 this는 다른 언어에서의 this와 다르다 콘솔 로그로 this를 찍어보면 윈도우가 나온다 자바스크립트에서 this는 기본적으로 window라고 생각하면 된다 js(브라우저) - window(전역객체) node - global(전역객체) 이었는데, 최근에는 둘 다 globalThis라는 것으로 합쳐졌다고 한다 (if문으로 분기처리를 하지 않기 위해 통합 되었다고 함) const obj = { name : 'soyoung', sayName(){ console.log(this.name); } }; obj.sayName(); // soyoung 이 때 this는 window를 가리키는 것이 아니라, obj객체를 가리킨다 하지만 항상 이렇게 적용 되는 것은 .. 2023. 3. 23.
[인간JS되기] 호이스팅 제로초님 강의 듣고 정리 중 [인간 JS 엔진 되기 1-5] 호이스팅이란? 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것 var - 호이스팅 시 변수를 초기화 (undefined) let/ const - 호이스팅 시 변수 초기화X function a(){ console.log('a'); b(); console.log(x); // TDZ const x = 'x2'; } TDZ (Temporal Dead Zone) 스코프의 시작 지점부터 초기화 시작 지점까지의 구간 호이스팅을 염두에 두고 코드 분석해보기 예시 코드 const x = 'x1'; console.log(z); var y = 'here'; const z = () => {}; function c(){ const y = 'y';.. 2023. 3. 13.
[인간JS되기] 스코프 체인 제로초님 강의 보고 정리 중 [인간 JS 엔진 되기 1-4] 스코프 체인 정의: 식별자의 유효 범위 일종의 리스트로서 전역 객체와 중첩된 함수의 스코프의 레퍼런스를 차례로 저장하고, 의미 그대로 각각의 스코프가 어떻게 연결(chain)되고 있는지 보여주는 것 스코프 체인을 간단히 설명하면 '함수에서 어떤 값에 접근이 가능한가 불가능한가' ES2015 기준으로 그 이전까지는 함수가 기준이었지만, 그 후로는 { } 블록이 기준이 되었다 함수가 아닌 블록들 if() {} for() {} while() {} 등등.... 그 외에도 { } 그냥 이렇게만 있는 블록도 있는데 객체가 아니므로 주의! => 이걸 객체로 만들고 싶으면 ({ }) 이렇게 소괄호로 감싸서 사용 //객체를 리턴하는 함수가 아니라, 블럭이다 c.. 2023. 3. 6.
[인간JS되기] 자바스크립트 호출 스택 제로초님 강의 보고 정리한 것 [인간 JS 엔진 되기] const x = 'x'; function c(){ const y = 'y'; console.log('c'); } function a(){ const x = 'x'; console.log('a'); function b(){ const z = 'z'; console.log('b'); c(); } b(); } a(); c(); 함수가 여러개 얽혀있는 코드가 있다 실행을 돌려보지 않아도 결과가 어떻게 나오는지, 어떤 함수에서 어떤 변수에 접근이 가능한지 코드를 보고 미리 예측을 할 수 있어야 한다 결과는 a(); // a, b, c c(); // c 자바스크립트 코드, 프로그래밍 코드들을 볼 때 주의할 점이 있다 일반적으로 코드는 위에서 아래, 왼쪽에서 .. 2023. 3. 3.

티스토리툴바