자바스크립트에 대해 (전반적인 총정리/기본 왕초보 level)

 

1. 자바스크립트에서 이벤트란?

 웹브라우저 상에서 일어나는 의미있는 동적인 이벤트 ! 
 

<input type="button" value="hi" onclick="alert('hi')"> // 클릭시 alert
<input type="text" onchange="alert('changed')"> // 변화가 있는경우 alert 
<input type="text" onkeydown="alert('key down!')"> // 화살표 아래방향시 alert

 
 

onclick onchange onkeydown

 

 

2. 자바스크립트에서 콘솔창이란? 

 
개발자도구로 들어가 Elements 에서 esc를 누르면 콘솔창이 사라졌다 생겼다함
콘솔창에서 화살표 윗쪽 키를 누르면 전에 썻던 코드가 불러와짐 

 

3. 자바스크립트에서 데이터타입이란?

 
자바스크립트 데이터타입에는 어떤것이 있는가?

자바스크립트 데이터값

 
참고 url 
https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures
 
'hello world'.length // 글자갯수 11개 
'hello world'.toUpperCase() // HELLO WORLD 대문자처리
 
** indexof 기능은 문자열이 어느위치에 있는지 알려준다.
'hello world'.indexof('o')  // 4
'hello world'.indexof('world') // 6
'hello world'.indexof('z')  // -1 <- 찾을수 없다는 의미 
'hi      '.trim() // 빈공간은 없애줌
 
 
데이터타입을 정확하게 표현하는게 매우 중요! 문자열인지 숫자인지?
 
document.write(1===1) // 웹페이지에 true라고 뜸
document.write(1===2) // false라고 뜸
 
   여기서 true , false 는 boolean 이라고 함 ! 단 두개의 데이터 타입으로만 이뤄져 있음!
 
 

4. 변수와 대입연산자

 

      x = 1 ; 
         ㄴ  '=' 대입연산자이고 x가 변수이다!

 
 
변수를 왜 쓸까?
만약 같은 이름이 수억개가 들어간 웹페이지 내의 문장이 있다고 하자, 만약 이 이름이 바뀌었을떄 수억번으로 이름을 고치게 되면 효율이 너무 떨어짐. 이럴때 변수처리를 하면 됨!    
var name = "seungyeon"
 
상수 (변하지 않는 문자)는 const 라고 함! 

 

CSS 문법은 아래와 같이도 쓰임! (h2 태그에 직접 적용)

<h2 style = "backgroung-color:coral;color:powderblue">test</h2>
 

 

5. 자바스크립트 문법(Onclick)

   - 아래 문서를 보면 element에 하나하나 추가해줘야함 
 

<h1><a href="index.html">WEB</a></h1>
  <input type="button" value="night" onclick="
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
  ">
  <input type="button" value="day" onclick="
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
  ">
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>JavaScript</h2>
  <p>
    JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
  </p>

 

 

document.getElementById('hello').innerHTML = '안녕' // '<=안녕'

바꾸고 싶은 HTML 요소의 Id를 ('   ')안에 적고 뒤에 뭐바꿀지 
= 는 '대입'연산자라고 함 
문자는 따옴표 안에 ! 
 
[간단한 퀴즈 - 글자사이즈 바꾸기]

        document.getElementyId("hello").style.fontSize = "100px";

 
[간단한 퀴즈 - 버튼을 눌렀을때 alert 가 보이고 안보이고 ]

    <div id="alert-box">

      <p>안녕하세요 웹페이지에 오신걸 환영합니다.</p>

      <button

        onclick="document.getElementById('alert-box').style.display ='none';"

      >

        닫기

      </button>

    </div>

    <button

      onclick="document.getElementById('alert-box').style.display ='block';"

    >

      <span>버튼을 누르면 상자가 나옵니다</span>

    </button>

 

6. 그럼 자바스크립트란

 

무엇인가? 

자바스크립트는 프로그래밍 언어이자, 컴퓨터언어이다 ! (html 컴퓨터언어이고 프로그래밍 언어라고 까지는 하지 않음)
자바스크립트는 사용자와 상호작용하기위해 고안된 컴퓨터언어이고, 시간의 순서에 따라 웹브라우저의 여러기능이 실행이 되게끔 함.
 
 

7. 자바스크립트 조건문

