보라코딩

재밌게 들었고 진짜 좋은 강의라 생각된다. localstorage와 filter를 사용하는 것도 알게 되었고 개발자 모드에서 network나 application을 보는 법도 배웠다. 강의가 길지 않아서 자바스크립트 정리하는 느낌으로 듣기 참 좋다 :) todo.js const toDoForm = document.getElementById("todo-form"); const toDoList = document.getElementById("todo-list"); const toDoInput = document.querySelector("#todo-form input"); const TODOS_KEY = "todos"; let toDos = []; // let으로 해서 update 가능하게 // 삭제 버튼 ..

코드가 엄청 심플해서 놀랐다! 유용한 코드라 생각해서 기록하기 :) 날씨 API는 아래 사이트 참고하기! Weather API - OpenWeatherMap Please, sign up to use our fast and easy-to-work weather APIs. As a start to use OpenWeather products, we recommend our One Call API 3.0. For more functionality, please consider our products, which are included in professional collections. openweathermap.org weather.js const API_KEY = "키를 넣으시오~~~"; function o..

JS 모듈화 resources의 js 아래 reply.js 만들어줌 사용하는 view내 jsp 파일에 script 위에 추가해줌

저번시간에 실습했던 자동차 금액구하기 강사님 설명듣고 끝났다! 확실히 설명들으면 리팩토링 하는 느낌이라 좋다 ㅎ.ㅎ 생각하지 못했던 것들 깨닫게 됨...

값을 "+=200" 이렇게 넣어서 클릭될때마다 증가하게 할 수도 있다 animate({속성값}, 밀리초) 펭귄인가 뭔가 ㅋㅋ 여튼 이동 되돌아오기 stop 기능 적용 clearQueue 기능을 적용해서 큐에 있는 것을 지우고 현재 동작까지 stop하게 했다. 롤링배너 실습 위치를 고려해야해서 생각보다 생각을 좀 해야했다! 오늘은 실습이 많았다! animate 재밌다 ㅎ.ㅎ

setInterval 객체를 계속 생성해주지 않도록 if문을 사용하고 clear 할때도 null값을 넣어준다. addEventListner을 사용해줄 수도 있다. 세개 다 같은 내용 marginLeft 이용해서 차 이동시켜 보았다 ㅎㅎ hide, show, toggle slideUp, slideDown, slideToggle fadeIn, fadeOut, fadeToggle fadeTo prepend, append before, after empty, remove 전, 후 누르면 이미지 변환함 같은 기능을 배열을 사용해서 실습해보았다. 더 간단하게 표현할 수 있다. 배열에 넣는 방식도 while을 이용할 수 있으며 i는 length를 이용하면 동일하게 처리 가능하다.

자바스크립트와 제이쿼리 방식으로 value값 읽어오기 모두 같지만 제이쿼리가 젤 간편해보인다. 테이블생성 실습 저번에 이어서.. 코드를 간결하게 하기 위해 메서드로 만들었다. 메서드 안에서 string을 선언하고 return 타입 또한 string으로 반환 훨씬 함수가 간결해졌다. string += ... 이렇게 추가하지 않고 array를 만들어서 push 통해 넣었다. 마지막에 array.join("") 이용해서 쉼표로 구분된 것을 하나로 합쳐주었다. 자바스크립트 실행순서 click, change 두개를 모두 사용해봤는데 change만 사용하면 될 것 같다. 키보드 이벤트 주로 keyup을 사용하면 되겠다. 배열에 넣어서 setInterval을 사용하니 반복문을 사용하지 않아도 알아서 인덱스가 증가하며..

filter() end() jQuery 이벤트 mouseenter mouseover attr hover prop toggle slideDown() slideUp() slideToggle() each : for문 같은 역할 each안에 prop이용해서 id명을 편하게 넣어줄 수 있다 동적 테이블만들기 실습

저번시간에 했던 자동차 견적 실습 (html + css + js) 오늘 강사님 설명을 들었다. html CSS JS 강사님 설명 들으면 리팩토링 하는 느낌이랄까? 난 구현하긴 하는데 내 코드가 맘에 안든다. 오늘 설명은 매우 인상깊었음ㅎㅎ 선택자 사용방식도 여러가지 사용할 수 있고 className으로 선택한 후에 for문을 사용하면 코드가 훨씬 간결! 함수도 this를 사용하면 하나만 만들어 공통 사용할 수 있다! inline으로 js 작성하는 방법도 배웠다. jQuery 제이쿼리 사이트에 들어가서 파일을 저장했다. 그런데 이렇게 하지 않고 link 사용하는 방법도 있었다. 다운로드 필수 아님 ㅎㅎ 파일로 연결하는 방법 기존에 이렇게 DOM 선택했다면 jQuery로 선택하는 방식 (매우 간편) 이런식으..

DOM 객체 선택 체이닝방식도 있다. 다양하게 선택하는 방법을 배웠다. DOM 인접관계선택자 마우스이벤트 이렇게하면 확인된 비밀번호 변경못함 여러가지 방법으로 선택 가능! onsubmit과 onchange를 통해 체크박스 함수 적용 가능 오늘은 이렇게 폼, 이벤트를 이용해서 만들어보았다. 오늘의 실습 ㅎ.ㅎ //(실습) 옵션 선택에 따라 차량금액 계산(변경) 처리 // 기본 차량가액에서 시작해서 옵션금액 변경시마다 더하기, 빼기 처리 // 체크상태 : 옵션금액 더하기 // 체크해제 : 옵션금액 빼기 코드는 내일 공개됩니다...