WakaraNai

서버로부터 받은 데이터를 화면에 반영해야할 때, HTML 형태는 그대로인데, 데이터만 변경되는 경우에 사용 ex) sns 또는 게시판에 댓글을 올린 경우 HTML Template 반복적인 HTML 부분을 template로 만들어두고, 서버에서 온 데이터(주로 JSON)를 결합해서, 화면에 추가하는 작업 .replace() 그리고 method chaining replace()를 계속해서 연결하여 사용 var data = { title : "hello", content : "lorem dkfief", price : 2000 }; var html = "{title}{content}{price}"; var resultHTML = html.replace("{title}", data.title) .replace("..

Tab UI를 위한 기초 HTML과 CSS 공사 Tab UI Test crong pororo koko doto hello jk Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus magni eos expedita iure ducimus, neque sint? 자바스크립트로 탭 동작하기 추가하면 클릭한 탭이 무엇인지 출력됨 AJAX로 클릭한 순간 서버에서 데이터 가져오기 데이터 json.txt [ { "name" : "crong", "favorites" : ["golf", "facebook"] }, { "name" : "pororo", "favorites" : ["soccer", "apple"] }, { "name" : "koko", ..

세로로 나열되는 block 요소를 가로로 배치하고 싶을 때 사용 float한 박스 요소에 가로 사이즈를 지정해야만 적용된다 heading과 inline 요소는 가로 사이즈를 지정하지 않아도 레이아웃이 유지된다 속성값 left : 요소를 왼쪽에 배치. 나머지는 그 주변을 흐르도록 함 보리건빵 보리분말을 함유한 건강건빵으로 입안 가득히 퍼지는 구수한 맛을 느끼시며 드실 수 있는 건빵입니다. right : 요소를 오른쪽에 배치. 나머지는 그 주변을 흐르도록 body { text-align: justify; } .float { float: right; width: 40px; margin: 10px; text-align: center; background-color: burlywood; }​ float된 요소와 ..

이벤트 등록을 하는 경우 각각의 항목에 클릭 시 특정 이벤트가 발생해야 할 때 addEventListner로 이벤트 등록 예1) 4개의 li 태그에 이벤트 등록하기 var log = document.querySelector(".log"); var lists = document.querySelectorAll("ul > li"); for(var i=0,len=lists.length; i < len; i++) { lists[i].addEventListener("click", function(evt) { log.innerHTML = "clicked" + evt.currentTarget.firstElementChild.src; }); } 만약 동적으로 새로운 li 태그가 추가된다면? 추가된 엘리먼트에도 이벤트를 ..

1. JavaScript파일 구성 Javascript 코드가 많지 않다면 한 페이지에 모두 표현하는 것도 좋습니다. 그렇지 않다면 의미에 맞게 구분하는 방법이 더 좋습니다. 적은 양의 코드면 HTML 안에 넣어서 더 빨리 가동되게 해줍니다. HTTP 요청은 CSS에 별도로 요청 없이 화면에 보일 수 있으니깐요. 2. HTML안에 JavaScript 구성하기 CSS는 head태그 안에 상단에 위치합니다. JavaScript는 body 태그가 닫히기 전에 소스파일 간 의존성을 이해해서 순서대로 배치합니다. 이미 선언된 element에 대해서만 js에서 인식할 수 있음 그래서 script를 html 하단에 적는 경우가 많음 Hello World DomContentLoaded element는 모두 로드 되었으나..

애니메이션 element가 좌우로 움직인다거나 사라질 때 점점 작아지면서 사라지는 것, 스크롤과 브라우저의 이동에 반응하여 브라우저가 다시 렌더링하는 과정 끊김없이 부드럽게 움직이는 방법을 고민하는 과정 CSS3의 transition과 transform 속성을 사용해서 구현 가능 js보다 더 빠름. 특히 모바일 웹에서는 CSS가 더욱 빠름 정리하면 간단하고 규칙적인 것 -> css 세말한 조작이 요하는 것 -> js FPS frame per second 초당 정지 화면 수 매끄러운 애니메이션은 보통 60fps JS 애니메이션 setInterval( 콜백함수, 실행간격) 개발자도구의 console 탭에서 실행해보기 //const interval = window.setInterval(()=> { // con..

AJAX 새로고침 없이 데이터 얻어오기 AJAX와 비동기 addEventListener의 콜백함수는 open(), send()보다 더 늦게 실행됨 그 이유는 비동기로 실행되어, 이벤큐 큐에 보관되다가 load 이벤트가 발생하면(서버로부터 데이터를 브라우저가 받으면 그 때 call stack에 실행되고 있는 함수가 없어서 비어있다면 stack에 올라와서 실행됨 function ajax() { var oReq = new XMLHttpRequest(); oReq.addEventListener("load", function() { console.log(this.responseText); }); oReq.open("GET", "http://www.example.org/example.txt"); oReq.send(..

화면의 UI를 넣었다 뺐다 지원해주는 DOM API 1. document. ex) addEventListener(), querySelector(), getElementById()... createAttribute(), createElement(), createTextNode()... https://www.w3schools.com/jsref/dom_obj_document.asp HTML DOM Document Objects The HTML DOM Document Object The Document Object When an HTML document is loaded into a web browser, it becomes a document object. The document object is the ro..

AJAX Ascynchronous Javascript And XML 필요한 부분만 불러와 사용할 수 있도록 해준다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 새로고침하지 않고 일부만 로드(load)하는 기법 즉, 네트워크 기술로, 자바스크립트로 클라이언트에서 서버에 데이터를 요청하는 것이다. AJAX가 로드할 수 있는 데이터는 JSON, HTML, DOM, JavaScript, XMLHttpRequest 등이 있다. JSON은 자바스크립트의 객체와 실제적으로 같다. AJAX를 사용하는 이유 무언가를 부르기만 한다거나 데이터를 조회하고 싶을 때 페이지 전체를 새로고침하지 않기 위해 사용한다. 기본적으로 HTTP 프로토콜은 요청을 보내고 응답을 받으면 연결이 끊기게 되어있다. 그래서..

Event 화면 크기 조절, 마우스 스크롤, 마우스 드래그 앤 드랍, 선택 등등 HTML element 별로 어떤 이벤트가 발생했을 때 특정 행위를 하고 싶다면, 대상 element를 찾아서 특정 행위를 등록하면 된다. Event 등록 - addEventListener element.addEventListener( 이벤트 종류, 특정행위(함수) ) 이 때 적은 함수는 Event Handler 또는 Event Listener라고 한다. 이 함수들은 이벤트가 발생할 때 실행되므로 콜백함수다. var el = document.querySelector(".outside"); el.addEventListener("click", function(){ //do something.. }, false); 이벤트 종류는 ..