단순, 복잡 반복등을 한번에 처리해주는 혁명적인 조건문! :)
 
 
<script>
document.write(1===1) // 웹페이지에 true라고 뜸
document.write(1===2) // false라고 뜸
</script>
 
 
   여기서 === 는 비교연산자라고 함
   여기서 true , false 의 데이터타입은 boolean 이라고 함 ! 단 두개의 데이터 타입(true, false)으로만 이뤄져 있음!
 
 
html 내에서 string에 <, > 을 쓸때는 &lt;, &gt;라고 씀!
 
 

** 조건문 문법 

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

8. 조건문의 활용 - 실생활에서 유용

<h1><a href="index.html">WEB</a></h1>
  <input id="night_day" type="button" value="night" onclick="
    if(document.querySelector('#night_day').value === 'night'){ // value가 night이면
      document.querySelector('body').style.backgroundColor = 'black'; // 배경은 블랙
      document.querySelector('body').style.color = 'white'; // 글자색은 화이트로 바꿔줘
      document.querySelector('#night_day').value = 'day'; // value 값은 day로 바꿔줘 
    } else {
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
      document.querySelector('#night_day').value = 'night';
    }
  ">
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li

 

9. 리팩토링이란?  (공장에 보내서 개선한다는 느낌)

코딩을 하고나면 코드가 비효율적일때가 있는데 코드를 효율적으로 만들고 유지보수 관점에서 좋고, 중복된것을 개선하는 것을 이야기한다. 틈틈히 리팩토링을 해야함!
 
코딩 잘하는방법중 하나 ? 
  -> 중복을 끝까지 쫒아가서 다 없애버리기!  (중복되는 코드를 제거(통합) 매우 중요!!!)
 
 

10. 조건문의 실용적 사례 

<h1><a href="index.html">WEB</a></h1>
  <input id="night_day" type="button" value="night" onclick="
    var target = document.querySelector('body'); //// 중복을 변수로 지정해줌
    if(this.value === 'night'){   //// 코드가 속해있는 태그(자기자신)를 가르키는 'this' 사용
      target.style.backgroundColor = 'black';
      target.style.color = 'white';
      this.value = 'day';
    } else {
      target.style.backgroundColor = 'white';
      target.style.color = 'black';
      this.value = 'night';
    }
  ">
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>JavaScript</h2>
  <p>
    JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level
  </p>

 
 

11. 자바스크립트 배열(array)

      [] 대괄호로 시작해서 대괄호로 끝남
 

 
 

javascript array count로 구글 검색

 
 
 

12. 자바스크립트 반복문

 
반복문을 통해 무엇을 할수 있을까? 순서대로 실행되는 문서를 제어하는것이다!
반복문이 언제 종료될것인지 잘 지정해야함!
 

자바스크립트 반복문 3번 반복됨

 

13. 배열과 반복문의 결합 (폭발적인 효과!)

 

     var coworkers = ["name1", "name2", "name3", "name4"];

배열안에 들어가있는 친구들은 element 라고 함 !
 
자동화 처리!

<h1>Loop & Array</h1>
    <script>
      var coworkers = ['egoing','leezche','duru','taeho'];
    </script>
    <h2>Co workers</h2>
    <ul>
      <script>
        var i = 0;
        while(i < coworkers.length){ 
          document.write('<li><a href="http://a.com/'+coworkers[i]+'">'+coworkers[i]+'</a></li>');
          i = i + 1;
        }
      </script>
</ul>

 

14. 배열과 반복문의 활용

 

 

 
 

모든 태그 화면에 출력됨

 

      target.style.backgroundColor = 'black';
      target.style.color = 'white';
      this.value = 'day';
      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].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[i].style.color = 'blue';
        i = i + 1;
      }
    }
  ">
  <ol>

 
 

15. 함수란?

함수는 정리상자라고 생각하면 쉽다, 
웹페이지가 커지면 비용 시간 등등이 더 커진다는 의미이다. 이것을 구원해줄수 있는것이 바로 함수!
function이라는 키워드를 붙이는건 함수를 만들고 싶다고 웹브라우저에 알려주는것!
함수는 긴코드를 한단어로 이쁘게 축약할수 있는것을 함수라고 함!
 

      function 아무렇게나작명(){

        긴 코드~~~

        긴 코드~~~

      }

      아무렇게나작명();

    <script>

      function 알림창열기() {

        document.getElementById("alert-box").style.display = "block";

      }

    </script>

    <button onclick="알림창열기()">

      <span>버튼을 누르면 상자가 나옵니다</span>

    </button>

    <script>

      function 알림창열기() {

        document.getElementById("alert-box").style.display = "block";

      }

 
