느리더라도 꾸준히

JavaScript 기초 - 생활코딩 본문

FrontEnd & Web

JavaScript 기초 - 생활코딩

테디규 2022. 2. 7. 14:51

사실 자바스크립트는 이렇게 기초적으로 배울 수 있는 언어가 당연히 아니지만, 무슨 느낌인지만 알고 싶었고, 그정도 느낌의 정리이다.

JavaScript의 등장 배경

정적인 언어인 html에 아쉬움을 느낀 개발자들은 사용자와 상호작용하는 동적 웹 언어를 사용하고 싶어 JavaScript가 탄생했다.
JavaScript는 html 위에서 사용 할 수 있다.

html 위에서의 JavaScript

  1. script tag 사용
  2. on~이벤트 발생시 (onclick, onchange 등 DOM Event 문서에서 확인
  3. <body> <input type ="button" value ="hi" onclick="alert('hi')"> <input type = "text" onchange="alert('changed')"> <input type="text" onkeydown="alert('key down!!')"> </body>
  4. Web 자체에 있는 콘솔에서 사용가능
    • console에서 shift enter하면 실행하지않고, 내려갈 수 있음.

DataType, Variable, 대입연산자

알고있는 개념과 비슷하다.
(시스템적으로 있을수는 있으나, 아직 그렇게 deep하게 배우지 않음)

WebBrowser 기본제어

documnet.queryselector(tag명) 으로 제어할 태그를 불러올 수 있다.
tag 뿐만 아니라 클래스와 id selector(#id 형태를 해야할 경우가 있음)들도 불러올 수 있다.

프로그램이란?

여러 개념이 있겠으나 여기서 배운 개념은,순서에 따라 결과들이 일어나는 것. 그러므로 순서에 여러 흐름을 줌으로써, 다양한 결과를 만들 수 있음.

조건문/비교연산자와 boolean

알고 있는 개념과 비슷함. 내가 쓰던 언어와 조금 다른 부분은
java : javascript
== : ===
< : <

리팩토링이란?

잘 돌아가는 코드를 유지시키면서 중복코드를 줄임으로써 효율성을 높이는 개념

<script>
    var Links = {
      setColor:function LinkssetColor(color){
      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
          alist[i].style.color = color;
          i= i+1;
      }
    }
    }
    var Body = {
      setColor:function(color){
      document.querySelector('body').style.color=color;
      }
      ,setBackgroundColor:function(color){
      document.querySelector('body').style.backgroundColor=color;
      }
    }
    function nightDayHandler(self){
      var target = document.querySelector('body');
      if(self.value === 'night'){
      Body.setBackgroundColor('black');
      Body.setColor('white');
      Links.setColor('powderblue');
      self.value = 'day';
      } else{
      Body.setBackgroundColor('white');
      Body.setColor('black');
      Links.setColor('blue');
      self.value = 'night';
      }
    }
  </script>

  <body>
  .....
     <input id="night_day" type = "button" value = "night" onclick="
    nightDayHandler(this);
   ">
 </body>
 - 객체, 함수 선언 및 반복문 조건문 사용 모습. 
 - JS의 웹에 버튼을 생성시켜주는 'input' Object

위의 코드도 하나하나 따져본다면,

  1. 반복문으로 코드효율을 높였다.
  2. 함수를 통해 반복되는 코드를 줄일 수 있다.
  3. 객체를 생성하여 반복되는 코드를 줄였다.

배열, 반복문, 함수

배열 : 인덱스속에 순서가 존재하는 개념
반복문 : 연속적인 반복일때 필요한 개념
함수 : 비연속적인 방법일때 사용이 가능하며, 코드효율을 높여줌.

객체

객체는 여러 개념들이 많이 존재하지만, 순서없이 이름이 존재하는 정돈된 상자 개념으로 일단 보자.

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

        document.write("programmer:" + coworkers.programmer + "<br>");
        document.write("designer:" + coworkers.designer + "<br>");
        coworkers.bookkeeper = "duru";
        document.write("bookkeeper : " + coworkers.bookkeeper + "<br>");
        coworkers["data scientist"] = "taeho";
        document.write("data scientist : " + coworkers["data scientist"] + "<br>");
    </script>
    <h2>Iterate</h2>
    <script>
        for(var key in coworkers){
            document.write(key + ' : ' + coworkers[key] + '<br>');
        }
    </script>

    <h2>Property & Method</h2>
    <script>
        coworkers.showAll = function(){
            for(var key in this){
            document.write(key + ' : ' + this[key] + '<br>');
            }    
        }
        coworkers.showAll();
    </script>
  • Property : 객체에 소속된 변수
  • Method : 객체에 소속된 함수
  • property, method를 활용하여, 변수안의 값을 활용하는 모습을 잘 보자!

라이브러리와 프레임워크

<head>
  <title>WEB1 - html</title>
  <meta charset = "utf-8">
  <script src ="colors.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  1. js도 css와 마찬가지로, html에서 코드작업을 하지 않고 따로 js파일을 만들어 html에 불러 올 수 있다.
  2. 이미 저장되어있는 라이브러리는 cache 개념을 통해 트래픽(그 결과 돈과 시간)을 절약시켜 준다.
  3. 라이브러리는 자주 사용되어 재사용하기 쉽게 정돈되어있는 소프트웨어라고 볼 수 있다.
  4. 프레임워크는 만들고자 하는것에 따라 공통적으로 만들어지는 부분을 미리 구현해둔 반제품으로 볼 수 있다.
  5. CDN 개념을 이용하면 직접 서버에 다운받지 않고, 라이브러리와 프레임워크를 이용 할 수 있다.

UI 와 API

  1. UI
    UI는 사용자가 system을 제어하기 위한 장치이다.(버튼을 클릭, 이벤트 창 나온걸 종료 등)
  2. API
    Web 서버에서 정해 놓은 약속된 방식으로 기능을 쓰면, 약속된 기능이 발생하도록 하는 조작 장치.
    그러므로 웹브라우저 개발자들은 웹서버에서 정해놓은 약속과 기능을 알맞은 '순서'로 사용하는 것이다.

이런 기능도 있어요

웹 개발을 하다 막힌다면, 책도 좋고 인강도 좋지만 공식문서를 보는 것이 좋다.
document 객체 < Dom 객체 < Window 객체 , ajax, cookie 등
막혔을때는 위 같이 좋은 개발자분들이 만들어놓은 객체안에 해결해 줄수 있는 메소드들이 없는지 검색하고 확인해보자.

저작자표시

'FrontEnd & Web' 카테고리의 다른 글

CSS기초(생활코딩)  (0) 2022.02.07
'FrontEnd & Web' Related Articles more
Comments