FRONTEND/JavaScript 30

자바스크립트 기본 논리적 구조만들기(feat.계산기)

자바스크립트를 통해 계산기를 만들면서 많은 어려움을 맞이하고 열심히 검색을 통해 어떻게 어떻게 누더기가 된 코드로 기능을 하게 만들었다. 그리고 나서 reference code를 보니 망치로 머리를 맞은 것 같은 충격을 받았다. 나는 코딩을 함에 있어서 하나하나의 기능을 구현해보는데 전전긍긍했다. 아무래도 코딩을 처음시작하였기때문에 어쩔수 없다고는 생각하지만, reference code를 보는 순간 이러한 하나의 기능을 만드는 것도 중요하지만, 전체적인 논리구조를 파악하고 거기에 기반하여 코딩을 진행하는 것이 중요하다는 생각이 들어 스스로 채찍질하고 잊지 않기위해 이 글을 적게 되었다. 아래는 계산기의 논리 구조이다. 계산기의 작동모습 계산기는 1)내가 처음누른 숫자 와 2)두번째 누른 숫자를 3) 눌려..

FRONTEND/JavaScript 2021.04.15

다중 조건문 if(자바스크립트, js)

if문의 기본 형식은 보통 3가지로 대개 아래와 같은 형식으로 이루어지게 된다. 1> if(ture){ if의 ()안의 값이 true 일때 실행될 값. }else{ if의 ()안의 값이 false일때 실행될 값. } 2> if(ture) { if의 ()안의 값이 true 일때 실행될 값. }else if(true ) { else if의 ()안의 값이 false일때 실행될 값. } 3> if(ture){ if의 ()안의 값이 true 일때 실행될 값. } 위의 형식에서 첫번째 if가 들어오고 ()안의 값이 참일때, {}가 실행된다는 것은 직관적으로 이해가 쉽다. 하지만, 2>와 3>의 경우에 즉 else if(){}, if(){}의 이후에 어떤 일이 일어나는지에 대해 명확한 이해가 필요했다. 아래의 간단한..

FRONTEND/JavaScript 2021.04.15

계산기만들기 프로젝트(js) 화면에 숫자를 이어서 나오게 하기

위에 보이는 것처럼, 첫화면에서 숫자를 연속적으로 눌렀을때 화면에 그 값이 하나만 나오는 것이 아닌 이어져서 나오게 하는 것이 오늘의 목표이다. 1) 우선, 버튼이 눌렀을 때 작동하게 하기 위해서는 buttons.addEventListner('click', function(event){ const t= event.target; const c= t.classList[0] const content = t.textContent }) 를 사용한다. 여기에서 buttons는 미리 선언되어 있어야 하는 변수. addEventListner는 해당 buttons에 적용될 메소드. 해당 매소드의 첫 인자인 'click'은 이벤트 타입. 해당 메소드의 두번째 인자인 function(event)는 익명함수로, click이라..

FRONTEND/JavaScript 2021.04.15

문자열 다루기

문자열은 ' ' 와 같은 표시안에 들어와 있는 객체를 의미한다. 예를들어, 'coding'과 '249595'는 모두 같은 string, 객체이다. 이러한 string에 쓸 수 있는 다양한 메소드가 있는데 그 중 몇가지에 대해 학습해보고자 한다. let str = 'everyday coding'; str.length; ->15 let str = 'everyday coding'; str[0] = 'e' let str = 'everyday coding'; str.toUpperCase(); "EVERYDAY CODING" slice는 약간 헷갈릴 수 있는 부분이다. 크게 2가지 방법으로 사용할수 있는데 1)구간을 정하여 추출. 이는 str.slice(x,y); 형식으로 이루어진다. 예를 들어, let str =..

FRONTEND/JavaScript 2021.04.12

함수 선언식, 표현식, 화살표함수

오늘은 변수, 타입, 함수, 그리고 조건문에 대해 학습하였다. 이 글에서는 우선적으로 함수의 표현방법에 대해 다뤄보고자 한다. 함수를 표현하는 방법은 크게 3가지(함수 선언식, 표현식, 화살표함수)가 있다. 이들의 눈에 띄는 첫 차이점은 말그대로 '표현의 차이'에 있다. 아래의 표현들은 표현의 방식에 차이는 있지만 실행값은 6으로 같게 된다. function example(num1, num2){ let result = num1*num2; return result; console.log(result); } example(2,3); const example = function(num1, num2){ let result = (num1*num2); retrun result; console.log(result);..

FRONTEND/JavaScript 2021.04.12