버그란? 뭔가 코드가 잘못되서 제대로 안나오는걸 말함!

  <body> // 애플코딩 강의 안의 해답

    <div id="alertbox">

      <p id="alertcontent"></p>

      <button onclick="알림창숨기기('none')">닫기</button>

    </div>

    <button onclick="알림창열기('아이디를 입력하세요')">버튼1</button>

    <button onclick="알림창열기('비밀번호를 입력하세요')">버튼2</button>

    <script>

      function 알림창열기(text) {

        document.getElementById("alertcontent").innerHTML = text;

        document.getElementById("alertbox").style.display = "block";

      }

      function 알림창숨기기(구멍) {

        document.getElementById("alertbox").style.display = 구멍;

      }

    </script>

  </body>

16. 함수의 기본적인 문법

 
반복문을 쓸수없는경우(연속적이지 않을경우) 항상 극단적으로 1억번 발생한다고 생각하기 !ㅎㅎ
 

  <script>

    document.write('<li>1</li>')

    document.write('<li>2-1</li>')

    document.write('<li>2-2</li>')

    document.write('<li>3</li>')

    document.write('<li>2-1</li>')

    document.write('<li>2-2</li>')

  </script>

** 위처럼 연속적이지 않는경우 

 

<h1>Function</h1>
    <h2>Basic</h2>
    <ul>
      <script>
        function two(){
          document.write('<li>2-1</li>');
          document.write('<li>2-2</li>');
        }
        document.write('<li>1</li>');
        two(); // 함수
        document.write('<li>3</li>');
        two(); // 함수 
      </script>
    </ul>
    <h2>Parameter & Argument</h2>
    <h2>Return</h2>

 

17. 함수의 활용 (리팩토링!)

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

  </head>

  <body>

    <h1><a href="index.html">WEB</a></h1>

    <input

      id="night_day"

      type="button"

      value="night"

      onclick="

    nightDayHandler(this);

  "

    />

    <input

      id="night_day"

      type="button"

      value="night"

      onclick="

    nightDayHandler(this);

  "

    />

    <ol>

      <li><a href="1.html">HTML</a></li>

      <li><a href="2.html">CSS</a></li>

      <li><a href="3.html">JavaScript</a></li>

    </ol>

    <h2>JavaScript</h2>

    <p>

      JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a

      high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and

    </p>

    <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[i].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[i].style.color = "blue";

            i = i + 1;

          }

        }

      }

    </script>

  </body>

</html>

 

이벤트리스너(EventListener)

온클릭을 쓰지않고 사용할수 있음! 함수안에 함수를 집어넣게 됨!
 깔끔하게 코드를 쓸수 있음!
event는 여러가지가 있음 (click, keydown, scroll, mouseover 등)
 

      document.getElementById('close').addEventListener('click',function(){})

 

      document.getElementById("close").addEventListener("click", function () { // id가 close인 요소가  click이 일어나면

        document.getElementById("alertbox").style.display = "none"; // 닫아주세요

      });

 

18. 객체(Object) - 정리정돈의 개념!  객체를 폴더(정리정돈상자)라는 관점으로 봐도 무방! - 복습 필요

 
객체에 대한건 어렵다,,, 함수위에 객체가 존재함! 함수에서 더 심화되는 개념
 
객체란 무엇인가? 객체는 다양한 얼굴을 가지고 있음! 객체를 잘 다루는 개발자가 되어보자
객체의 얼굴 중 하나에 대해서 이야기해보겠음!
 
document. querySelector 에서 document가 객체임! 
 
function이 중복되면 마지막줄에 있는 function을 불러옴.
이름이 충돌되지 않도록 함수 명을 LinksSetColor 혹은 BodySetColor 와 같이 붙여줌!
 
links.setColor 로 만듬!
body.setColor 로 만듬!

  <h1><a href="index.html">WEB</a></h1>
  <input id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);
  ">
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>JavaScript</h2>
  <p>
    JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
  </p>

