webservice_basics

Asynchronous JavaScript And XML의 약자로 웹 서버에 접속하는 기법 중 하나이다. XMLHttpRequest를 통해 서버로부터 데이터를 요청하게 된다. 사용자 쪽에서 로딩하는 모습이 보이지 않고, 뒷단에 접속해서 data를 가져오는 방법이다. 페이지 소스에서도 내용이 노출되지 않는다는 장점이 있다. function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhtt..

Browser Object Model의 약자이다. Window Methods window window.innerHeight window.inner.Width window.open() window.close() window.moveTo() window.resizeTo() Window Screen screen.width screen.height screen.availWidth screen.availHeight screen.colorDepth screen.pixelDepth Window Location 현재 패이지에서 다른 페이지로 이동하고 싶을때(redirect browser) 사용한다. window.location을 사용할때 앞에 location을 생략해서 사용해도 된다. window.location hr..

동적으로 Element 추가하고 삭제하는 방법 addElement() Child node를 parent element에 붙여서 element를 생성하는 방식이다. Parent element를 명시하기 위해 parentId 를 사용하고, 어떤 종류의 element(p, h1, div 등...)를 만들고 싶은지는 elementTag로 명시한다. parentId elementTag elementId html //동적으로 element document에 추가하는 법 function addElement(parentId, elementTag, elementId, html) { var p = document.getElementById(parentId); var newElement = document.createEle..

HTML DOM이란? Document Object Model의 약자로 document에 있는 각 object들을 동적으로 접근하기 위해 사용한다. HTML DOM은 각각의 HTML element에 접근하고, 추가하고, 삭제할 때 쓰이는 기준이다. Method: an action we can do ex) getElementById Property: a value we can get or set ex) innerHTML Finding HTML elements Changing HTML elements Adding and Deleting HTML elements document.getElementById(id) element.innerHTML document.createElement() document.getE..

HTML Form에서 중요한 속성 action: 사용자가 입력한 데이터를 받아와서 처리할 페이지를 꼭 명시해줘야 한다 method: GET/POST submit JavaScript를 이용해서 Form의 유효성을 검사하는 방법 HTML input 속성 중에 required을 사용해도 되기는 하지만, submit button을 눌렀을 때만 작동하기 때문에 submit 버튼을 사용하지 않을 때는 javascript를 이용해서 함수로 검사하게 해야한다. onsubmit 이라는 event를 사용해서 유효성 검사 함수를 호출한다. 함수의 리턴값이 false이면 form의 데이터가 제출되지 않고, true일 경우에는 사용자 입력한 값이 제출된다. Name: 단, onsubmit 은 에서만 작동하기 때문에 다른 방법을..

JavaScript 함수 함수 형식: function name(parameter1, parameter2, parameter3) {//parameter 값이 없을 경우 비워둬도 된다 // code to be executed } return functionname: 함수 object을 의미하고 이 값을 출력 할 경우 함수 안에 정의 되어 있는 내용이 그대로 출력된다 functionname( ): 함수의 결과를 의미한다 object 안에서도 함수를 정의 할 수 있다 (object method) // object method을 참조할 때: objectName.methodName() JavaScript Events 이벤트 형식: onclick onchange: HTML element가 바뀌었을 때 onmouseo..

JavaScript란? client 쪽에서, 즉 웹브라우저에서 동작하는 언어이다. HTML에서 CSS를 적용하기 위해 태그 안에 내용을 정의했듯이 JavaScript에서는 화면의 동적 설정을을 외부 소싀의 url을 그대로 사용 할 경우: inline Data Display innerHTML : HTML content를 바꾼다 this.innerHTML: 다른 element를 id로 참조하지 않고 현재 element의 content를 바꿀 수 있게 해준다 src: 이미지 source를 바꾼다 style 예) style.background-color, style.fontSize등... HTML elements를 숨기려면 style.display= "none" document.write() window.ale..