IT/JAVASCRIPT

[JS_알아가기] 자바스크립트 기초(생활코딩)

Alo_alex 2022. 4. 4. 21:45

2022-04-04(1일차)

# 자바스크립트와의 만남

* 'html'과 달리 연산이 가능하다

* 'event'라는 문법으로 'js code' 실행가능

* 'console'을 이용한 실시간 테스트도 가능

 

 

 

2022-04-05(2일차)

# 데이터타입(data type/자료형)

* 6가지 타입이 존재한다(2022년 확인시 1가지 타입(BigInt)이 추가되어 7가지로 확인됨)

  • Boolean
  • Null
  • undefined
  • Number(숫자) : 산술연산자(+, -, *, /)를 이용한다
  • BigInt(강의에서는 나오지 않음)
  • String(문자열) : " ", ' ' 와 같이 따옴표(quotes)로 표기하여 사용한다.
  • Symbol
  • Object(객체)

* 문자열 갯수세기 ex) string.length

* 참고사이트

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

 

 

# 변수와 대입연산자

x=1; 변수 --> x
(variable)		 대입연산자 --> =
(assignment operator)		 (의미) 오른쪽항에 있는 값을 왼쪽에 있는 항에 대입한다
(특징) 좌항과 우항을 결함해서 우항의 값을 만들어쓴다.
y=1; 변수 --> y
(variable)		 대입연산자 --> =
(assignment operator)
x+y ----결과----> 2 - -  
x=1000; 변수 --> x
(variable)		 대입연산자 --> =
(assignment operator)		 x의 값을 1000으로 바꿈
x+y ----결과----> 1001 - - x값이 바뀌어 결과값도 바뀜
1=2 ----결과----> error 변수(variable)에 숫자가 직접적으로 올 수 없다.
상수(Constant)는 변하지 않는 값, 즉 변수의 반대이기 때문

변수를 사용하는 이유는 간단했다.

극단적인 상황(예를들어 수억개의 데이터를 바꿔야 할때)에 놓였을때 좀 더 효율적으로 처리할수 있도록,

혹은 인간은 실수를 하기 때문에(명확)

 

※ 예시로 보는 포인트집기

<input type="button" onclick="document.querySelector('body').style.background = 'black';" >

String(문자열)

Assignment operator(대입연산자)

 

 

 

2022-04-07(3일차)

# css를 이용한 웹브라우저 제어

* css문법 제어

  • tag내 style속성 직접 적용
    <a href="www.naver.com" style="color:powderblue">go page</a>
    attribute(태그안에 명시되는 태그속성)
    style은 문자열(string)이지만 그 안에 속성(property)는 객체이다.
    property(속성)
  • 선택자(selector)를 사용한 제어
    - class : 그룹핑, 광범위(표기 >> .class)
    - id : 절대 중복되지 않는 '식별자'(표기 >> #id)
      id는 페이지에서 하나만 존재해야 한다, 2개 이상 있어도 작동은 하나 이는 규칙 위반이므로 주의해야한다.

* javascript를 이용한 제어하고자 하는 태그를 선택하는 방법

 

 

 

2022-04-08(4일차)

# 제어할 태그 선택

<input type="button" onclick="document.querySelector('body').style.background = 'black';" >

query(명사-질의,질문 / 동사-묻다,질문하다)Selector(css 선택자)

(' ')안에는 tag명, class명, id명 중 선택하여 넣을 수 있다.

javascript로 지정할 style을 넣어준다.

 

# PROGRAM, PROGRAMMING, PROGRAMER

html - javascript
O 컴퓨터 언어 O
X 컴퓨터 프로그래밍 언어 O
X 시간의 순서 O
X 사용자와의 상호작용 O
컴퓨터 언어로써 정적으로 만드는 것 - html, css를 프로그래밍적(동적)으로 변경하여
사용자와 대화하는것 같은 애플리케이션을 만드는 핵심적인 원리

 

program 순서
programming 순서를 만드는 일
programer 순서를 만드는 사람

 

 

2022-04-09(5일차), 2022-04-13(6일차)

# 조건문, 비교연산자와 boolean 그리고 리팩토링(refactoring)

* 조건문(conditional statements)

  • 하나의 프로그램이 조건에 따라 서로 다른 순서의 기능이 실행 되는 것.
  • 작성시 기본 문법은 아래와 같다.
    if(괄호안에는 boolean 데이터 타입이 따라온다){
         값이 'true'면 if 값이 도출
    }else{
         값이 'false'면 else 값이 도출
    }

* 비교연산자와 불리언(comparision operators & boolean)

  • 비교연산자는 참과 거짓(true & false)로 결과를 도출한다.
비교연산자 설명1 설명2
=== 동등 비교 연산자
(좌항과 우항을 가지고 데이터를 만드는 이항연산자)		 오른쪽에 있는 값과 왼쪽에 있는 값이 참 혹은 거짓인지 비교
(boolean값으로 비교)
= 대입연산자
(좌항의 값에 우항의 값을 넣는)		 html 특수코드로 변환시 '&#61;'로 표기
< 좌항이 우항보다 작은 연산자 html 특수코드로 변환시 '&lt;'로 표기
(&less than)
> 좌항이 우항보다 큰 연산자 html 특수코드로 변환시 '&gt;'로 표기
(&greatrer than)

 

※ 예시로 보는 포인트집기

<input type="button" id="night_day" 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';

}

