본문 바로가기

WEB/JavaScript

(12)

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 을 사용해 이벤트를 설정합시다. 스타일을 바꿔줄 부분을 선택하고, 그 후에 변경시킬 내용을 입력합..

2일차 : 데이터타입 - 문자열과 숫자, 변수와 대입연산자 2일차 : 데이터타입 - 문자열과 숫자, 변수와 대입연산자 오늘 배울 내용은 데이터타입과 변수, 대입 연산자입니다. 우선 자바스크립트라는 언어에는 어떤 형태의 데이터가 있는지 알아보겠습니다. 1. 데이터 타입(자료형) - 문자열과 숫자 자바스크립트의 데이터 타입이라고 검색을 해봅시다. 총 여섯가지 타입과 오브젝트(객체)가 나옵니다. 이번 시간에는 넘버와 스트링(문자열)을 배우면 됩니다. 지난 시간에 자바는 아무곳에서나 검사(inspection) - 콘솔(console)로 바로 실행시킬 수 있다고 했죠? 구글 메인 페이지에서 콘솔을 이용해 먼저 1을 띄워봅시다. alert(1);을 입력하면 알림창으로 1이라는 내용이 나옵니다. 1+1을 넣으면 이를 계산한 2가 나옵니다. 그런데 이렇게 매번 alert를 넣..

1일차 : 수업소개, HTML과 JavaScript의 만남 1일차 : 수업소개, HTML과 JavaScript의 만남 웹이 세상에 처음 등장했을 때는 HTML만 존재했습니다. HTML은 한 번 화면에 출력되면 언제나 그 모습 그대로 보여줍니다. 사람들은 웹페이지도 사람들과 동적으로 상호작용하기를 바라기 시작합니다. 이를 위해서 탄생한 것이 바로 자바스크립트죠. 예를 들어, 야간모드처럼 사용자가 버튼을 클릭하면 화면의 색이 변경되는 것이 바로 자바를 활용한 것입니다. html과 javascript는 어떻게 함께 사용할 수 있을까요? 크게 3가지 방법이 있습니다. 1. Script 태그 html 안에 자바를 넣겠다는 태그가 바로 script 태그 입니다. 이렇게 자바를 넣어주면 됩니다. 쉬운 예로 글씨를 넣겠다는 document.write('넣을내용');을 사용해 ..

이전 1 2 다음

티스토리툴바