지금까지 저희는 codesandbox에서 index.js 파일[각주:1]만 이용해서 공부했습니다.
맨 첫 시간에 웹페이지는 html과 css, JavaScript 이 3가지로 구성되어있다고 했습니다. 그러나 지금까지 저희가 배운 건 오로지 자바스크립트고 html과 css에 대해서는 배우지 않았습니다. 이 3가지는 긴밀히 연결되어 웹페이지를 구성하므로 이번 시간엔 간단하게 html과 css에 대해서도 배워보도록 하겠습니다.
html
먼저 html이란 웹의 뼈대(구조)를 담당합니다. html은 한번쯤 본 적이 있을텐데요,
이런식으로 구성이 되어있습니다.
<head>안에 들어가는 내용은 우리가 보는 웹페이지 화면에 직접적으로 보여지지는 않지만 웹브라우저가 알아야할 주요한 정보들이 들어있습니다. 그리고 <body>안에는 웹페이지 화면에 직접 출력되는 내용들이 들어있습니다.
비교연산자란주어진 값들이 서로 같은지, 다른지, 큰지, 작은지 비교해주는 연산을 수행합니다.
비교연산자를 통해 연산된 결과값으로는true 또는 false 즉 – 참이냐 거짓이냐 이 2가지만 존재하게 됩니다. 앞서 자료형을 학습했는데, 거기서 boolean형을 언급한 적이 있습니다. 이러한 true 또는 false의 값을 갖게 되는 것이 바로 boolean형 데이터입니다.
23 < 4
는true인가요, false인가요?
아래에 23 < 4 라고 입력해서 직접 확인해보세요.
4는 23보다 작은 숫자이므로 결과는 false가 됩니다.
==
변수의 데이터 타입과 상관없이 값이 같으면 참이다.
===
변수의 데이터 타입까지 고려하여 값이 같으면 참이다.
!=
변수의 데이터 타입과 상관없이 값이 다르면 참이다.
!==
변수의 데이터 타입까지 고려하여 값이 다르면 참이다.
>
변수의 값이 더 크면 참이다. (초과)
<
변수의 값이 더 작으면 참이다. (미달)
>=
변수의 값이 더 크거나 같으면 참이다. (이상)
<=
변수의 값이 더 작거나 같으면 참이다. (이하)
비교연산자의 종류는 위와 같습니다. 그런데 여기서==와 ===이 어떻게 다른지예시를 통해 살펴볼까요?
*그전에 한가지 주의할 점은 = 과 == 은 다른 종류의 연산자라는 것입니다.
=은 대입연산자로 우항의 값을 좌황에 대입해주겠다-라는 뜻이고, ==는 좌항과 우항의 값을 비교하겠다는 비교연산자입니다.
저번 시간에 언급했듯이"문자열"은 따옴표로 둘러싸서 표기해야한다고 했습니다.
하지만 숫자는 따옴표가 필요하지 않았죠.
기억이 나지 않는다면 저번시간 내용을 복습하고 오세요 ^ㅇ^
1이건숫자데이터 타입입니다.
'1'이건문자데이터 타입입니다.
즉데이터 타입이 다르다는 의미입니다. 1은 숫자이고, '1'은 문자이니까요.
1 == '1' 은 'true'입니다.
1 === '1' 은 false입니다.
이제 좀 이해가 되셨나요?
==와 ===가 '같은지'를 따져주는 연산자라면, != 와 !==는 반대의 의미를 갖고 있습니다.이 연산자는 '다를 경우에' 참(true)을 반환합니다.위에서 1 === '1'은 false라고 했습니다. 왜냐하면 1은 숫자이고, '1'은 문자여서 자료형이 다르기 때문이었습니다.
그렇다면
1 !== '1'
은 무슨 결과값이 나와야할까요? 한번 맞춰보세요!
네, 정답은~~~true(참)입니다. 왜냐하면 1과 '1'은 다르기 때문입니다.
===는 자료형까지 같은 경우 참을 반환하고, !==은 다를 경우에 참을 반환합니다.
그리고5 <= 5은 참일까요, 거짓일까요?
네, 참입니다. 왜냐하면왼쪽의 값이 오른쪽값보다 작거나 같으면 '참'을 반환하기 때문입니다.
5 <= 6또한 참이라고 할 수 있습니다!
이 비교연산자 문제에 대해선 제가 퀴즈도 많이 낼테니 문제를 풀면서 달달달 헷갈리지 않게 익혀주세요^^
조건문
이번엔 이 비교연산자를 활용할 수 있는 '조건문'을 배워보도록 하겠습니다.
조건문은 주어진 조건에 따라서 애플리케이션을 다르게 동작하도록 하는 것입니다.
if조건문
if ~ else if ~ else이런식으로 구성이 되어있습니다.
if(조건1) → 조건1일 경우 실행
else if(조건2)→ 조건2일 경우 실행
else→ 조건1, 조건2 둘다 해당되지 않은 나머지 경우에 실행
예를 들어서 우리가 성적을 계산할 때 이용할 수 있습니다.
앞서 배운 '비교연산자'를 이용하여 내 성적과 기준점수(90점)을 비교합니다. 내 성적 78점은 90점보다 작기 때문에 조건 "내성적 >= 90"을 만족하지 못하고 조건은 false를 반환합니다. 이처럼 조건이 false인 경우는 해당 조건에 만족할 경우에만 실행되는 "점수 A주기"를 실행하지 않습니다.
90점 이상은 A, 71~89점은 B, 70점 이하로는 모두 C라고 합시다. 그럴 경우 아래와 같은 코드를 작성할 수 있습니다.scroe엔 여러분이 바라는 점수를 적어보세요. 여러분의 점수는 몇등급 인가요?
var score = 78; //내 점수
var grade;//내 성적
if(score >= 90) grade = 'A'; //90점 이상은 A
else if(score >= 71 && score <= 89) grade = 'B'; // 71~89점은 B
else grade = 'C'; //70점 이하는 C
alert("점수는 " + grade);
1. codesandbox에 회원가입을 하고 로그인을 합니다. 그러면 바로 dashboard창이 뜰텐데 그렇지 않은 분들은 우측 하단에서 프로필 이미지를 누르고 dashboard를 클릭합니다.
2. Dashboard에서 create sandbox를 클릭합니다.
3. vanila 를 클릭합니다.
4. 빨간색으로 표시한 부분은 전부 지워주세요.
이제 실습을 위한 준비가 완료되었습니다!
변수(Variable)란?
변수는 영어로 variable이라고 하며, 쉽게 얘기해서 "데이터를 저장하는 공간"이라고 생각하시면 됩니다.
변수는 '변하는 수'라는 뜻입니다. 왜냐면 변수 안에 든 데이터들은 수시로 바뀔 수 있기 때문입니다. 예를 들어서 제가 이 블로그 포스팅의 제목을 수정할 수도 있고, 글 내용을 수정할 수도 있는 것처럼 말이죠. 변수를 선언할 땐 var 변수명 = 변수 안에 넣을 데이터 값; 이런식으로 쓰시면 됩니다. var은 변수를 선언하겠다는 것을 의미하며 생략해도 되지만 의미가 있기 때문에 일단 꼭 써주도록 합시다.
1. 자바스크립트에 대한 아주 간략한 소개 & 자바스크립트를 통해 무엇을 할 수 있는지 소개 =동기부여
2. 자료형과 변수
3. 비교문과 조건문 - 이를 통해 간단한 자판기를 만들어봅니다
4. 배열과 반복문 - 이를 통해 달력을 만들 수 있습니다
5. 함수 - 이를 통해 계산기를 만들어봅시다
6. 객체 - to do list를 만들어봅시다
*교육대상 : 프로그래밍에 관심은 있으나 프로그래밍에 대한 지식이 없는 중고등학생 이상의 학습자들
*교육목표 : 자바스크립트(JavaScript)가 무엇인지 이해하고, 간단한 예제와 함께 자바스크립트에 대한 기본적인 문법 지식을 이해한다. (beginner수준이라고 보시면 됩니다)
초보자를 위한 자바스크립트 카테고리에 업로드될 콘텐츠들은
위와 같은 커리큘럼으로 진행될 예정입니다.
*마지막으로 모든 교육 콘텐츠 업로드 이후 이 교육콘텐츠를 통해 목표에 달성한 학습자들을 위해 다음 단계의 학습 가이드라인(다음으로 무엇을 공부할지 제공할 예정입니다. 이는 beginner수준에서 더 나아가 advanced 수준의 학습을 원하는 학습자들에게 도움이 될 것입니다.
이 글은 프로그래밍에 관심은 있으나 프로그래밍이 뭔지, 왜 배워야하는지 구체적인 목표가 없는 고등학생 이상을 대상으로 한 포스팅입니다. 이 글을 통해서 프로그래밍 언어 중 하나인 JavaScript가 무엇인지, 그리고 프로그래밍을 공부함으로써 무엇을 얻을 수 있는지에 대한 개념을 최대한 쉽게 설명하고자 합니다.
먼저 우리는 왜 프로그래밍 언어를 배워야할까요? 이제는 프로그래밍이 의무교육이 될 정도로 중요시되고 있는데 그저 '중요하고 다들 배우려한다'정도로 알고 있을 뿐 그 이유를 명확히 아는 사람들은 많지 않은 것 같습니다. 특히 개발자를 꿈꾸지 않는 사람이라면 더더욱 왜 공부해야하는지 그 이유가 불명확해집니다.
선택할 수 있는 직업의 폭이 넓어진다.
문제해결능력을 기를 수 있다.
아이디어를 현실화할 수 있다.
이제는 코딩을 모르면 도태될 수 있다.
여러인터넷자료들과 제 경험을 비추어보았을 때 가장 와닿고 현실적인 이유들을 꼽아보았습니다.
이제는 IT직군 뿐만 아니라 기타 산업군에서도 코딩능력을 필요로 하고 있습니다. 그렇기 때문에 프로그래밍을 할 줄 알면 선택할 수 있는 직업의 폭이 넓어집니다. 혹은 코딩 능력을 통해 다른 지원자들과의 차별점을 만들 수 있습니다.
또한 코딩을 통해 간단한 프로그램을 개발하여 반복적인 업무를 간편하게 단순화하고, 추상적인 아이디어를 현실화할 수 있으며, 코딩을 통해 문제해결능력을 키울 수도 있습니다.
게다가 이제는 코딩이 의무교육이 된 때입니다. (얼마나 실효성이 있을진 모르겠지만;) 지금은 막 의무교육이 도입된 시점이라 체감할 수 없겠지만, 앞으로는 코딩을 모르면 도태되는 때가 올 수도 있지 않을까 하는 염려도 있습니다.
1. 자바스크립트로 선정한 이유
프로그램을 설치하는 사전작업이 필요 없어서
직관적으로 실행결과를 눈으로 볼 수 있어서
비교적 다른 프로그래밍언어에 비해 배우기 쉬워서
일단 기초적인 수준의 *프론트엔드 개발을 공부하는 데 있어서 자바스크립트는 별도의 프로그램을 설치하여 복잡하게 개발환경을 구축할 필요 없습니다. codesandbox나 codepen과 같이 브라우저에서 작동하는 에디터들을 사용하여 간편하게 자바스크립트 프로그래밍을 할 수 있다는 장점이 있습니다.
*프론트엔드 개발: 쉽게 말하면 사용자들의 눈에 보이는 웹화면을 개발하는 것입니다.
*백엔드 개발: 반대되는 개념으로 백엔드 개발이 있고, 사용자들의 눈에 보이지 않는 뒷부분- 서버개발 등을 의미합니다.
또한 실행결과를 웹브라우저를 통해 볼 수 있어서 바로 바로 실행결과를 직관적으로 확인할 수 있다는 장점이 있습니다. 그리고 웹 브라우저에서 동작하다보니 운영체제의 제한을 받지 않습니다.
마지막으로 다른 프로그래밍 언어들에 비해 비교적 진입장벽이 낮고 배우기 쉽다는 장점이 있습니다. 보통 프로그래밍 언어를 공부할 때 C언어를 시작으로 하는 경우가 많은데 C언어는 비교적 어려운 언어라서 초반부터 너무 어려움을 느끼고 쉽게 공부를 포기할 수 있다는 단점이 있다고 생각합니다.
덧붙이자면 자바스크립트는 수요도 많은 편이라 전망 있는 프로그래밍 언어로 볼 수 있습니다.
2. 자바스크립트란?
자바스크립트(영어:JavaScript)는객체 기반의스크립트 프로그래밍 언어이다. 이 언어는웹 브라우저내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다. (출처: 위키백과)
위는 위키백과에 나와있는 자바스크립트에 대한 설명입니다. 여기서부터 낯선 단어들이 등장하죠.ㅋㅋ 객체 기반? 스크립트 프로그래밍 언어? 서버사이드 네트워크 프로그래밍? 벌써부터 뭔가가 어려워보입니다. 그냥 쉽고 간단하게 설명하도록 하겠습니다.
자바스크립트는 우리가 사용하는 웹브라우저 (크롬, 인터넷 익스플로러러 등등)에서 동작하는 프로그래밍언어입니다.
우리가 방문하는 모든 웹페이지들은 모두 html, css, 그리고 JavaScript 이렇게 3가지로 구성되어있습니다.
먼저 html은 웹의 '내용들'입니다. 예를 들면 제가 이렇게 작성하고 있는 글의 내용, 제목 등이 되겠습니다.
그리고 CSS는 이런 html이 보여주는 콘텐츠를 보기 좋게 예쁘게 꾸며주는 역할을 담당합니다. 예를 들면 글의 폰트나 색상과 같은 '디자인적인 요소를 담당'하죠.
마지막으로 JavaScript는 '동작'을 담당합니다. 예를 들면 html로 버튼을 하나 만들어 넣고, css로 그 버튼을 예쁘게 디자인합니다. 그리고 그 버튼을 클릭해서 발생하는 동작은 javascript가 담당하는 것입니다.