본문 바로가기

반응형

WEB/JavaScript

(12)
12일차 : UI vs API 12일차 : UI vs API 지금까지 자바스크립트의 핵심적인 문법을 살펴봤습니다. 자바스크립트를 활용하면 웹 애플리케이션을 개선할 수 있는 것도 배웠습니다. 마지막으로 정말 중요한 개념을 배우고, 자바스크립트 기본 강의는 마친다고 합니다. UI vs API UI와 API 둘다 많이 들어본 것 같은데요. UI는 User Interface의 약자로 평상시에 풀네임인 유저 인터페이스라는 말도 자주 듣게 되는 것 같습니다. API는 Application Programming Interface의 약자입니다. 일반적인 사용자 입장에서는 UI에 비해 자주 듣지 못한 단어인 것 같습니다. 이 둘은 비슷한듯 다르며, 다른듯 비슷합니다. 우선 사용자가 시스템을 제어하기 위해서 사용하는 조작장치를 UI라고 합니다. 우리가..
11일차 : 객체 활용, 정리정돈, 라이브러리와 프레임워크 11일차 : 객체 활용, 정리정돈, 라이브러리와 프레임워크 객체 활용 nightmode에 사용했던 페이지를 이용해서 객체를 만들고, 그 안에 함수를 넣어봅시다. 객체 안의 함수는 메소드라고 부르던 것 기억하시죠? 일단 Body라는 객체를 만들어서 그 안에 함수를 두개 만들어 보겠습니다. 각각 바디 안의 글씨 색과, 배경색을 설정하는 함수입니다. 이렇게 묶어서 정리하면, 나중에 사용할 때에도 Body.setColor 혹은 Body.setBackgroundColor 을 이용하면 편리하겠죠. 다음으로는 while문을 품고 있던 함수를 Links라는 객체를 만들어서 집어넣어 줄게요. 하이퍼링크의 색상을 모드마다 예쁘게 변경하는 함수였는데 기억나시나요? 이렇게 바꾸면 Links.setColor만 넣어주면 되니까 ..
10일차 : 객체 10일차 : 객체 이번에 배울 내용은 객체(object)입니다. 객체는 엄청 어렵대요 ㅠㅠ 프로그래밍에는 큰 산이 두개가 있는데, 하나는 함수 하나는 객체라고 합니다. 객체는 함수와 전혀 다른 개념이 아니라, 함수라는 기반 위에 존재하는 것입니다. 객체는 정말 다양한 얼굴을 갖고 있는데, 전반적인 것을 한번에 이해하려고 하기 보다는, 우선 하나의 객체의 특성, 존재 이유, 기능을 살펴보면서 객체가 무엇인지 알아가 봅시다. 객체의 존재 이유 중 하나는 바로 정리정돈입니다. 함수의 존재 이유도 바로 정리정돈이었죠. 중복되는 코드가 많아짐에 따라 이를 정리정돈하기 위해 함수를 배웠습니다. 그런데 함수가 많아지면 어떻게 될까요? 함수뿐만 아니라 함수와 연관되어 있는 변수들이 엄청나게 많아지면요? 이런 상황에서 ..
9일차 : 함수, 함수의 활용 9일차 : 함수, 함수의 활용 함수의 기본 반복문으로 해결할 수 없는 반복(?)이 등장한다면 어떻게 해결할까요? 예를 들어, 목차가 1,2,3,4 이렇게 나가는 것이 아니라 1-1, 1-2처럼 소단원이 있다고 생각하고, 이런 소단원을 반복해서 삽입하고 싶다고 가정해 봅시다. 아래처럼 하나씩 입력하게되면 너무 힘들겠죠. 이렇게 일정한 규칙이 없는 상태를 반복하려면, 반복문이 아닌 함수를 사용해야 합니다. 웹브라우저에게 함수를 사용한다는 신호를 주려면 먼저 function을 사용해야 합니다. function 뒤에는 함수의 이름을 넣어주면 되고, 이름 뒤에 중괄호, 그 뒤에 대괄호를 넣어줍니다. 대괄호 안에는 함수로 만들고자하는, 즉 반복되는, 혹은 재사용되는 코드를 넣어주면 됩니다. 예를 들어, 2-1과 2..
8일차 : 배열과 반복문, 배열과 반복문의 활용, 함수예고 8일차 : 배열과 반복문, 배열과 반복문의 활용, 함수예고 배열과 반복문의 시너지? 지난 시간에 배열과 반복문이 각각 무엇인지에 대해 간단하게 배웠습니다. 오늘은 배열과 반복문을 함께 사용하면 어떤 시너지 효과가 있는지에 대해 알아보고, 활용도 해보겠습니다. 우선 자바스크립트 없이 예제를 만들어 보도록 하겠습니다. Loop & Array라는 html 파일만 하나 먼저 준비해 볼게요. 만약 아래처럼 동료들의 이름을 나열하고 싶다고 하면, 원래는 마다 이름을 적어줘야 했습니다. 물론 이렇게 4개만 있을 때는 하나씩 적을 수 있겠지만 만약 수십명, 수백명이 있고 모두 나열을 해야한다면 어쩌죠? 지난 시간에 배운 반복을 시켜주면 됩니다. 일단 리스트를 4개 먼저 반복해 봅시다. 변수 i를 지정해주고, while..
7일차 : 배열, 반복문 7일차 : 배열, 반복문 배열이란? (Array) 코딩을 하다보면 데이터가 점점 많이 쌓이겠죠. 정리가 되지 않은 데이터들을 집안에 가득 쌓인 물건이라고 가정해봅시다. 생각만 해도 집에 들어가기 싫겠죠? 이렇게 가득 쌓인 물건들을 정리정돈 하려면, 각종 수납 도구들이 필요합니다. 옷들을 넣어둘 옷장, 음식을 넣어둘 냉장고, 물건들을 넣을 서랍장 등등 이런 수납 도구들과 같은 역할을 하는 것이 바로 오늘 배울 배열입니다. 즉, 배열은 데이터가 많아짐에 따라 정리가 되지 않은 다량의 데이터들을 서로 연관된 것끼리 잘 정리정돈해서 담아두는 일종의 수납 상자라고 생각하면 됩니다. 배열은 어떻게 만드는지, 문법부터 배워봅시다. 먼저 배열(Array)이라는 사이트를 생성해서 그 안에 배열을 넣어 봅시다. 배열을 만..

반응형