JS UI

주의할 점은 jQuery 스크립트가 자바스크립트의 스크립트 태그보다 위에 위치해야 한다는 것이다. 자바스크립트의 코드 내에서 jQuery를 사용하므로 만약 jQuery가 로딩되지 않은 상태에서 자바스크립트를 불러온다면 자바스크립트의 코드가 제대로 작동하지 않는다. 방법

\*\* css 에 show라는 style이 block으로 되어있음.

ex) 5초 후 div 제거위처럼 쓰면 1초 마다 콘솔창에 '안녕'이 뜹니다.

abcdef라는 문자에 abc라는 단어가 있는지 검사해보도록 합시다. /abc/.test('abcdef')/정규식/.test(정규식으로 검사해볼문자) 쓰면 됩니다.진짜 들어있으면 true를 남기고 없으면 false를 남겨줍니다. 기호를 이용해서 문자 범위를 지정할

슬라이드되는 UI들을 캐러셀이라고 합니다.one-way 애니메이션들어간 UI 만드는 법은애니메이션 시작 전 화면 만들기애니메이션 종료 후 화면 만들기언제 종료화면으로 변할지 JS 코드짜기transition 추가하기 ▲ 사진 3개를 가로로 길게 배치해놔야하지않을까요?그리

스크롤바를 조작하면 scroll 이벤트가 발생합니다.그래서 scroll 이벤트리스너를 전체 페이지에 달면전체 페이지를 스크롤할 때마다 원하는 코드를 실행할 수 있습니다.진짜 스크롤바 만질 때 마다 '안녕' 출력되나 봅시다. 참고로 window는 그냥 전체 페이지를 의미

탭의 0번 버튼 누르면 무슨 일이 일어나야합니까?버튼0 누르면 버튼0에 orange 클래스명 부착박스0에 show 클래스명 부착이러면 끝인 것 같은데 근데 그것만 짜면... ▲ 버튼0 눌렀을 때 이렇게 보일 것 같군요 그래서 기존에 붙어있던 orange, show

데이터바인딩 하기

Select 선택하면 다른 select 나오게 하기 셔츠 선택시 사이즈 나오게 하기

버튼하나 만들고 그거 누르면 상품을 더 가져와봅시다.https://codingapple1.github.io/js/more1.json 여기로 GET요청하면 상품 3개 데이터를 보내줍니다.버튼누르면 상품데이터 가져와서 콘솔창에 출력해보십시오.html에 버튼하나 만

이렇게 .sort 뒤에 붙이는건 맞는데콜백함수 안의 식이 좀 달라져야할 것 같습니다. 왜냐면 products는 { }, { }, { } 이렇게 생겼습니다.그래서 a, b는 지금 { }, { } 이건데 object 두개를 a - b 이렇게 빼봤자 음수나 양수가 나오지

크롬 개발자도구의 Application 탭 들어가보면 구경가능합니다. Local Storage / Session Storage (key : value 형태로 문자, 숫자 데이터 저장가능)Indexed DB (크고 많은 구조화된 데이터를 DB처럼 저장가능, 문법더러움)C

깨끗한 HTML 파일에 jQuery와 CSS 파일 하나를 첨부해준 후이미지 3개를 다음과 같이 배치합니다.겁나 긴 배경에 카드를 세로로 3개 배치했고, position : sticky를 이용해서 스크롤시 화면에 고정되게 만들었습니다. 스크롤시 opacity가 점점 줄어

▲ 모달창 HTML은 대충 이런 식으로 코드가 짜여있고모달창 오픈할 때 show-modal 클래스명을 넣어서 오픈했다면 그럼 검은 배경 눌렀을 때 모달창이 잘 닫힙니다. 근데 이상한 점이 하나 있습니다.검은배경 뿐만 아니라 흰배경, input, 글자 등 모달창 내부의

프롬프트(prompt) 대화상자를 이용해 간이 로그인 창을 구현해보세요.사용자가 "Admin"를 입력하면 비밀번호를 물어보는 프롬프트 대화상자를 띄워주세요. 이때 아무런 입력도 하지 않거나 Esc를 누르면 "취소되었습니다."라는 메시지를 보여주세요. 틀린 비밀번호를 입