JS (26) 썸네일형 리스트형 JS에서 HTML element style - className 변경하기 어제는 JS에서 HTML의 요소들을 가져오고 수정하는 기본적인 방법을 공부했다. 오늘은 JS에서 직접 스타일을 주지 않고, css에 정의된 클래스들을 사용해서 HTML의 element들을 만져봤다. 1. HTML에서 사용할 css파일을 명시해준다. [index.html] TEST 2. css에 사용할 클래스들을 정의해준다. [index.css] .title { color: blue; } .title.clicked { color: tomato; font-size: 20px; } 3. JS에서 변경하고자 하는 요소의 클래스 이름을 바꿔준다. [index.js] const title = document.querySelector('.title'); function handleTitleClick(){ const .. JS에서 HTML 가져오기 JS의 기본적인 문법들을 훑어봤다. 오늘은 JS에서 HTML의 요소들을 어떻게 가져오는지에 대해서 공부했다. 1. HTML에서 사용할 JS를 명시해준다. [index.html] Hello world 2. JS에서 document는 접근할수 있는 html을 가리키는 객체를 의미한다. 콘솔창에 document라고 치면 많은 필드와 값들이 나온다. 이 필드들을 통해서 JS로 HTML에 있는 내용들을 추가하거나 수정할 수 있게된다. 3. querySelecor , getElementById document객체에 기본적으로 있는 함수들이 있다. 그 중 querySelector와 getElementById를 통해서 원하는 HTML의 항목들에 접근할 수 있다. [index.js] const title = docume.. JS 배열 관련 함수1 /** * Appends new elements to the end of an array, and returns the new length of the array. * @param items New elements to add to the array. */ 추가 - 제일 뒤에 (기존 배열 업데이트) push() : 배열 제일 뒤에 값 추가 후 길이를 반환 /** * Inserts new elements at the start of an array, and returns the new length of the array. * @param items Elements to insert at the start of the array. */ 추가 - 제일 앞에 (기존 배열 업데이트) unshift() : 배열 제.. [인프런x코드캠프] 훈훈한 Javascript_15日, 16日 (완강) 오늘로 [인프런x코드캠프] 훈훈한 Javascript 강의를 완강했다. 입사할 때 시작해서 이제 두달이 되어간다. 시간이 정말 빨리 지나간다. 오늘은 구조분해할당을 통해 코드를 보다 간결하게 만들고, localStorage에 값들을 저장해 원하는 경우에만 데이터 통신을 하게 구현했다. 기능 구현하기 전에 깊은복사, 얕은 복사에 대해서 학습했다. 이 부분은 조금 졸면서 들어서 간단하게만 작성하겠다 ㅎㅎ 얕은 복사 : 복사하는 객체 안에 객체가 있는 경우, 완전하게 분리가 되지 않고 객체안 객체에 대해서 수정을 하게되면 원본 값도 같이 바뀌는 복사다. -> 주소값까지만 복사 위 그림은 얕은 복사의 예시이다. shallowCopyTest의 hobby.one 값을 수정하면 원본인 test의 hobby.one값도.. [인프런x코드캠프] 훈훈한 Javascript_14日 오늘은 아주 간단하게 비동기, 동기에 대해서 학습하고 api를 통해서 나의 위치, 날씨를 받아오는 기능을 구현했다. 비동기 동기에 대해서는 아래 영상을 보면 쉽게 이해할 수 있다. 간단하게 말해서 동기는 순차적으로 1번이 끝나고 2번을 실행하고, 2번이 끝난 후 3번을 실행하는 방식이다. 비동기는 1번이 끝나지 않아도 2번을 실행하고, 1 또는 2번이 끝나지 않아도 3번을 실행하는 방식이다. js에서는 fetch, then, catch를 사용해서 비동기적 프로그래밍을 할 수 있다. 먼저 fetch를 통해서 api통신을 한다. const weatherSearch = function (position) { fetch( `https://api.openweathermap.org/data/2.5/weather?l.. [인프런x코드캠프] 훈훈한 Javascript_13日 이번 시간에는 외부 API를 활용하는 강의를 들었다. 사용자의 위치에 따른 날씨 정보를 가져오려고 한다. 그러기 위해서는 사용자 위치에 먼저 접근해야한다. https://developer.mozilla.org/ko/docs/Web/API/Geolocation_API Geolocation API - Web API | MDN Geolocation API는 사용자가 원할 경우 웹 애플리케이션에 위치 정보를 제공할 수 있는 API입니다. 개인정보 보호를 위해, 브라우저는 위치 정보를 제공하기 전에 사용자에게 위치 정보 권한에 대한 developer.mozilla.org 사용자의 위도, 경도는 위 사이트에서 얻어올 수 있다. 그리고 이 정보를 가지고 아래 사이트에서 제공하는 open API를 통해서 날씨 정보를 .. [인프런x코드캠프] 훈훈한 Javascript_12日 저번 시간에 이어서 이번 시간에는 객체 형태의 데이터를 로컬스토리지에 저장하는 기능을 구현했다. 그 과정에서 호이스팅에 대한 개념도 익힐 수 있었다. 먼저, localstorage에는 string 형태의 값만 저장할 수 있기 때문에 JSON으로 받아온 객체를 스트링 형태로 줘야 한다. saveItems.length === 0 ? localStorage.removeItem("saved-items") : localStorage.setItem("saved-items", JSON.stringify(saveItems)); saveItems라는 배열이 길이가 0이라면 localStorage에서 "saved-items" 라는 키를 가진 값을 지운다. 0이 아니라면, "saved-items"라는 키로 저장하는데 JSO.. [인프런x코드캠프] 훈훈한 Javascript_11日 오늘은 등록한 todoList를 더블클릭 시 취소되는 기능, 전체 삭제 기능을 구현했다. 또, 개발자 도구의 디버거를 통해서 scope의 의미와 실제로 js가 어떤 순서로 실행되는지, for문이 어떻게 돌아가는 지에 대해서 직접 확인해봤다. 1. 더블클릭 시, 태그 삭제 newLi.addEventListner("dblclick", () => { newLi.remove(); } newLi로 지정한 태그를 더블클릭("dblclick") 하면은 remove() 함수가 실행돼서 newLi태그가 삭제된다. 이 기능을 통해서 해당 todo를 더블클릭 시 삭제하는 기능을 구현했다. 2. 전체 삭제 const deleteAll = function() { const liList = document.querySelectA.. 이전 1 2 3 4 다음
