![]()
로그인하세요 전송 닫기 Navbar An item A second item A third item A fourth item And a fifth one Shirts on Sale 로그인 번외 태그에서 발생하는 이벤트들이 있습니다. input이벤트와 change 이벤트인데 안에 뭔가 입력할 때 발생합니다. 내용을 입력할때나 변화가 생길때 쓸수 있는 이벤트리스너입니다 document.getElementById('email').addEventListener('input', function(){ console.log('안녕') }); document.getElementById('email').addEventListener('change', function(){ console.log('안녕') });
Hello, world! // //1. html,css 로 미리 디자인 //2. 버튼 누르면 보여주셈
다음 html,css 자료들은 부트스트랩에서 따왔다 //html 로그인하세요 닫기 로그인 //css .black-bg { width : 100%; height : 100%; position : fixed; background : rgba(0,0,0,0.5); z-index : 5; padding: 30px; } .white-bg { background: white; border-radius: 5px; padding: 30px; } .noshow { display:none; } 자바스트립트로 클래스를 추가하거나 삭제하는 방법으로 모달창을 띄우거나 없앨수 있다. UI 애니메이션 제이쿼리 문법을 사용했다. 제이쿼리를 이용하면 애니메이션을 쉽게 사용할 수 있다. 자연스럽게 모달창이 서서히 뜨고, 없어지게 만들수..
제이쿼리는 기존에 있는 자바스크립트를 간편하게 사용할 수 있도록 하는 라이브러리이다. 새로운 컴퓨터 언어는 아니다 $('셀렉터')로 찾으면 jQuery함수만 붙을 수 있음 querySelector('셀렉터')로 찾으면 자바스크립트함수만 붙일수 있음 $('.hello').innerHTML = ㄴㄴㄴㄴㄴㄴ 안녕 버튼
alert 박스 내용 바꿔서 띄우기 1. 태그 내용을 아이디입력으로 바꿈 2. alert 띄움 기존에 있던 alert 박스를 재사용 버튼1 누르면 alert 박스 안의 제목을 "아이디입력하세요" 로 바꾸고 alert박스 띄우기 버튼2 누르면 alert 박스 안의 제목을 "비번입력하세요" 로 바꾸고 alert박스 띄우기 알림창임 닫기 버튼1 버튼2
1. 조작할 html 하단에 자바스크립트 코드를 짜야 한다. => 코드를 한줄씩 차례대로 읽기 때문에 2. 셀렉터 오타주의 알림창임 3. 함수 오타주의 => 대문자, 소문자 주의
![]()
UI 알아서 만드는 법 1. 미리 html/css 디자인 만들기 2. 필요할때 보여달라고 js 짬 알림창임 버튼 .alert-box { background-color: skyblue; padding:20px; color:white; border-radius: 5px; display:none; } 번외: 알림창 닫기 버튼 만드는 법 알림창임 알림창닫기버튼 .alert-box { background-color: skyblue; padding:20px; color:white; border-radius: 5px; display:block; } 알림창임 닫기버튼 열기버튼
async / await async / await 는 프로미스 대신 요긴하게 쓸수 있다 async 를 function 앞에 붙이면 함수 실행후에 Promise 오브젝트가 남습니다 같이 쓰이는 await는 프로미스가 성공할때까지 기다려주며, 항상 async 함수 안에서만 씁니다 async function 더하기(){ //new Promise()어쩌구~ 디자인 안해도 'async'를 함수 앞에 붙이면 함수가 프로미스기능 return 1+1; } 더하기().then(function(결과){ //.then()사용가능! 왜? async 함수가 있으면 프로미스를 뱉어내니까 console.log(결과) }) // async 는 성공만 판정가능 //return Promise.reject() 실패판정하면, 에러를 일으킴..
