[강의] 자바스크립트의 시작 : PART1 웹과 JavaScript

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorhttps://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorhttps://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorhttps://developer.mozilla.org/ko/docs/Web/API/Document/querySelector

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector강의제목 : 자바스크립트의 시작
제공 : 네이버부스트코스
공부일자 : 2021.11.30

Document.querySelector() - Web API | MDN

 

 

🌏1.웹과 JavaScript

💫1.1 수업소개

 

 

 

WEB과 Javascript, HTML

WEB이 처음 등장했을 때, 사람들은 HTML을 사용해서 정보를 주고받았습니다. 

하지만 HTML은 정적입니다. 한 번 출력되면 그 모양이 바뀌지 않죠.

사용자와 동적으로 상호작용하는 WEB을 만들기 위해서 Javascript가 등장했습니다.

이제 우리는 HTML을 이용해 웹페이지를 만들고, Javascript를 이용해 사용자와 상호작용할 수 있도록 추가할 겁니다.

즉, 정적인 정보인 HTML(사진)을 Javascript(영화)가 동적으로 만들어 주는 것입니다.

 

 

 

 

 

💫1.2 수업의 목적

 

Javascript의 역할

Javascript의 가장 중요한 역할는 사용자와 상호작용할 수 있게 하는 것입니다. 아래의 웹페이지에서 사용자가 night/day 버튼을 누를 때마다 페이지의 색깔이 바뀌는 것을 그 예시이죠.

 

 

💫1.3 HTML과 JS의 만남 : script 태크

 

HTML과 Javascript

Javascript는 HTML 위에서 동작하는 언어입니다. 그렇다면 어떻게 서로 다른 두 언어를 하나로 합칠 수 있는 것일까요?

이 때 바로 script 태그가 필요합니다

 

Script 태그

HTML의 태그 중 하나인 script 태그 안에는 Javascript 코드를 쓸 수 있습니다. 

 

 

💫1.4 HTML과 JS의 만남 : event

 

Onclick 속성

HTML 태그 안에서 onclick 속성은 javascript 코드를 가지게 됩니다. 그리고 onclick이 포함된 태그가 클릭되었을 때 이 javascript 코드에 따라서 웹 브라우저가 동작됩니다. 즉, 위의 코드에서 웹 브라우저는 alert('hi') 라는 코드를 기억하고 있다가, 사용자가 클릭하면 이를 실행해주는 것입니다.

이렇게 웹 브라우저에서 일어나는 유용한 사건을 이벤트(Event)라고 합니다.

 

이벤트(Event)

웹 브라우저에서 일어나는 사건을 이벤트라고 한다면, 이벤트에는 어떤 종류가 있을까요?

첫 번째로는 방금까지 살펴봤던, onclick 이벤트입니다. 사용자가 어떤 것을 클릭하는 사건을 의미하죠.

두 번째는 onchange입니다. 예를 들면 다음과 같은 입력창에서 사용자가 키보드를 이용해 무언가 입력하면, 그에 따라 내용이 바뀌는 사건을 의미하는 것입니다. 이 때, 입력창에 입력한 후 바깥쪽을 클릭했을 때를 기준으로 그 전과 내용이 바뀌었는지 확인한다는 점도 알아두세요.

이 외에도 총 10~20가지 정도의 이벤트가 존재합니다. 이를 이용해서 사용자와 상호작용하는 웹 사이트를 만들 수 있게 됩니다.

https://www.w3schools.com/js/js_events.asp

JavaScript Events

 

 

💫1.5 HTML과 JS의 만남 : 콘솔

 

콘솔 (Console)

지난 강의에서 Javascript를 실행하는 한 가지 방법인 이벤트(Event)에 대해서 배워봤습니다. 이번 강의에서는 또 다른 방법인 콘솔(Console)에 대해서 알아보겠습니다.

첫 강의에서 했던 것처럼 웹 브라우저에서 오른쪽 버튼 > 검사 를 누르면 뜨는 창을 잘 살펴보면 Console이라는 이름의 탭이 보일 겁니다. 이 콘솔을 이용하면 파일을 만들지 않고도 바로 Javascript 코드를 실행할 수 있습니다.

예를 들어서, 어떤 문자열(Hello, World!)의 길이를 알고 싶다고 해 봅시다. 이 때 바로 이 콘솔 창에서 다음과 같이 치고 엔터를 누르면 문자열의 길이를 현재 페이지에서 바로 경고창으로 출력할 수 있습니다.

즉, 콘솔을 통해서 입력된 코드는 현재 페이지에서 즉석으로 실행되는 것입니다.

