Javascript (16) 썸네일형 리스트형 callback vs Promise vs await 왜 쓸까? 함수를 호출해서 실행할거 아니야? 그러면 이게 순서있게 가야되는데 웹 어플리케이션에 요청하면 이게 비동기적으로 호출이 되서 언제 어떤게 먼저 실행될지 몰라. 그러니깐 비동기적인 실행을 방지하기 위해서 우리가 상황을 조정하는거야 .실제 상황을 보자구 화면 리셋하고 비디오를 실행하면 1초뒤에 다시 멈추고 타이틀을 보여주고 0.5초뒤에 타이틀을 강조하고 2초뒤에 다시 타이틀 리셋 function runCallback() { //실행 resetTitle(); //실행 playVideo(); //실행 delay(1000, () => { pauseVideo(); displayTitle(); delay(500, () => { highlightTitle(); delay(2000, resetTitle); }).. callback 지옥 setTimeout편 문제 웹의 API 중에 setTImeout은 비동기적으로 움직이기 때문에 함수의 실행을 했을 때 절차적으로 읽지를 못하는 문제가 생긴다. 예를 들어 다음 함수의 결과는 second -> first이다 function call(){ settimeout(()=>{ console.log("first") },2000) console.log("second") } 해결 이를 해결하기 위해 호출 할 때 함수를 콜백지옥으로 함수가 실행되면 다음 함수가 실행되는 코드를 짜야 하는 한계가 있다. 이를 보여주면 다음과 같다. function getFlightTicket(callback){ setTimeout(()=>{ callback() },2000) } undefined getFlightTicket(()=>{ consol.. 정규식으로 이메일 유효성 검사하기 1.모든 영어 문자에 이 값이 있는지 체크 /[A-z]/.test('z') 2. 모든 기호 표현은 \S. 그대신 문자열 하나를 뜻함 /\S/.test('$') 3.이메일 형식이 dfadf@asdf.com 이라면 어떻게? (+ 표현은 뒤에 문자열이 쭉 나온다는 것을 의미) /\S+@\S+\.\S+/.test('sdfa@asdf.com') (. 는 기호 중에서도 특수한 케이스이기 때문에 \붙이기) 제이쿼리 css 추가 하기 & animate 넣기 문제 화면을 보였다가 없었다가 하게 만들기 해결 $('#menu-btn').on('click',()=>{ $('#hi').animate({marginLeft:'0px'},[5000]) }) $('#btn').on('click',()=>{ $('.alerm-box').toggle() $('.jumbotron-box').css('opacity','0.5') }) 문제 과연 자바스크립트에서 css를 만들고 없애는 것이 효울적인가? 해결 자바스크립트에서 css를 짜는 것 보다 첫 화면 마지막 화면을 미리 짜고 동작을 컨트롤 하는 것이 서로의 역할을 독립적으로 바꾸기 때문에 좋다. 1.먼저 css에 속성과 속성이 나오는 속도를 정하자 transition 2. transition 으로 시간대 조절 3. transf.. 바닐라 JS 메인 사진에 랜덤하게 사진 넣기 문제 : 메인 사진을 랜덤하게 바꾸는 JS 짜기 접근 원리 : 항상 어딘가에 데이터 위치를 찾고 (만약에 없으면 데이터를 생성해주면 되지) =>그 데이터의 값을 바꿔주면 됨 코드 클릭한 사진은 다음과 같습니다 button 결과 추가로 바꾸는 법 button.addEventListener('click',()=>{ alerm.classList.remove('hide') }) jQuery 기본 문법 이해 태그찾기 태그 찾기 document.querySelector('#test').textContent="안녕" $('#test').html('안녕') 태그 클레스 추가 $('#test').html('안녕').addClass('yellow-bg') Toggle() 제이쿼리 방식 $('#btn').on('click',()=>{ $('.alerm-box').toggle() }) $('.menu').on('click',()=>{ $('.list-group').toggle('hide') }) 돔 방식 const button=document.querySelector('#btn') const alerm= document.querySelector('.alerm-box') const menu=document.querySel.. onClick 속성을 이용하여 Validation 함수 구현방법 문제 : 아이디랑 비밀번호를 입력했을 때 조건에 부합하지 않으면 Alert를 실행!! 순서 1.알람창 tag 만들기 " 4자 이상 있어야 합니다. 2. hide class를 이용해서 미리 숨겨놓기 3. JS 에서 만약 input tag 의 value 값이 기존에 비어 있지만 함수가 호출되어 함수에 인자 값이 들어왔을 때 그 값이 4 미만이면 tag를 찾아 classList에 hide 를 remove() 함수를 이용한다. 4. 이 함수를 input tag에 onclick 이벤트 즉 속성이 불러졌을 때 함수를 호출(값 넣기)하는 모습을 만들면 완성 html email : 이메일을 정확히 입력해야합니다. password: password를 입력하지 않았습니다. 로그인버튼 JS const email =docum.. 버튼 클릭했을 때 화면을 보여주거나 가리기 1. 스타일 속성의 기존 hide 값을 block 으로 바꾸기 alertBox.setAttribute("style","display:block") 2. css 에 hide 클레스를 만든 후 classList에 contain() 함수를 이용하여 hide의 css를 조정 html Hello Alert 박스 닫기 CSS *{ box-sizing: content-box; } .alert-box{ margin-top: 100px; padding: 20px; border-radius: 4px; border: 2px black solid; text-align: center; } .hide{ display: none; } JS document.querySelector('#title').textContent="Alert.. 이전 1 2 다음