" >

선택자로 선택된 객체

boolean으로 'true or false'를 체크하는 비교연산자

비교될 대상자이자 값

 

 

* 리팩토링(refactoring)

- 다시 개선 한다, 중복의 제거

- 중복은 끝까지 쫓아 없엘 수 있도록 한다.

 

 

※ 예시로 보는 포인트집기

리팩토링 전 리팩토링 후
<input type="button" id="night_day" 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';
}
" >		 <input type="button" value="night"
onclick="
var target = document.querySelector('body'); 

if(this.value === 'night';){
    target.style.backgroundColor="black";
    target.style.color="white";
    this.value = 'day';
}
else{
    target.style.backgroundColor="white";
    target.style.color="black";
    this.value = 'night';
}
" >

불필요 하여 삭제 혹은 생략된 값

선택된 자신이므로 'this' 로 표기

공통으로 수정할 객체 이므로 'target'으로 객체 분리

 

 

2022-04-13(6일차)

# 배열(Array)과 반복문(Loop)

* 배열

사물이 많아질수록 필요성의 따라 수납 공간을 마련한다.

사람이 감당할 수 없는 소프트웨어는 사람이 감당할 수 없게 된다.

데이터중에 연관되는 걸 모아서 정리하는 것을 배열(Array)이라고 한다.

 

[ 'a', 'b', 'c' ]

배열은 대괄호로 시작해서 대괄호로 끝난다.

값과 값 사이는 ',' 로 분리한다.

배열의 index 는 0번부터 시작한다.

arr[n]; 배열의 값 가져온다

arr.length; 배열의 갯수 세기 (1부터 시작한다)

arr.push('nn') 배열의 끝에 data를 넣는다.

 

* 반복문(loop)

데이터와 로직은 일맥하게 진행되어야 한다.

 

* 배열과 반복문의 활용

※ 예시로 보는 포인트집기

<input type="button" value="night" onclick="
var target = document.querySelector('body'); 


if(this.value === 'night';){
    target.style.backgroundColor="black";
    target.style.color="white";
    this.value = 'day';

    var alist = document.querySelectorAll('a'); // querySelector('a') 로 할 경우 첫번째 'a'태그만 가져온다.   

    var i = 0;

    while(i < alist.length){

         alist.style.color="powderblue"

         i = i + 1;

    }
}
else{
    target.style.backgroundColor="white";
    target.style.color="black";
    this.value = 'night';

    var alist = document.querySelectorAll('a');

    var i = 0;

    while(i <alist.length){

         alist.style.color="blue"

         i = i + 1;

    }

}
" >

 

 

2022-04-15(7일차), 2022-04-16(8일차)

# 함수(Function)

* 함수

코드의 양이 많아지면 웹페이지의 양이 커지고, 인터넷을 통해 전송하는 비용, 시간, 노력이 많이 들어간다.

이점을 도와 코드를 정리정돈 해 주는 것이 함수이다.

(수납상자의 역할)

 

* 함수의 기본(Basic)

반복문은 연속적이지 않은 반복이 나온다면 사용하기 어렵다.

대신 함수를 이용하는것이 좋다.

 

함수를 통해 로직의 이름과 의미를 부여하는것도 좋은 방법이다.

이름이 중복되어 다른 코드를 실행시키는 이슈를 방지하기 위해 이름은 중복되지 않도록 한다.

 

* 매개변수와 인자(Parameter & Argument)

함수는 추상적으로 보았을때, 입력과 출력의 해당되는 것이다.

          입력            →    출력  

(매개변수와 인자)        (리턴)

 

* 리턴(Return)

함수를 다양한 맥락으로써 활용할 수 있는 기능이다.

 

* 함수의 활용