그렇다면 이런 콘솔을 어떻게 활용할 수 있을까요? 예를 들어서 여러분이 페이스북에 댓글을 남기는 이벤트를 개최했다고 해 봅시다. 이 때 아주 많은 참가자들 중 당첨자를 뽑아야 하는데, 여기서 콘솔을 사용할 수 있습니다. 미리 짜 둔 Javascript코드를 콘솔 창에 적은 후 실행시키면 당첨자를 쉽게 뽑을 수 있겠죠.

정리하자면, 콘솔을 이용하면 웹사이트에서 간단한 문제를 간편하게 Javascript를 실행시켜서 해결할 수 있는 것입니다.

 

 

 

💫1.6 데이터타입 (문자열과 숫자)

 

Javascript의 데이터 타입

컴퓨터 프로그래밍에서는 많은 데이터를 처리하게 되고, 이를 위해서는 특히 데이터를 종류별로 분류하는 일은 아주 중요합니다. 그렇다면 Javascript에서는 어떤 데이터 종류가 있을까요?

크게 6종류의 데이터 타입이 있지만, 오늘 강의에서는 문자열(String)과 숫자(Number)에 대해서 다뤄보도록 합시다.

 

숫자(Number)

지난 시간에 배운 것처럼 콘솔 창을 열어봅시다. 그리고 Javascript를 이용해서 숫자 데이터 타입을 사용해봅시다.

예를 들어 1+1을 실행시키면 2가 출력될 겁니다. 숫자 데이터 타입의 가장 중요한 점은 연산이 가능하다는 것입니다. 즉, 1+1에서는 +라는 연산이 왼쪽에 있는 값과 오른쪽에 있는 값을 더해서 하나의 값을 만들어내게 됩니다. 그렇기 때문에 +를 이항 연산자라고 부릅니다. 계산을 하기 때문에 산술 연산자라고 부르기도 합니다. 여러분이 흔히 아는 사칙 연산 (+, -, *, /)는 모두 산술 연산자에 속합니다. 즉, 사칙 연산을 이용해서 숫자 데이터 타입을 계산할 수 있는 것입니다.

 

문자열(String)

문자열은 따옴표로 시작해서 따옴표로 끝나게 됩니다. 작은 따옴표로 시작하면 작은 따옴표로 끝내고, 큰 따옴표로 시작하면 큰 따옴표로 끝내면 됩니다. 문자열에서 흔히 사용하는 연산으로는 length가 있습니다. 문자열 뒤에 .을 붙이고 length를 입력하면 그 문자열의 길이를 알려주게 됩니다.

그 외에도 문자를 처리하는 데 다양한 명령어를 사용할 수 있습니다. 예를 들면 str.toUpperCase()를 사용하면 str 안에 들어 있는 모든 문자열의 문자들이 대문자로 바뀌게 됩니다. str.indexOf('hi')를 하면 str 안에 있는 hi 라는 문자열을 찾아서 그 부분이 앞에서부터 몇 번째 문자인지 알려주게 됩니다.

문자열을 처리하는 데에는 정말 다양한 명령어가 사용될 수 있습니다. 이렇게 많은 명령어들을 다 외울 수는 없습니다. 하지만 여러분들은 검색을 통해서 필요한 명령어를 쉽게 알아낼 수 있겠죠.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures

자바스크립트의 자료형 - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String

String - JavaScript | MDN

 

💫1.7 변수와 대입연산자

변수

변수란 말 그대로 바뀔 수 있는 수를 말합니다

이 때 =는 대입 연산자라고 부릅니다. 왼쪽에 있는 변수에 오른쪽에 있는 숫자를 대입한다는 의미죠.

 

1=2;

실행해보면 에러가 나게 됩니다. 이유가 무엇일까요?

바로 1은 변수가 아니기 때문입니다. 1은 언제나 1이죠. 이렇게 바뀌지 않는 수를 상수라고 합니다.

 

변수의 필요성

그렇다면 변수는 왜 사용하는 것일까요? 그 이유는 무척 다양합니다.

그 중 하나의 이유는 바로 변수를 이용해서 여러군데 흩어져 있는 값들을 한 번에 바꿀 수 있다는 것입니다. 예를 들어 한 문자열 안에서 같은 "hello"라는 단어가 여러 번 나올 때, 이를 모두 "hi"로 바꾸고 싶다고 해 봅시다. 이 때 모든 "hello"들이 변수로 나타나 있다면, 변수만 바꿔주면 한 번에 모든 hello들을 hi로 바꿀 수 있다는 것이죠.

변수를 쓸 때 한 가지 알아두시면 좋은 점은 다음 코드와 같이 변수 이름 앞에 var을 붙이면 좋다는 점입니다. 이 때 var은 변수의 영어 단어인 variable의 약자입니다.

 

