2주차

1. spartaflix 완성  (코드 스니펫)

     

부트스트랩 CDN

•  jumbotron 

    배경 이미지와 텍스트

• Headers

   사이트의 상단부, 로고를 클릭하여 홈화면으로 돌아가는 기능 탑재

전체 레이아웃

2. Javascript

웹에서 동작하는 프로그래밍 표준 언어

   지정 후 반복 조건(forEach) (if) 연산(split) 색출 등이 가능

f12>console 에서 확인가능

 

3. JQuery

Javascript를 미리 더 쉽게 작성해둔 것. 라이브러리!

 

JQuery  CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

 

$('#ID') 로 위치지정.함수실행

text checkresult 등의 함수 >function

백틱 '' >HTML요소를 통째로 넣을 때 묶어주는 기호

script

let temp_html = `<p>사과</p>`

원래 출력값에 사과가 5번 붙음. forEach로 지정된 a는 ${} 기호로 묶음

통째로 넣을 html 요소를 ${'#id'} 로 골라주시고 .연산을 넣어주세요!

 

• 이름. 나이

이름과 나이의 데이터를 받았다

함수는 그대로 function checkresult 를 사용한다

이번엔 q2의 응답으로 위치를 지정한다. 우선 해당 위치의 기존값을 지운다

참조값의 그룹이 fruits 가 아닌 peple 임을 알려준다.

각각의 집합 원소를 a 로 지정하고 개별 a를 임시html 로 지정한다. 

원하는 위치에 임시html을 붙혀넣는다

a 항목들의 값을 각각 name 과 age 에 배치함

---

오류노트

<script>

    function checkResult() {

        let people = [

            { 'name': '서영', 'age': 24 },

            { 'name': '현아', 'age': 30 },

            { 'name': '영환', 'age': 12 },

            { 'name': '서연', 'age': 15 },

            { 'name': '지용', 'age': 18 },

            { 'name': '예지', 'age': 36 }

        ]

       

            $('#q2').empty()

        people.forEach((a) => {

                let temp_html = `<p>${a}</p>`

                $('#q2').append(temp_html)

            })

    }

</script>

 

이상태로 출력하려 하니 안되서 이것저것 해봤다.

결론은 단순 let ID = ['사과','배'] 와 다르게 각 요소들이 {}로 묶인 하나의 집합으로 인식된다.

 text 가 아닌 다른 성질로 읽히는 것이다. 이건 파이썬이랑 유사하다

따라서 a 값이 그대로 출력될 수 없으므로/'{ 'name': '서영', 'age': 24}' 로 괄호 밖에 따옴표를 줘도 실행안된다

오류가 생긴다.

답 :<p>${a.name}: ${a.age}</p> 로 이름, 나이 만 인쇄하기

따라서 name 과 age 로 색출한 값만 인쇄할 수 있다.

text 의 '' 를 숫자는 안붙히는 것도 보인다