웹개발_2주차_개발일지(Javascipt)

새롭게 알아낸 것!(꼭 알야하는 코드)

 

 

기능 설명

javascript :Html를 연동시켜 동작 시켜준다라고 이해
jquery : html 뼈대를 쉽게 조작 한다
fetch : 짧은 코드로 요청 보내기 받기 가능
scrip:  열고 닫기 javascript를 넣어서 사용

GET - 통상적으로 데이터 조회 요청
POST- 통상적으로 테이터 생성 변경 삭제 요청 할 때 (회원가입 회원탈퇴 비밀번호 수정)

 

 

funtion 대한 설명(이해x  직접 찾아보고 이해)

 

 

funtion 함수이다.  쉽게 풀이하면 정해진 일을 불러줘 라고 생각하면 쉽다.

alert 는 내가 넣어준 '안녕하세요' 를 실행시켜준다 라고 이해

funtion hey 라는 명칭을 줘서 연동을 시키기위해

 button onclick = "hey()" 라는 값을 준다.

여기서 onclick="hey"를 html에 button을 클릭해서

값을 불러라고 생각하면 된다.

이렇게 값이 나왔다

consol.log(' ')  

 

에러가 있는지 콘솔에서 확인하기 위해 만든 탭이다

consol.log 확인 하기

 

 

페이지에 F12 로 검사!

 

변수

 

let : 다른 값이 재할당될 수 있다.

이해하기 쉽게 나중에 다른값을 줄거야

라고 생각하면 된다.

 

const : 변치 않는 값을 갖는 변수 

 

숫자는 '' 안 붙여도 되지만 문자열은 무조건 넣어줘야된다.

let은 변수이고 'a' 명칭이다. 

 

0부터 숫자를 세어줘야한다.

ex)0 1 2 3 4

 

dictionary 란?(이해x  직접 찾아보고 이해)

 

dictionary는 말그대로 사전 우리가 사전을 보면 보통 단어가 나와 있고 그것에 대한 정의가 나온다.

파이썬의  dictionary자료형 역시 어떤 단어(Key) 와 그것에 대한 내용(Value) 로써 데이터를 저장한다.

 

사전 = {키1 : 값1, 키2 : 값2, 키3 : 값3}

사전은 이런형태로 사용 각 키(Key)에 값(Value)가 1:1 대응되는 형식이다.

하나의 키에는 하나의 값만이 대응된다.

 

Key 값은 절대로 변하지 않으며 Value 값은 변경

주의할점은 만들때 중괄호( { } )를 활용한다.

 

중요한 점은 이걸 왜 사용하지? 라는 생각을 했다. 

많은 데이터 값을 어떻게 나눌거냐 라는 생각을 했다.

필요한 정보값을 전달해주기 위해 사용한다라고 이해했다.

 

name 이란 하나의 값을 줬다

JQuery

id 값을 사용할땐 JQuery

JQuery를 사용하기 위해 id 값을 넣어야한다.

id 불러오기 $('#q1')

반복문

 

 

.fotEach(()=> 반복을 하면서 꺼내와라

조건문

 

성인입니다 라는 값이나온다.

append

리스트 형태의 Data에 마지막 하나를 추가하는 함수

강의에서의 설명은 html 값을 바꾸어준다라고 설명

값이 사과 5개나옴 그러면 위에 값을 다나오게 할려면?

반복문을 넣어 위 값을 나오게한다.

 

 

empty

값들을 정리해주자

 

 

empty라는 값을 넣어 필요한 값만 나오게한다.

Fetch

JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드

<fetch기본골격>

fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
		console.log(data)
})

ex)

날씨 api를 받아 중구에 해당하는 값을 반복하여 html.에 나타나게했다

물결란에 있는 따옴표 확인하기, 조건문에 40보다 크면 bad라는 html에 색상이 나온다. append는 색상이 바뀌도록 해준다.

 

 

자동실행
$(document).ready(function() {
}

이런식으로 넣어주면 자동으로 날씨온도가 바뀐다
$(document).ready(function() {
            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
                    console.log(data)
                    let temp = data['temp']
                    $('#temp').text(temp)
                })
        })

 

 

이해하기 어려웠던거

dictionary 

변수

funtion