2주차
Javascript 는 웹을 움직이게 하는 코드
jQuery는 html 뼈대를 선택해서 쉽게 조작( jQuery도 남들이 만든 코드모음, 라이브러리)
Fetch는 짧은 코드로 요청을 보내고 받아올 수 있다 →
지금 강의에서는 url에서 데이터를 받아와 JSON 형태로 저장하는 것으로 활용되었다
Fetch에 대해서는 찾아봤지만 아직 내 수준에서 이해하기 힘들었다
function 함수, 정해진 일을 반복하는 장치
...
<script>
function hey(){
alert('안녕')
}
</script>
</head>
...
<button onclick="hey()">영화 기록하기</button>
...
영화기록하기 버튼을 (onclick)클릭하면 hey()라는 함수를 불러와 실행시키고
그래서 안녕 이라는 문구가 나오게 된다 이런 움직임을 주는게 Javascript
onclick이 HTML과 Javascript 를 연결해주는 어떤 다리 역할
당연히 이 외에도 많은 특정 단어가 있다
consol.log() 개발자 도구로 미리 확인해볼 수 있음
프로그래밍 언어도 사람이 필요해서 만든 것이고 사람이 사용하는 언어 습관이 있다
프로그래밍에서 숫자는 대부분 0부터 시작이다
변수 : 값을 저장하는 박스
배열 : […] 순서를 지켜서 값을 가지고 있는 형태의 자료형 → 순서로 값에 접근
객체 : {…} 키(key)-밸류(값)(value) 형식으로 된 값의 묶음 형태의 자료형→ 키로 값에 접근
리스트와 딕셔너리의 중첩도 가능하다 [ {…} ]
언제 {}, [], ‘… ’, “…” 이런 것들의 사용이 다른 이유는 특정 목적보다 언어 혹은 함수 개발자들이 설정한 것이기에 이 현상을 그냥 받아들이고 익숙해져야지 모두 외우기는 힘들다
document.getElementById("element").style.display = "none"; // JavaScript
$('#element').hide(); // jQuery
// $(’#id값’).메소드()
위에 두 개가 같은 결과를 가진다
그래서 jQuery 란 HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것.
남이 만든 코드이기에 사용 전에 사용하기 위한 코드를 추가해줘야한다
$(’#id값’).메소드() 기본 문법
메소드와 사용법을 필요에 따라 찾아서 사용한다
1주차 css에서 class 라는 가리키기 위한 이름표를,
2주차 jQuery에서 id 라는 이름표를 사용한다
반복문은 요소들을 반복해서 써주는 것
.append()(→ 어떤 데이터를 받아와 붙여주는 메소드)와 자주 같이 사용됨
조건문은 조건에 맞춰서 다르게 실행하는 것
JSON : 서버가 클라이언트에 데이터를 주는 방식 중 하나 데이터를 객체 형태로 주는 것
GET : 클라이언트가 서버에 요청하는 방식 중 하나 통상적으로 데이터를 요청할 때 많이 사용
2주차 과제에서 실시간 날씨를 추가하는데
$('#temp').append(data['temp'])로 하면
기존에 입력되어있던 20에 뒤에 내가 추가한 값이 붙어서 나왔다
$('#temp').text(data['temp']) 그래서 힌트에서처럼 .text()로 바꿨는데
기존 입력되어있던 값은 무시되고 내가 입력한 값만 출력되었다
답안에서는
let temp = data['temp']
$('#temp').text(tepm)
이렇게 처리하던데
불필요한 변수 선언을 할 필요 없다 생각되어
$('#temp').text(data['temp']) 이렇게 처리하였고
$('#temp').append(data['temp'])로도 기존에 20을 지우고
태그 사이에 아무것도 없는 상태에서 처리하면
내가 추가한 값만 출력되어 실행 자체는 문제가 없어보였지만
가독성은 떨어질 수 있을 것 같다그런데 이건 강의를 다시 들으니까 이렇게 하지
처음에는
let weather = data['temp']
//변수를 만들고 내가 필요한 값을 입력한다
let temp_html = `${weather}`
//바꿔야하는 부분이 어딘지 찾고 변수에 저장
//처음에는 <div>현재 서울의 날씨 : <span id="temp">${weather}</span>도</div>
//위와 같이 모든 부분을 다 복사해와 html로 만들었는데 실행시켜보고 불필요한 부분을 지웠다
$('#temp').text(temp_html)
//실행이 되지 않아 뭐가 문제인지 계속 보다보니 #을 자주 빼먹는다 잊지 말자
//''도 뺴먹지 말자이렇게 실수도 많이 하고 이런 실수를 반복하지 않기 위해 이를 주석으로 남겼다