▶ 팝업창 띄우는 함수
alert('띄울 팝업 내용') / confirm('정말 탈퇴하시겠습니까') / prompt('당신의 이름을 입력하세요')
▶ timing 함수
setTimeout(실행함수, 시간);
**setTimeout 이런거 다 함수임
function setTime(){setTimeout(function(){alert('3초가 지났습니다')},3000);}setInterval (실행함수, 간격);
time = setInterval(function(){
i++;
console.log(i);
document.getElementById('cnt').innerHTML = i;
},1000);setInterval이라는 함수에 실행함수를 넣어야 하는데 그게 i++ 그리고 그 값을 cnt 요소에 넣어줄것, 간격은 1초씩(1000)
그리고 이 인터벌을 time에 넣어줌
**elem이라는 요소를 비활성화 하기 위해서는
elem.disabled=true;
clearInterval(중지할 인터벌);
clearInterval(time); // 중지할 인터벌
i = 0; //숫자 초기화
document.getElementById('cnt').innerHTML = i;
//비활성화 버튼 활성화
document.getElementsByTagName('button')[0].disabled = false; //disabled됐던거 원상복귀▶ animation
expected result : 5초 후에 다운로드가 시작됩니다. 라는 문구가 있고 5초가 지난 후엔 다운로드가 시작됨
5라는 숫자는 0까지 줄어들음, 다운로드가 시작되면 progress 바가 채워지며 채워지는 것을 따라 박스가 움직임
<body>
<body>
<h1><span id="cnt">5</span>초 후에 다운로드가 시작됩니다.</h1>
<progress id="download" min="0" max="100" value="0"></progress>
<div id="proc"></div>
</body>5는 5,4,3,2,1 이렇게 카운팅될 수 있도록 따로 <span>에 넣기
<progress>불러와서 진행 바 같은거 만들기
진행상황 따라다닐 요소 div 만들기
<script>
var count = 5;
var msg = document.getElementById('cnt');
var bar = document.getElementById('download');
var inter = setInterval(function(){ count--; msg.innerHTML = count;},1000);변수 정리
count에 카운트 시작할 수 5 넣고
이 코드에서 변동되어야 하는 5와 progress bar 각각 요소로 가져온 뒤 변수 선언
또 setInterval 함수 선언하면서 1초마다 한 번씩 변동될 사항 적어주기
그게 function(){ count--; msg.innerHTML = count; 이것
5로 선언했던 count는 1씩 줄어야 하므로 count--; 그리고 그 카운트는 span태그에 들어가야 하므로
msg의 innerHTML을 count로 바꿔준다
setTimeout(function(){
clearInterval(inter);
download();
},5000);setTimeout으로 5초 뒤에는 interval이 끝나고 download가 시작하는 함수를 만들어줌
function download(){
var tag = document.getElementsByTagName('h1')[0];
tag.innerHTML = '다운로드 진행중(0%)';
bar.style.display = 'block';
var per = 0;
var obj = document.getElementById('proc');
inter = setInterval(function(){
per += 10;
obj.style.left = per*5;
bar.value = per;
tag.innerHTML = '다운로드 진행중('+per+'%)';
console.log(per);
if(per == 100){
tag.innerHTML ='다운로드 완료';
clearInterval(inter);
}
},1000);
}download 함수 써줄 시간
다운로드가 시작되면 어떻게 될건지 쓰면된다
먼저 h1태그를 tag에 넣어주고
이 tag의 innerHTML을 바꿔준다
bar.style.display 요소를 block으로 바꿔주면서 화면에 뜨도록 함 (안쓰거나 none으로 하면 안뜸)
per = 0으로 지정해줘서 progress 시작값을 정해줘
obj는 progress bar를 따라다닐 작은 요소임!
다운로드 진행을 나타낼 저 바도 인터벌로 움직여야 하니 setInterval 호출하고
실행함수는 per을 10씩 진전시킴(progress bar가 앞으로 나아갈 양, 10만큼 움직이는 것)
obj.style.left = per*5
obj가 left에서 시작해서 per의 5배만큼 움직여서 쟤를 따라다니도록 함
bar.value = per per는 바의 값에 넣어주고
tag는 innerHTML을 이용해 바꿔줌
var obj = {}; //object 키:값 으로 구성
var arr =[]; // array : 인덱스와 값
//위 두 개 형태를 JSON이라고 부른다▶ json
JavaScript Object Notation
자바스크립트 객체 포맷
데이터 쌍이나 배열로 구성된 객체를 전송할 때 사용함
데이터를 주고받을 때 사용하는 것
다른 프로그래밍 언어간 데이터를 교환하기 좋음
json에서 알아둬야 할 자료구조
var obj = {}; //object 키:값 으로 구성
var arr =[]; // array : 인덱스와 값오브젝트에 값 넣는 법 2가지
var info = {'age':20};
info.firstName = 'eunyoung';
info['lastName'] = 'Choi';
console.log(info);input의 타입이 text일 때 value속성에 object를 넣으려고 하면 오류가 뜬다
그래서 json을 string타입으로 바꿔준 뒤 value속성에 넣어야함
바꾼 뒤 담아줄 변수 선언 = JSON.stringify(obj);
var txt = JSON.stringify(obj);
document.getElementsByTagName('input')[0].value = txt;클릭하면 json으로 바꿔줄 버튼 만들기
사용하는 함수는 JSON.parse(json으로 바꿀 객체)
document.getElementById('btn').addEventListener('click',function(){
var json = JSON.parse(txt);
console.log(json);
})▶ j-query
제이쿼리 셀렉터 : html에서 원하는 요소를 가져오는 역할
console.log($('#one'));
console.log($('.cls'));
console.log($('p'));
/*000 중에서 ...*/
console.log($('*')); //모든요소 근데 우리가 모든 요소 가져올 일 x
console.log($('h2.cls')); //h2태그 중 클래스가 cls인 요소
console.log($('p:first')); //p태그 중에서 첫번째요소
console.log($('ul li')); //ul 태그 자식 중 li
console.log($('ul li:first')); //ul 태그 자식 중 첫번째 li
console.log($('ul li:first-child')); //각 ul 태그 자식 중 첫번째 li제이쿼리 this : 이벤트가 일어나는 당사자
$('p').click(function(){
console.log($(this));
});제이쿼리 속성
console.log($('a')); //a tag
console.log($('a[href]')); // a tag중 href 요소가 있는
console.log($('a[target="_brank"]'));
console.log($('a[target!="_brank"]')); // a 태그 중 target="_brank인것
//싱글쿼터로 감쌌으면 그 안에 들어가는 쿼터는 더블이어야 함
//그래서 자바스크립트에선 싱글로만 감싸는 것을 추천