Js 기초

https://opentutorials.org/course/3085

WEB2 - JavaScript - 생활코딩

 

이벤트

웹 브라우저에서 일어나는 사건

 

ex) onclick : 클릭 됐을때

onchange : 내용이 변경됐을때

onkeydown : 키가 눌렸을때(down) (입력)

<input type="text" onkeydown="alert('keydown!')">

...

이 외에도 총 10~20가지 정도의 이벤트가 존재.

이를 이용해서 사용자와 상호작용하는 웹 사이트를 만들 수 있게 됌.

다 외울 필요 없이 구글링을 통해 쉽게 찾아볼 수 있음.

"Js event"

 

 

데이터 타입 (자료형)

대표적으로

문자열 과 숫자

 

숫자(Number)

 

숫자 자료형의 가장 중요한 점은 연산이 가능.

+ - / * 등을 연산자라고 함. 계산을 하기 때문에 산술 연산자라고도 함.

 

문자열(String)

 

문자열은 ' ' 혹은 " " 임.

 

문자에는 .length 와 같은 엄청나게 많은 명령이 있음.

.indexOf .trim 등등...

 

변수(variable)

바뀔수 있는 수 ( 문자열 )

 

ex) var name ='kola'

변수 처리:

alert(" My name is "+name+". "); @같은 따옴표를 사용해야함@

 

 

대입 연산자

= 오른쪽 항/값을 왼쪽 변수에 주입.

 

상수(constant)

고정된 수 | 1=2; error

 

 

간단 CSS

아무런 의미도 없이 구분만을 위한 html 태그 . JS CSS 선택자를 통해 지정할때 주로 사용.

<div></div> 줄바꿈 되는 

<span></span> 줄바꿈 없이 

 

선택자

#id

id = " id "

.class

class = " class "

 

id 와 class 의 차이

class 는 그룹 | 여러 대상을 한번에 묶을 때 

id 는 식별 | 특정 단일! 대상을 지정 할 때. id 이름은 중복되면 안됌.

 

id 와 class가 한 태그에 동시에 지정될경우

<span id="first" class="js">JavaScript</span> 

id의 속성이 우선 적용 됌. 

 

모든 태그에 css를 줄때.

선택자 없이 ex) span{color : red} 모든 span 태그에 속성을 줌

 

적용 순서

id > class > 태그 

 

 

제어할 태그 선택하기

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

document.querySelector(selertor/선택자);

var el = document.querySelector(".myclass"); 

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

 

 

 

---

 

 

Javascript 제어문

 

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

HTML은 프로그래밍 언어가 아님

JS는 맞음

 

프로그램이란?

순서. 

시간의 순서에 따라 무엇을 해야하는지 적혀있는것

 

 

비교연산자와 불리언

 동등 비교 연산자 ===

document.write(1===1);

true

1===2;

false

 

또한 이항 연사자 임.

1 이라는 왼쪽 값이 === 같다면 1 이라는 오른쪽 값과, 그러면 true 라는 값을 리턴한다.

 

불리언 

true 와 false라는 단 두 개의 데이터를 가지는 자료형. 

 

또 다른 비교 이항 연산자

< , > 가 html 에서는 문법 중 하나이기에

&lt; , &gt; 으로 사용. 각 각 less than, greater than 의 약자

js에선 그냥 < > 사용

 

 

조건문

if문의 뒤에 따라오는 괄호 안에는 불리언 데이터 타입이 들어옴 ( true/false)

불리언의 값에 따라서 실행되는 코드가 바뀌는 조건 문임.

document.write("1<br>")
if(true){document.write("2<br>")}
else{document.write("3<br>")}

1

2

document.write("1<br>")
if(false){document.write("2<br>")}
else{document.write("3<br>")}

1

3

 

조건문의 활용.

<input id="night_day" type="button" value="night">

onclick="
    if(document.querySelector('#night_day').value === 'night'){
      document.querySelector('body').style.backgroundColor = 'black';
      document.querySelector('body').style.color = 'white';
      document.querySelector('#night_day').value = 'day';
    } else {
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
      document.querySelector('#night_day').value = 'night';
    }"

하나의 버튼으로 다크모드/ 일반모드를 실행하는 조건문의 활용 예시.

if (true) 

 

 

 

---

 

 

존나 열심히 필기하다 다 날렸음으로 그냥 xx 링크 가서 보삼.

 

https://www.boostcourse.org/cs124/joinLectures/52258

자바스크립트의 시작

 

 

 

---

 

 

 

객체

우리는 코드의 정리정돈을 위해서 함수라는 개념을 사용했습니다. 객체 또한 이러한 목적을 가지고 사용되는 방법입니다. 객체는 함수의 기반 위에서 존재하는 개념입니다. 서로 연관된 함수와 변수가 아주 많아지면 이를 정리하기 위해서 사용하는 것이죠.

 

