5/8 생활코딩 < JavaScript 시작 >

JavaScript

1. 수업의 목적

(1) 웹페이지가 사용자와 상호작용할 수 있게 해준다.

 = JavaScript는 사용자와 상호작용을 하는 언어이다'

- HTML이 정보라는 멈춰 있는 이미지를 그리는 것이라면
 JavaScript는 정보라고 하는 그 이미지를  
 마치 영화처럼 움직이게 한다.

 

ex) night 버튼을 누르면 까만 바탕에 흰 글씨로 바뀌고

 day 버튼을 누르면 흰 바탕에 까만 글씨로 바뀐다.

 

(2) 웹브라우저는 한번 화면에 출력이 되면
그 다음에는 자기 자신을 바꿀 수 있는 능력이 없다.
그것을 해주는 것이 JavaScript이다.

= JavaScript는 HTML을 제어하는 언어다.

→ 웹페이지를 훨씬 더 동적으로, 다이나믹하게 만들어준다.

 

* 검사 - 개발자 도구에서 Elements(=Tags)탭을 띄워놓은 상태에서

 night/day 버튼을 클릭하면 body 태그가 바뀌는 것을 볼 수 있다.

 

버튼 만드는 방법: input type="button" value="night" onclick

onclick이라는 속성의 값으로는 JavaScript가 와야 된다.

그 버튼을 클릭하면 그 밑에 있는 JavaScript 코드가 실행된다.

 

style 속성의 속성값으로는 반드시 CSS가 온다.

 

 

2. HTML과 JavaScript의 만남 1 (script 태그)

기본적으로 JavaScript는 HTML 위에서 동작하는 언어다.

 

이번 시간의 주제: 어떻게 하면 HTML이라는 컴퓨터 언어에

 완전히 다른 문법을 가지고 있는 JavaScript를 끼워 넣을 것인가

 

JavaScript를 넣으려면 먼저
웹브라우저에게 HTML의 코드로
'지금부터 JavaScript가 시작됩니다' 라고 알려 줘야 된다.

 

웹브라우저는 script라는 태그 안에 있는 코드를 JavaScript로 해석한다.

웹페이지에 글씨를 출력할 때는 script 코드 안에

document.write('하고 싶은 말); 을 쓰면 된다.

 

※ 이 때 1+1을 쓰면 2가 출력된다.

 

 

3. HTML과 JavaScript의 만남 2 (이벤트)

hi라고 적혀있는 버튼을 누르면 hi라고 적힌 알림창이 뜨는 것을 만들어 보았다.

input type="button" value="hi" onclick="alert('hi')"

 

(1) onclick이라는 속성의 값으로는 JavaScript가 와야 된다.

(2) onclick 속성의 속성 값은 웹브라우저가 기억하고 있다가

 이 onclick 속성이 위치하고 있는 태그(hi라는 버튼)를 사용자가 클릭했을 때

 기억하고 있던 JS 코드(alert('hi'))를 JS 문법에 따라 해석해 

 거기 적혀 있는대로 웹브라우저가 동작할 것이다.

 

이렇게 웹브라우저 위에서 일어나는 일들을 이벤트라고 한다.

어떤 이벤트가 일어났을 때 어떠한 JS가 실행되도록 하는 것이

바로 이 onclick이라는 것이다.

 

input type="text" 을 입력하면 글씨를 입력할 수 있는 창이 생긴다.

그리고 다음과 같이 추가하면

input type="text" onchange="alert('changed')"

입력창에 무언가를 입력하고 다른 곳을 클릭하면

changed라는 알림창이 뜬다.

 

input type="text" onkeydown="alert('key down!')"를 넣으면

입력창에 어떤 글씨를 입력할 때마다

key down!이라는 알림창이 뜬다.

 

여기에서 onclock, onchange, onkeydown이 이벤트이다.

 

 

4. HTML과 JavaScript의 만남 3 (콘솔)

검사 - 개발자 도구에 보면 콘솔이라는 탭이 있다.

이 콘솔을 이용하면, 웹페이지 파일을 만들지 않고도

JavaScript 코드를 즉석에서 실행할 수 있다.

 

ex1) 어떤 텍스트가 몇 개의 글자로 이루어져 있는지 셀 수 있다.

alert('글'.length)

 

ex2) 댓글 단 1697명 중 2명 추첨하기

※ 여기에서 실행시키는 JavaScript는 이 웹페이지를 대상으로 실행되므로 이것이 가능하다.

 

검사 - 개발자 도구에 elements 탭에서 esc 버튼을 누르면 콘솔 탭이 밑에 뜬다.

댓글 랜덤 추출 코드를 복사해서 콘솔 창에 붙여넣고

당첨자수를 입력하고 엔터키를 치면 랜덤으로 추출이 된다.

 

5. 데이터타입 - 문자열과 숫자

JavaScript라는 컴퓨터 언어의 데이터 타입(자료형)에 대해 알아보자.

 

JavaScript data type으로 검색한 결과:

출처: mozilla

이 중에서 Number는 숫자이고, String은 문자열이다.

 

검사 - 개발자 도구에서 콘솔을 연다.

※ alert(1+1)과 같은 형태로 입력해도 되지만,

그냥 1+1을 입력해도 된다.

 

(1) Number 데이터 타입에서 중요한 것은 연산이다.

+, -, *, / 등은 이항 연산자 중에서 산술 연산자이다.

1+1을 입력하면 2가 출력된다.

 

(2) 문자는 따옴표로 시작해서 따옴표로 끝나면 된다.

 큰 따옴표이든, 작은 따옴표이든, 같은 형태로 시작하고 끝나면 된다.

 

문자열의 기능:

javascript string으로 검색하면 mozilla 페이지가 나온다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Syntax

