Just in case

웹 페이지에서 사용자와의 상호작용이 발생하면 이벤트가 일어납니다. 이벤트가 발생했을 때, 특정한 동작을 만들기 위해 자바스크립트를 사용합니다. 몇가지 이벤트의 종류 onclick : 클릭 이벤트가 발생했을 때 미리 정해놓은 코드가 실행되도록 할 수 있습니다. onload, onunload : 사용자가 웹 페이지에 진입하거나 웹페이지를 떠나면 onload와 onunload가 발생합니다. onchange : 해당 요소에 변화가 발생했을 때 정해놓은 코드가 실행되도록 합니다. onmouseover : 사용자가 요소 위에 마우스를 올리면 발생합니다. 이벤트 리스너 (Event listener) 이벤트가 발생했을 때 처리를 담당하는 함수입니다. 특정한 이벤트가 발생했을 때, 브라우저는 해당 요소에 지정된 이벤트를..

자바스크립트로 특정한 요소를 조작하려면 먼저 DOM에서 원하는 요소를 찾아야 합니다. 요소를 찾기 위해 크게 두가지 방법을 사용합니다. id로 찾기 태그 이름으로 찾기 1. id로 찾기 지정된 id를 이용해 요소를 찾습니다. getElementById()라는 메서드를 사용합니다. 아래와 같은 문장은 id="header"를 지닌 요소를 찾습니다. 만약 요소를 발견했다면 해당 요소를 객체 형태로 반환합니다. 발견되지 않았다면 null을 반환합니다. var element = document.getElementById("header"); 아래의 코드를 실행하면 header라는 id를 가지고 있는 태그를 찾아 콘텐츠를 변경합니다. 버튼을 클릭하면 showText() 메서드를 실행합니다. showText()는 텍스..

지금까지 html로 웹 페이지의 구조를 만들고, css로 웹 페이지를 꾸며 정적인 웹 페이지를 만드는 법을 익혔습니다. 그리고 javascript의 기본적인 문법을 공부해 간단한 프로그램을 만들 수 있게 되었습니다. html로 만든 웹 페이지는 링크, 사진, 버튼, 입력창 등등 다양한 요소로 구성되어 있습니다. 그동안 만들었던 정적인 웹에서 이 각각의 요소들은 처음 로딩된 이후로 특별한 변화를 일으키지 않습니다. 하지만 우리가 흔히 접할 수 있는 실제 웹 페이지에서는 버튼을 눌러 글을 삭제하거나, 체크박스로 옵션을 선택하거나, 마우스를 올렸을 때 이미지가 변화하는 등 다양한 상호작용이 발생합니다. javascript로 웹 페이지를 동적으로 제어하려면 어떻게 해야할까요? 이번 글에서는 html 문서가 내부..

HTML에서 자바스크립트 코드를 삽입하는 세가지 방법을 정리합니다. inline 자바스크립트 내부 자바스크립트 외부 자바스크립트 1. inline 방식 html 태그에 이벤트 속성으로 자바스크립트를 삽입할 수 있습니다. input 태그의 onclick 속성으로 자바스크립트 코드를 입력했습니다. 웹 페이지에서 버튼을 클릭하면 alert('Hello world')가 실행됩니다. 2. html 내부에서 사용하기 는 자바스크립트가 시작하고 종료되는 위치를 표시합니다. 3. 외부 파일 불러오기 자바스크립트 파일을 html과 별개인 .js 확장자의 파일로 저장한 후 불러올 수 있습니다. 외부 자바스크립트를 사용하려면 script 태그의 src 속성으로 파일의 경로를 입력하면 됩니다. example.js docume..

자료형의 구분 자료형은 크게 원시 타입(primitive type)과 참조 타입(reference type)으로 구분됩니다. 이 두가지 타입은 데이터가 메모리에 저장되는 방식에서 차이가 발생합니다. 변수에 A라는 값을 저장한다고 가정할 때, 원시 타입의 경우 메모리 공간 안에 A를 그대로 복사해서 저장합니다. 참조 타입은 A의 참조(=A라는 값을 가지고있는 메모리의 주소)를 저장합니다. 원시 타입 : number, string, boolean 등 참조 타입 : 배열, 객체, 함수 등 '참조'라는 표현이 다소 어색하게 느껴질 수 있는데요, 참조는 단어 자체의 사전적 정의로 이해하는 것보다 '가리키다'라는 단어로 바꿔서 생각하면 더 쉽게 받아들일 수 있습니다. 값을 직접 보관하는 것과 참조하는 것의 차이를 ..