Web Programming

[Web] 공부 day3 JavaScript

suhwanc 2020. 2. 3. 16:39

아래 내용은 Youtube 생활코딩(egoing)님의 WEB2 JavaScript 강좌를 듣고, 공부한 내용을 복습하는 겸 알려드리고자 쓴 내용들입니다. 강의의 자세한 내용을 듣고 싶으시다면?

https://www.youtube.com/watch?v=dPRtcRwKo-Y&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=1

 

 

 

1. JavaScript 소개

JavaScript는 HTML, CSS와 같이 웹페이지에 적용할 수 있게 하는 프로그래밍 언어이다.

HTML, CSS와 달리 JavaScript는 웹 브라우저 상에서 사용자와 동적으로 상호작용할 수 있게 만들어준다. 원래 웹브라우저는 한 번 화면을 출력하면 바꿀 수 없는데, JavaScript를 통해 HTML을 제어할 수 있게되는 것이다.

예를들어 사용자가 어떤 버튼을 잘못 누르면 경고창을 띄워주고, 텍스트를 만들어 사용자가 입력할 수 있게끔 한다.

다만, 이러한 작용들은 HTML의 정보, CSS의 디자인을 기반으로 JavaScript의 기능을 펼치는 것이기 때문에 결코 독립적이지 않다.

 

 

2. script 태그

<script>는 이 태그 안에 JavaScript(이하 "js") 가 오도록 약속된 tag이다.

따라서 js를 쓸 때에는 반드시 <script> 안에 쓰는 것을 원칙으로 한다.

 

 

3. event

event는 웹과 사용자가 상호작용하는 과정에서 발생하는 웹 브라우저에서 일어나는 사건을 말한다.

여기서 사건이란, 사용자가 의도하게 또는 의도치않게 무언가를 작동시킨 일을 말하는데

예를들어 사용자가 text에 무언가 입력했다거나, 버튼을 눌렀다거나 하는 일인 것이다.

이러한 event들은 <input> tag 안에 집어넣게 되며 이 안에는 type, value와 실질적인 event가 존재한다.

type은 사용자가 실제로 보는 이벤트의 형태를 의미하고, value는 그 type에 글씨를 넣을 때 사용한다.

 

event는 종류가 굉장히 많은데 여기서는 몇가지만 짚고 넘어가자.

  • onclick : 버튼을 누르면 무언가 event가 발생한다. ex) onclick="alert('Hi');" -- 버튼을누르면 경고창 팝업
  • onkeydown : 키를 누르면(키보드) event가 발생한다.
  • onchange : 특정 요소가 바뀌었을 때 실행된다.

 

 

4. 콘솔(console)

콘솔의 사용법은 다음과 같다.

웹 페이지 대상으로 [마우스 오른쪽 클릭] -> [검사] -> 상단의 console 버튼

콘솔은 해당 웹 페이지를 대상으로 즉각적으로 데이터를 처리할 때 사용하며, 직접 코드를 옮기지 않고도

그 웹페이지 내에서 작업을 할 수 있다.

예를 들어 해당 웹페이지에 특정 글자가 몇 번나오는지 알고 싶다면, 전체 내용을 긁어와 코드 한 줄만 붙이면 콘솔창에서 바로 찾고싶은 값을 리턴해준다.

 

 

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

web 공부 전 다른 프로그래밍 언어들을 몇 개 공부해봐서 다소 쉽게 느껴진 부분이다.

문자열은 " " 또는 ' '로 문자들을 묶는다. ex) "hello world", 'hi'

문자열의 길이는  .length 로 구할 수 있으며 공백(띄어쓰기)를 포함해 계산된다.

숫자는 말그대로 숫자를 말하며 "", '' 등을 포함하지 않는다.

이들은 파이썬과 비슷한 연산방식을 취하는데, 1+1은 2로 출력되고 "hello" + "world" 는 "helloworld"로 출력된다.

