ajax에 대해 배웠다. 정말... 어렵다. 다른 것과 다 엮여 있어서 더 어렵게 느껴지는 것 같다. Ajax는 기본적으로 백엔드에서 데이터를 불러와 사용할 수 있게 해준다. 이를 이용하기 위해서는 테스트 서버를 구축해야 한다. 명령 프롬프트를 열어서 다음과 같은 명령어로 설치를 한다. npm install -g json-server -g는 global의 줄임말이다. 이 옵션이 적용도면, 현재 컴퓨터의 사용자 계정에 대해 전역으로 사용할 수 있도록 설치된다. 기본적으로 이 서버를 사용하기 위해서는 JSON 데이터가 필요하다. JSON 파일을 만들고, 다음과 같이 가동한다. json-server --watch 데이터파일경로 --port 포트숫자 포트숫자는 따로 지정하지 않으면 기본적으로 3000번을 사용한..
쿠키와 스토리지에 대해 배웠다. 쿠키는 알고 있었지만 스토리지는 처음 들어봤다. 쿠키는 이미 개념을 대충 알고 있던 거였는데도 어려웠다... 쿠키 사용자의 웹 브라우저에 저장되는 텍스트 데이터이다. 모든 사용자에게 각각의 쿠키를 저장할 수 있으므로 개인화 기능을 구현하는 데 활용될 수 있다. 정보를 저장하는 방식은 "이름=값; 유효시간; 유효경로; 유효도메인"으로 설정한다. 이름과 값은 모두 URLEncoding 처리 되어야 한다. (영어와 숫자는 제외한다.) 유효시간은 초단위로 기록한다. 설정되지 않으면 브라우저를 닫기 전까지 데이터를 유지한다. 0이라면 즉시 데이터를 삭제한다. 0보다 큰 숫자라면 해당 초가 지나기 전까지는 브라우저를 재시작하더라도 데이터가 유지된다. 유효경로는 해당 쿠키값을 읽고 쓸..
오늘은 자바스크립트로 HTML을 제어하는 것이 아닌, 화면 그 자체를 제어하는 것을 배웠다. 다시 말해 브라우저 관련 기능이다. window 내장 객체 window 내장 객체는 브라우저의 새 창, 팝업 열기/닫기 기능을 제공한다. // a.html을 새 창(새 탭)으로 열기 window.open("a.html"); // a.html을 팝업으로 열기. window.open("URL", "창이름", "옵션"); // width와 height로 팝업창의 가로 세로를 지정. 나머지 요소는 yes, no로 값을 지정. // location의 경우 피싱 사이트 방지를 위해서 동작하지 않음. window.open("a.html", "창이름", "width=500, height=300, scrollbars=no, to..
오늘은 form 요소에 들어갈 수 있는 input, select 등을 자바스크립트로 가지고 와 제어하는 방법을 배웠다. form과 input에 접근할 때는 querySelector을 사용해도 되고, name 값이 있다면 이를 사용해 접근할 수도 있다. 접근하는 방법은 다음과 같다. // form의 name 속성값이 form_name, 하위 input의 name 속성값이 input_name일 경우 const myform = document.form_name; const myinput = myform.input_name; const myinput = document.form_name.input_name; // 축약 가능, 위와 같은 결과. 이렇게 input 요소를 얻었다면 값을 처리할 수 있게 된다. con..
오늘은 주어진 데이터를 추출하고 제어해서 그것을 가지고 차트를 만드는 문제를 풀었다. 그런데 잘 안 됐다... 내가 미처 생각하지 못한 부분을 적어둔다. 먼저 제시된 데이터 값을 간략하게 적어둔다. 어느 학과의 학생 정보를 표현하는 JSON 배열이었다. const student = { "id": 학번, "name": 이름, "grade": 학년, "birthdate": 생년월일, "height": 키, "weight": 몸무게, "deptno": 소속학과 }; 이러한 형태로 값이 주어진 데이터들이 많이 있었다. 이 JSON 파일을 HTML 파일에 참조하고, 이걸 토대로 조건에 맞춰 차트를 그려내면 되는 문제였다. 조건들을 보자. 1. 학과별 학생 수를 세로 막대 그래프로 표현하시오. 이 문제를 위해 학과..
오늘은 HTML 태그를 생성하는 것과 HTML 내부에서 자바스크립트 라이브러리를 사용하는 것을 배웠다. HTML 태그 생성하기 자바스크립트로 HTML을 제어하는 방법으로, 직접 HTML 태그를 생성하여 넣어주는 것이 있다. 바로 살펴보자. appendChild insertBefore1 insertBefore2 우리는 비어있는 ul태그에 새로운 태그를 삽입할 예정이다. 스크립트 쪽을 보자. 태그가 추가될 객체를 만든다. 예시에서는 list라는 이름으로 id값이 list인 ul태그를 지정했다. 그리고 comment라는 변수에 input 태그도 지정한다. getItem이라는 함수를 만든다. 이것은 li 태그를 생성하여 리턴하는 함수이다. 태그를 생성하는 것은 createElement를 이용하여 만들 수 있다...
추석 동안 쉬고 왔더니 어쩐지 머리가 안 돌아가는 기분이다. 그래도 열심히 해야겠지... 자바스크립트에서는 HTML의 부모 요소, 조상 요소, 자식 요소를 찾아서 제어할 수 있다. 바로 살펴보자. 부모, 조상 요소 선택자.parent.Element는 그 선택자의 부모요소를 조회한다. 위의 예제에서는 class가 list-item인 li태그의 부모요소를 조회했으므로 변수 parent는 부모요소인 ul 태그를 가리키게 된다. 선택자.closest("선택자")는 상위 요소들 중 주어진 선택자를 충족하는 가장 가까운 요소를 검색한다. 위의 예제에서 변수 parents는 li 태그의 상위 요소들 중 선택자가 container인 div 태그를 가리킨다. 자식 요소 자식 요소를 받을 수 있는 건 두 가지가 있다. c..
자바스크립트를 이용하여 본격적으로 HTML 요소를 제어하는 방법을 배웠다. 다른 웹 사이트에서 본 적 있는 기능들을 직접 구현할 수 있게 되는 것 같아서 조금 신나는 것 같다. 기본적으로 HTML 태그를 Element, 값이 있는 속성을 Attribute, 값이 없는 속성을 Property라고 한다. 이제 이러한 속성을 제어해보자. HTML 속성 제어 HTML 태그의 속성, 예를 들면 img 태그의 src, a태그의 href 등을 제어할 수 있다. 방법은 다음과 같다. const mytag = document.querySelector("..."); mytag.hasAttribute(속성이름); // 해당하는 속성의 존재를 확인함. mytag.getAttribute(속성이름); // 해당하는 속성값을 가져..
이벤트는 생각보다 재밌었다. 소비자가 무언가 행동을 했을 때 거기에 반응하게 만든다는 것이 재밌는 것 같다. 내가 할 수 있는 것에는 한계가 있고, 이미 시중에 나와 있는 게 많겠지만 소비자가 놀랄 만한 페이지를 만들어보고 싶다. 이벤트란? 이벤트란, 프로그램이 겪는 어떠한 사건을 말한다. 그것은 사용자가 무언가를 클릭하거나, 마우스를 올리거나, 키보드의 키를 누르거나, 스크롤을 올리거나 내리는 등, 혹은 페이지가 로딩된 직후나 페이지가 종료되기 직전처럼, 무언가의 동작이 실행되는 시점이다. 자바스크립트가 제공하는 브라우저 관련 기능에 다양한 이벤트를 감지하는 기능이 있다. 이벤트를 처리하는 방법 이벤트를 처리하는 방법에는 크게 두 가지가 있다. 첫 번째는 이벤트 리스너 방법이다. 어떤 이벤트가 발생하기..
오늘부터는 웹 페이지의 뼈대가 되는 HTML, CSS와 함께 Javascript를 사용하는 법을 배운다. 기초는 배웠으나 이제부터 응용이므로 점점 더 어려워질 예정일 것 같다. 자바스크립트 소스코드의 위치 자바스크립트의 소스코드는 HTML의 어느 위치에나 올 수 있다. 대체로 많이 사용하는 위치는 이렇게 할 경우, a라는 변수는 ID값이 hello인 div 태그 객체가 된다. 이 객체에 innerHTML을 사용하여 태그 사이에 "Hello World"를 넣는다. 그럼 이것을 웹 브라우저에 출력했을 때, Hello World를 한 것과 같은 결과가 나온다. 웹 브라우저는 이렇게 인식한다. 위의 항목들을 모두 사용한 예시를 들어보자. e11 객체는 태그 이름이 "p"인 것을 모두 받아서 객체로 만든다. 컬렉..