본문 바로가기

WEB

(30)

8일차 : 배열과 반복문, 배열과 반복문의 활용, 함수예고 8일차 : 배열과 반복문, 배열과 반복문의 활용, 함수예고 배열과 반복문의 시너지? 지난 시간에 배열과 반복문이 각각 무엇인지에 대해 간단하게 배웠습니다. 오늘은 배열과 반복문을 함께 사용하면 어떤 시너지 효과가 있는지에 대해 알아보고, 활용도 해보겠습니다. 우선 자바스크립트 없이 예제를 만들어 보도록 하겠습니다. Loop & Array라는 html 파일만 하나 먼저 준비해 볼게요. 만약 아래처럼 동료들의 이름을 나열하고 싶다고 하면, 원래는 마다 이름을 적어줘야 했습니다. 물론 이렇게 4개만 있을 때는 하나씩 적을 수 있겠지만 만약 수십명, 수백명이 있고 모두 나열을 해야한다면 어쩌죠? 지난 시간에 배운 반복을 시켜주면 됩니다. 일단 리스트를 4개 먼저 반복해 봅시다. 변수 i를 지정해주고, while..

7일차 : 배열, 반복문 7일차 : 배열, 반복문 배열이란? (Array) 코딩을 하다보면 데이터가 점점 많이 쌓이겠죠. 정리가 되지 않은 데이터들을 집안에 가득 쌓인 물건이라고 가정해봅시다. 생각만 해도 집에 들어가기 싫겠죠? 이렇게 가득 쌓인 물건들을 정리정돈 하려면, 각종 수납 도구들이 필요합니다. 옷들을 넣어둘 옷장, 음식을 넣어둘 냉장고, 물건들을 넣을 서랍장 등등 이런 수납 도구들과 같은 역할을 하는 것이 바로 오늘 배울 배열입니다. 즉, 배열은 데이터가 많아짐에 따라 정리가 되지 않은 다량의 데이터들을 서로 연관된 것끼리 잘 정리정돈해서 담아두는 일종의 수납 상자라고 생각하면 됩니다. 배열은 어떻게 만드는지, 문법부터 배워봅시다. 먼저 배열(Array)이라는 사이트를 생성해서 그 안에 배열을 넣어 봅시다. 배열을 만..

6일차 : 리팩토링, 반복문 예고 6일차 : 리팩토링, 반복문 예고 리팩토링이란? 코드를 효율적으로 만들고, 유지보수하기 편리하게 만들고, 중복된 코드를 없애는 등 이렇게 코드를 개선하는 작업을 리팩토링이라고 합니다. 지난 시간에 만들었던 나이트모드 버튼 기억나시나요? 그 때는 버튼을 맨 위쪽에 만들어 놨었죠. 만약 글 맨 아래에도 같은 버튼을 만들면 어떻게 될까요? 우선은 지난번에 사용했던 코드를 그대로 복사 붙여넣기 해서 버튼을 하나 더 만들어 보겠습니다. 같은 버튼이 아래에도 하나 생겼는데요. 아래에 있는 버튼을 누르면 화면 전체의 모드는 바뀌는데, 버튼에 표시된 내용이 바뀌질 않습니다. 위에 있는 나이트 버튼은 누르지도 않았는데, 이 버튼이 데이 버튼으로 변경되고 있습니다. 그 이유는 바로 두 버튼의 아이디가 auto로 동일하기 ..

5일차 : 비교 연산자와 Boolean 데이터 타입, 조건문, 조건문의 활용 5일차 : 비교 연산자와 Boolean 데이터 타입, 조건문, 조건문의 활용 1. 비교연산자와 불리언(Boolean) 조건문을 배우기 위해서는 먼저 비교 연산자와 이를 활용하여 만들어지는 데이터 타입인 불리안(Boolean)을 살펴봐야 합니다. 우선 간단한 비교 연산자를 알아봅시다. a>b : a는 b보다 크다. a>=b : a는 b보다 크거나 같다. 작다도 마찬가지 입니다. 여기까지는 수학의 비교 연산자와 같죠. 그럼 같다와 같지 않다는 어떻게 표현할까요? a==b : a와 b가 같다. a!=b : a와 b가 같지 않다. 등호(=)를 하나만 쓰면, 어떤 값을 정하는 의미가 되기 때문에 위와 같이 사용합니다. 간단히 웹페이지를 만들어 볼게요. 자 이렇게 비교 연산자를 사용하고 출력을 하면, 맞다(true..

4일차 : 조건문 예고 4일차 : 조건문 예고 조건문.. 학생 시절 영어를 배울 때 가장 우리를 힘들게 했던 것 아닐까 싶습니다. 조건문 예고라니 살인 예고도 아니고 뭔가 두렵네요. 조건문은 영어 뿐 아니라 코딩에서도 매우매우 중요하다고 합니다. 조건문은 하나의 프로그램이 하나의 흐름으로 가는 것이 아니라, 조건에 따라서 다른 순서의 기능들이 실행되도록 합니다. 단순한 반복문이 아닌, 아주 복잡한 업무까지도 해내게 만드는 혁명적인 도구라고 할 수 있습니다. 지난 시간에 day와 night 버튼을 통해서 웹페이지의 스타일을 변경해 보았죠. 물론 버튼을 만들고 눌렀을 때 너무 신기했지만, 솔직히.. 그렇게 세련된 모습은 아니죠..ㅎㅎ 내가 지금 있는 페이지는 데이모드인지 나이트모드인지 알 수 없을 뿐더러, 굳이 버튼이 두개나 있어..

3일차 : 제어할 태그 선택하기, 프로그램, 프로그래밍, 프로그래머 3일차 : 제어할 태그 선택하기, 프로그램, 프로그래밍, 프로그래머 이번시간에는 직접 자바 스크립트를 이용해, 사용자가 버튼을 누르면 웹페이지의 스타일이 바뀌게 해봅시다. 최근에는 시력보호를 위해 많은 웹사이트에서 다크모드를 지원하고 있는데요. 우리도 나이트 버튼과 데이 버튼을 만들고, 버튼을 누르면 모드가 변경되게 해봅시다. 일단 간단한 웹페이지를 만든 후에, 버튼을 삽입합니다. 버튼을 삽입할 때는 input type="button" value="버튼이름" 을 사용합니다. 데이버튼과 나이트 버튼을 만들었으니, 이 버튼을 클릭할 때 무슨일이 일어나게 할 지 설정해야겠죠. 버튼을 클릭할 때, 즉 onclick 을 사용해 이벤트를 설정합시다. 스타일을 바꿔줄 부분을 선택하고, 그 후에 변경시킬 내용을 입력합..

이전 1 2 3 4 5 다음

티스토리툴바