빈코더

1. Math Expressions JavaScript를 사용해서 수학계산이 가능합니다. 그 방법에 대해서 알아보도록 하겠습니다 ! 1. 사칙연산 첫번째로 사칙연산에 대해서 알아보도록 하겠습니다. 방법은 매우 간단합니다. 덧셈 : + 뺄셈 : - 곱셈 : * 나눗셈 : / 나머지 : % 위 기호들을 사용하여 계산이 가능합니다. 예제를 한번 볼까요 ? // 변수를 이용한 출력 let sum = 2 + 2 console.log(sum) // console.log 안에 직접 값을 넣어 출력 console.log(2 + 2) // 함수를 사용한 출력 ES5 function fsum(num) { return num + num } console.log(fsum(2)); // 함수를 사용한 출력 ES6 const f..

1. JavaScript Function(함수)2 앞서 6강에서 배운 Function에 대해서 좀 더 살펴보도록 하겠습니다. 1. Function(함수) - 여러 인자 이번에는 여러 개의 데이터를 전달받는 함수에 대해 알아봅시다. 함수에 인수가 한 개가 아닌 여러 개 전달할 수도 있습니다. function alertSuccess(month, name) { alert(month + "월의 당첨자는 " + name + "입니다."); } alertSuccess("3", "김개발"); 2. 함수 내부에서 다른 함수 호출하기 function getTax(price) { return price * 0.1; } function calculateTotal(price) { return price + getTax(pri..

1. Function(함수) Function에 대해서 알아봅시다. 함수란? 하나의 특정한 작업을 수행하도록 설계된 독립적인 블록입니다. 변수에 이름이 있듯이, 함수도 이름이 있습니다. 함수 이름을 부르면, 함수 내에 있는 코드가 실행됩니다. 함수를 불러 실행시키는 것을 앞으로 "함수를 호출한다" 라고 표현하겠습니다. 아래 코드를 봐주세요. function checkCorrect() { let hi = "안녕하세요"; return hi; } 함수가 정의되어 있습니다. 이름은 checkCorrect네요. 위와 같이 함수를 생성하고, 아래와 같이 이름을 불러 호출할 수 있습니다. checkCorrect(); 함수를 호출해주니 함수 내에 있는 코드가 실행되었습니다. 함수를 사용하는 방법은 다음과 같습니다. fu..

1. 이번엔 상수와 변수에 대해서 알아보도록 하겠습니다. 상수는 변하지않는 값을 말하고, 변수는 수식에 따라서 변하는 값을 말합니다. JavaScript에서는 상수는 const, 변수는 var 또는 let으로 선언합니다. 위와 같이 선언을 해주시면 됩니다. 처음엔 다 같아보이죠 ? 1 - 1. 상수 제가 위에서 상수는 값이 변하지 않는다고 말씀드렸었는데 확인해봅시다. 자 위 사진을 보면 다음과 같은 에러가 발생했습니다. TypeError: Assignment to constant variable. 위 에러가 뜨는 이유는 const는 값이 변할 수 없는데 그 값을 재할당('빈코더' -> 'Hello world!')을 하려고 하니 에러가 발생하였습니다. 이점만 주의하시면 됩니다. 1 - 2. 변수 변수도 한..

1. 주석이란? 주석(Commenting)이란 '코드를 작성하긴 했지만 브라우저에서 해당 코드를 실행시키지 말고 무시하라'는 뜻으로 쓰입니다. 위 사진처럼 주석을 하니 결과가 나오지 않습니다. 주석을 하는방법은 간단합니다. // 한줄만 주석 /* 안에 있는 내용 모두 주석 */ 그럼 주석을 쓰는 이유를 알아볼까요 ? 특정 코드가 필요 없어졌는데, 혹시 몰라서 남겨놓고 싶을 때 다음 사람에게 인수인계 해야해서 코드에 설명해 놓을 때 코드를 볼 때마다 이해가 잘 안 돼서 한글로 설명해 놓을 때 등등.. 위 와 같은 이유로 주석을 사용합니다. 그리고 한가지 팁을 드리자면 RusJS나 VScode는 단축키로 주석을 할 수 있습니다. ( 다른 에디터는 몰라요 .. ) 범위를 지정을 해주고 윈도우 기준으로 ctrl..

1. RunJS 다음으로 넘어가기 전에 실행 가능한 작업을 빌드하기위한 미니멀리즘 자바 스크립트 라이브러리 인 RunJS 설치를 하고 진행하도록 하겠습니다. (굳이 설치 안하셔도 상관은 없습니다. ^^) 설치 방법은 간단합니다. runjs.dev/ RunJS RunJS is a modern JavaScript and TypeScript playground, displaying instant results as you type and providing access to Node and browser APIs. runjs.dev 위 사이트에 들어가겨서 파일을 받아 설치하면 끝입니다. 간단하쥬? 설치하고 실행시키면 다음과 같은 창이 뜹니다. 왼쪽이 입력창이고 오른쪽이 출력창 입니다. 왼쪽에 입력하면 오른쪽에 ..

1. JavaScript 기본 출력 JavaScript의 기본적인 출력을 배워보도록 합시다. 1 - 1. alert alert의 뜻은 경보, 경계라는 뜻을 가지고 있습니다. 혹시 다른 웹사이트에서 뭔가를 클릭하면 화면에 뜨는 작은 박스를 보신 적 있으신가요? 그 창을 alert창이라고 부릅니다. 한번 같이 창을 임의 적으로 띄어 볼까여 ? 방법은 간단합니다. 브라우저 창(인터넷 창)에서 F12를 눌러 개발자 도구를 불러온다음 console창에 'alert("안녕하세요!") 라고 적으시면 아래와 같은 창이 뜹니다. alert 함수는 보통 언제 사용할까요? 예를 들어, 로그인 창에서 비밀번호가 틀렸을 때, "비밀번호가 틀렸습니다" 라는 텍스트로 alert창을 보여줄 수 있습니다. 물론 디자인된 예쁜 창을 보..

1. JavaScript란? 웹페이지는 구조를 정의하는 것은 HTML입니다. 그런데 HTML만 있다고 해서 우리가 보고 있는 웹페이지가 만들어지진 않습니다. 텍스트만 가득한 하나의 웹페이지라면 상관이 없지만 우리가 원하는 페이지는 그런 웹페이지가 아닙니다. 브라우저에서 사용자의 행동을 처리하고, 데이터도 저장하고, 네트워크 응답과 요청을 처리하는 Dynamic하고 Interactive 하게 만드는것이 프론트엔드 개발자의 가장 큰 역할이 아닐까? 생각이 듭니다. 위 내용처럼 웹페이지를 만들때 사용하는 언어가 JavaScript입니다. JavaScript의 확장자는 .js입니다. 우리가 사용하는 거의 모든 페이지가 JavaScript의 코드가 들어가 있습니다. 같이 공부해서 멋진! 웹페이지를 구성해봅시다. ..

1. HTML Table List에서도 , , 과 같이 여러 태그의 조합이 필요했는데 Table 태그도 마찬가지로 여러 태그의 조합이 필요합니다. , , , , , 등이 있습니다. 테이블은 항상 태그로 감싸져있습니다. 태그 내에 행도 만들고, 열도 만들게 되는 것입니다. 한 행을 시작할 때는 로 시작합니다. tr은 table row의 줄임말입니다. 각각의 셀은 태그 내에 태그를 사용합니다. td는 table data의 줄임말입니다. Row 1, column 1 Row 1, column 2 Row 2, column 1 Row 2, column 2 여기 까지 하면 글씨는 출력이 되는데 선이 출력이 안됩니다. css에서 추가해줘야 합니다. 선추가는 나중에 한번해 해주기로 합시다. 이번엔 테이블 열의 제목 추가..

1. HTML List List를 표시하는 태그는 입니다. List Set HashMap (Dictionary) Queue Stack Tree Sorting Search 목록에서 List, Set, HashMap.. Search까지 목록 아이템 하나하나를 태그로 감싸줍니다. 그리고, 목록 전체를 태그로 감싸줍니다. 은 ordered list라는 의미로, 결과 화면과 같이 목록에 숫자를 달아줍니다. 왼쪽 결과 화면을 보면, 우리는 숫자를 쓰지 않았는데 자동으로 numbering 되었네요. 숫자 말고 다른 것도 가능합니다. List Set HashMap (Dictionary) Queue Stack Tree Sorting Search 태그는 unordered list라는 의미입니다. 숫자 없는 목록을 표현해줍..