이번의 목표 01. onload를 사용하여 페이지의 로딩이 완료되면 즉시 새로운 창을 띄워보자 onload 는 페이지의 로딩이 완료되면 바로 이벤트를 작동 시킵니다. 사용할 수 있는 태그가 한정적입니다. 아래의 9개의 태그에서만 사용이 가능합니다. 이를 이용해서 사이트 로딩이 되었을 때에 바로 실행되는 이벤트를 구현할 수 있습니다. 01. 메인 페이지 코드 02. 팝업창 코드 03. 실행 화면 01. 메인 페이지 코드 02. 팝업창 코드 공 지 사 항 이것은 공.지.사.항 입니다 닫기 03. 실행 화면 페이지의 로딩이 끝나마자 팝업창이 뜨는 것을 확인할 수 있습니다.

이번의 목표 01. window.open() 을 사용하여 다른 사이트로 이동해보자 window.open()를 사용하면 괄호 안의 링크로 이동합니다. 이때 괄호안에 페이지를 여는 옵션을 설정할 수 가 있습니다. 형식은 아래와 같습니다. window.open("주소", "target 속성", "화면사이즈, 위치") target 속성에는 _self , _blank 가 있습니다. _self : 현재 화면에서 페이지를 엽니다. _blank : 새 화면에서 페이지를 엽니다. (default) target 속성을 아예 입력하지 않는다면 화면은 새탭에서 열리게 됩니다. target 속성을 입력하되, "" (공백) 으로 남겨 놓는다면 _blank 로 인식하여 새 창을 띄워줍니다. 화면 사이즈와 위치를 조정하는 데에는 아..

이번의 목표 01. confirm() 을 사용하여 유저에게 값을 받아보자. confirm() 은 괄호 안의 문구를 출력하며 사용자에게 확인/ 취소를 선택 받습니다. 사용자의 선택에 따라 확인은 true / 취소는 false를 저장합니다. 01. 코드 02. 실행 화면 01. 코드 02. 실행 화면 See the Pen Untitled by woojw6012 (@SpookeyTed) on CodePen. ① 확인을 누르면 "처음 방문해 주셔서 감사합니다." 가 출력 되는 것을 확인할 수 있습니다. ② 취소를 누르면 "다시 방문해 주셔서 감사합니다." 가 출력 되는 것을 확인할 수 있습니다.

이번의 목표 01. window.history.forward() 에 대해 알아보자. 02. window.history.back() 에 대해 알아보자. 웹 브라우저에는 '뒤로가기'와 '앞으로 가기' 기능이 있습니다. 이들은 각각 이전 페이지로 돌아가는 기능과 다시 앞페이지로 돌아가는 기능을 하고 있습니다. 이 기능을 그대로 가지고 있는 것이 window.history.forward()와 window.history.back()입니다. 다른 페이지로 이동한 내역이 없다면 페이지 기록이 없기 때문에 위의 두 기능 또한 작동하지 않습니다. 그렇기 때문에 최소한 다른 페이지로의 이동이 한번은 일어나야지만 사용이 가능합니다. 01. 첫번째 페이지 코드 02. 두번째 페이지 코드 03. 실행 화면 01. 첫번째 페이지..

이번의 목표 01. onmousup/onmousedown 을 이용하여 이미지를 바꿔보자. 지난 시간엔 onmouseup/onmousdown으로 글을 바꾸는 것을 해봤습니다. 이번엔 이미지를 바꾸는 것을 해보겠습니다. 이미지는 임의로 하셔도 좋습니다. 01. 코드 02. 실행 화면 01. 코드 Click mouse and hold down! 02. 실행 화면 ① 클릭을 하지 않고 있는 상태와 클릭하고 있을 때의 이미지가 다른 것을 확인할 수 있습니다.

이번의 목표 01. onmousdown/onmouseup 을 사용해보자. 지난 시간엔 마우스를 객체에 올릴때와 객체에서 나왔을 때에 작동하는 이벤트를 알아봤습니다. 이번시간엔 객체를 마우스로 클릭하고 있을 때, 클릭을 풀었을 때 작동하는 이벤트를 알아보겠습니다. onmousedown는 마우스를 클릭하고 있을 때 작동하는 이벤트입니다. onmouseup 은 마우스 클릭을 풀었을 때 작동하는 이벤트입니다. 01. 코드 02. 실행 화면 01. 코드 클릭하세요. 02. 실행 화면 See the Pen Untitled by woojw6012 (@SpookeyTed) on CodePen. ① 마우스를 클릭하면 값이 "마우스 버튼을 누르고 있어요" 로 바뀌는 것을 확인할 수 있습니다. ② 마우스 클릭을 해제하면 값..