String

왼쪽에 여러가지 기능이 나온다.

 

'Hello world' .length → 11글자임을 알려준다.

'Hello world' .toUpperCase → 전부 대문자로 바꿔준다.

'Hello world' .indexOf('o') → 'o'라는 글자가 4번째에 나온다는 것을 알려준다.

 (첫글자가 0번째. 0, 1, 2, 3, 4번째이다.)

'Hello world' .indexOf('world') → 'world'라는단어가 6번째에서 시작된다는것을 알려준다.

"          hello          " .trim → 공백을 모두 없애고 "hello"를 출력해준다.

 

※ 대/소문자를 잘못 쓰면 작동하지 않는다.

 

cf) 1+1을 입력하면 숫자 데이터 타입이므로 2가 출력되지만

 "1"+"1"을 입력하면 문자열이므로 11이 출력된다.

 

6. 변수와 대입 연산자

변수: 바뀔 수 있는 어떤 값

이 맥락에서 x는 변수이다.

그리고 =은 대입 연산자이다.

 

대입 연산자: 오른쪽 항의 값을 왼쪽의 변수에 대입한다.

 또한 좌항과 우항을 결합해서 우항의 값을 만들어낸다.

 

cf) 1은 상수이기 때문에 대입 연산자를 통해 값이 바뀔 수 없다.

 

변수를 이용한 예제:

var name = 'egoing';

(여기서 실행을 유보하기 위해서 enter 대신 shift + enter를 친다.)

alert(The toLocaleLowerCase() method returns "+name+" the value of the string converted to lower case according to any locale-specific "+name+" case mappings. toLocaleLowerCase() does not "+name+" affect the value of the string itself. In most cases, this will "+name+" produce the same result as toLowerCase(), but for some locales, such as Turkish, whose case mappings do not follow the default case "+name+" mappings in Unicode, there may be a different result.

 

이런 식으로 중간에 "+name+"이 들어가있을 때, 

 "+name+" 값이 모두 egoing으로 바뀐다.

 

7. 웹브라우저 제어

body 태그에 다음을 추가하면 아래 그림과 같이 바뀐다.

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

 

(1) CSS의 가장 본질적이고 중요한 문법

(2) JavaScript를 이용해서 내가 제어하고자 하는 태그(body)를 선택하는 방법에 대해서 알아볼 것이다.

 

8. CSS 기초

 

9. 제어할 태그 선택하기

먼저 night 버튼을 만든다.

input type="button" value="night" onclick=" 여기에 JS 코드를 넣는다. "

 

검색어: JavaScript select tag by css selector

※ query: 질의하다 (웹브라우저에게 질의한다.)

 selector: CSS의 선택자를 의미

 

우리가 제어할 태그는 body 태그 이므로 body를 써준다.

document.querySelector('body')

 

cf) 만약 body 태그에 id를 target으로 지정해줬다면,

document.querySelector('#target')이 될 것이다.

 

이번에는 body 태그의 style이라는 속성을 어떻게 JS로 넣을 수 있는가를 알아보자.

 

검색어: JavaScript element style

getElementById는 querySelector의 대체재이다. 똑같은 거라고 보면 된다.

이것을 참고해서 .style이라고 쓴다.

document.querySelector('body').style

 

이번에는 JavaScript로 background-color:black을 하는 방법을 검색해본다.

검색어: JavaScript style background-color

CSS에서는 background-color인데,

이것을 JavaScript를 이용해서 할 때는 어떤 나름의 이유로

backgroundColor(하이픈이 없고, c가 대문자)임을 알 수 있다.

 

그러므로 다음과 같이 입력해준다.

document.querySelector('body').style.backgroundColor = 'black';

 

이번에는 포그라운드컬러, 텍스트컬러를 바꿀 때는 그냥 color라고 하면 된다.

document.querySelector('body').style.color = 'white';

 

같은 방식으로 day 버튼도 만들어준다.

 

 

10. 프로그램, 프로그래밍, 프로그래머

HTML과 JavaScript는 둘 다 컴퓨터 언어이지만,

JavaScript는 컴퓨터 언어이면서 동시에

컴퓨터 프로그래밍 언어라고 하고,

HTML은 컴퓨터 프로그래밍 언어라고 하지는 않는다.

 

프로그램이라는 말의 중심에는

순서라는 의미가 깊숙히 자리잡고 있다.

이 순서를 만드는 행위를 프로그래밍이라고 하고

그 순서를 만드는 사람을 프로그래머라고 한다.

 

컴퓨터 프로그래밍 언어

: 시간의 순서에 따라서 실행되어야 할 기능을

프로그래밍 언어의 문법에 맞게 글로 적어 두는 방식

 

HTML은 웹페이지를 묘사하는 목적의 언어이기 때문에

시간의 순서에 따라서 무엇을 할 필요가 없다.

그래서 HTML은 시간의 순서에 따라 실행되는 기능을 갖고 있지 않다.

 

하지만 JavaScript는 사용자와 상호작용하기 위해서 고안된 컴퓨터 언어이고

그러기 위해서는 시간의 순서에 따라서 웹브라우저의 여러 기능이 실행되어야 하기 때문에

프로그래밍이라고 하는 형태를 띠고 있다.

 

처음에는 단순히 시간을 나열하는 것으로도 만족스러웠지만

조건에 따라 다른 순서의 기능이 실행되게 하거나

반복해서 어떤 기능이 실행되도록 하고도 싶어졌다.

 

또 코드가 복잡해짐에 따라서,

순서의 배치가 복잡해짐에 따라서,

이 복잡해진 순서를 단순하게 잘 정리정돈하는 방법도 차차 고안되기 시작했다.

 

이제 조건문, 반복문, 함수 등을 살펴볼 것이다.