2022.05.18 Day 9 - JavaScript

성민규·2022년 5월 18일

JavaScript

JavaScirpt 위치

Script 태그 / html 파일에서 js 파일 호출

개발을 할 때는 JavaScript 파일 만으로는 JavaScript 가 작동되지 않습니다.
브라우저가 존재해야 하고, JavaScript파일을 호출하는 html파일이 있어야 합니다.

.html에서 .js를 불러오기 위해서는 script 태그를 사용해서 불러올 수 있습니다.
<script src="index.js"></script>

html 내부 JavaScript 코드의 위치

html 코드 내에도 JavaScript 코드를 작성할 수 있습니다.
대신 html 파일내에 script 태그가 있어야 합니다.
script 태그 내에 JavaScript 코드를 작성할 수 있습니다.
script 태그 내에는 html 태그는 작성할 수 없습니다.

<script> ... </script>

위에 코드처럼 script 태그 안에 작성해야 브라우저가 자바스크립트 코드라고 인식하게 됩니다.
JavaScript 코드를 넣는 방법은 이렇게 여러 가지가 있지만,
유지보수나 관리 차원에서 이제까지 했던대로 index.js 와 같이 외부 파일에 작성하는게 가장 좋은 방법입니다.

.js에서 .html에 태그 추가

createElement()

createElement('태그 이름')의 형식으로 태그를 추가할 수 있습니다.

className

className을 이용해서 만든 태그의 클래스 이름을 지정할 수 있습니다.

innerHTML

innerHTML을 이용해서 요소의 내용에 접근하고 수정할 수 있습니다.

appendChild

appendChild를 통해 .html의 어느 부모에 종속시킬지 설정할 수 있습니다.'

p태그를 추가하는 함수

function addElement() {
  var newP = document.createElement('p'); 
  // p태그를 만들어서 newP라는 변수에 할당
  newP.className = 'dom'; 
  // p태그의 클래스 이름을 'dom'으로 설정
  newP.innerHTML = 'DOM'; 
  // p태그의 내용을 'DOM'으로 설정
  var location = document.getElementsByTagName('h1')[0]; 
  // .html의 h1태그를 location이라는 변수에 할당
  location.appendChild(newP); 
  // newP를 location이라는 변수를 이용하여 h1태그의 자식으로 설정
}

Event

특정 요소에 interactive한 반응을 할 수 있게 하는 것을 이벤트라고 합니다.

클릭 이벤트

마우스 이벤트

스크롤 이벤트

터치 이벤트

resize(화면 크기 변화) 이벤트
등 다양한 이벤트가 존재합니다.

addEventListener()

addEventListener()는 이벤트를 달아줄 때 사용하는 합수입니다.
요소.addEventListener(이벤트종류, function() {
  //이벤트가 일어났을 때 실행할 내용
});
이벤트를 달아주고 싶은 요소에 addEventListener()를 호출하고 이벤트의 종류와 그 이벤트가 실행시킬 내용을 함수를 인자로 받습니다.

실습

re-password의 Id를 가진 input 태그에 keyup 이벤트를 추가했습니다.
input.password와 input.re-password의 값을 비교해서 같으면 p.alert에 ''(빈 문구)를,
다르면 P.alert에 '비밀번호가 일치하지 않습니다'라는 문구를 넣었습니다.