컴퓨터 프로그래밍/수업
2020.05.28_1
깝돌이
2020. 5. 28. 12:17
Animation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
img{width:65px; height: 65px; background: orange; position:relative;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/* $('img').animate({left:'300px'}, 'fast');
$('img').animate({left:'100px'}, 'slow');
$('img').animate({width:'+50px'}, 'slow');
$('img').animate({height:'+100px'}, 'slow');
$('img').animate({top:'300px'}, 'fast');
$('img').animate({top:'100px'}, 'slow'); */
//$('img').animate({left:'300px', width:'300px'}, 'slow');//동시에 하기
//1. 5초 뒤에 앵그리버가 사라지도록...
setTimeout(function(){
$('img').hide();
alert("앵그리버스 숨었다.");
}, 3000);
//2. 7초 뒤에 다시 나타나도록....팝업창 띄우고,,,,"두두두두두두두 짜잔"
setTimeout(function(){
$('img').show();
alert("두두두두두두두두...짜잔");
}, 7000);
});
</script>
</head>
<body>
<img alt="redbird" src="../image/redbird.png">
</body>
</html>응용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
position: relative;
width: 70px;
height: 40px;
border: 2px solid red;
}
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/* $('div').click(function() {
//1. 각각의 div해당 영역이 오른쪽으로 500px 천천히 이동
$(this).animate({
left:'500'
},'slow')//중괄호 안에 여러개의 속성을 넣을 수 있습니다.
}) */
//1. hover를 이용해서 오른편 500갔다가. 다시 원래 지점으로 돌아오도록 로직을 작성
/* $('div').hover(function() {
$(this).animate({
left:'500'
},'fast');
}, function() {
$(this).animate({
left:'0'
},'fast');
}); */
$('div').click(function() {
$(this).animate({
width:'+=80px',
height: '+=80px'
}, 'slow')
})
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
article에서 slideToggle 사용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/article.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/article.js">
</script>
</head>
<body>
<div id="container">
<h2>텍스트 슬라이딩 효과주기</h2>
<div id="switcher">
<button id="switcher-default">default</button>
<button id="switcher-large">large</button>
<button id="switcher-small">small</button>
</div>
<div class="speech">
<p>유은혜 "부천 물류센터 집단감염 심각..등교 중지 불가피"</p>
<p>(세종=연합뉴스) 김수현 기자 = 유은혜 부총리 겸 교육부 장관은 28일 경기도 부천 쿠팡물류센터의 신종 코로나바이러스 감염증(코로나19) 집단감염에 대해 "굉장히 심각하게 보고 있다"며 "부천 (학교의) 등교 중지는 불가피한 조치"라고 밝혔다.
유 부총리는 이날 MBC 라디오 '김종배의 시선집중'에 출연, "부천물류센터의 경우 직원과 가족, 접촉자 등 검사가 4천여명 이상 진행되고 있는데 무증상자들이 많이 확인되고 있다"며 이같이 말했다.
부천에서는 코로나19 확진 사례가 잇따르면서 전날 예정됐던 고등학교 2학년 이하 251개교의 등교 연기가 결정됐다.
또 인천 부평구와 계양구 관내 유치원과 학교의 경우도 고3을 제외한 243개교에서 이날부터 다음 달 2일까지 등교 수업을 중지하고 원격수업으로 전환하기로 했다.
유 부총리는 전날 561개교에서 코로나19 사태로 등교 수업이 연기된 것과 관련해선 "원칙적으로 학교장이 전체적인 지역 상황을 우선 파악하고, 교육청과 교육부, 방역 당국과 협의해 등교 일정 조정을 협의하고 결정했다"고 설명했다.</p>
<a href="#" class="more">read less</a>
<p>유 부총리는 "당분간은 학생들에게 훨씬 더 많은 지도가 필요할 것"이라며 "이 부분을 지원할 수 있는 인력 3만명 정도를 시도교육청에서 학교마다 배치하고 있다"고 말했다.</p>
<p>그는 학생들의 밀집도를 낮추기 위해 미러링 수업(반을 2개로 나누고 옆 반은 화상 중계하는 수업 방식) 등을 도입한 탓에 사실상 등교 수업이 의미가 없는 것 아니냐는 지적에는 "원격수업만으로 아이들에게 제공하기 어려운 수업이 있다"며 "시간적인 제한은 있어도 그런 부분(대면 지도)들은 우리 학생들에게 꼭 필요한 상황"이라고 강조했다.</p>
</div>
</div>
</body>
</html>@charset "UTF-8";
#container{
font-size: 1.2em;
margin: 10px 2em;
}
h2{
font-size: 1.3em;
margin-bottom: 0.5em;
$(function() {
// 1.태그가 몇개인지 alert창으로 확인
// alert($('p').length); 확인
// 2. 2번재 p태그를 firstP라는 변수에 할당
var firstP = $('p:eq(1)');
// alert(firstP.html());//text()랑 똑같음 이거 중요함.
// 3. a 태그 누르면(a태그중에 class가 more인 선택자)
$('a.more').click(function() {
if (firstP.is(':hidden')) {//토글이랑 상관 없이 모든 태그가 사라져 있냐 없냐를 알고 싶을때 사용할 수 있다.
firstP.slideToggle('slow');
$(this).html('red less');
}else{
firstP.slideToggle('slow');
$(this).html('red more');
}
})
});animation으로 글자 크기 크게 하고 작게 하고
$(function() {
// 1.태그가 몇개인지 alert창으로 확인
// alert($('p').length); 확인
// 2. 2번재 p태그를 firstP라는 변수에 할당
var firstP = $('p:eq(1)');
// alert(firstP.html());//text()랑 똑같음 이거 중요함.
// 3. a 태그 누르면(a태그중에 class가 more인 선택자)
$('a.more').click(function() {
if (firstP.is(':hidden')) {//토글이랑 상관 없이 모든 태그가 사라져 있냐 없냐를 알고 싶을때 사용할 수 있다.
firstP.slideToggle('slow');
$(this).html('red less');
}else{
firstP.slideToggle('slow');
$(this).html('red more');
}
})
//4.
//글씨 크기 조절(이를 위해서는 현재 font-size를 알아야합니다.)
var speech = $('div.speech');
var defaultSize = speech.css('fontSize');
//alert(defaultSize);
var num = parseInt(defaultSize, 10);
//alert(num);//19
$('#switcher>button').click(function() {
switch(this.id){
case 'switcher-large':
num+=5;
break;
case 'switcher-small':
num-=5;
break;
default:
num=parseInt(defaultSize,10);
}
speech.animate({fontSize:num+'px'}, 'slow');
})
});
form tag
confirm 활용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>confirm</title>
<style type="text/css"></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// a tag에 속성중에서 w3가 포함되어 있는 사이트를 클릭했을 때,confrim창 뜨면서
// https://www.w3schools.com 사이트로 이동하시겠습니까? yes 바로 이동
// 정리: $('a[href*=w3]') $('a[href*=w3]') $('a[href*=w3]')
$('a[href*=w3]').click(function() {
return confirm($(this).text()+"사이트로 이동하시겠습니까?");
// confirm을 통해서 받은 값을 return해 줍니다. return 받은 true/false값에 따라서 a tag가 실행되거나 되지 않습니다.
})
});
</script>
</head>
<body>
<a href="http://www.jquery.com">jquery</a>
<a href="https://www.w3schools.com/">w3Schools</a>
</body>
</html>
select
https://www.w3schools.com/jquery/jquery_dom_set.asp
jQuery Set Content and Attributes
jQuery - Set Content and Attributes Set Content - text(), html(), and val() We will use the same three methods from the previous page to set content: text() - Sets or returns the text content of selected elements html() - Sets or returns the content of sel
www.w3schools.com
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html(), text(), val()</title>
<style type="text/css">
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//1.버튼 클릭하면 버튼의 타이틀을(value값) resultView 영역에다가 출력
//: append()와 html이()은 기능 적인 면에서 똑같습니다. html은 덮어쓰고, append는 뒤이어 붙입니다.
//: html사용한 1-1같은 경우에는 클릭 할때 마다 overwrite하기 때문에 그때마다 새로운 것으로 그 영역을 덮어씁니다.
// 그래서 클릭을 하지만 실행이 안되는 것 처럼 보입니다.
//: append()를 이용하면 클릭 할때마다 계속적으로 실행이 됩니다.
//1-1 html:
$('#creatBtn').click(function() {
$('#resultView').html($(this).val());
});//click
//1-2 append를
$('#creatBtn').click(function() {
$('#resultView').append($(this).val()+'<P>');//append랑 html이랑 똑같은 데, 덮어쓰는 거냐 붙이는 거냐에 따라 다름
});//click
//$(this)에서 this는 #creatBtn중에서 클린된 것을 의미합니다.
//이것은 form field이기 text(), html()아닌 val()함수를 통해서 값을 받아 오게 됩니다.
//2. html()을 이용해서 append() 동일한 결과로 출력되도록합니다.
$('#creatBtn').click(function() {
var result = $('#resultView').html();
//resultView에 있는 내용을 변수에 저장합니다.
$('#resultView').html(result+$(this).val()+"<p>");
//기존에 resultView에 있던 내용에 클릭된 creatBtn의 value 값을 받아와 더해줍니다.
//이렇게 되면, append해주는 것과 같은 기능을 하게 됩니다.
});//click
//select 폼에서 내가 선택한 Encore 지부가 resultView 계속해서 출력되도록...html()를 이용하세요.
//select에서는 click()함수가 아니고, change()함수 입니다.
$('#creatSel').change(function() {
var result=$('#resultView').html();
var item =$(this).val();
//이와같은 의미를 포함하고 있습니다.
//var item =$('#createSel>option:selected').val();
//this에서 val()로 값을 가져오면 선택된 값이(<option>?</option>이 사이에 있는 ?값이 오게 됩니다.)
//$(this).val()을 쓰는 이유는 select가 form field기 때문입니다. (html(), text()를 안씁니다.)
//alert(item);//item에 값이 잘 들어갔는지 확인합니다.
$('#resultView').html(result+item+'<p>');
});
});
</script>
</head>
<body>
<input type="button" value="버튼 클릭시 동적으로 문자열 생성" id="creatBtn">
<select id="creatSel">
<option>Encore Academy 남부지구</option>
<option>Encore Academy 서초지구</option>
<option>Encore Academy 판교지구</option>
<option>Encore Academy 가산디지털지구</option>
<option>Encore Academy 삼성지구</option>
</select>
<div id="resultView"></div>
</body>
</html>
배열의 each()적용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>array_each</title>
<style type="text/css"></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#eachBtn').click(function() {
var array = [];//JQuery에서는 이와같이 배열을 생성합니다.
array.push('이나영');
array.push('원빈');
array.push('고소영');
array.push('장동건');
//alert(array.length);
//alert(array.toString());
//배열이 잘 생성됐는지 확인해 줍니다.
var data="";
/* //1. for 문을 사용해서 alert창 한번 뜨고 그 안에 이름, 이름, 이름, 이름
for(var i=0; i<array.length;i++){
data+=array[i]+" ";// toString()이 생략되어있습니다.
}
alert(data); */
/* //2. each()함수를 이용해서 순회합니다.
$(array).each(function(index) {
//alert(index+1+"."+array[index]);
//이렇게도 한번 출력해볼수도 있습니다.
data+=array[index]+" ";
});
alert(data); */
/* //3. each()함수를 다르게도 쓸 수 있습니다.
$.each(array, function(index) {
data+=index+1+"."+array[index]+" ";
})
alert(data);
alert($.inArray('장똥건', array));
// 배열안에 찾는 값이 있으면 해당 index를 return하고 없으면 -1을 리턴합니다. */
});
});
</script>
</head>
<body>
<input type="button" value="배열에 each() 적용" id="eachBtn">
</body>
</html>