Front-end 국비지원 #033일

JooSehyun·2022년 12월 1일
CEILDateFLOORJQuery선택자JavaScriptMath.max()Math.minNOTPITodayaddClassaddEventListeneralertattr()checkedclickconfirmcontains()contentsendfilterfindhashtmlisjqueryjsonkeydownkeypresskeyupmathmouseentermouseleaveobjectpromptrandomremoveClassroundselectedsetIntervalsetTimeouttextwindow object날짜
0

JavaScript

Math

큰값 작은값 (Math.max , Math.min)

ex)

const maxNum=Math.max(77,5,4,9,30);
console.log(maxNum);

const minNum=Math.min(10,5,8,3,1);
console.log(minNum);

결과
77, 1

소수점

ex)

const num=2.1234;

소수점 계산을 위해 예제 -> 2.1234

round (소수점 첫째자리에서 반올림)

ex)

const roundNum=Math.round(num);
console.log(roundNum);

결과
2
*2.1234 이므로 반올림이 되지 않는다.

floor (소수점 첫째 자리에서 내림)

ex)

const floorNum=Math.floor(num);
console.log(floorNum);

결과
2
*2.1234 에서 첫째자리에서 내림

ceil (소수점 첫째 자리에서 무조건 올림)

ex)

const celiNum=Math.ceil(num);
console.log(celiNum);

결과
3
*2.1234 에서 첫째자리에서 무조건 올림

random (0초과 1미만의 0.123~0.89542 랜덤 난수 발생)

ex)

const rndNum=Math.random();
console.log(rndNum);

결과
0.066532305003562
0.39558027292593656 등 랜덤으로 나온다.

Pi (원주율)

ex)

const piNum=Math.PI;
console.log(piNum);

결과
3.141592653589793

응용

ex) 0부터 10까지 난수를 발생 (소수점 값을 제거하고 정수를 나타냄)

const rn=Math.floor(Math.random()*11);
console.log(rn);

결과
9,2,3 등 랜덤으로 0~10까지의 숫자가 나옴

ex) 120 부터 150까지 난수를 발생 (소수점 값을 제거하고 정수를 나타냄)

const rn1=Math.floor(Math.random()*31)+120
console.log(rn1);

결과
147,137,127,128 등 랜덤으로 120~150까지의 숫자가 나옴

json (JavaScript Object Notation의 약자)

일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식.
클라이언트가 사용하는 언어에 관계 없이 통일된 데이터를 주고받을 수 있도록, 일정한 패턴을 지닌 문자열을
생성해 내보내면 클라이언트는 그를 해석해 데이터를 자기만의 방식으로 온전히 저장, 표시할 수 있게 된다.
과거 웹 초기 시절부터 사용되어 온 XML은 헤더와 태그 등의 여러 요소로 가독성이 떨어지고,
쓸데없이 용량을 잡아먹는다는 단점이 항상 지적되어 왔다. 이에 대응해 간결하고 통일된 양식으로 각광을 받고 있는 것이 JSON이다.

  • json 은 서버로 부터 웹페이지로 데이터를 전송할 때 자주 사용
  • 웹페이지에서 서버로 데이터를 전송할때도 json 포맷 자주 사용

ex)

let data={
    "employee": [
        {"firstName":"joo","lastName":"sehyeon"},
        {"firstName":"kim","lastName":"sungsu"},
        {"firstName":"seo","lastName":"suhyeon"},
        {"firstName":"choi","lastName":"gwangil"}
    ]
}
console.log(data);

json 은 끝에 ',' 가 있으면 실행이 되지 않음

결과

object

object 객체란? 특정 기능을 수행하는 단위체

ex)
휴대폰.통화하기(); 메서드
휴대폰.색상; 속성

ex)

const today=new Date(); //현재 날짜
const nowDay=today.getDay(); //0~6(일,월,화,수,목,금,토)
if(nowDay==1){
    console.log("월요일","<br/>");
}else if(nowDay==2){
    console.log("화요일","<br/>");
}else if(nowDay==3){
    console.log("수요일","<br/>");
}else if(nowDay==4){
    console.log("목요일","<br/>");
}else if(nowDay==5){
    console.log("금요일","<br/>");
}else if(nowDay==6){
    console.log("토요일","<br/>");
} else{
    console.log("일요일","<br/>");
}

