빈코더

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

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

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라는 의미입니다. 숫자 없는 목록을 표현해줍..

1. HTML 레이아웃 inline, block 성질을 배웠으니 margin의 값을 하나 더 확인해 보려고 합니다. div { background-color: yellow; margin-bottom: 20px; } .test1 { width: 150px; } 설명과 같이 block 요소일 때 width 값을 주면 더이상 늘어나지 않게됩니다. 이 때 margin에 auto로 설정하면 가로 중앙에 오게 할 수 있습니다. .center { margin: 20px auto; } 1개 값이 있을 때는 사방 모두 같은 margin을 준다는 의미였고, 4개 값이 있을 때는 위/오/아래/왼 순서로 margin을 준다는 의미였습니다. 이렇게 2개의 값만 있을 때의 의미는 첫 번째는 위, 아래의 margin이고 두 번째는..

1.HTML Block vs Inline 1. Block과 Inline 대부분의 HTML element(이하 요소)는 block 요소입니다. 예를 들어, , , , , , , 등이 모두 block 요소에 해당하는 태그들입니다. block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻입니다. block 요소와 성질이 반대인 inline 요소도 있습니다. , , 태그 등이 inline 요소입니다. inline이라는 말 그대로 inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻입니다. 하지만! 아무리 block 요소의 성질을 가진 태그도 css을 사용하여 inline 스타일로 바꾸면 과 똑같은 디자인이 됩니다. inline 성질을 갖도록 하는 CSS ..