웹 개발 공부하기 4 - 과제 (자바스크립트)

1. 자바스크립트 공부하고 쿠키 탈취나 키로거 만들어보기

 

일단 자바스크립트가 무엇인지 알아보겠습니다.

웹을 만들때 html, css를 사용하면

html은 기본 뼈대 즉 웹 페이지가 구성하는 것을 만들 수 있습니다.

css는 html로 만들어진 웹 페이지를 꾸며 줄 수 있습니다.

이미지와 같이 왼쪽은 html를 사용하여 페이지의 기본 뼈대를 만들고 css를 사용하여 오른쪽처럼 꾸며주는 것입니다.

 

여기에 자바스크립트를 더해주어 보여주기만하는 것이 아닌 어떠한 동작을 할 수 있게 할 수 있습니다.

예를 들면 광고 이미지가 자동으로 넘어가게 하거나 더보기를 클릭하면 페이지가 넘어가지 않고 좀 더 많은 서비스를 보여주는 등 사용자에게 편리한 기능을 제공할 수 있습니다.

 

이제 자바스크립트를 사용하기 위한 기본적이고 간단한 문법을 알아보겠습니다.

웹 브라우저 개발자 도구 콘솔 창에서 자바스크립트를 사용해볼 수 있기 때문에 개발자 도구에서 실습해보겠습니다.

 

1. 출력

- console.log

- alert

- prompt

- confirm

console.log('hello')

console.log를 사용하면 값을 출력해줍니다.

alert('hello')

alert를 사용하면 값을 경고창으로 띄워 출력해줍니다.

prompt('hello');

prompt를 사용하면 값을 입력 받아 입력받은 값(문자열)을 출력해줍니다. 

confirm('hello')

confirm을 사용하면 참 거짓 값을 입력 받아 출력해줍니다.

 

2. 변수

- var

- let

var, let

var와 let으로 변수를 선언할 수 있고, 두 변수 다 선언후 값을 변경할 수 있습니다.

var와 let의 차이점으로는 var는 한번 선언하여도 다시 똑같은 이름의 변수를 선언할 수 있지만, let은 선언 후 똑같은 이름의 변수를 다시 선언할 수 없습니다.

 

3. 상수

- const

const

const를 사용하면 상수를 선언할 수 있습니다. 상수는 값을 한번 정하면 그 값을 변경하지 못하기 때문에

만약 변경하려고 한다면 에러가 납니다. 값을 변경하지 못 한다는 것에 변수와 차이가 있습니다.

 

4. 조건

- if

- else if

- else

if, else if, else

조건문을 사용하면 특정 조건에 대해서만 코드를 실행할 수 있습니다.

if (조건) { 실행할 코드 } 식으로 적어주면 됩니다. 이렇게 하면 조건에 들어가는 식이 참이면 그 안의 코드가 실행됩니다.

 

else if는 if 의 조건이 거짓이면서 else if의 조건이 참이되면 그 안의 코드가 실행됩니다. else if를 여러개 작성하여 여러 조건을 줄 수 있습니다.

 

else는 if와 else if 가 모두 거짓일 때 실행하는 코드로 조건을 넣지않아도 위의 조건이 모두 거짓일 때 실행됩니다.

 

5. 반복

- for 

- for of 

- for in

- while

for, for of, for in

반복문은 같은 코드를 여러번 반복시켜 실행할 수 있습니다.

for는 사진처럼 for(초기 변수; 조건: 증감자) { 실행할 코드 }로 적어주고 초기 변수가 증감자로 증가함에 따라 조건에 만족할 때 반복해서 실행해줍니다. 즉, 사진에서 for(let i = 0; i < 3; i++)은 i를 0으로 처음에 설정해주고 i가 한 번 실행할때마다 1씩증가하며 3보다 작을 경우에만 실행하기 때문에 0, 1, 2가 출력됩니다.

 

for of는 배열안에 값을 한개씩 꺼내 변수에 저장하여 배열안의 수 만큼 반복합니다. for (저장할 변수 of 배열) { 실행할 코드 }로 적어 사용할 수 있습니다. for (let b of a)는 a배열 안의 값을 순서대로 b에 넣어주며 출력하여 1, 2, 3가 출력됩니다.

 

for in은 키와 값으로 된 객체에서 키를 꺼내 변수에 저장하여 객체안의 수 만큼 반복합니다. 그리고 객체이름[키]를 적어주면 키에 해당하는 값을 사용할 수 도 있습니다. for (저장할 변수 in 객체이름)을 적어 사용할 수 있습니다. for (let key in info)는 객체의 키를 key 변수에 저장하고 info[key]를 통해 해당 키의 값을 가져와 출력하기 때문에 위의 사진처럼 출력됩니다.

 

while

while은 조건에 만족할 경우 계속 반복할 수 있습니다. while (조건) { 실행할 코드 }를 적어 실행할 수 있습니다.

while(c < 10)을 보면 c가 10보다 작을 경우 계속 반복해서 실행합니다. 그렇기 때문에 코드 안에 c++ 를 사용하여 c를 1씩 더해줍니다.

만약 이러한 조건을 탈출할 수 있는 방법이 없다면 계속해서 우리가 종료하기 전까지 반복하게 됩니다.

 

6. 함수

- function

function

실행 결과

함수를 사용하면 수행해야할 코드 모음을 우리가 정의할 수 있습니다.

function 함수이름(매개변수) { 실행할 코드 }로 정의할 수 있습니다.

매개변수를 통해 외부에서 받은 변수를 함수 안에서 사용할 수 있습니다.

function showshow(data){
	alert(data);
}

외부에서 data를 받아 data를 출력하는 함수입니다.

사용할 때에는 함수이름(전달할 값)을 넣어주면 됩니다. 그래서 showshow('hello')를 사용하면 alert('hello')가 되어 hello를 출력하게 됩니다. 

 

DOM

DOM(Document Object Model)는 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그램이 언어와 페이지를 연결합니다. 이때 스크립트는 주로 자바스크립트를 의미하나 HTML, SVG, XML 객체를 문서로 모델링한 것으로 자바스크립트 언어의 일부는 아닙니다.

즉, 브라우저가 HTML 문서를 관리하기 위해 사용하는 객체 모델로 DOM에 자바스크립트를 사용하여 이벤트 핸들러를 추가하거나 DOM을 변경하는 식으로 웹 페이지를 수정(문서 구조, 스타일, 콘텐츠)할 수 있습니다.

 

DOM을 사용할 때 document를 통해 접근할 수 있습니다.

또한 DOM은 문서를 논리 트리 구조로 표현하는데 console.dir(document)로 구조에 대해 자세히 볼 수 있습니다.

console.dir(documet)

 

Element 가져오기

document.children을 통해 문서(html) 트리 구조에서 원하는 Element(태그)를 가져올 수 있고,

document.getElementById(id)를 통해 해당 id를 가진 Element(태그)를 가져올 수 있습니다.

 

DOM은 기능이 많기 때문에 사용할 때 마다 설명하도록 하겠습니다.

 

다음에 이 DOM과 자바스크립트를 사용하여 쿠키 탈취, 키로거를 만들어보도록 하겠습니다.