개발을 할 때는 JavaScript 파일 만으로는 JavaScript 가 작동되지 않습니다.
브라우저가 존재해야 하고, JavaScript파일을 호출하는 html파일이 있어야 합니다..html에서 .js를 불러오기 위해서는 script 태그를 사용해서 불러올 수 있습니다.
<script src="index.js"></script>
html 코드 내에도 JavaScript 코드를 작성할 수 있습니다.
대신 html 파일내에 script 태그가 있어야 합니다.
script 태그 내에 JavaScript 코드를 작성할 수 있습니다.
script 태그 내에는 html 태그는 작성할 수 없습니다.
<script> ... </script>
위에 코드처럼 script 태그 안에 작성해야 브라우저가 자바스크립트 코드라고 인식하게 됩니다.
JavaScript 코드를 넣는 방법은 이렇게 여러 가지가 있지만,
유지보수나 관리 차원에서 이제까지 했던대로 index.js 와 같이 외부 파일에 작성하는게 가장 좋은 방법입니다.
createElement('태그 이름')의 형식으로 태그를 추가할 수 있습니다.
className을 이용해서 만든 태그의 클래스 이름을 지정할 수 있습니다.
innerHTML을 이용해서 요소의 내용에 접근하고 수정할 수 있습니다.
appendChild를 통해 .html의 어느 부모에 종속시킬지 설정할 수 있습니다.'
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태그의 자식으로 설정
}
특정 요소에 interactive한 반응을 할 수 있게 하는 것을 이벤트라고 합니다.
- 클릭 이벤트
- 마우스 이벤트
- 스크롤 이벤트
- 터치 이벤트
- resize(화면 크기 변화) 이벤트
등 다양한 이벤트가 존재합니다.
addEventListener()는 이벤트를 달아줄 때 사용하는 합수입니다.
요소.addEventListener(이벤트종류, function() { //이벤트가 일어났을 때 실행할 내용 });
이벤트를 달아주고 싶은 요소에 addEventListener()를 호출하고 이벤트의 종류와 그 이벤트가 실행시킬 내용을 함수를 인자로 받습니다.
re-password의 Id를 가진 input 태그에 keyup 이벤트를 추가했습니다.
input.password와 input.re-password의 값을 비교해서 같으면 p.alert에 ''(빈 문구)를,
다르면 P.alert에 '비밀번호가 일치하지 않습니다'라는 문구를 넣었습니다.