결과
오늘은 금요일이다. 금요일로 나온다.

getDay는 (일,월,화,수,목,금,토) 순으로 나온다. 일요일부터 index 번호는 0이므로 0~6 까지 순으로 나열된다.

ex) 태어난 날짜

let today1=new Date(1991,11,18,11,30,11,11);
console.log("내가 태어난 날짜는",today1.getMonth(),"월",today1.getDate(),"일 입니다");
today1.setDate(20);
console.log("내가 태어난 날짜는",today1.getMonth(),"월",today1.getDate(),"일 입니다");

결과
내가 태어난 날짜는 11월 18일 입니다.
내가 태어난 날짜는 11월 20일 입니다.

ex) 2002년 월드컵 

let birth=new Date("june 1, 2002"); //월드컵 경기

let birthtime=birth.getTime();
let todaytime=today.getTime();
let day=Math.ceil((todaytime-birthtime)/24/60/60/1000);
console.log("월드컵이 "+day+ "일 지났습니다.");

결과
월드컵이 7490일 지났습니다.

window object (윈도우 객체)

1. alert(경고창)

ex)

alert("경고창이야");

결과

2. confirm(확인취소창(true 와 false 값으로 나타냄))

브라우저 객체라서 브라우저에서 확인을 해야함 확인:true 취소:false 값을 가짐

ex)

let yesNo=confirm("정말 삭제하시겠습니까?")
console.log(yesNo);

결과

3. prompt(묻고 답하기)

ex)

let txt=prompt("비밀번호가 뭐에요?","****")
if(txt==null){
    console.log("정확한 값을 입력해 주세요")
}else if(txt==""){
    console.log("값을 입력해 주세요")
}else if(txt!=""){
    console.log(txt);
}

결과

null값이면 "정확한 값을 입력해 주세요" 라고 나오고
"" 값이면 "값을 입력해 주세요" 라고 나오고
그외의 값이라며 콘솔로 나온다.

4. setTimeout

ex)

setTimeout(function(){
    console.log("2초후 실행")
},2000);

setTimeout 을 사용하면 콘솔창에서 2초뒤에 "2초후 실행" 이 나온다.
*2000=2초

5. setInterval

ex)

let i=0;
let fnc=setInterval(function(){
    console.log(i);
    if(i==3){
        clearInterval(fnc);
    }
    i++
},3000);

결과 3초마다 0에서부터 1씩 계속 증가한다.

JavaScript Selector(선택자)

javascript 기본 선택

결과

HTML

<div class="container">
        <ul id="list1" class="list">
            <li>li 1</li>
            <li>li 2</li>
            <li>li 3</li>
            <li>li 4</li>
            <li>li 5</li>
        </ul>
    </div>
    <div class="container">
        <ul id="list2" class="list">
            <li>li 1</li>
            <li>li 2</li>
            <li>li 3</li>
            <li>li 4</li>
            <li>li 5</li>
        </ul>
    </div>
    <div class="container">
        <ul id="list3" class="list">
            <li class="red">li 1</li>
            <li>li 2</li>
            <li>li 3</li>
            <li id="list3_4">li 4</li>
            <li>li 5</li>
        </ul>
    </div>

Script

const red=document.querySelector('.list .red');
red.style.color='blue';

querySelector를 통해 .list안에 li(클래스 .red)를 선택하여 css를 넣는다.

*똑같은 색상을 li전부에게 주고싶다면

for(let i=0; i<myList.length; i++){
            myList[i].style.color='orange';
        }

for문을 사용하여 i는 li의 갯수만큼 증가하여 orange컬러를 주게된다.

결과

javascript 선택하여 마우스 hover효과

결과

HTML

const paragraphs=document.getElementsByTagName('p')
        paragraphs[0].style.color='red'
        paragraphs[1].style.color='green'
        for(let i=0; i<paragraphs.length; i++){
        paragraphs[i].addEventListener('mouseover', function(){
            paragraphs[i].style.color='orange';
        });
        paragraphs[i].addEventListener('mouseout', function(){
            paragraphs[i].style.color='green';
        });
        }