추가로, 문자열에 .toUpperCase()를 취하면 모든 문자를 대문자로 바꾸어주며 .indexOf("any string") 을 취하면 원하는 문자열의 index를 반환한다. 없다면 -1을 반환한다.

 

 

6. 변수, 연산자와 조건, 반복문

1) 변수 : 변수는 공식을 사용하기 위해 사용하며 대부분의 코드에서 반드시 사용되는 가장 기초적이며, 중요한 문법이다. js에서는 변수 앞에 var(variable) 키워드를 사용하며 변수를 사용할 때 변수임을 알리기위해 사용한다.

 

2) 연산자 : 연산자는 산술연산자(+, -, *, /, %) 뿐만아니라, 비교연산자("===", >, <)와 대입연산자(=)가 있고 이는 수학시간에 볼 수 있는 연산자와 같은 형태를 취한다. 다만 대입연산자는 반드시 왼쪽에 변수를 취해주어야 작동한다.

 

3) 조건문 : 특정 조건 만족 시 어떤 작업을 수행하고 싶을 때 사용하며 대표적으로 if, else if, else가 있다.

형태는 if(condition) { 내용 } else if(dif condition) {내용} else {내용} 가 있으며, else if는 조건이 여러개일 때, else는 반대의 조건을 말할 때 쓰며 둘다 있어도되고, 없어도 되는 존재들이다. 하지만 쓰려면 반드시 앞에 if문을 먼저 써야한다.

 

4) 반복문 : 반복문은 코드를 반복해야할 때 코드를 아주 간단하게 해주는 아주 중요한 문법이다.

반복문의 형태는 대표적으로 for, while이 있으며 for문의 형태는 for(var i = 0; i< 10; i++) { 내용} 이며 c언어에서의 반복문과 동일하고, 보통 반복의 횟수가 정해져있을 때 사용한다.

while문의 형태는 while(condition){ 내용 } 이며 반복문의 횟수가 정해져있거나, 특정 조건을 만족시키면 빠져나오는 방식으로 사용된다. 반복문을 강제적으로 빠져나오려면 break를 사용하면 바로 반복을 중단하고 다음 코드로 넘어가며, continue를 사용해 현재 반복문을 넘어가 다음 반복으로 이동할 수 있다. 이는 이미 원하는 값을 찾았거나(break), 그 뒤에 것을 볼 필요가 없을 때(continue) 사용한다.

 

5) boolean : true와 false로 이루어져있으며, 조건문에서 if뒤 괄호안에 있는 값은 모두 boolean 형태를 리턴하게 된다.

그도 그럴것이 괄호안에는 대부분 비교연산자의 형태를 띄기 때문이다. 예를 들어 1>2 는 true를 리턴하며, 2 === 1은 false를 리턴하게 된다.

 

 

7. 배열(array)

배열은 반복문의 효과를 극대화시키는 문법이다.

1) 배열의 선언방법 : var coworkers = ["suhwan", "swan"];

2) 배열의 탐색 : document.write(coworkers[0]); - 이 경우 coworkers 배열의 첫번째 요소를 출력

 

7.1 배열에 사용되는 함수들

 

1) 배열에 원소 추가하기

-push를 사용하며 배열의 끝에 원하는 원소를 추가한다.

1
2
3
4
5
var coworkers = ["suhwan", "swan"];
coworkers.push("ydrgo");
 
document.write(coworkers);
//return ["suhwan", "swan", "ydrgo"]
 cs

 

2) 배열의 마지막 원소 제거

-pop()을 사용한다.

1
2
3
4
5
6
7
8
var coworkers = ["suhwan", "swan"];
coworkers.push("ydrgo");
 
document.write(coworkers);
//return ["suhwan", "swan", "ydrgo"]
 
coworkers.pop();
//return ["suhwan", "swan"]
 cs

3) 배열의 첫번째 원소 제거 및 반환

shift() 함수를 통해 배열의 첫 번째 원소를 제거하고, 반환한다.

