본문 바로가기

안드로이드 웹앱 콘테츠 개발자 양성(국비지원)/HTML+Java script32

HTML+Java script (기초) drag에 대한 이벤트 드래그 & 드롭을 하는 과정에서 많은 이벤트가 발생한다. 우선 임의로 두개의 이미지를 추가하자. div요소와 img 요소2개를 배치하자. div의 크기는 없기 때문에, style로 크기와 선을 주자. 드래그를 시작하고 끝났을때 메소드와 이벤트 발생한 요소의 id를 저장하는 변수를 만들자. 캡쳐 화면에서는 안보이지만, 드래그 했을때 이미지에 동그라미에 슬래시 표시가 나온다. (뭔가 안된다는 표시) 결과는 동작은 된다. 그 안된다는 표시르 우선 없애자. 2019. 12. 19.
HTML+Java script (기초) canvas를 이용한 움직이는 웹게임?(움직이기만 함) 최종 화면과 같이 canvas위에 키보드를 누를 시, 움직이는 캐릭터를 만들어보자. 우선 canvas를 만들자. 배경과 캐릭터 이미지는 임의로 사용하였다. 캐릭터를 움직이기 전에 배경과 좌표 등을 설정하자. 아직 움직이지 않지만, 일단 화면에 이미지가 보인다. 이동방향을 제어하기 위한 변수 dx,dy를 선언하고, 움직이는 기능의 함수에 연산을 한다. keyCode를 이용해서 방향키를 구분할 것이기 때문에 변수 선언을 한다. 혹시 몰라 키 코드값을 화면에 찍어보겠다. 방향키에 따라 dx,dy값을 주어서 그 값이 캐릭터 위치에 영향을 주자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 3.. 2019. 12. 17.
HTML+Java script (기초) canvas (문자, 도형,선, 이미지 그려보기) canvas를 이용해서 글씨, 사각형, 직선, 이미지를 그려본다. 화면에 도화지에 그리듯 그려내는 canvas에 대해 알아보자. onload를 이용해 body를 실행하고 실행되는 콜백 함수를 이용하자. (스크립트문은 head에 많이 사용하므로...) canvas객체를 찾아오고 Context도 얻어와서 글씨를 적어보자. 좌표를 수정하며 글씨를 써보자. (좌표를 0,0은 글씨 좌하단 기준이라서 화면에서 안보인다.) fill이 아닌 stroke로 가능하다. ( fillText -> strokeText 이런식으로.. ) 사각형도 그릴 수 있다. 직선도 그릴 수 있다. 이미지도 그릴 수 있다. 이미지 사이즈 조절도 가능하다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 2.. 2019. 12. 17.
HTML+Java script (기초) Key Event (키보드 이벤트) onkeypress, onkeyup 대해 알아본다. 키보드 이벤트를 알아보기 위해 우선 입력창을 만들자. 키보드로 누른 값(keyCode)을 바로 입력창에 자동을 적어보자. onkeypress 키보드를 눌렀다가 뗄때 발동하는 이벤트에 대해 알아보자. onkeyup keyup을 이용해서 입력창에 문자를 입력했을때, 바로 대문자로 바꿀 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 아무키나 누르세요. char keycode shift키 // 키보드 이벤트 종류: keypress(). key.. 2019. 12. 17.
HTML+Java script (기초) 이벤트 처리, 정규표현식 - onload, onclick, ondblclick, addEventListener, onblur, onchange, onmouseover, onmouseout, onmousemove, mousedown, mouseup, 정규표현식 등에 대해 알아본다. 요소를 제어할때 흔히 하는 실수가 있다. id를 찾아서 Hello를 쓰려고 했는데.. 제어하기위해 script안에 id를 찾는데.. 중요한 것은 head를 실행하고 body를 실행하여 당연히 동작이 안된다. 보통 스크립트문을 head 영역에 쓰기 때문에, 당연히 이런 경우가 많다. 그럴경우 아래와 같이 onload를 이용하자. 또한 .onclick 이벤트를 처리할 수 있다. (클릭시 반응하기) 더블 클릭했을때, 이벤트 방법도 있다. .ondblclick.. 2019. 12. 17.
HTML+Java script (기초) BOM - window (최상위) , screen, location, history, navigator 객체에 대해 알아본다. 우선 버튼을 눌렀을 시, 현재창에서 특정 사이트가 열리게 해보자. 현재 창이 아닌, 새로운 창으로 띄워보자. 빈 윈도우를 띄워보자. 새로운 비 윈도우에 글씨도 쓸 수 있다. 윈도우를 닫는 버튼 내용을 적어보자. 그런데 문제는 현재 창이 닫힌다.. (예상은 새로 띄운 창을 닫고 싶었지만) 버튼 두개를 추가하여 열고, 닫아 보자. 변수로 쉽게 제어할 수 있다. 이제 새로 창을 띄우고, 창을 움직여 보자. move window 버튼도 해보자. 누르때마다. 창이 (10,10)으로 이동한다. setTimeout을 이용해 몇초 후에 자동 실행되게 해보자. setInterval을 이용해서 1초마다 .. 2019. 12. 16.
HTML+Java script (기초) DOM 요소(속성 변경, 노드 동적 생성) DOM 트리 요소 속성 변경, 노드 동적 생성 임의 이미지 파일 두개를 추가하여, 이미지에 대한 속성을 변경 해보자. 우선 버튼을 눌렀을 때, 이미지가 바뀌게 해보자. 요소 스타일 속성 변경에 대해서 알아보자. p태그로 글을 쓰고, 버튼을 누르면 속성을 바꾸도록 하자. 요소에 일일이 스타일을 바꾸려니 코드가 너무 길어진다. 만약 바꾸려는 요소가 여려개면 color를 그만큼 써야한다... 클래스 속성을 이용해서 편하게 적용시키자. 처음부터 클래스 속성 변경을 하면, 바뀌지만 첫 번째 버튼을 누르고 클래스 속성으로 변경하는 두 번째 버튼을 누를시 적용이 안된다. (우선순위 때문에) 위와 같이 코드를 추가하면 두 버튼 동작이 잘된다. 이제 DOM트리의 노드를 동적 생성 및 추가해보자. 버튼 3개를 추가하고 하.. 2019. 12. 16.
HTML+Java script (기초) DOM (트리 구성 요소 제어 요소,속성,텍스트 ) ③DOM 트리를 구성하는 요소에 대해 알아보자. node ①요소 : 1 ②속성 : 2 ③텍스트 : 3 노드에 대한 종류와 요소 제어하기 document는 html의 상위, html안에는 head, body가 있다. id가 p1인 요소의 타입과 네임을 알아보자. (결국, 에 타입과 네임이 나옴) .attributes는 가리키고 있는 요소의 속성을 얻어온다. ( id 속성 ) id는 속성이므로, 타입은 2 / 네임은 id로 나온다. .value는 id에 쓴 값이 나온다. 기존 e는 e=document.getElementById('p1'); 로 되어 있었다. (결국, var e는 안에 요소를 가르키게 된다.) a 요소의 속성을 알아보자. 속성이므로 값은 2를 반환한다. e.firstChild는 a요소의 자식이.. 2019. 12. 16.
HTML+Java script (기초) Exception, throw (예외처리) JS에서는 에러가 나면 그 줄 이후부터 실행이 안된다. 그때 사용하는 예외처리를 알아본다. 우선 다이얼로그를 띄우자. 다이얼로그 창 다음에 글자를 출력해보자. 이제 일부러 에러를 만들자. alert -> aler로 바꾸겠다. 이러면 어떻게 실행이 될까? aler 줄도 실행이 안되며, 그 밑에 글자까지 실행이 안된다. 에러가 나오더라도, 그 줄 이외에는 실행을 하고 싶을때 예외처리를 해보자. 에러가 예상되는 줄을 try안에 넣는다. 그리고 만약에 에러가 났을 시, 실행하고 싶은 문장을 catch안에 넣자. 에러가 나서 catch 안에 내용이 실행되고, 그 밑에 글씨도 나온다. try,catch와 같이 사용되는 finally를 알아보자. 에러가 나든 안나든 무조건 실행하고 싶을때는 finally이용하여 그 .. 2019. 12. 13.

티스토리툴바