getElementsByTagName 를 선언하고 태그'p'를 불러온다.
p의 갯수만큼 스타일이 적용되고 for문을 이용하여 addEventListener 이벤트를 선언하여
hover와 다르게 mouseover와 mouseout 이 있다.

addEventListener 를 이용한 (click, mouseenter, mouseleave, keydown, keyup, keypress)

mouse event 종류

  • click
  • mouseenter : 자기자신에게만 영향을 미친다. ex) 2depth메뉴 같은 경우
  • mouseleave : 자기자신에게만 영향을 미친다. ex) 2depth메뉴 같은 경우

keydown, keypress, keyup 알아보기

keydown, keypress, keyup 이벤트 정의
keydown: 키보드를 누를 때 실행. 키를 누르고 있을 때 단 한번만 실행
keypress: 키보드를 누를 때 실행. 키를 누르고 있을 때 계속 실행
keyup: 누른 키에서 손을 뗄 때 실행
그렇다면, keydown과 keypress는 같은가?
이론적으로, keydown 이벤트는 눌리거나 해제된 키를 나타내고, keypress 이벤트는 입력 중인 문자를 나타낸다.
또한, keydown은 모든 문자를 인식하는 반면, keypress는 한글은 인식하지 않는다.
이벤트 발생 순서
키를 누르면 keydown 이벤트가 발생하며, 이어서 바로 keypress 이벤트가 발생한다.
그런 다음 키가 해제되면 keyup 이벤트가 생성된다.
keydown > keypress > keyup 순으로 이벤트 진행

keydown

window.addEventListener('keydown',function(event){
    console.log(event.key);
    console.log(event.keyCode);
});

keyup (누르고 뗄때)

window.addEventListener('keyup',function(event){
    console.log(event.key);
    console.log(event.keyCode);
});

keypress

window.addEventListener('keypress',function(event){
    console.log(event.key);
    console.log(event.keyCode);
});

JQuery

04_속성 탐색 메서드

01.속성선택자 01

결과

HTML

<span>속성'title'의 값이'attr'인 엘리먼트의 색을 바꿔 주세요.</span>
		<div>
			1
			<div>
				1-1
			</div>
		</div>
		<div>
			2
			<div>
				2-1
				<div>
					2-1-1
					<ul>
						<li>2-1-1-1</li>
						<li title="attr">2-1-1-2 (  이부분을 고쳐주세요 )</li>
						<li title="attr">2-1-1-3 (  이부분을 고쳐주세요 )</li>
						<li>2-1-1-4</li>
						<li>2-1-1-5</li>
					</ul>
				</div>
			</div>
			<div>
				2-2
				<ul>
					<li>2-2-1</li>
					<li>2-2-2</li>
					<li>2-2-3</li>
					<li>2-2-4</li>
					<li>2-2-5</li>
				</ul>
			</div>
		</div>

JavaScript

$(function(){
			$('li[title="attr"]').css({color:'red'});
			//$('li[title=attr]').css({color:'blue'}); //따옴표 없어도됨
		});

02.속성선택자 02

결과

HTML

<div id="wrap">
		<p>
			<a href="http://cjh7652.dothome.co.kr/sRoom">hyunroom</a>
		</p>
		<p>
			<a href="https://www.naver.com" target="_blank">naver</a>
		</p>
		<p>
			<a href="https://www.daum.net" >daum</a>
		</p>
		<p>
			<a href="https://www.google" >google</a>
		</p>
		<p>
			<a href="https://www.nate.com" >nate</a>
		</p>
		
		<form action="#" method="post" id="menber_f">
			<p>
				<label for="user_id">아이디</label>
				<input type="text" name="user_id" id="user_id"/>
			</p>
			<p>
				<label for="user_pw">비밀번호</label>
				<input type="password" name="user_pw" id="user_pw"/>
			</p>
		</form>
	</div>

Script

$(function(){
			$('a[target]').css({color:'red'});
			$('a[href^=https]').css({color:'green'});
			$('a[href$=net]').css({color:'blue'});
			$('a[href*=google]').css({color:'purple'});
			$('input[type=text]').css({color:'skyblue'});
			$('input[type=password]').css({background:'gray'});
		});