1
2
3
4
5
6
7
var coworkers = ["suhwan", "swan"];
coworkers.push("ydrgo");
 
//["suhwan", "swan", "ydrgo"]
 
coworkers.shift();
//return ["swan", "ydrgo"]
 cs

4) 배열의 길이를 반환

.length() 함수를 통해 배열의 길이를 반환한다.

1
2
3
4
5
6
7
var coworkers = ["suhwan", "swan"];
coworkers.push("ydrgo");
 
//["suhwan", "swan", "ydrgo"]
 
document.write(coworkers.length());
//return 3
 cs

5) 배열끼리 합치기

.concat() 함수를 통해 두 배열을 합쳐준다.

1
2
3
4
5
6
7
8
9
var coworkers = ["suhwan", "swan"];
coworkers.push("ydrgo");
 
//["suhwan", "swan", "ydrgo"]
 
var coworkers2 = ["gntmn", "yuemco"];
coworkers.concat(coworkers2);
 
// coworker = ["suhwan", "swan", "ydrgo", gntmn", "yuemco"]
 cs

6) 배열 사이에 원하는 문자를 삽입하기

.join() 함수를 통해 배열 사이사이에 원하는 문자를 삽입하기

1
2
3
4
5
6
var coworkers = ["suhwan", "swan"];
 
coworkers.join("&");
document.write(coworkers);
 
//return suhwan&swan
 cs

7) 배열 뒤집기

.reverse() 함수를 통해 배열을 역순으로 뒤집을 수 있다.

1
2
3
4
5
var coworkers = ["suhwan", "swan", "ydrgo"];
 
coworkers.reverse();
document.write(coworkers);
//return ["ydrgo", "swan", "suhwan"]
 cs

8) 배열 정렬

.sort()를 함수를 사용해 배열을 오름차순으로 정렬할 수 있다.

문자열 배열일 경우 a~z까지 오름차순으로 정렬된다.

1
2
3
4
5
var coworkers = ["suhwan", "gntmn", "ydrgo", "yuemco", "Ihjht3"];
 
coworkers.sort();
document.write(coworkers);
//return Ihjht3,gntmn,suhwan,ydrgo,yuemco
 cs

 

8. 함수

 

1) 의미 : 코드의 중복을 막기 위해 자주 쓰이는 코드들을 function이라는 객체 안에 묶어두고, 이후 중복되는 부분에 사용한다.

 

2) 사용 : 일반적으로 매개변수를 받고, 무언가를 반환(return)하는 구조이다.  기본적으로 자신의 this 매개변수 값을 사용하며, 따로 return문이 없는 함수는 기본반환값 undefined를 반환한다.

 

3) 구조

1
2
3
4
5
6
7
8
//함수 선언부
    function func(anyObject){
      anyObject.push('mouse');
      return anyObject; //반환
    }
    var coworkers = ["suhwan", "gntmn", "ydrgo", "yuemco", "Ihjht3"];
    //객체를 함수에 전달
    func(coworkers);
 cs

설명 :함수 선언부에는 반드시 function을 앞에 쓰고 함수명(여기서 func)를 적는다.

괄호안에는 매개변수를 받고, 이후 함수 내부 코드를 실행 후 반환한다.(꼭 받은걸 반환할 필요는 없다)

만든 함수를 사용할 때는 위와 같이 [함수 명](전달할 객체) 형식으로 사용한다.

 

아직 this과 self를 설명하지 않았기 때문에 아주 간단하게 함수를 만들어보았다.

그럼 제대로 사용하기 위해서 this, self를 알아보자

 

9. this & self

this와 self는 js에서 처음 마주할 때 아주아주 헷갈리는 부분이다. 왜냐하면 기존 언어(다른 프로그래밍 언어)에서 사용하던 방식과 다르게 사용되기 때문이다.

