자바스크립트 맛보기

페이지 요소 바꿔보기

<h1>안녕하세요.</h1>

document.querySelector("h1").innerHTML = "반갑습니다.";

대화상자로 조건 걸어보기

if (confirm("'반갑습니다'로 바꾸시겠습니까?")) {
    document.querySelector("h1").innerHTML = "반갑습니다.";
  }

사용자가 내용을 직접 바꾸도록 해보기

var salutation = prompt("원하는 인사말을 입력하세요.");
document.querySelector("h1").innerHTML = salutation;

버튼으로 통제권 주기

<h1>안녕하세요.</h1>
위의 이 제목을 자바스크립트를 사용해 바꿉니다.<br>
아래 버튼을 눌러주세요.<br><br>
<button onclick="changeSalutation()">인사말 바꾸기</button>

<script>
  function changeSalutation () {
    var salutation = prompt("원하는 인사말을 입력하세요.");
      document.querySelector("h1").innerHTML = salutation;
  }
</script>

시간에 따른 변화 주기

  <h1>안녕하세요.</h1>

var salutations = ["안녕하세요", "반갑습니다"];
var i = 0;
setInterval(function () {
  i = 1 - i;
  document.querySelector("h1").innerHTML = salutations[i];
}, 1000);

자바스크립트 사용하는 법

1) script 태그 안에 작성

보통 head 태그 안에 작성하나, 필요 시 body 태그 내에 작성

<script>
  function showMyAlert () {
    alert("짠! 알림창이 나타났습니다.");
  }
</script>

2) .js 파일로 분리하기

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

3) console 사용하기

페이지 내의 console에서 명령어 입력가능.