다음 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 애니메이션 제이쿼리 문법을 사용했다. 제이쿼리를 이용하면 애니메이션을 쉽게 사용할 수 있다. 자연스럽게 모달창이 서서히 뜨고, 없어지게 만들수..
Javascript
제이쿼리는 기존에 있는 자바스크립트를 간편하게 사용할 수 있도록 하는 라이브러리이다. 새로운 컴퓨터 언어는 아니다 $('셀렉터')로 찾으면 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() 실패판정하면, 에러를 일으킴..
Promise() 프로미스 = 성공/실패 판정기계! -3가지 상태- 성공실패 판정전 성공 후엔 실패 후엔 var 프로미스 = new Promise(); 프로미스.then(function(){ }).catch(function(){ }); // 콜백함수와 다르게 '실패시 특정 코드를 실행해주세요~' 가능함 1. Promise기계 안에는 아무거나 다 집어넣을 수 있습니다 var 프로미스 = new Promise(function(성공,실패){ var 어려운연산 = 1+1; 성공(); }); 프로미스.then(function(){ console.log('연산이 성공했습니다') }).catch(function(){ console.log('연산이 실패했습니다') }); //참고로, 연산결과같은걸 then안에서 활용하..
자바스크립트는 동기적처리가 베이스다 그런데, 상황에 따라서는 비동기적처리를 한다 순차적으로 가다가 오래걸리는 코드는 일단 치워두고, 쉬운 코드 먼저 실행한다음, 그제서야 실행한다 // 1 // 3 //(1초뒤) 2 함수를 순차적으로 실행하고 싶다면? 콜백함수를 사용한다 즉, 함수 안에 함수를 넣는다 → 참고로, 콜백함수는 비동기,동기라고 나누지 말자. 그냥 순차적으로 출력하는, 함수디자인 패턴일뿐... 콜백함수의 문제점첫째함수(function(){ 둘째함수(function(){ 셋째함수(function(){ 넷째함수(function(){ }); }); }); }); 겹겹이 쌓여서 보기싫음 해결방법은 프로미스!첫째함수().then(function(){ }).then(function(){ }).then(fu..
