Nomad Coders33 [JavaScript] 크롬 앱 만들기: Weather 1) 현재 위치 확인2) https://openweathermap.org/ 에서 API 받아오기 3) fetch로 브라우저에 정보 보내기 fetch()네트워크 요청을 수행하기 위해 사용하는 최신 API Promise를 반환 fetch()가 서버에 GET 요청 -> 서버 응답 -> JSON으로 파싱 2024. 9. 11. [JavaScript] 크롬 앱 만들기: To Do List JSON.stringify()JavaScript 객체나 array를 문자열로 변환 JSON.parse()문자열을 JavaScript 객체로 변환 array 안에 있는 item에 대해 각각 function을 실행할 수 있다 JavaScript 객체(Object)'key-value pair'로 구성된 데이터 구조 arrow function filter()array 내의 요소를 조건에 따라 필터링하여 새로운 array를 반환 ex) function myFilter(item){return item !== 3} : 아이템이 3이 아니면 true를 반환(3이 아니면 array에 그대로 남겨두고 3이면 제외함) filter를 이용하여 ToDoList 각 항목의 해당 id를 제외하고 array를 만들어.. 2024. 9. 11. [JavaScript] 크롬 앱 만들기: Quotes and Backgrounds 랜덤 이미지를 출력하는 작업은 html에서 할 수 없다JavaScript에서 이미지를 만들고 이걸 html에 추가해야! 2024. 9. 10. [JavaScript] 크롬 앱 만들기: CLOCK setInterval()일정한 시간 간격마다 함수를 반복적으로 실행(주기적인 작업) ex) 타이머, 주가 업데이트 등 setTimeout()일정 시간 후에 어떤 동작을 수행할 때(특정 시간 후 한 번만 함수를 실행하도록 예약) ex) 페이지가 로드된 후 몇 초 뒤 경고메세지 보내기 padStart()문자열이 두 자리 수가 되도록 하는 메서드 ex) 2:12 -> 02:12 2024. 9. 10. [JavaScript] 크롬 앱 만들기: LOGIN addEventListener addEventListener 안에 있는 함수는 우리가 직접 실행하지 X 그 이벤트가 발생했을 때 브라우저가 그 함수를 실행 preventDefault()이벤트의 기본 동작을 막기 위한 메서드해당 이벤트의 기본 동작이 실행되지 않도록 함 이벤트 리스너 안에서 사용(원하는 대로 브라우저의 동작을 제어) ex) 폼이 submit 될 때마다(form의 기본 동작은 submit) 페이지가 새로고침 되지 않도록 함 localStorageJavaScript에서 제공하는 웹 스토리지 사용자 브라우저에 데이터를 영구적으로 저장(재부팅해도 사라지지않음) & 나중에 가져다 쓸 수 있음 'Inspect > 애플리케이션 > 로컬스토리지'에서 확인 가능 2024. 9. 10. [JavaScript] JavaScript on the Browser HTML은 접착제와 같음: CSS, JavaScript를 가져옴 1. document에서 elements를 가지고 올 수 있다2. document의 항목들을 변경할 수 있다 JavaScript에서 HTML 항목을 가져와 사용하는 방법 querySelector: HTML 문서에서 특정한 CSS selector에 해당하는 첫 번째 요소를 가져오는 메서드 CSS selector를 검색하여 가져온다 Event Listener : 특정 이벤트(ex. 버튼을 클릭)가 발생할 때 실행되는 함수 1) Find the element2) Listen for the event 3) React to the event const title = document.querySelector("div.hello:first-c.. 2024. 9. 9. 이전 1 2 3 4 5 6 다음