함수는 리팩토링(refactoring)의 중요한 역할이다.

 

 

※ 예시로 보는 포인트집기

함수
function name(parm){ ... }
함수는 선언시 'function'을 반드시 작성해 주고 그 뒤에 함수명을 작성해 준다.
함수명으로 함수 실행시 해당 명을 호출한다.
매개변수(parameter)는 인자를 받아 함수에 매개하는 변수로, 함수로 들어오는 입력값이며, 여러개 들어 갈 수 있다.

name(argm);
함수를 실행시 사용하는 문법으로 구조는 ' 함수명 + 인자 + ; ' 반드시 ';'으로 마무리 지어 준다.
인자(argument)영역 매개변수와 동일하게 함수로 들어오는 입력값이다.
함수화 전 함수화 후
태그내에 자바스크립트 소스가 직접적으로 구동중.
함수로 리팩토링 하지 않은 상태.		 태그내 자바스크립트 소스를 따로 분리하여 함수화 함.
기존 태그에 있던 소스를 그대로 분리하면, 구동시 2번 이상 실행해야 작동을 하거나 제대로 구현되지 않는 이슈가 발생한다.
이는 기존 태그 자체를 인식해주던 'this'가 함수로 분리되면서 가르키는 변수가 '전역객체화' 되버려 태그가 아닌 'window' 자체를 바라보기 때문이다.
즉, 해당 이슈를 해결 하려면 'this'를 함수 실행시 '인자'로 넣어주며,
그에 해당하는 인자가 정상적으로 작동할수 있도록 '매개변수'를 맞춰준다.
<input type="button" value="night" onclick="
var target = document.querySelector('body'); 

if(this.value === 'night';){
    target.style.backgroundColor="black";
    target.style.color="white";
    this.value = 'day';
    var alist = document.querySelectorAll('a');
    var i = 0;
    while(i < alist.length){
         alist.style.color="powderblue"
         i = i + 1;
    }
}
else{
    target.style.backgroundColor="white";
    target.style.color="black";
    this.value = 'night';
    var alist = document.querySelectorAll('a');
    var i = 0;
    while(i <alist.length){
         alist.style.color="blue"
         i = i + 1;
    }
}
" >		 <script>
function nightDayHandler(self){
   var target = document.querySelector('body'); 

   if(self.value === 'night';){
       target.style.backgroundColor="black";
       target.style.color="white";
       self.value = 'day';
       var alist = document.querySelectorAll('a');
       var i = 0;
       while(i < alist.length){
            alist.style.color="powderblue"
            i = i + 1;
       }
   }
   else{
       target.style.backgroundColor="white";
       target.style.color="black";
       self.value = 'night';
       var alist = document.querySelectorAll('a');
       var i = 0;
       while(i <alist.length){
            alist.style.color="blue"
            i = i + 1;
       }
   }
}
</script>
<input type="button" value="night"
onclick="nightDayHandler(this);" >

 

 

2022-04-16(8일차)

# 객체(Object)

객체는 중요하지만 어려운 존재.

함수라는 기반 뒤에서 객체가 존재하는것.

코드가 많아지면 정리정돈의 수단으로 사용된다.

함수의 변수가 많아지면 정리가 필요하다.

서로 연관된 함수와 변수를 정리하기 위한 도구.

 

ex) document.querySelectorAll('body')

객체

document의 속해있는 함수로, 객체에 속해 있는 함수 즉 '메소드'로 볼 수 있다.

 

* 객체의 쓰기와 읽기

배열(array)은 순서대로 저장하지만 객체는 순서의 상관없이 저장이 가능하다.

(이름이 있는 저장상자)

 

 

※ 예시로 보는 포인트집기

var coworkers = {
  programmer : "egoing",
  designer : "leezche"
}
coworkers.programmer;
// 결과 : 'egoing'
document.write("programmer : "+coworkers.programmer);
// 결과 : programmer : egoing
coworkers.bookkeeper = 'duru'; // coworkers에 "bookkeeper : 'duru'" 키값을 넣어준다.
document.write("bookkeeper : "+coworkers.bookkeeper);
// 결과 : bookkeeper : duru
coworkers["data scientist"] = 'taeho';
// coworkers에 "data scientist : 'taeho'" 키값을 넣어준다.
// object에 띄어쓰기가 들어가는 키값을 넣어주고 싶으면 배열처럼 감싸서 넣어준다.

