목록Web /웹브라우저 객체 API (12)
알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)
JSON 이란? JSON (JavaScript Object Notation)은 경량의 DATA-교환 형식이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다. 정의 되어 있다. 쉽게 말하면 데이터를 교환하는 문자열 약속 같은것이다 좀더 짧게 말하면 변수 데이터를 주고 받기를 목적으로한 프로토콜이다. 그리고 이 프로토콜을 사용하기 위해서 파싱이라는것을 하는데 프로그램에서 파싱이란 데이터를 조립해 원하는 데이터를 빼내는 프로그램을 하는것을 말한다. ECMAscript 5(자바스크립트 표준) 에서는 JSON 파서 를 집어 넣어 놨다. 프로토콜 데이터에서 파싱하여 프로토콜 데이터를 쉽게 사용할수 있도록 해주는 라이브러리 이다. 예를 들면 실제 데이터는 이런식으로 통신이 되는데 JS..
javascript+django(csrf) 통신하기 polls/templates/test7.html {% csrf_token %} {% csrf_token %} xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); var data = ''; xhr.send(data); } 을 넣어 적어 줍니다. polls/views.py from django.shortcuts import get_object_or_404, render # Create your views here. from django.http import HttpResponseRedirect,HttpResponse from .models import Question,Choi..
HTMLCollection HTMLCollection은 리턴 결과가 복수인 경우에 사용하게 되는 객체다. 정도로 정의가 되지만 코드를 보면 좀더 직관적입니다. 예를들면 HTML CSS JavaScript 위와 같은 html 코드가 있을때var lis = document.getElementsByTagName('li'); 이렇게 문서에서 tag 을 선택하게 되면 lis 변수에는 총3개의 태그 변수를 리스트 형식으로 리턴 받게 됩니다. 이러한 것을 HTMLCollection 형태라고 합니다. 그리고 HTMLCollection 형태가 가지는 구조는 HTMLCollection interface HTMLCollection { readonly attribute unsigned long length; Node item..
HTMLElement javascript or Jquery 를 사용할때에 선택한 html 속성에 대해 정확히 알아야 제어를 할수가 있습니다. www.w3.org html 표준을 만드는 단체에서 그 속성을 서술해 놨고 우리는 찾아서 사용하기만 하면됩니다. 자 일단 예제 코드를 보면서 이해도를 높이도록 하겠습니다. HTML CSS JavaScript 이제 크롬으로 실행을 시켜 결과값을 보겠습니다. 위와 같이 2가지 타입이 로그로 나오는군요 .HTMLLIElementHTMLCollection속성을 보는 페이지를 링크 시켜 놨습니다. 이중에 1개만더 좀더 상세한 예제를 보겠습니다. opentutorials HTML CSS JavaScript 결과값은 HTMLLIElementHTMLAnchroElementHTML..
DOM[Document Object Model] Document Object Model로 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미한다. window 객체의 document 프로퍼티를 통해서 사용할 수 있다. Window 객체가 창을 의미한다면 Document 객체는 윈도우에 로드된 문서를 의미한다고 할 수 있다. 가상 쉽게 접근성이 높은 방법부터 예제를 들겠습니다. document.getElementsByTagName 문서에서 태그를 찾을수 있는 객체 함수 입니다. 일반적으로 DOM 객체는 document 을 통해 접근합니다. test.html HTML CSS JavaScript 크롬 개발자 도구 콘솔(단축키 F12)var a = document.getElementsByTagName('l..
[javascript] 창제어 사용중인 웹브라우져의 창을 제어할때 어떻게 제어하는지 알아 보겠습니다. 먼저 windwos.open() 함수는 새로운 창을 여는 함수 입니다. newopenhtml.html 첫번째 인자는 새 창에 로드할 문서의 URL이다. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다. 두번째 인자는 새 창의 이름이다. _self는 스크립트가 실행되는 창을 의미한다. _blank는 새 창을 의미한다. 창에 이름을 붙일 수 있다. open을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드된다. 세번재 인자는 새 창의 모양과 관련된 속성이 온다. 그리고 demo2.html 을 newopenhtml.html 이 있는 폴더에 만들어 줍니다. demo2.html test wi..
BOM(Browser Object Model)BOM(Browser Object Model)이란 웹브라우저의 창이나 프래임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단이다. BOM은 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어할 수 있다. 따라서 BOM에 대한 수업은 Window 객체의 프로퍼티와 메소드의 사용법을 배우는 것이라고 해도 과언이 아닐 것이다. Location 객체 하지만 location 객체를 에디터로 테스트 하기 어려운 면이 있어서 크롬을 켜고 F12 단축키를 눌러서 개발자 모드를 실행합니다. 이부분에 입력 해서 샘플 코드를 진행 하겠습니다. console.log(location.protocol, location.host, location.port, locat..
alert경고창이라고 부른다. 사용자에게 정보를 제공하거나 디버깅등의 용도로 많이 사용한다. confirm confirm('ok?') 은 yes을 누를 경우 리턴으로 true를 하고 cancle 을 누를 경우에 false 를 리턴 합니다. prompt 리턴 값으로는 입력하고 확인 버튼을 누른 값으로 리턴합니다.
Window 객체Window 객체는 모든 객체가 소속된 객체이고, 전역객체이면서, 창이나 프레임을 의미한다 전역객체Window 객체는 식별자 window를 통해서 얻을 수 있다. 또한 생략 가능하다. Window 객체의 메소드인 alert을 호출하는 방법은 아래와 같다. 전역변수 a 접근하는 방법은 아래와 같다. 객체를 만든다는 것은 결국 window 객체의 프로퍼티를 만드는 것과 같다. 예제를 통해서 알 수 있는 것은 전역변수와 함수가 사실은 window 객체의 프로퍼티와 메소드라는 것이다. 또한 모든 객체는 사실 window의 자식이라는 것도 알 수 있다. 이러한 특성을 ECMAScript[표쥰 javascript]에서는 Global 객체라고 부른다. ECMAScript의 Global 객체는 호스트 ..
Object Model Object Model 을 익힌 다는것은 java script 를 웹브라이저를 제어하기 위한 목적으로 사용됩니다. java script의 언어로 웹브라우저 의 Object 을 제어가는 것이 목적인 것이죠 . object가 추상적으로 느껴 질수 있습니다. 그이유는 직접 코드를 작성한 부분이 아니고 웹브라우져에서 지원하는 개념이기 때문에 object 속에 웹브라이저와 어떻게 연동 되어 작동 되는지 일일이 알지 못해도 java script 를 이용해 제어 할수 있도록 브라우저 회사 또는 표준화 단체에서 메뉴얼을 주고서는 사용하라고 하는것이죠. java script 를 이용하여 웹브라이저를 제어할때 쓰이는 객체는 위와 같은 구조를 보입니다. windows 는 최상위 object 이며 이 ..