03.속성상태에 따른 탐색 선택자

결과

HTML

<div id="wrap">
		<div class="content">
			<p>내용1</p>
			<p style="display:none">내용2</p>
			<p>내용3</p>
		</div>
		<form action="#">
			<p id="zone1">
				<select name="course" id="course">
					<option value="opt1">옵션1</option>
					<option value="opt2" selected>옵션2</option>
					<option value="opt3">옵션3</option>
				</select>
			</p>
			<p id="zone2">
				<input type="checkbox" name="hobby1" value="독서"/> 독서
				<input type="checkbox" name="hobby2" value="자전거"/> 자전거
				<input type="checkbox" name="hobby3" value="등산" checked /> 등산
			</p>
			<p id="zone3">
				<input type="radio" name="gender" value="male"/> 남성
				<input type="radio" name="gender" value="female"  checked /> 여성
			</p>
		</form>
	</div>

Script

$(function(){
			$('#wrap p:hidden').css({display:'block', background:'#ff0'});
			let z1=$('#zone1 :selected').val();
			console.log(z1);
			let z2=$('#zone2 :checked').val();
			console.log(z2);
			let z3=$('#zone3 :checked').val();
			console.log(z3);
		});

05_그 밖에 메서드

01. :has필터셀렉트 .has() 선택자

결과

HTML

<span>아이디가 el인 엘리먼트의 자식엘리먼트중 :has 필터셀렉터를 이용하여 p태그를 포함하는 엘리먼트를 선택해 글자색을 변경해 주세요.</span>
	<div>
		<ul id="el">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li><p>4</p></li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
		</ul>
	</div>

Script

$(function(){
			$('#el>li:has(p)').css({color:'red'});
			$('#el>li').has('p').css({color:'red'});
		});

02.filter 선택자

결과

HTML

<span>ul의 자식 엘리먼트중 클래스값이 el인 엘리먼트만 글자색을 변경해 주세요.</span>
	<div id="wrap">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li class="el">4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>

Script

$(function(){
			$('ul li').filter('.el').css({color:'red'});
		});

03.not 메소드

결과

HTML

<span>아이디가 el인 엘리먼트의 자식엘리먼트중 class값이 not인 엘리먼트를 제외하여 선택해주고 선택된 엘리먼트의 글자색을 변경해 주세요.</span>
	<div>
		<ul id="el">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li class="not">4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
		</ul>
	</div>
	
	<span>ul의 자식 엘리먼트중 클래스값이 el이 아닌 엘리먼트만 글자색을 변경해 주세요.</span>
	<div id="wrap">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li class="el">4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>

Script

$(function(){
			$('#el li').not('.not').css({color:'red'});
			$('#wrap li:not(.el)').css({color:'red'});
		});

04.find 메소드

결과

HTML

<span>find() 메서드를 사용하여 id가 "el"인 엘리먼트를 찾아 색을 바꾸고 그안에 아이디가 "nextEl"인 엘리먼트를 찾아 색을 바꿔주세요.</span>
	<div id="wrap">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3
				<ul>
					<li>3-1</li>
					<li>3-2</li>
					<li id="el">3-3 (먼저 이곳의 색을 바꿔 주세요.)
						<ul>
							<li>3-3-1</li>
							<li>3-3-2</li>
							<li id="nextEl">3-3-3 (그다음 이곳의 색을 바꿔 주세요.)</li>
							<li>3-3-4</li>
							<li>3-3-5</li>
						</ul>
					</li>
					<li>3-4</li>
				</ul>
			</li>
			<li>4
				</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>

Script

$(function(){
			//방법1
			/* let el=$('#wrap #el').css('color','blue')
			el.find('#nextEl').css('color','red'); */
			//방법2
			$('#wrap #el').css('color','blue').find('#nextEl').css('color','red');
		});

05.is 메소드

결과


HTML

