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 = '<li>'+array[i]+'</li>'
                                                  i++;

                                                  }

   *여기까지하면 loop문이 끝나는 31줄을 기준으로 30줄까지는

<li>html</li>

<li>css</li>

<li>javascript</li>

<li>ajax</li>

가 순차적으로 출력되고

32줄에서는 

마지막으로 출력된 <li>ajax</li>가 출력된다

 

4. 아래와 같이 var k ="; 를 변수로 주고

loop문 안에 k = k+ lists 를 주게 되면

콘솔창과 같이 반복할때마다 전의 결과값에 더한 값을 출력하기때문에 loop문이 끝난 후에도 모든 원소들을 가져올 수 있다

i = 0 처럼 상수의 초기값을 0으로 주듯 문자열의 초기값을 ''으로 주는 것이라고 이해하자

5. console창에서 보이듯 마지막 원소인 ajax가 실행될때는 줄바꿈이 되어 있는데 이 오류를 잡기 위해 .trim() 이라는 함수를 사용한다 .trim()은 해당 코드열의 앞 뒤 공백을 없애주는 역할을 한다

 

6. loop문을 돌릴때마다 <li><a href="array[i]" onclick="fetchPage('array[i]')">array[i]</a></li>

를 html로 꺼내고 싶다

 

7. loop문이 JS태그 안에 있는 JS의 언어이기 때문에(=console.log) 위 코드를 문자열 (' ')로 인식을 주어야 html에서 위 코드가 출력된다 

일반적으로는 var YB = 'asd'

                  console.log('str1'+YB+'str2')  //출력 str1asdstr2
을 사용하지만

 

`(esc 아래 키)를 이용하면 var YB = 'asd'
                 console.log(`str1${YB}str2`) //출력  str1asdstr2

로 쓸수 있다

 

이는   ` `로 하나의 문자열을 한번에 인식시키고 그 안에서 변수만을 따로 인식할 수 있게 해준다

 

` `(벡틱) = 템플릿 리터럴(template literals)

참고 : http://hong.adfeel.info/frontend/%ED%85%9C%ED%94%8C%EB%A6%BF-%EB%A6%AC%ED%84%B0%EB%9F%B4template-literals/

 

 

*\(역슬래쉬)' or \"는  '와 "를 구분자가 아닌 그냥 문자자체의 ' "로 인식하도록 만들어 준다