Javascript 기본개념 /prompt/confirm/var/let/const

Javascript 사용방법

<body>

<script>

</script>

</body>

실습문제

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body id="txt">
    <a href="#">Front-end Developer</a><br />
    <button id="btn">"DESIGN"</button>
    <button>"DEFAULT"</button>

    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>Javascript</li>
    </ul>

    <h1>Javascript</h1>
    <br />

    <p>
      Javascript는 웹페이지를 동적인 페이지로 만들기 위해 고안된 언어입니다.
    </p>
    <p>차근차근 Javascript에 대해서 배워보도록 합시다.</p>

    <script>
      //자바스크립트 코드를 적는 공간
      document.getElementById("btn").addEventListener("click", function () {
        //클릭했을때 실행되는 로직을 작성하는 공간
        document.getElementById("txt").style.backgroundColor = "yellow";
        document.getElementById("txt").style.color = "blue";
      });
    </script>
  </body>
</html>

<body id="txt"> body에 id ="txt"
<button id ="btn">

<script> ------> (자바스크립트 코드를 적는 공간)
document.getElementById("btn").addEventListener("click", function () {
document.getElementById("txt").style.backgroundColor = "yellow";

document.getElementById("txt").style.color = "blue";
});
</script>

getElementById("btn")------> "btn" id의 요소를 가져온다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 1 . 문서에 직접 출력하는 방법 document.write()
      document.write("입력할 문장을 작성");

      // 2 . 콘솔창에 출력하는 방법 console.log()
      // 데이터 통신할때 데이터가 잘 전달되는지 확인할때 가장 많이 사용
      // F12(개발자도구) 콘솔창에서 확인
      console.log("콘솔창에 출력되는 데이터");

      // 3 . 알림 팝업창을 통해서 출력하는 방법 alert()
      alert("팝업창을 통해서 출력하는 데이터");
    </script>
  </body>
</html>

document.write("입력할 문장을 작성");

console 창 -----> f12 개발자도구에서 볼 수 있다

alert("팝업창을 통해서 출력하는 데이터")

prompt("출력내용","입력내용") ----------> 리턴타입 String
confirm("출력문 작성")------------>리턴타입 boolean / True 아님 False

Javascript 변수 개념

실습문제

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //1. 사용자에게 입력창을 제공해주는 prompt()
      // 리턴타입 : String
      var name = prompt("이름을 입력하세요!", "입력내용");
      console.log(name);
      console.log(123);
      //2. 사용자에게 확인, 취소 제공해주는 confirm()
      // 리턴타입 : boolean
      var remove = confirm("삭제 하시겠습니까?");
      console.log(remove);
    </script>
  </body>
</html>

var name = prompt("이름을 입력하세요!", "입력내용");
console.log(name);
console.log(123);