document.write("data scientist" : "+coworkers["data scientist"]);
// 결과 : data scientist : taeho

 

* 객체와 반복문

객체를 순환하는(iteration) 순환문

for(var key in object){}

→ object(변수)가 카리키는 객체에 in(있는)한 key값을 가져오는 반복문

→ key : 키값

→ object[key] : 키의 value값

 

* 프로퍼티와 메소드(Property & Method)

프로퍼티는 객체의 소속된 변수(프로퍼티와 프로퍼티는 콤마로 구분 짓는다.)

메소드는 객체의 소속된 함수

맥락적으로 같은것을 부르는 이름이 다르다.

소속된 변수의 값으로 함수를 만들 수 있다.

 

 

※ 예시로 보는 포인트집기

프로퍼티(Property) 메소드(Method)
var coworkers = {
  programmer : "egoing",
  designer : "leezche"
}		 var coworkers = {
  setColor :  function(color){
  document.querySelector('body').style.color=color;
  }
}

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

 

* 객체활용

※ 예시로 보는 포인트집기

객체
var object = {
  key1 : value1,
  key2 : value2
}
오브젝트 이름
key값
value값
객체화 전 객체화 후
변수가 바뀌면 매번 이름을 바꿔줘야 하는
번거로움이 발생한다.
함수내 중복적인 코드가 있어, 변경시 매번 각각 함수내 코드를 변경해줘야 한다.		 객체로 관리할 수 있어, 이름이 바뀌더라도 변경 사항이 줄어든다.
메소드(객체의 소속된 함수인)를 활용해서 소스 관리에 용이해 진다.
<script>
function nightDayHandler(self){
   var target = document.querySelector('body'); 

   if(self.value === 'night';){
       target.style.backgroundColor="black";
       target.style.color="white";
       self.value = 'day';
       var alist = document.querySelectorAll('a');
       var i = 0;
       while(i < alist.length){
            alist.style.color="powderblue"
            i = i + 1;
       }
   }
   else{
       target.style.backgroundColor="white";
       target.style.color="black";
       self.value = 'night';
       var alist = document.querySelectorAll('a');
       var i = 0;
       while(i <alist.length){
            alist.style.color="blue"
            i = i + 1;
       }
   }
}
</script>
<input type="button" value="night"
onclick="nightDayHandler(this);" >		 <script>

var Body = {
  setColor : function(color){
      document.querySelector('body').style.color=color;
  },
  setBackColor : 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.style.color=color
            i = i + 1;
       }
  }
}

function nightDayHandler(self){
   if(self.value === 'night';){
       Body.SetBackColor("black"); // 메소드 호출
       Body.SetColor("white"); // 메소드 호출
       self.value = 'day';
       Links.setColor("powderblue"); // 메소드 호출
   }
   else{
       Body.SetBackColor("white"); // 메소드 호출
       Body.SetColor("black"); // 메소드 호출
       self.value = 'night';  
       Links.setColor("blue"); // 메소드 호출
   }
}
</script>
<input type="button" value="night"
onclick="nightDayHandler(this);" >

 

 

2022-04-17(9일차)

# 파일로 쪼개서 정리하기(Include File)

연관된 코드들을 파일로 묶어 그룹핑 한다.

웹페이지가 아무리 많아도 감당이 되게 하는 것.

코드의 재사용이 가능하며, 유지보수의 용이하다.(코드의 정리정돈 효과가 더 커진다.)

 

* 사용법

<script>태그를 제외한 js코드를 새로만든 js파일에 넣어 해당 파일을 불러온다.

<script src="new.js"></script>

 

* 캐시(cahce)

웹서버 입장에서 접속 횟수는 적을 수록 좋으나,

웹페이지에 효율적인 이유는 캐시(cache)로 인해

한번 웹브라우저에 다운로드된 파일을 웹브라우저가 컴퓨터에 저장해,

다음 접속시 저장된 파일을 읽어, 네트워크를 통하지 않아도 구동할 수 있게 한다.

 

결론적으로

서버 입장에서는 비용절감을

사용자 입장에서는 네트워크 트래픽도 절감 할 수 있으며

웹페이지는 훨씬더 빠르게 표현 할 수 있다.

효율적이며 시간도 적게 들고 돈도 적게 든다.

 

** 내생각 정리

캐시는 결국 웹페이지의 접속시 웹서버에서 최초로 파일을 다운로드하여 컴퓨터에 배포해 놓고

해당 웹페이지에 재 접속 하더라도, 추가적인 네트워킹 없이 다운로드된 파일을 운용하여 구동시키는 것.

그렇담 처음에만 좀 시간이 걸 릴 수도 있다는 것??

 

 

2022-04-17(9일차)

# 라이브러리 & 프레임워크(Library & FrameWork)