<span>is() 메서드를 사용하여 id가 "el"인 엘리먼트의 확장집합중 id가 "nextEl"인 엘리먼트가 존재하는지 체크하고 존재한다면 alert창을 띄워주세요.</span>
	<div id="wrap">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3
				<ul>
					<li>3-1</li>
					<li>3-2</li>
					<li id="el">3-3
						<ul>
							<li>3-3-1</li>
							<li>3-3-2</li>
							<li id="nextEl">3-3-3</li>
							<li>3-3-4</li>
							<li>3-3-5</li>
						</ul>
					</li>
					<li>3-4</li>
				</ul>
			</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>

Script

$(function(){
			let el=$('#el>ul > li').is('#nextEl');
			if(el==true){
				alert('존재합니다.')
			}else{
				alert('존재하지 않습니다.')
			}
		});

06.contains()_contents()_end() 선택자

결과

HTML

<span></span>
	<div id="wrap">
		<section id="inner_1">
			<h5>contains(), contents()</h5>
			<p>내용1</p>
			<p>내용2</p>
			<p>내용3</p>
		</section>
		<section id="inner_2">
			<h5>end()</h5>
			<p>내용4</p>
			<p>내용5</p>
			<p>내용6</p>
		</section>
	</div>

Script

$(function(){
			$('#wrap #inner_1 p:contains(내용1)').css({color:'red'});
			$('#wrap').contents().css('border','1px solid #f00');
			$('#inner_2 p').eq(3).end().css('color','green');
		});

object 객체조작

01_html_text

결과

HTML

<body>
    <div id="div1">안에 들어 있는 텍스트1</div>
    <div id="div2">안에 들어 있는 텍스트2</div>
    <div id="div3">안에 들어 있는 텍스트3</div>
    <div id="div4">안에 들어 있는 텍스트4</div>
    <div id="div5">안에 들어 있는 텍스트5</div>
</body>

Script

$(function(){
    //.text("")는 내용이 비워진다.
    let txt=$('#div1').text("text메소드에서 내용을 바꿉니다");
    
    //.html은 dom을 조작해서 바꾸는것
    $('#div2').html('html메소드에서 내용 바꾸기')
    
    //.text와 .html 비교
    $('#div3').text('<strong>text메소드</strong>')//<strong>을 그대로 문자로 출력된다.
    $('#div4').html('<strong>text메소드</strong>')//<strong>을 활용되고 나머지 문자가 출력된다.
    
    //hover 적용
    $('#div5').hover(function(){$('#div5').html('<strong>text메소드</strong>')},function(){$('#div5').html('안에 들어 있는 텍스트5')}) 
    console.log(txt);
});

.text로 하면 strong의 태그도 텍스트로 인식하고 .html로 하면 태그가 적용된다.

02_attr

결과

HTML

<body>
    <img src="./img/img1.gif" alt="">
    <img src="./img/img1.gif" alt="">
    <img src="./img/img1.gif" alt="" class="changeThis">
    <img src="./img/img1.gif" alt="">
</body>

Script

$('img').hover(function(){
    $(this).attr('src','./img/img2.gif');
},function(){
    $(this).attr('src','./img/img1.gif');
});
//mouseover <=> mouseout , mouseenter <=> mouseleave 대신 hover

hover하면 $(this).attr('src','./img/img2.gif'); 이 실행되고
hover하지 않으면 $(this).attr('src','./img/img1.gif'); 이 실행된다.

03_addClass_removeClass

결과

HTML

<body>
    <div id="div1">졸려?</div>
    <div id="div2" class="box">졸지마</div>
    <div id="div3" class="box">좀있음 쉬는 시간</div>
    <div id="div4" class="box alert">좀만 버티면 집 가</div>
</body>

CSS

        div{padding: 10px; margin-bottom: 10px;}
        .box{border: 3px solid blue;}
        .alert{border-color: #F00;}

Script

$('#div1').addClass('box');
$('#div2').removeClass('box');
$('#div3').addClass('alert');
$('#div4').removeClass('alert');

removeClass(.box)를 하면 border가 아예 사라지고, #div4 박스는 .box와 .alert가 동시에 적용이 되었고 removeClass(.alert)를 하면 빨간색 보더값만 제외된다.

profile
JooSehyun
이전 포스트

Front-end 국비지원 #032일

다음 포스트

Front-end 국비지원 #034일

0개의 댓글