이렇게 다양한 함수들이 존재하는 상황에서 우리는 객체를 사용하면 됩니다. 예를 들어 함수의 종류가 아주 많아지게 되면 이 함수들끼리 이름이 중복되지 않도록 만들게 하기 위해서 굉장히 복잡한 이름을 사용해야 하겠죠.

이 때 객체를 사용하면 이 함수들을 비슷한 것들끼리 그룹으로 만들어 묶어줄 수 있습니다. 마치 여러분의 컴퓨터에서 폴더를 만들어서 정리하는 것과 비슷한 상황입니다. 이렇게 나뉜 함수들은 서로 다른 그룹끼리는 이름이 겹쳐도 괜찮습니다.

 

 

여기에서 document가 바로 객체이고, querySelector가 document라는 객체에 속해 있는 함수라고 생각할 수 있는 것입니다. 이렇게 객체에 속해 있는 함수들은 메소드(Method)라는 별도의 이름으로 부르게 됩니다.

 

 

객체의 읽기와 쓰기

우리는 이전에 배열에 대해서 배운 적이 있었습니다. 어떤 값들을 순서를 가지도록 저장하는 구조였습니다. 그렇다면 순서 없이 저장하는 구조도 있어야겠죠? 그것이 바로 객체입니다.

객체에는 순서가 없는 대신 각각에 이름이 붙어 있습니다. 이름을 이용해서 값들을 꺼내고 넣는 것이죠.

그렇다면 지금부터 객체의 문법에 대해서 살펴보도록 하겠습니다.

var coworkers= {
  "programmer": "egoing",
  "designer": "leezche"
};
객체를 만들 때에는 배열과는 달리 중괄호를 사용

그렇다면 이 요소들을 꺼낼 때에는 어떻게 해야 할까요? 다음과 같이 써주면 됩니다.

document.write(coworkers.programmer)
document.write(coworkers["programmer"])

다음으로는 객체에 요소를 추가해봅시다.

coworkers.bookkeeper = "duru";
coworkers["bookkeeper"] = "duru";

객체의 순회

이번 강의에서는 객체에 있는 모든 값들을 가져오는 방법에 대해서 알아봅시다. 배열에서는 반복문을 사용했었죠. 이러한 기능을 보고 순회(iteration)이라고 부릅니다.

객체에서는 for in이라는 것을 사용하게 됩니다. 다음의 코드를 살펴봅시다.

var coworkers = {
  "programmer": "egoing",
  "designer": "leezche"
};

for(var key in coworkers) {
  document.write(key+'<br>');
}

for을 쓰면 coworkers에 있는 이름들을 하나씩 가져오게 됩니다. 그리고 이 이름을 차례대로 key에 넣어줍니다. 그러면 그 key들이 차례대로 출력되겠죠. 결과적으로 programmer와 designer가 출력될 겁니다.

그렇다면 이름 대신 그 이름에 해당하는 값을 출력하고 싶다면 어떻게 하면 될까요? 이 key를 이용하면 됩니다. 다음과 같이 코드를 작성하면 됩니다.

for(var key in coworkers) {
  document.write(coworkers[key]+'<br>');
}

 

객체의 메소드

객체에는 다양한 것들을 담을 수 있습니다. 심지어는 함수까지 담을 수 있죠.

예를 들어서 지난 시간까지 사용했던 coworkers라는 객체를 생각해봅시다. 우리는 이 객체에 새로운 함수, 즉 메소드를 추가할 겁니다. 바로 showAll()이라는 메소드이죠. 다음과 같이 작성할 수 있습니다.

coworkers.showAll = function() {
  for (var key in coworkers) {
    document.write(key + ' : ' + coworkers[key] + '<br>');
  }
}

즉, coworkers에서만 사용할 수 있는 showAll이라는 메소드를 추가하게 된 것입니다.

하지만 이 방법은 그렇게 좋은 방법은 아닙니다. 왜냐하면 cowerkers라는 변수 이름이 바뀌면 함수를 수정해야 하기 때문이죠. 이 때 사용하는 것이 바로 this입니다. coworkers 대신에 이 메소드가 쓰인 객체를 가리키는 this를 사용해주면 됩니다. 다음과 같이 수정할 수 있겠죠.

coworkers.showAll = function() {
  for (var key in this) {
    document.write(key + ' : ' + this[key] + '<br>');
  }
}

객체의 프로퍼티

이렇게 객체에 해당하는 함수들은 메소드라고 부릅니다. 그리고 객체에 해당하는 변수들도 있죠. 예를 들면 coworkers.programmer에서 programmer에 해당하는 것들입니다. 이런 변수들은 프로퍼티(property)라고 부릅니다.

 