function LinksSetColor(color){
    var alist = document.querySelectorAll('a');
    var i = 0;
    while(i < alist.length){
      alist[i].style.color = color;
      i = i + 1;
    }
  }
  function BodySetColor(color){
    document.querySelector('body').style.color = color;
  }
  function BodySetBackgroundColor(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');
      self.value = 'day';
      Links.setColor('powderblue');
    } else {
      Body.setBackgroundColor('white');
      Body.setColor('black');
      self.value = 'night';
      Links.setColor('blue');
    }
  }

 

19. 객체의 쓰기(생성하기)와 읽기

 
객체는 순서 없이 정보를 저장할수 있음 ! 
객체는 중괄호로 씀 {} 객체에 넣을떄 이름이 있어야함

 

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

  </head>

  <body>

    <h1>Object</h1>

    <h2>Create</h2>

    <script>

      var coworkers = { programer: "egoing", designer: "leezche" }; // 객체 쓰기

      document.write("programer : " + coworkers.programmer + "<br>"); // 객체가지고오기

      document.write("designer : " + coworkers.designer + "<br>"); // 객체가지고오기

      coworkers.bookkeeper = "duru"; // 이미 만들어진 객체에 추가

      document.write("bookeeper : " + coworkers.bookkeeper + "<br>"); // 객체가지고오기

      coworkers["data scientist"] = "taeho"; // 공백있는 데이터를 추가할때 점을 빼고대괄호안에 ""를 추가

      document.write(

        "data scientist : " + coworkers["data scientist"] + "<br>"); // 객체가지고오기

    </script>

  </body>

</html>

 

결과 programer는 key 값이라고 함

 
 

20. 객체와 반복문

생성된 객체에 어떤 데이터가 있는지? 확인하는 방법
 
javascript object iterate 구글에 검색해보자 ! 아래와 같은 url이 나와! iteration(순회, 반복한다)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in

 

    <h1>Objects</h1>

    <h2>designer</h2

    <script>

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

      document.write(coworkers.programmer + "<br>"); // egoing

      document.write(coworkers.designer + "<br>"); //minhyeok

      coworkers.bookeeper = "seungba"; // 오브젝트 신규 추가

      coworkers.bookmade = "seungbi"; // 오브젝트 신규추가

      coworkers["newadd"] = "newaddname";

      document.write(coworkers.bookeeper + "<br>"); // seungba

      document.write(coworkers["newadd"] + "<br>"); // newaddname

    </script

    <h2>Iterate<h2> // 오브젝트 순환(반복)

    <script>      

      for(var key in coworkers){ // coworkers에 있는 키값을 가지고옴(순서를 보장하지 않음) / 배열에서는 인덱스라고함

        document.write(key+'<br>') // programmer

        document.write(coworkers[key]+'<br>'); // minhyeok

        document.write(key+ ' : ' +coworkers[key]+'<br>'); // programmer : minhyeo

      }

</script>

 

21. 객체 프로퍼티와 메소드

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

이런 객체에는 숫자 문자 등등 이외에 함수도 담을수가 있음!

 

      <script>

        coworkers.showAll = function(){

        }

        function showAll(){}    /// 위 코드와 똑같은 표현임!

      </script>

 

      <h2>Property and Method</h2>

      <script>

        coworkers.showAll = function(){

           for(var key in this){

             document.write(key+ ' : ' +this[key]+'<br>');

         }

        }

        coworkers.showAll(); // 객체에 소속된 함수 = 매소드라고함 / 객체에 소속된 변수 = 프로퍼티

      <script>

 
 

객체활용! 복습 필요 ! 

 

22. 파일로 쪼개서 정리정돈하기 

 
연관된 코드들을 파일로 묶어서 그룹핑하는걸 말함!
이것을 사용하면 웹페이지가 아무리 많아도, 많은 웹페이지들을 감당할수 있게 된다!
js 파일을 쪼개서 html 문서에 연결!콘솔열어서 네트워크 보면 js파일을 다른파일로 로드한걸 볼수 잇음
파일로쪼갰을때의 장점 - 코드를 재사용함 (유지보수 매우 굿), 가독성이 좋아짐 (ex, color.js )
 
 

23. 캐시란?

웹에서 한번 다운받은 파일은 저장을 함 
 

 

24. 라이브러리와 프레임워크

 
소프트웨어를 만들때 다름사람이 잘 만들어놓은것을 부품으로 해서 조립을 하는것이 소프트웨어를 만드는 기본이다.
지금까지는 생산자가 되는 방법을 살펴보았고, 다른사람이 만든 부품을 소비해서 내가 만드는 소프웨어의 생산자가 되는것을 알아봄!
 
