프로그래밍 첫걸음 시작하기 : 프로그래밍 기초 - 4주차

<프롤로그>
4주차는 JavaScript를 통해 웹사이트에 움직임을 넣어주는 걸 배웠다.
이번 포스팅은 JavaScript 강의를 들으면서 헷갈리거나 이해가 필요했던 부분, 실습을 강의와 함께 진행하면서 이해가 힘들었던 부분에 대해 쓸 것이다.

<시작>
1. append 함수

• 어떠한 콘텐츠를 선택된 요소 내부에 삽입

  • 즉, 생성되어 있는 spanElement 라는 요소가 있다면, 그 요소에 '노드' 나 '문자열' 등을 html의 어떠한 요소 안에 삽입할 수 있다.

  var spanElement = document.createElement("span");
   spanElement.append("안녕하세요.");
   document.querySelector("li").append(spanElement);
  // 그것을 코드로 나타내면 위와 같다.

2. createElement()

• () 안에 어떠한 이름의 요소를 생성하겠다는 명령어

  • itsme 라는 이름의 요소를 생성

   var createElement("itsme");

3. querySelector

• 입력한 선택자와 일치하는 문서 내의 요소를 반환하는 명령어

  • 맨 처음의 예시에서 볼 수 있듯이 만들어 둔 자바스크립트 요소를 불러와 html의 li에 안녕하세요 라는 spanElement를 나타내 주는 것이다.

  spanElement.append("안녕하세요.");
  document.querySelector("li").append(spanElement);

4. forEach

• 주어진 함수를 배열 요소 각각에 대해 실행

  • JS에서 forEach로 a,b,c 각각에 요소에 주어진 함수를 실행해 주는 것이다.

  var sortButtons = document.querySelectorAll("#sorts ul");
  // sortButtons 라는 요소를 생성하고 sorts ul에 반환해줄 것
  sortButtons.forEach(function (sortButton){//중략}
  // 반환해줄 요소 각각에 모두 실행해줄 것

5. 마지막으로 단순한 오타였지만 1시간을 헤매게 만든 친구 소개

• 실습 과제에서 data.js란 파일이 있었는데 그거까지 보는 생각을 하지 못한 채 1시간을 해멨다.

  • data.js 파일에 like밖에 없는데 바보같이 다른 곳에서 이름으로 지정해준 likes를 적은거임...
    
  • 그래서 오타를 수정해주니 웹사이트에 표시하려는 사진이 그제서야 잘 나왔다. 저작권 문제로 더 자세하게 올릴 수 없어서 아쉽다 ㅠㅠ