mitdog의 기록장

XML(eXtensible Markup Language)태그 베이스의 마크업 언어.(HTML과 상당히 유사)문법 형식 또한 HTML과 같다. !!다만!!: 무조건 닫는 태그가 있다.(HTML은 닫는 태그가 필요 없는 것들도 있음 ex. img태그)기본 형식 // xml임을 명시(헤더) // 루트 태그( 과 같은 기능)...  장∙단점(pros and cons of XML) 장점)알기 쉽다(읽기 쉽다 사람이나 컴퓨터나)오랫동안 써왔고 그만큼 발전해서 도구가 많다.모든 일반적 데이터 표현 가능좀 표준적임단점)간단한 데이터도 복잡하게 써진다...어차피 JS가 해석해야 해서 XML DOM이 막 변형되고.. 어쩌구..최근 추세, JSON(JavaScript Object Notation)최근에는 JSON을 사용하는..

AJAX(Asynchronous JavaScript and XML)웹 서버와 데이터를 교환하는 기술 중 하나.서버(혹은 DB)에서 "데이터" 가져오기사용자가 입력한 "데이터"를 서버(혹은 DB)에 저장하기비동기적인 페이지 갱신!!웹 페이지를 전체 갱신하는 것이 아닌, "일부만!"갱신동기/비동기?[동기:] 서버에 요청을 하고, 응답이 올때까지 "다른 작업을 하지 않고 기다리는" 것[비동기:] 서버에 요청을 하고, 응답이 오기까지 "다른 작업을 하다가" 처리되면 그 작업을 이어가는 것데이터 전송 형식:1) XML2) JSON둘 중 하나로 전송한다.데이터 처리:JavaScript=> XML(JSON) 형식의 데이터가 들어온다=> 해당 데이터를 해석한다(parse)=> HTML DOM 모델을 이용하여 동적으로 ..

모듈(Module)라이브러리 같은 것.필요한 일부 기능을 js 파일로 작성해 놓은 것이다. 내장 모듈)http 모듈: 웹 서버 객체 생성url 모듈: url 주소 문자열, url 객체 상호 변환Fs 모듈: 파일 처리사용자 정의)module1.js... 모듈 호출: require()require 함수를 사용, 인자로 사용할 모듈을 문자열로 받는다.npm 설치 모듈, 내장 모듈: 이름만으로 가능ex. require('http'), require('url')사용자 정의 모듈: 상대 경로 등의 경로로ex. require('./module1')패키지여러 개의 모듈을 합쳐 놓은 것. Express 모듈http 모듈 기반, 웹 서버 동작을 더욱 편리하게 구현할 수 있도록 하는 모듈.각종 미들웨어와 라우터 제공설치(f..

https://nodejs.org/en/ 에서 LTS 버젼 download설치 완료 후, cmd 창을 키고.node -vnpm -v버젼 확인하여 정상적으로 뜨면 완료된 것.기본적으로 express 모듈, static 미들웨어 사용하여 실행해볼 수 있음.노드 실행할 폴더로 이동(거기가 서버 여는 곳이 되는거) 그 경로(디렉토리)에서 cmd창으로npm init(이후 무한 엔터.. yes 뜨면 yes 입력)-> package.json 생성모듈 설치npm install express --savenpm install serve-static --save테스트 코드: app.js 파일var express = require('express'), http = require('http');var static = requi..

도화지 태그가 html에서의 canvas.그 도화지에 그림을 그리는게 js의 각종 메소드들.Canvas도화지 태그.... canvas와 JS를 연결하여 닷(dot;.)메소드로 그린다.JS로 그리기일단 무조건 context 객체로 받아서 사용한다.var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d"); 그 다음에 사각형을 그리든, 배경을 넣든 하는 것이다. 색 꽉 채운 사각형 그리기context.fillStyle = "#00FF00"; // fill 스타일 지정 후context.fillRect(0, 0, 100, 50); // fill...(여기서는 fillRect) 사용직선 그리기context.beginP..

정규 표현식. 흔히 아는 그거다.C언어에서의 예로 들자면scanf("%[^\n]s", ..); // 공백을 포함하여 입력받기 스킬(by 정규표현식)// 저 의미는 줄바꿈(newLine)이 들어오기 전까지 입력받으라는 것이고// 그 전의 모든 것은 다 받는다는 말이다(공백도 받는다, 원랜 scanf는 공백 안받음)참고하면 좋을듯:https://velog.io/@purplew/Javascript-%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9Dhttps://regexper.com/ (정규식 만든거 확인할 수 있는 사이트)정규식(Regular Expression)형태: /pattern/modifiersmodifiers(수정자)i : 대소문자 구분 하지 않음g : 조건에 맞는 문..

이벤트 핸들러를 부착(?)하는 방법은 두 가지가 있다.이벤트 핸들러 부착하기Obtrusive Event Handlers (좋지 않은 방식)HTML 문서 내에 태그 안에 구체적으로 다는거.OK...function okayClick() {...}Attaching an Event Handler in JSJS 파일 안에서 붙이기.이러면 HTML 페이지에는 event handler가 하나도 안보일 수가 있음.그런데 그냥 달 수가 없음.var button1 = document.getElementById("ok"); // it's return null...button1.onclick = okayClick; 왜냐하면, 보통 js파일은 head다가 넣는게 정석이기 때문.헤드에서 js파일을 읽으면 아직 body가 로드되기..

기본적으로 흐름은사용자가 무언가를 함(혹은 브라우저가)이벤트가 발생이벤트에 따른 함수 실행변화Timing Event(시간 주기를 이용한 이벤트)(대부분은 window. 생략합니다!!)window.setTimeout(함수, 밀리sec)적어놓은 밀리sec 이후에 함수 한 번 실행.window.setInterval(함수, 밀리sec)적어놓은 밀리sec 주기로 함수 반복 실행.window.clearTimeout(setTimeout 담긴 변수)setTimeout()의 짝궁.setTimeout() 함수 실행 중지. (밀리sec 되기 전 실행 아예 안시키도록)window.clearInterval(setInterval 담긴 변수)setInterval()의 짝궁.setTimeout() 함수 실행 중지. (돌아가는 중이던..

BOM(Browser Object Model)브라우저 객체 모델. DOM이 Document(웹 페이지 문서)에 관한 객체였다면,BOM은 Browser에 관한 객체인 것이다.(이 글을 쓰는 지금도 마침 봄이다ㅋ)최상위 : window나머진 그 아래 동등.Window Methodswindow.open() 창 열기window.close() 창 닫기window.moveTo() 창 옮기기window.resizeTo() 창 크기 변경하기window.onload() 로드가 되었을 때(head, body....)window.unload() 페이지 벗어날 때Example) 새로운 윈도우(창) 열기 // 인자: url, 새창에 열지 새탭에 열지(기본값 새창), 창 크기, 상태 Screen Object : 모니터..

DOM이 무엇인지는 다음을 참고하시고 : HTML에서의 DOM 구조요소 관계중요한 것은 DOM이 hierachical(계층적)이라는 것이다.계층적임의 예시는 다음을 보자.This is a paragraph of text with alink.를 DOM 구조를 나타내면,자식들은 순서대로 first, second... 가 되고자식들의 부모는 parentNode로 접근이 가능하며자식들 끼리는 nextSilbing, previousSibling으로 접근이 가능하다.요소 접근하기document.getElementById(id)html페이지에서 유일한 id를 찾아서 그것의 DOM을 반환한다.!주의! : getElement"S"임에 주의!! id는 유일해서 Element이지만 얘네는 여러개 가능해서 복수형임!!docu..