💫1.8 웹브라우저 제어

 

Javascript를 이용하면 웹 브라우저를 제어할 수 있는데요, 이번 강의부터 어떻게 이러한 일이 가능한지에 대해서 살펴볼 겁니다.

시작하기 전에 간단하게 몇 가지를 짚고 넘어가 봅시다. 먼저 이 웹사이트의 색깔이 이렇게 바뀌기 위해서는 <body> 태그의 속성이 바뀌어야 한다는 사실입니다.

<body>
<body style="background-color: black; color: white;">

원래 웹페이지에서는 첫 줄과 같이 <body> 태그만 존재했습니다. 하지만 원래의 <body> 태그에서 두 번째 줄과 같이 style을 지정해주면, 배경색은 검정색으로, 글자 색은 하얀색으로 바뀌게 됩니다. 이 때 style 속성에 들어있는 간단한 코드를 css라고 부릅니다. css는 디자인을 위한 언어이고, HTML, Javascript와는 완전히 다른 언어입니다.

하지만 HTML은 한 번 표시되면 바뀌지 않는 정적인 언어입니다. 즉 <body> 태그가 만들어지면, 저 style 속성 값을 바꿀 수 없다는 이야기입니다. 지금부터 우리가 만들고자 하는 웹페이지는 Javascript를 이용해 이 문제를 해결할 겁니다.

 

 

💫1.9 CSS기초 - style 속성

 

CSS의 기본 문법

 

CSS를 이용하면 웹페이지에 있는 요소들의 디자인을 바꿀 수 있습니다.이를 위해서는 바꾸고 싶은 태그에 style 속성을 사용하면 됩니다. 이 style 속성 안에는 CSS가 들어가게 됩니다.

CSS를 이용하면 다양한 종류의 디자인 요소를 바꿀 수 있습니다. 예를 들어 color 대신 background-color을 쓰면 배경 색이 바뀌는 것을 볼 수 있을 겁니다.

이러한 요소들을 알아보고 싶다면 CSS property + "원하는 디자인 요소" 로 검색해보시면 됩니다. 예를 들어 "CSS property background color"로 검색하면, 방금 배운 background-color라는 CSS 속성에 대해서 알아보실 수 있을 겁니다.

https://www.w3schools.com/cssref/pr_background-color.asp

CSS background-color property

 

 

💫1.10 CSS기초 - style 태그

 

Span과 Div

우리가 CSS를 이용해서 문단의 특정 부분에만 스타일을 주어서 강조를 하고 싶다고 해 봅시다. 이 때 이 부분을 감싸줄 수 있는 HTML 태그가 필요하겠죠.

이를 위해서 우리는 div와 span이라는 태그를 사용합니다. 둘 모두 어떠한 특정한 기능이 있는 태그가 아니고, CSS나 Javascript 코드를 삽입하기 위해서 존재하는 태그입니다. div 태그는 화면 전체를 사용하기 때문에 줄바꿈이 되고, span은 줄바꿈이 되지 않습니다.

이제 이러한 div와 span 태그 안에 style 속성을 부여하면 이 태그로 감싸진 부분에만 디자인이 적용되게 됩니다.

하지만 이렇게 모든 부분을 div나 span 태그로 감싸려고 한다면 이를 쓰기도 힘들고, 수정하기는 더욱 힘들 것입니다. 이를 위해서 CSS에는 선택자라는 기능이 존재합니다.

 

Class

이를 위해서는 <head> 태그 안에 <style>이라는 새로운 태그를 만들어 줍니다. 이 style 태그 안에는 CSS 코드가 들어가게 됩니다. 그리고 js라는 class를 생성해 봅시다. 아래 코드와 같이 말이죠

<head>
  <style>
    .js {
        font-weight: bold;
    }
  </style>
</head>

이 때 js 앞에 찍혀있는 점은 js라는 이름이 class 이름이라는 것을 나타냅니다. 이렇게 class를 만들었으니, 이를  HTML 코드의 곳곳에 적용시키면 됩니다. 예를 들어 어떤 문장에서 Javascript라는 단어에만 이 class를 적용시켜서 볼드체로 만들고 싶다면 다음과 같이 쓰면 됩니다.

<span class="js">Javascript</span> is wonderful!

이렇게 하면 이제 js라는 class를 가진 모든 태그를 한 번에 바꿀 수 있습니다. style 태그 안에 있는 .js만 수정하면 모든 부분을 한 번에 바꿀 수 있는 것이죠.

 

 

 

💫1.11 CSS기초- 선택자

 

선택자