소프트웨어는 누군가와 함께 만들어서 사용한다.

혹은 다름사람이 만든것을 이용해 함께 만들어 가는것이다.

즉 생산자로서 소비자 이며, 소프트웨어의 사회성이라 볼 수 있다.

라이브러리와 프레임워크는 같은듯 하지만 뉘앙스가 다른 느낌.

 

* 라이브러리(Library)

내가 만들고자 하는 프로그램의 부품이 되는 소프트웨어를 재사용하기 쉽게 만든것.

(땡겨 쓰는 느낌..)

예를들어 제이쿼리(Jquery)라는 아주 오래되고 안정적인 라이브 러리가 있다.

제이쿼리는 생산성이 높으며, CDN(Content Delivery Network)으로 사용 할 수 있다.

 

+ CDN 참조 링크

https://library.gabia.com/contents/infrahosting/8985/

 

 

* 프레임워크(FrameWork)

만들고자 하는 것이 있을때 무엇이냐(웹,게임,채팅 등)의 따라 공통적인 것은 미리 만들어 놓고 사용하는 반제품화 된 것.

 

 

※ 예시로 보는 포인트집기

라이브러리 활용(제이쿼리(Jquery))
라이브러리 활용 전 라이브러리 후
긴 명령문을 일일이 작성해 줘야 한다. 긴 명령문이 함축된 라이브러리 소스로 간결하게 줄 수 있다.
(1. 한 파일에서 구동이 아닌, 유지보수성을 위해 js, html파일을 분리하여 사용한다.)
(2. 제이쿼리 파일은 편의상 cdn으로 불러온다.)
<script>
var Body = {
  setColor : function(color){
      document.querySelector('body').style.color=color;
  },
  setBackColor : 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.style.color=color
            i = i + 1;
       }
  }
}

function nightDayHandler(self){
   if(self.value === 'night';){
       Body.SetBackColor("black");
       Body.SetColor("white");
       self.value = 'day';
       Links.setColor("powderblue");
   }
   else{
       Body.SetBackColor("white");
       Body.SetColor("black");
       self.value = 'night';  
       Links.setColor("blue");
   }
}
</script>

<input type ="button" value="night"
onclick="nightDayHandler(this);" >		 /* js 파일 */
var Body = {
  setColor : function(color){
      $('body').css('color',color);
  },
  setBackColor : function(color){
      $('body').css('backgroundColor',color);
  }
}
var Links = {
  setColor : function(color){
       $('a').css('color',color);
  }
}

function nightDayHandler(self){
   if(self.value === 'night';){
       Body.SetBackColor("black");
       Body.SetColor("white");
       self.value = 'day';
       Links.setColor("powderblue");
   }
   else{
       Body.SetBackColor("white");
       Body.SetColor("black");
       self.value = 'night';  
       Links.setColor("blue");
   }
}

/* html 파일 */
<script src="js.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<input type="button" value="night"
onclick="nightDayHandler(this);" >

 

 

2022-04-18(10일차)

# UI & API(UserInterface & ApplicationProgrammingInterface)

* UI

사용자가 시스템을 제어하기 위해서 사용하는 조작장치.

 

* API

애플리케이션을 만들기 위해서, 프로그래밍 할 때 사용하는 조작장치.

API와 순서는 '단어와 문법', '부동과 결합방법처리' 와 같이 땔래야 떌 수 없는 사이이다.

(API는 프로그래밍적으로 순서대로 사용)

 

 

2022-04-18(10일차)

# 수업을 마치며

* 작업시 검색어 추천

  • document : 웹페이지의 '추가, 수정, 삭제' 같은 것을 하고 싶을때.
  • DOM(Document Object Model) : document 객체는 DOM의 일부이다.
  • window : 웹브라우저 자체를 제어해야 할 때
                    (현재 열려 있는 웹페이지 주소를 알아야 할 때/ 새창을 열어야 할 때/ 웹브라우저의 화면크기를 알아야 할 때)
  • ajax : 웹페이지를 리로드 하지 않고, 정보를 변경하고 싶을때.
  • cookie : 웹페이지가 리로드 되어도 현재 상태를 유지하고 싶다면, 사용자를 위한 개인화면 서비스 제공
  • offline web application : 인터넷이 끊겨도 동작하는 웹페이지 구축할때.
  • webRTC : 화상통신 웹앱을 만드는것.
  • speech : 사용자의 음성을 인식하고, 음성으로 정보전달.
  • webGL : 3차원 그래픽의 게임 구축.
  • webVR : 가상현실. 
반응형