본문 바로가기

생활코딩 학습일기(Web 기초)14

14) javascript의 함수 함수란? 특정 동작을 수행하는 코드의 묶음. 아마 어렸을 때 함수를 공부했다면 이런 그림을 종종 봤을 것이다. input이 있고, input을 가지고 조작하는 어떤 연산과정이 있고, 결과적으로 어떤 output을 내놓는 이런 일련의 과정. 이것을 우리는 함수라고 배웠다. 프로그래밍에서 말하는 함수도 이와 유사하다. 함수의 정의와 호출 Javascript에서 함수는 어떻게 정의하고 어떻게 사용할까? 예시를 통해 한번 보자. 함수의 이름(Function name): 먼저 컴퓨터에게 함수의 이름을 알려줘야 한다. function키워드를 쓰고 그 뒤에 내가 붙이고 싶은 함수명을 붙인다. 매개변수(Parameter): 함수명 바로 뒤에 소괄호를 붙이고 그 안에 매개변수를 선언해준다. 매개변수는 함수 외부의 값이 .. 2023. 4. 26.
13) javascript의 제어문 제어문이 무엇일까? 다른 언어를 경험해봤다면 당연히 아는 개념일 것이고, 아니어도 단어 자체에 뜻이 있으므로 감을 잡을 수 있을 것이다. 제어문(Control flow statement)은 코드 블록을 조건에 따라 실행하거나, 반복적으로 실행해야 할 때 사용하는 실행문을 말한다. 즉 프로그램의 실행 흐름을 제어한다. 제어문은 프로그래밍 언어라면 대부분 갖고 있는 문장이다. 생각해보면 당연하다. 우리는 컴퓨터에게 일을 시켜야 한다. 우리가 커다란 프로그램을 처음부터 실행 순서대로 일일이 작성할 수 있는 능력이 있을까? 같은 일을 여러 번 시켜야 하는 경우에는 같은 코드를 일일이 반복해서 작성해야 할까? 1억번의 같은 일을 시켜야 하면, 1억번의 같은 코드를 작성해야 할까? 다행히 그럴 수도 없고, 그럴 일.. 2022. 8. 31.
12) javascript의 연산자 목차 산술연산자 대입연산자 증감연산자 비교연산자 논리연산자 연산자(operator)가 무엇일까? 연산을 할 때 사용할 때 사용하는 부호다. 연산이라 하면 대개 수학적인 연산, 그러니까 사칙연산을 같은 것을 떠올릴 것이다. 하지만 꼭 수학에만 한정할 필요는 없다. 하나 이상의 대상에서 규칙에 따라 새로운 것을 만들어 내는 조작. 이것을 연산이라고 한다. 그리고 연산의 대상을 피연산자라고 한다. 만약 연산의 대상이 하나면 단항연산자, 두개면 이항연산자, 세개면 삼항연산자라고 부른다. 갑자기 새로운 개념을 몰아쳤으니, 예시를 하나 들어보는 것이 좋겠다. 만약 3+5이라는 식이 있다고 하자. 그럼 3과 5는 피연산자이고, 덧셈기호인 +는 이항연산자에 속한다. 그리고 해당 연산자는 양 옆의 수를 더한 수를 내놓는.. 2022. 8. 29.
11) 데이터 타입과 형 변환 *이 글은 프로그래밍 지식이 아예 없다는 가정하에 작성하였습니다. 혹시 다른 프로그래밍 언어를 경험해보신 분들은 빠르게 넘어가셔도 좋습니다. 프로그래밍 언어는 어떤 문법을 갖춰야 할까? 당신이 어떤 사람에게 일을 시킨다고 가정해보자.대개 어떻게 말할까? 뭉뚱그려서 말하면 “무엇을, 이럴 때, 이렇게 해라!” 라고 말해야 한다. 컴퓨터도 마찬가지다. ‘무엇을’을 쓰는 것에 관한 것은, ‘선언(Declaration)과 정의(Definition)’의 개념에 대해서 알아야 한다. 얘가 숫자인지, 문자인지, 변할 수 있는 것인지 아님 절대 변할 수 없는 것인지 이런 식으로 컴퓨터에게 자신이 처리해야할 데이터의 종류에 대해 알려주는 것이다. ‘어떤 조건에서’에 대해 설명하는 것은 ‘조건문’이라는 것을 활용한다. 만.. 2022. 8. 25.
10) javascript에 들어가며... 웹프로그래밍의 핵심언어라고 할 수 있는 자바스크립트(javascript, 짧게 줄이면 js라고도 부른다.)에 대해서 배운다. HTML은 웹페이지의 정보를 담고 정확히 그 정보를 나누는 역할을 했다. CSS는 웹페이지를 꾸미는 역할을 했다. 그럼 자바스크립트는 무슨 일을 할까? 이제부터 배울 이 언어는 ‘웹에 특화된 프로그래밍 언어’이다. 마크업 언어와 프로그래밍 언어의 차이점을 짧게 언급한 적이 있다. 다시 설명하면 마크업 언어의 목적은 문서구조를 명확하게 드러내기 위해서 사용하는 것이고, 프로그래밍 언어는 기계(컴퓨터)의 조작 및 제어를 위해 사용하는 것이다. 프로그래밍 언어는 다양하지만 공통적으로 이런 동일한 목적을 두고 있다. 초기 자바스크립트는 컴퓨터, 더 정확하게는 컴퓨터 안에 있는 ‘웹브라우저.. 2022. 8. 13.
9) 간단한 반응형 웹 디자인: 미디어 쿼리 반응형 웹 디자인? 반응형 디자인이란 말을 들어본 적이 있나 모르겠다. 개념은 간단하다. 사람들이 어떤 대상에 조작을 가할 때마다 그것의 모습이 변화하는 디자인이다. 웹페이지를 디자인하는 사람이라면 이러한 반응형 디자인을 염두에 두어야 한다. 특히 웹브라우저의 크기가 변화함에 따라서 웹페이지의 크기가 달라지는데 그럼 웹페이지가 전달하고자 하는 정보를 사람들에게 제대로 전달하지 못하는 경우가 생길 수 있다. 우리가 이용하는 대부분의 웹페이지는 반응형 디자인을 적용하고 있다. 예를 들어 쿠팡을 들어가보면 화면의 크기에 따라 나타내는 컨텐츠를 달리 적용하고 있는 것을 알 수 있다. 우리가 만든 웹페이지도 반응형 디자인을 간단한 수준으로 나타내볼까 한다. 그래서 활용하는 것이 미디어 쿼리(media query).. 2022. 8. 12.