선택자에는 저번 강의에서 배운 class 외에도 id가 존재합니다. 저번 강의에서 class에 대한 스타일을 지정할 때 다음과 같은 코드를 <head> 태그 안에 넣어주었죠.

d는 class와는 달리 .대신 #을 붙여야 한다는 차이점이 있습니다. 예를 들어서 first라는 id를 만들 때 다음과 같이 나타내는 것이죠

 

Class와 Id의 차이점

그렇다면 만약 class와 id가 모두 지정되어 있는 태그에서는, 둘 중에 어떤 디자인을 따라가게 될까요? 이를 위해서 class와 id의 차이점을 알아봅시다.

class라는 단어는 그룹을 의미하고, id는 특정한 것을 식별한다는 의미입니다. class 선택자는 같은 스타일이 지정될 그룹을 의미하는 것이고, id는 특정한 태그에만 지정하고 싶은 스타일을 나타내는 것입니다. 그래서 class는 중복될 수 있지만, id는 한 페이지에서는 딱 한번만 쓰이게 되는 것입니다.

즉, class 선택자가 id 선택자에 비해서 더 포괄적입니다. class 선택자를 이용하면 광범위한 효과를 줄 수 있고, id 선택자를 이용하면 예외적으로 디자인을 바꿀 수 있는 것이죠. 그렇기 때문에 class 위에 id를 얹어서 구현하는 것이 효율적입니다.

 

선택자의 우선순위

마지막으로 id 선택자와 class 선택자 외에 스타일을 나타내는 한 가지 방법을 더 알아봅시다. 만약 앞에 .과 # 모두 지정하지 않으면 그것은 태그 이름을 의미합니다. 즉 아래와 같은 코드를 사용하면 이 페이지에서 span이라는 이름의 태그는 모두 디자인이 바뀌는 것이죠.

 

이 태그는 span이기 때문에 파란색이 될 수도 있지만, id가 first이기 때문에 초록색이 될 수도 있고, class가 js이기 때문에 빨간색이 될 수도 있겠죠. 과연 어떤 색깔이 나타나게 될까요?

정답은 초록색입니다. id의 우선순위가 가장 높은 것입니다. 만약 id를 지우게 되면 class의 속성이었던 빨간색이 나타나게 됩니다. id와 class를 모두 지워야지만 span의 스타일인 파란색이 나타납니다.

즉, id > class > 태그 순서로 우선순위를 가지게 됩니다.

 

 

💫1.12 제어할 태그 선택하기

 

제어할 태그 선택하기

저번 시간까지 CSS를 이용해서 페이지의 스타일을 바꾸는 것에 대해서 배웠습니다. 그리고 그 전에는 Javascript의 이벤트라는 개념을 배웠죠. 그렇다면 이 둘을 조합해서 어떤 이벤트가 일어났을 때, 페이지의 스타일을 바꾸는 기능을 구현해봅시다.

즉, 이벤트가 일어났을 때, 어떤 태그에 스타일이 지정될지 선택하는 작업이 필요합니다.

이를 위해서 저번 강의에서 배운 CSS의 선택자를 이용해봅시다. CSS 선택자에는 크게 3가지 종류가 있습니다. 태그 선택자, class 선택자, 그리고 id 선택자입니다.

 

querySelector

querySelector라는 함수를 사용하면 이러한 선택자를 이용해서 원하는 태그를 선택할 수 있습니다. 다음과 같이 사용할 수 있습니다.

documnet.querySelector("body")

이렇게 하면 페이지 내에서 body라는 이름의 태그를 모두 선택하는 것이죠. 만약 js라는 class를 가진 태그를 선택하고 싶다면 따옴표 사이에 .js를 쓰면 되고, first라는 id를 가진 태그를 선택하고 싶다면 #first라고 쓰면 됩니다. 지난 시간에 배운 CSS에서의 문법과 비슷하죠.

이제 태그를 선택했으니, 고른 태그에 스타일을 적용해봅시다. 이를 위해서는 다음과 같은 코드를 사용하면 됩니다.

 

documnet.querySelector("body").style.backgroundColor = 'black';

body 태그를 모두 고른 뒤, 여기에 스타일을 적용하기 위해서 style이라고 써 주고, 여러 스타일 중에서도 배경색을 지정하기 위해서 backgroundColor라고 써 준 것입니다.

이렇게 완성한 Javascript 코드를 이벤트가 일어날 때마다 실행하면 되는 것입니다. 예를 들어서, 버튼을 클릭할 때 이러한 스타일 변화가 일어나도록 만드려면 다음과 같이 하면 되겠죠.

 

<input type="button" value="night" onclick="documnet.querySelector('body').style.backgroundColor = 'black';">

 

 

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector

Document.querySelector() - Web API | MDN