WebApp/JavaScript (20) 썸네일형 리스트형 ajax - data와 logic의 분리 2 1. list1 파일의 text는 html css javascript ajax 이다 2. 위 text를 배열로 만들어라 >> var array = text.split(" ") 3. 배열의 원소들을 전부 가져와라 >> var i = 0 while(i < array.length){ var lists = ''+array[i]+'' i++; } *여기까지하면 loop문이 끝나는 31줄을 기준으로 30줄까지는 html css javascript ajax 가 순차적으로 출력되고 32줄에서는 마지막으로 출력된 ajax가 출력된다 4. 아래와 같이 var k ="; 를 변수로 주고 loop문 안에 k = k+ lists 를 주게 되면 콘솔창과 같이 반복할때마다 전의 결과값에 더한 값을 출력하기때문에 loop문이 끝난 .. ajax- data와 logic의 분리 ajax- hash 1. hash(#) bang(!) ajax는 하나의 페이지에 모든것을 표현해주기때문에 단점이 존재한다 목표 : 순수한 링크를 주고 싶다, 주소가 페이지별로 달라지게하여 주소를 공유하고 싶다 ,그 주소로 들어왔을때 초기페이지를 원하는 페이지로 로드하고 싶다 이때 사용하는 것이 hash방식 페이지 안에서 특정한 부분으로 접근할 수 있다(북마크 기능) 예를 들어 해쉬방식으로 링크를 주면 그 링크를 클릭했을때 현재 존재하는 페이지 안에서 움직인다 웨 예제와 같이 fetch와 hash를 결합하면 hash값을 준 주소로 들어갔을때 아래예제와 같이 hash값에 해당하는 fetchPage를 불러오게 할 수 있다. *hash(#) bang(!)의 !는 단지 특별한기능을 구분할때 관용적으로 쓴다 단점 검색엔진 최적화가 안.. ajax2 ajax1 1. AjAX(= single-page application) AJAX는 Asynchronous JavaScript and XML의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다 쉽게 말해 웹브라우져에서 자바스크립트를 이용해서 웹서버에 접속하고 정보를 가져오는것으로 하나의 기본적인 코드의 구조를 대상으로, 바뀔수 있는 부분과 고정적인 부분을 구분하여 바뀔 수 있는 부분만 파일을 분리 시켜 ajax를 사용하여 서버로 부터 동적으로 가져오게 하여 폭팔적인 생산성을 주는 것이다 따라서 각각의 페이지마다 동일한 html코드를 가지고 있을 필요가 없다 + 페이지를 전환할때마다 모든 파일을 다운로드 받는 것과 변경된 부분만 다운로드 받는 것의 차이이다 리로드를 하지 않고 웹브.. JavaScript의 이해 - library VS framework 1.library VS framework 두가지는 다른사람의 도움을 받아 소프트웨어를 만든다는 면에서 비슷하다 library는 도서관이다 무언가가 정리정돈 되어 있으며 내가 만들고자하는 프로그램이 필요한 부품들이 되는 소프트웨어를 잘 정리정돈 해 놓아 재사용하기 쉽도록 모아져 있는 곳이다. 내가만들고 있는 프로그램의 부품을 가져오는느낌, 땡겨오는 느낌 framework는 우리가 만들고자 하는 것이 있을때 그 만들고자 하는 것이 무언인가 에 따라서 에를 들어 게임이냐 웹이냐 채팅이냐등 그것을 만들때 공통적인 부분도 있고 다른부분도 있을텐데 공통적인부분을 프레임워크로 두고 달라지는 부분만 수정할때 많이 쓰게되어 그런 것들이 모여있는 곳이다. 우리가 만들고자 하는것을 첨부터 끝까지 만들게 하는게 아닌 반제품을.. JavaScript의 이해- 리펙토링2(파일분리) 1.파일로쪼개기 좌측에 본래 script tag 안에 있던 것을 로 대체하고 colors.js 파일을 만들어서 본래 있던 코드를 넣어준다 *이때 js파일에는 script tag를 쓰지 않는다 *css는 XX.css파일을 만들고 로 연결시켜준다 JavaScript의 이해- 리펙토링2 *Body객체에서 마지막 변수자리인 color를 'color'로 작성했다가 오랜시간 낭패를 봤다.. 주의하도록하자 *디버깅: 20번째 줄의 'powderblue' 를 변수인 color로 바꿔야 한다 *위 와 같이 while문법을 for문법으로 바꿔도 됌 이전 1 2 3 다음
