본문 바로가기

안드로이드 웹앱 콘테츠 개발자 양성(국비지원)226

ajax 이용 X 와 ajax 이용O 비교 (GET, POST 방식) 총 두개를 만든다. ①하나는 회원가입 모양만 있는 페이지를 만들어서 jax 이용 비교 ②회원가입 모양만 있는 페이지를 만들어서 jax 이용 get, post 방식을 알아본다. ajax를 이용하면 추가 데이터를 표현할때, 새로운 페이지로 안열어도 된다. 우선 ajax를 사용하지 않고 입력 필드에 값을 받고, 그 값을 표시해보자. 데이터를 받고 표시할 php 파일을 만든다. 그러나 제출을 누르면 php 코드가 나온다. 이것은 웹브라우저는 php컴파일 기능이 없어서이다. 확인을 하기 위해 호스트 주소를 이용하자. (예제에서는 닷홈 무료호스팅 이용) 자신의 호스트 주소에 AJAX라는 폴더를 만들고 거기에 올렸다. 확인 방법 : 웹 브라우저 주소창에 호스트주소/파일경로 를 입력하면된다. 제출을 누르면 결과를 ph.. 2019. 12. 18.
Jquery dom 요소 제어 Jquery는 javascript에서 속성 값으로 하던 것들을 메소드로 제어한다. JQuery를 이용해서 DOM 요소를 제어 해보자. , 요소를 쓰자. JQuery는 id를 이용해서 찾아서 속성값 대신 메소드로 처리한다. text와 html의 차이는 요소의 인식이 다르다. (text는 인식 못함, html은 인식함) 앵커 요소로도 확인해 보자. 입력 필드에 값을 읽고, 써보자. 우선 입력 필드 1개와 버튼 2개를 만들자. 이제 버튼을 눌렀을 때, 기능을 써보자. 요소의 속성 값을 가져오고, 변경해보자. 우선 이미지지와 버튼 1개를 만든다. 버튼을 눌렀을 때, src 속성 값을 읽어와서 값을 변경한다. 스타일도 마찬가지로 가능하다. 리스트를 만들어 보자. 버튼을 누르면, 첫 번째 li의 색을 없애고 다름 .. 2019. 12. 18.
JQuery animate (이미지를 이동, 투명도, 크기 변경) 이미지를 이동, 투명도, 크기를 변경할 수 있다. 우선 이미지 1개와 버튼 6개를 만들자. move버튼을 눌렀을 때, 왼쪽으로부터 200px떨어진 지점으로 이동되게 하자. 나머지 버튼의 기능들도 구현하자. 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 52 53 54 55 56 57 $(document).ready( function(){ $('#move').on('click', function(){ // **목표로 하는 css의 속성을 지정하면 자동으로 그 사이를 만들어주는 $('img').ani.. 2019. 12. 18.
JQuery animation (이미지에 대해 다양한 효과) 이미지에 대해서 다양한 애니메이션 효과 주기 우선 10개의 버튼과 이미지를 준비하자. show, hide, toggle효과에 대해 알아보자. fadein, fadeout, fadeto 효과에 대해 알아보자. slideup, slidedown, slideToggle효과를 알아보자. 그리고 여러가지 효과를 한꺼번에 줄 수 도 있다. 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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 $(document).ready( fu.. 2019. 12. 18.
jQuery 적용하기 (파일 다운로드, CDN 방식) JQuery를 사용하는 이유는 단축된 문법, 멀티브라우저 지원이다. 우선 JQuery 파일을 다운 받자. 아래 사이트에서 받을 수 있다. https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.com 다운로드를 누르면 개발환경에 따른 많은 파일들이.. 2019. 12. 18.
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.

티스토리툴바