예를 들어 java에서 this는 인스턴스 자신을 가리키는 참조변수인데, this자체가 객체 자신에 대한 참조 값을 가지고 있기 때문이다. 하지만 js에서 this는 함수의 호출 방식에 따라 참조하는 객체가 다르다.

 

그렇다면 js에서의 this 사용 규칙에 대해 알아보자

 

  • 기본적으로 this는 전역 객체를 참조한다.
  • 함수 내에서 this는 해당 함수를 호출한 객체를 참조한다. 위에서는 함수 인자로 받은 coworkers가 this가 된다.
  • new로 함수를 호출했다면 새로 생성된 객체를 가리킨다.

self는 window를 가리킬 때 사용한다.

이 부분은 저도 완전히 이해를 못해서 더 배우고 다시 포스팅하겠습니다 ㅠㅠㅠ

 

 

10. 객체(object)

객체는 위에있는 내용들보다 비교적 어렵지만 중요하다.

객체를 관련된 데이터와 함수로 이루어져있는 집합으로 함수위에 객체가 있다고 보면 된다.

객체 안에서는 각각 프로퍼티(속성)과 메소드(함수)로 지칭한다. 그럼 예제를 통해 객체가 무엇인지 알아보자.

 

1) 객체의 생성 : var person = { };

벌써 우린 객체를 만들 수 있게 되었다.

하지만 객체내에 아무것도 안들어있기 때문에 여러가지 속성을 넣어보자.

1
2
3
4
5
6
var person = {
      name : ['suhwan', 'gntmm'],
      age : 24,
      gender : 'male',
      job : ['programmer', 'cooker']
    };
 cs

객체안에 속성들을 집어 넣어주었다.

보통 객체 내 속성은 key : value로 이루어져있는데, key가 지칭하는 것이 value라고 해석하면 되겠다.

또한 위에 보이듯 객체내 속성들은 ','로 구분해준다.

 

2) 객체 내 속성 추가

1
2
3
4
5
6
7
var person = {
      name : ['suhwan', 'gntmm'],
      age : 24,
      gender : 'male',
      job : ['programmer', 'cooker']
    };
person["interest"] = "hearthstone";
 cs

객체에 interset : hearthstone 이라는 키와 value 한 쌍의 속성을 추가하였다.

또한 객체에는 함수도 담을 수 있다!

 

3) 객체 내 함수

1
2
3
4
5
6
7
8
9
10
11
var person = {
      name : ['suhwan', 'gntmm'],
      age : 24,
      gender : 'male',
      job : ['programmer', 'cooker']
    };
  person.showAll = function(){
    for(var key in person){
      consol.log(key, coworkers[key]);
    }
  }
 cs

위 코드는 person 객체 안에 객체 내 모든 key와 value값을 출력해주는 showAll 함수를 추가한 코드이다.

for문은 일반적인 프로그래밍 언어에서의 for문 사용법과 동일하다.

 

 

마치며....

배운 내용들에 비해 정리를 너무 못한거같아 아쉽다 ㅠㅠ 열심히좀 들을껄 그랬나보다..

지금까지 html과 css 그리고 js를 배웠는데 js가 셋 중에 가장 어려운것 같다. 아무래도 사용자와 상호작용한다는 js의 특성때문에 강의에서 코드를 최대한 줄이는 방법을 많이 알려주셨기 때문인것같다. 상호작용하기 위해선 많은 파일들이 필요하고 또 중복되는 부분을 없애 빠르게 실행시켜야 하기에 여기선 함수와 객체, 리팩토링 등을 배웠고 위에서 설명하지 않았지만 파일을 쪼개서 중복 부분을 특정 파일에 두고 그 파일을 다른 파일 내에서 호출하는 방식까지 배웠다.

그래도 생활코딩님의 강의력이 너무 좋고, 체계적으로 잘 설명해주셔서 web의 아주 기초적인 틀은 이해한거 같아 한층 더 발전한 느낌이다. 이후엔 nodejs와 react를 공부해 web에 대한 지식을 점차 늘려나가려 한다.

그럼 이만..