라이브러리와 프레임워크는 다른사람의 도움을 받는면에서 비슷한데, 라이브러리는 '도서관' 즉 내가 만들고자 하는 프로그램에 필요한 부품들을 잘 정리정돈(재사용가능하게) 해놓은 소프트웨어를 말함 -> 부품을 가지고 오는 느낌
 
프레임워크는 만들고자하는것이 있을때 만들고자하는게 무엇이냐에 따라(게임 웹 채팅 등등) 그것을 만들려고 할때 언제나 필요한 공통적인것이 있고, 기획의도에 따라 달라지는것이 있을텐데, 공통적인것은 프레임워크가 만들어놓고 개성에따라 달라지는걸 조금씩 수정하는것 -> 반 제품 같은 느낌  (프레임워크에 들어가서 작업하는 느낌)
 

25. 자바스크립트 라이브러리중 가장 유명한것 ! jQuery !

 
옛날옛날 자바스크립트를 개발하다가 , 아 자바스크립트 x같네 하면서 개발을 하기 시작함,
자바스크립트를 짧게 쓸수 있는 마법의 코드를 개발함! ad이벤트리스너도 필요없음!
아주 안정적인 라이브러리 (오래됨)  // 제이쿼리를 잘 다루게 된다면 생산성 훨씬 높아짐!
가장 빠르게 성장하고 있음! 어떤 라이브러리가 있는지 생겼는지를 많이 알수록 많은일을 할수있는 가능성을 가지게 되는거랑 같은 의미임!
 
요즘 제이쿼리 안쓴다고 하는데 react 를 쓴다고함, 
사실 react가 html 조작은 약간 더 잘함
앱처럼 스무스하게 동작하는 웹이고 html 재활용 편리하다고는 하지만
but 제이쿼리가 king of king!

 

    <script>

      document.getElementById("test").innerHTML = "????";

      document.querySelector("#test"); //하나밖에 못찾음(가장 첫번째에 있는것)

      document.querySelectorAll("#test")[0]; // 여러개를 찾고 몇번째것인지 지정해줌

      $("#test").html("안녕"); // id가 test인것을 찾아주세요. (css의 셀럭터를 따름)

      $(".test"); // class 가 test인것을 찾아주세요. (css의 셀럭터를 따름)

    </script>

 

    <script

      src="https://code.jquery.com/jquery-3.7.1.min.js"

      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="

      crossorigin="anonymous"

    ></script>

    <script>

      $("#test").html("안녕갑세요?"); // id가 test인것을 찾아주세요. (css의 셀럭터를 따름)

    </script>

 

    <script>

      $("#test").html("안녕갑세요?"); // id가 test인것의 문자 바꿔주세요

      $("#test").css("color", "red"); // 스타일 속성 변경 외우기

      $("#test").addClass(["high-light"]); // 하이픈이 들어가면 []대괄호 안에 작성

    </script>

 

https://developers.google.com/speed/libraries?hl=ko#jquery 
 
제이쿼리를 이용하면 반복문을 사용하지 않아도 됨!
 
$('a') <- 이 웹페이지에 있는 모든 a를 제이쿼리로 제어하겠다.
$('a').css('color',red);  <- 이 웹페이지에 있는 모든 a의 css color 를 빨간색으로 변경하겠다 
 

 

26. UI 와 API의 차이 

 

UI = User Interface 란??

사용자가 사용하는 서비스나 제품의 화면 안에 모든 것을 의미함 ! 즉 사용자가 마주하는 디자인

코딩애플 강의 캡처

 

UI만드는법!
1) UI 만드는 법은 미리 디자인 해놓고 숨김
2) 버튼을 누르거나 하면 보여줌!
 
 

API : Application Programming Interface 란?

alert 은 웹브라우저가 가지고 있는 함수 ! alert 를 api 라고 함 ! -> api를 사용하는 프로그래머가 됨!
 
 

 
자바스크립트는 검색지향 프로그래밍이라고도 부르니ㅎㅎ!
검색을 잘해서 잘 적용하는방법을 아는게 제일 중요!
 
 

🤍 이 글은 '생활코딩' '코딩애플' 강의를 기반으로 학습하며 작성된 글입니다! 🤍