객체의 활용

 

객체 첫 강의에서 봤던 예제를 다시 한 번 살펴봅시다. 첫 강의에서 우리는 많은 함수들을 만들었고, 이 함수들의 이름이 겹치지 않도록 하기 위해서 많은 노력을 기울였습니다. 이번 강의에서는 객체를 활용해서 이런 문제점들을 해결해 봅시다.

먼저 Body라는 이름의 객체를 다음과 같이 만들어 봅시다.

var Body = {
  setColor: function (color) {
    document.querySelector('body').style.color = color;
  },
  setBackgroundColor: function (color) {
    document.querySelector('body').style.backgroundColor = color;
  }

var Links = {
  setColor: function (color) {
    var alist = document.querySelectorAll('a');
    var i = 0;
    while (i < alist.length) {
      alist[i].style.color = color;
      i = i + 1;
    }
  }
}

Body.setColor('black');
Links.setColor('powderblue');

함수의 이름이 같아도 다른 객체에 소속된 메소드이기 때문에 충돌이 일어나지 않는 것이죠.

 

 

 

파일을 이용해 코드 정리하기

우리가 지금까지 만든 night/day 버튼을 여러 페이지에도 복사/붙여넣기 한다고 해 봅시다. 이 때 우리는 <input> 태그 외에도 만들어 놓은 Javascript 코드까지 복사하고 붙여넣어야 합니다. 하지만 붙여넣어야 할 페이지가 아주 많다고 생각해 봅시다. 그렇게 되면 코드를 넣기도 힘들고, 수정하기도 힘들어지겠죠. 이러한 상황에서 사용할 수 있는 방법이 바로 파일로 쪼개는 것입니다.

 

가장큰 정리정돈 도구

 

새로운 js 파일을 만들어 봅시다. 예를 들어서 colors.js라는 파일 이름으로 만들었다고 해 봅시다. 그리고 그 파일에 모든 페이지에서 공통적으로 사용되는 Javascript 코드를 넣습니다.

그렇다면 원래 Javascript 코드가 있었던 <script> 태그는 어떻게 바꾸면 될까요? 다음과 같이 src 속성에 이 파일 이름을 넣어서 바꾸면 됩니다.

 

<script src='colors.js'></script>

파일 이용의 장점

이제 이 짧은 script 코드를 필요한 페이지에 붙여 넣으면 이 Javascript 코드를 한 번에 관리할 수 있는 것입니다. 즉, 코드를 재사용할 수 있고, 동시에 코드를 수정할 수 있어서 유지보수가 편리해집니다. 코드가 명확해지고 가독성이 좋아진다는 장점도 있습니다.

이렇게 파일을 분리하면 캐시의 입장에서도 장점을 가집니다. colors.js라는 파일을 한 번 다운로드해서 캐시에 저장해두면 다운로드 없이 사용할 수 있기 때문에 더 빨리 페이지를 표시할 수 있는 것입니다.

 

 

 

 

라이브러리와 프레임워크

다른사람과 협력하는 모델.

 

 

소프트웨어의 사회성

오늘날 우리가 만드는 소프트웨어는 혼자서 만드는 것이 아닙니다. 다른 사람들이 이미 잘 만들어 놓은 코드를 가지고 빠르게 조립해서 우리가 원하는 코드를 만들 수 있다는 것이죠. 이번 시간에는 다른 사람들의 소프트웨어를 가져와서 사용할 수 있는 방법에 대해서 알아봅시다.

 

소프트웨어의 사회성

이렇게 다른 사람과 코드를 통해서 협력하는 모델에는 두 가지가 있습니다.

라이브러리는 프로그램에 필요한 부품이 되는 소프트웨어가 정리되어 있는 것입니다. 프레임워크는 만들고자 하는 프로그램의 종류에 따라서 공통적인 부분을 미리 만들어놓는 것입니다. 필요한 부분만 약간 수정해서 사용할 수 있는 것이죠. 즉, 라이브러리는 우리가 필요한 부분을 가져와서 사용하는 것이라면, 프레임워크는 직접 프레임워크 안으로 들어가서 디테일을 수정해서 사용하는 것이라고 생각하시면 됩니다.

 

jQuery 라이브러리

가장 유명한 Javascript 라이브러리 중 하나는 jQuery입니다. 이 라이브러리를 사용하면 생산성을 높일 수 있습니다. 인터넷에서 jQuery를 다운로드하는 방법도 있고, CDN이라는 방법을 사용해도 됩니다. CDN(content delievery network)을 사용하면 코드를 한 줄 추가하는 것만으로도 라이브러리를 가져와서 사용할 수 있습니다. 예를 들어 jQuery의 구글 CDN은 다음과 같습니다. (jQuery 홈페이지에서 찾을 수 있습니다.)

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

이 한 줄을 <head>에 추가하면 된다는 것이죠.

jQuery를 사용하면 반복문을 사용하지 않고도 모든 태그를 한 번에 처리할 수 있습니다. 예를 들어서 다음과 같이 사용할 수 있습니다.

 

$('a').css("color","powderblue");

 

반복문을 사용하지 않고 이 한 줄만으로 모든 a 태그의 색깔을 powderblue로 바꿀 수 있는 것입니다.

하지만 jQuery는 새로운 언어가 아닙니다. 우리가 직접 함수를 만드는 대신 이러한 일을 하는 함수가 jQuery 안에 미리 만들어져 있는 것이죠.

이렇게 적절한 라이브러리를 잘 사용하면 효율적으로 코딩을 할 수 있게 됩니다.

 

 

UI와 API

UI는 User Interface의 약자입니다. API는 Application Programming Interface의 약자이죠. 이 둘의 공통점과 차이점에 대해서 배워보도록 합시다.

 

예를 들어서 어떤 페이지에 버튼이 하나 있고, 이 버튼을 누르면 경고창이 뜨게 만들었다고 해 봅시다. 이 버튼을 사용하는 것은 웹페이지의 사용자죠. 사용자들이 시스템을 제어하기 위해서 조작하는 장치를 UI라고 부릅니다.

 

이제 코드를 봅시다. 이 경고창은 우리가 만든 것일까요? 경고창의 텍스트나, 경고창이 뜨는 타이밍은 우리가 만든 것이지만, 우리는 경고창을 실제로 띄우기 위해서는 alert라는 함수를 사용했죠. alert라는 이 함수는 웹브라우저를 만든 사람들이 미리 만들어둔 것입니다. 그리고 우리는 이 alert라는 함수를 호출해서 조작하는 것이죠. 이렇게 프로그래머들이 사용하는 조작 장치들을 API라고 부릅니다. 즉, alert는 API인 것이죠.

 

이러한 UI와 API라는 개념은 Javascript 뿐만 아니라 모든 프로그래밍 언어에 적용되는 개념입니다. 우리는 API를 응용하고 결합해서 새로운 프로그램을 만들 수 있는 것입니다.

 

 

 

 

---

 

 

 

자신의 프로젝트 진행해보기

 

이 수업을 듣고 나서 여러분들이 해야 할 가장 중요한 것은 자신만의 프로젝트를 해 보는 것입니다. 프로젝트를 시작하려고 할 때 주의해야 할 몇 가지 점에 대해서 알아봅시다.

 

먼저, 자신이 배운 모든 것을 사용하기 보다는 필수적인 최소한의 도구만 가지고 문제를 해결해 보세요. 순서에 따라서 실행되어야 하는 명령들이 실행되도록 하는 것이 바로 이 최소의 도구입니다. 이것만 사용하다가 한계에 부딪혔을 때, 조건문, 반복문, 함수, 객체 등의 개념들을 활용해보세요.

 

 

 

웹 개발과 관련된 검색어

하지만 이렇게 여러 개념들을 활용하다보면 다시 한계에 부딪히게 될 겁니다. 그 때에는 여러분들이 새롭게 공부를 시작하셔야 합니다. 그 때 도움이 될만한 여러 검색어를 알아봅시다.

 

먼저 태그를 삭제하거나 자식 태그를 추가하고 싶은 경우에는 document라는 객체를 살펴보세요. 그래도 찾을 수 없다면 DOM 객체에 대해서도 살펴보세요.

 

만일 웹브라우저 자체를 제어해야 하는 경우, 예를 들면 웹페이지의 주소를 알아낸다거나, 창을 열거나 해야 하는 경우에는 windows 객체의 프로퍼티나 메소드를 찾아보세요.

 

웹페이지를 새로고침하지 않고도 정보를 변경하고 싶다면 ajax를 사용해보세요. 반대로 웹페이지가 새로고침되어도 현재 상태를 유지하도록 만들고 싶으면 cookie에 대해서 배워보세요.

 

인터넷이 끊겨도 동작하는 웹페이지를 위해서는 offline web application을 찾아보세요. 

 

화상 통신 웹 앱을 만들고 싶을 때에는 webRTC를 찾아보면 됩니다. 음성을 인식하거나 음성과 관련된 것을 처리하고 싶을 때에는 speech로 시작되는 API들을 살펴보세요.

 

3차원 그래픽을 이용하고 싶다면 webGL, 가상현실에 대해서 알아보고 싶다면 webVR에 대해서 찾아보시면 됩니다.