Front-end 국비지원 #031일

JooSehyun·2022년 11월 27일
CSSJavaScriptarrayhtmljquery배열
0

JavaScript

배열 array

오브젝트(연관되어있는 특징과 행동들을 묶어 놓는것)
자료구조(비슷한 타입들을 묶어 놓는 것을 자료구조라 한다. 동일한 타입만 담을 수 있다는 차이점이 있다.)

1. 배열 선언하는 방법

방법 1

const arr1=new Array();

방법 2

const arr2=[1,2]

JavaScript

const fruits=['사과','바나나','체리','수박']
console.log(fruits); // 콘솔로 보면 프로토타입 어레이 , 프로토타입 오브젝트가 있다.
console.log(fruits.length); // 4개 (사과, 바나나, 체리, 수박)
console.log(fruits[0]);//사과
console.log(fruits[1]);//바나나
console.log(fruits[2]);//undefined
console.log(fruits[fruits.length-1]);//마지막은 뭐니? 바나나

for문

JavaScript

const fruits=['사과','바나나','체리','수박']
for(let i=0; i<fruits.length; i++){
    console.log(fruits[i])
}

fruits 의 length 만큼 i는 1씩 증가하고 콘솔에 0번~3번째 까지 콘솔에 보이게 하기


for each문

JavaScript

const fruits=['사과','바나나','체리','수박']
fruits.forEach(function(fruit, index, array){
    console.log(fruit, index, array);
});


for of문

JavaScript

const fruits=['사과','바나나','체리','수박']
for(let fruit of fruits){
    console.log(fruits);
}

2. 배열 add, delete, copy

push (add 추가하기)

JavaScript

const fruits=['사과','바나나','체리','수박']
fruits.push('apple','banana');
console.log(fruits);

뒤에서 부터 추가하고 push를 쓴다.

pop (뒤에 있는 배열을 지우기)

JavaScript

fruits.pop();
console.log(fruits);

banana가 지워진걸 확인할 수 있다.

unshift (앞에 배열을 추가)

JavaScript

fruits.unshift('딸기','레몬'); //앞에 item을 추가
console.log(fruits);

앞쪽에 딸기, 레몬이 추가 되었다.

shift (앞에 배열을 지우기)

JavaScript

fruits.shift();
console.log(fruits);

맨 앞 '딸기'가 지워졌다.

*뒤에 있는 데이터는 빈곳에서 넣었다 뺐다 하기 속도가 빠르지만 앞에서 추가하고 삭제하는 것은 기존에 있는 데이터들의 순서를 바꾸고 추가 삭제해야 하기 때문에 느려진다.

splice (배열을 선택하여 지우기)

JavaScript

fruits.push('오렌지','망고','귤');
console.log(fruits);
fruits.splice(1,2);
console.log(fruits);

오렌지 망고 귤을 추가하였고 splice를 사용하여 1번에서 부터 2개를 지우게 했다. splice(1,2)
사과 와 바나나가 삭제 되었다.

JavaScript

fruits.splice(1,1, '딸기'); 
console.log(fruits);

1번 1개를 지우고 '딸기'를 추가한다.

3. Combine (합치기)

concat

JavaScript

const fruits2=['복숭아','참외'];
const newFruits=fruits.concat(fruits2); //뒤에 추가하는것
const newFruits=fruits2.concat(fruits);//앞에다가 합치는것
console.log(newFruits);

4. searching

indexOf / includes 찾아주는 역할

JavaScript

console.log(fruits);
console.log(fruits.indexOf('사과'));  // indexOf는 몇번째 있는지 알려준다.
console.log(fruits.indexOf('복숭아')); //는 없기 때문에 -1 없음을 의미함 (없으면 -1의 값을 갖는다.) 
console.log(fruits.includes('복숭아')); //false //갖고있으면 참 없으면 거짓
console.log(fruits.includes('귤')); //true //갖고있으면 참 없으면 거짓

lastIndexOf

JavaScript

console.clear();
fruits.push('사과','복숭아');
console.log(fruits);
console.log(fruits.lastIndexOf('사과'));

같은 글자가 있다면 lastIndexOf를 사용하면 뒤에서 부터 찾아준다.

5. 구분자

join

JavaScript

{
    const fruits=['apple','banana','orange']
    const result=fruits.join('/') 
    console.log(result)
}

사이사이 '/'를 넣어 구분하고 싶을때 사용

split

JavaScript

{
    const fruits='사과, 키위, 바나나, 체리';
    const result=fruits.split(',',2); //'사과, 키위, 바나나, 체리'  ','를 기점으로 2개를 보여달라는것
    console.log(result);
}

str.split

JavaScript

{
    const str='The quick brown fox jumps over the lazy dog';
    const words=str.split(' ');
    console.log(words[3]);//띄어쓰기를 기점으로 단어 하나하나 중 3번째에 있는 단어

    const chars=str.split('');
    console.log(chars[8]); //띄어쓰기와 함께 8번째에 있는 문자
}

reverse

JavaScript

{
    const array=[1,2,3,4,5];
    const result=array.reverse(); //array의 순서를 반대로 reverse
    console.log(result);
    console.log(array); //result와 array 둘다 바뀐다.
}

slice

JavaScript

{
    const array=[1,2,3,4,5];
    const result=array.slice(2, 5) //2부터 시작해서 5전까지 두고 나머지 자름
    console.log(result);
    console.log(array); //array의 값은 변하지 않는다.
}

Class 사용하기

JavaScript

class student{
    constructor(names, age, gender, enrolled, score){
        this.names=names;
        this.age=age;
        this.gender=gender;
        this.enrolled=enrolled;
        this.score=score;
    }
}
const students=[
    new student('상팔', 33, '남성', true, 45),
    new student('두식', 32, '남성', false, 80),
    new student('성철', 35, '남성', true, 90),
    new student('팔득', 38, '남성', false, 66),
    new student('종득', 30, '남성', true, 88),
]
{
    const result= students.find(function(student, index){
        //console.log(student, index);
        return student.score===90; //90점 찾기
        //return student.enrolled===false; //false 찾기
    }); 
    console.log(result);
}

student중 true 인 학생들 찾기

//방법1
{
    const result=students.filter(function(student){
        return student.enrolled===true
    });
    console.log(result);
}
//방법2 (권장)
{
    const result=students.filter((student)=> student.enrolled);//한줄일때 중괄호 생략 가능
    console.log(result);
}

map함수 (원본을 바꾸지 않고 새로운 map함수로 배열을 정하고 볼 수 있음.)

JavaScript

{
    const result=students.map((student)=> student.score); 
    console.log(result);
    console.log(students)
}

some (콜백함수에 값이 있는지 없는지 확인하는 것)

every (모든 요소들이 충족해야 true를 나타냄)

JavaScript

{
    const result=students.some((student)=> student.score < 50)
    console.log(result); //student중 50점 미만인 사람이 있는지 찾는것 있기 때문 true
}
{
    const result1=students.every((student)=> student.score < 95)
    console.log(result1); //모두 충족해야 true , false 가 나옴
}

JQuery

기본 선택자

ex)01_전체선택자

HTML

<span>현재 보이는 모든 숫자의 글자색을 바꿔 주세요</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>2-1-1-2</li>
						<li id="element">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

<script type="text/javascript">
		$(function(){
			$('*').css({color:'red'});
		});
	</script>

ex)02_아이디선택자

HTML

<span>'element'아이디를 선택하여 노랑색 배경과 3px 두께의 실선을 만들어 주세요</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>2-1-1-2</li>
						<li id="element">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(){
			$('#element').css({background:'yellow',border: "3px dashed red"});
		});

ex)03_클래스선택자

HTML

<span>'elements'클래스를 선택하여 빨강색 배경과 글자색을 skyblue으로 만들어 주세요</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>2-1-1-2</li>
						<li id="element">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 class="elements">2-2-3  (나를 바꿔 주세요)</li>
					<li class="elements">2-2-4  (나를 바꿔 주세요)</li>
					<li>2-2-5</li>
				</ul>
			</div>
		</div>

JavaScript

$(function(){
			 $('.elements').css({background:'red',color:'skyblue'});
		});

ex)04_요소선택자

HTML

<span>'h2'요소를 선택해서 배경색은  skyblue 투명도는 0.9로 만들어 주세요</span>
		<div>
			<h1>1</h1>
			<div>
				<h2>1-1   (나를 바꿔 주세요)</h2>
			</div>
		</div>
		<div>
			2
			<div>
				2-1
				<div>
					2-1-1
					<ul>
						<li>2-1-1-1</li>
						<li>2-1-1-2</li>
						<li>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 class="elements">2-2-3</li>
					<li class="elements">2-2-4</li>
					<li>2-2-5</li>
				</ul>
			</div>
		</div>

JavaScript

$(function(){
			$('h2').css({background:'skyblue',opacity:'.9' });
		});

ex)05_그룹선택자

HTML

<span>'h1,h2,h3,h4'요소들을 선택해서 글자크기를 13px, border 색상은 빨간색으로 만들어 주세요</span>
	<div>
		<h1>1   (나를 바꿔 주세요)</h1>
		<div>
			<h2>1-1   (나를 바꿔 주세요)</h2>
		</div>
	</div>
	<div>
		2
		<div>
			<h3>2-1   (나를 바꿔 주세요)</h3>
			<div>
				2-1-1
				<ul>
					<li><h4>2-1-1-1   (나를 바꿔 주세요)</h4></li>
					<li>2-1-1-2</li>
					<li>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(){
			$('h1,h2,h3,h4').css({fontSize:'13px' ,color:'red', border:"1px solid red"});
		});

ex)06_인접관계선택자

HTML

<span>'h3요소의 클래스 tit'요소 다음 선택해서 글자크기를 글자색을 green색으로 만들어 주세요</span>
	<div>
		1 
		<div>
			1-1
		</div>
	</div>
	<div>
		2
		<div>
			2-1
			<div>
				2-1-1
				<ul>
					<li class="tit"><h3 >2-1-1-1  </h3></li>
					<li>2-1-1-2  (나를 바꿔 주세요)</li>
					<li>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(){
		$('.tit').next().css({color:'green'});
		$('.tit+++li').next().css({color:'green'});
	});

ex) 07인접관계선택자부모요소선택자

HTML

<span>parent() 메서드를 사용하여 id가 "childEl"인 엘리먼트의 부모 엘리먼트인 태그네임이 "ul"인 엘리먼트를 찾아 색을 바꿔 주세요.</span>
	<div id="wrapper">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3
				<ul id="parentEl">
					<li>3-1</li>
					<li>3-2</li>
					<li id="childEl">3-3</li>
					<li>3-4</li>
				</ul>
			</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>

JavaScript

$(function(){
			$('#childEl').parent('ul').css({color:'red'});
		});

ex) 08_자식선택자

HTML

<span>children() 메소드를 사용하여 아래 엘리먼트들의 글자색을 변경해 주세요.</span>
	<div id="wrapper">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>

JavaScript

$(function(){
		$('#wrapper ul').children().css({color:'red'});
	});

ex) 09인접관계선택자형(이전)/동생(다음)요소선택자

HTML

<span>클래스 txt를 기준으로 prev()이전-배경색 노랑으로 next()다음-배경색 빨강으로 변경해주세요 </span>
	<div id="wrapper">
		<h2>커피믹스</h2>
		<h4>이환천</h4>
		<p>내목따고</p>
		<p class="txt">속꺼내서</p>
		<p>끊는물에</p>
		<p>넣오라고</p>
		<p>김부자이</p>
		<p>시키드나</p>
	</div>

JavaScript

$(function(){
			$('.txt').prev().css('background','yellow');
			$('.txt').next().css('background','red');
		});

ex) 10인접관계선택자전체형(이전)/전체동생(다음)요소선택자

HTML

<span>클래스 txt를 기준으로 prevAll()전체이전-배경색 노랑으로 테두리 초록색, nextAll()전체다음-배경색 빨강으로 테두리 노랑 변경해주세요 </span>
	<div id="wrapper">
		<h2>짝사랑</h2>
		<h4>이환천</h4>
		<p>마주치는 니눈빛이</p>
		<p class="txt">무엇들을 말하는지</p>
		<p>걔느이미 알고 있다.</p>
		<p>여자들다 여우라서</p>
		<p>모르는척 하는거지</p>
		<p>옆에있는 걔친구도</p>
		<p>걔친구의 친구들도</p>
		<p>니만빼고 전부다가</p>
		<p>니사랑을 알고있다</p>
	</div>

JavaScript

$(function(){
			$('.txt').prevAll().css({background:'yellow',border:'3px solid green'});
			$('.txt').nextAll().css({background:'red',border:'1px solid yellow'});
		});

ex) 11인접관계선택자전체형제요소선택자

HTML

<span>클래스 txt를 기준으로 siblings()전체형제-배경색 빨강으로 margin-bottom:10px로 변경해주세요 </span>
	<div id="wrapper">
		<h2>소주</h2>
		<h4>이환천</h4>
		<p>초록색만 쳐다봐도</p>
		<p>신물나고 속이쓰려</p>
		<p>녹색병에 독극물을</p>
		<p class="txt">두번다시 안마신다</p>
		<p>내눈앞에 술이있고</p>
		<p>안주들이 신비로워</p>
		<p>딱한잔만 마셔보니</p>
		<p>어제보다 목넘김이</p>
		<p>부드럽고 깔끔해서</p>
		<p>또한번더 속아본다.</p>
	</div>

JavaScript

$(function(){
			$('.txt').siblings().css({background:'red',marginBottom:'10px'});
		});

ex) 12인접관계선택자범위 제한 전체 형/동생 요소선택자

HTML

<span>클래스 txt3를 기준으로 prevUntil()의 title - 배경 아쿠아색 보더 빨간색/ nextUntil()을 이용해서 text6전까지 아쿠아색 보더 빨간색으로 변경해주세요 </span>
	<div id="wrapper">
		<h2 class="title">난리</h2>
		<h4>이환천</h4>
		<p>내가진짜</p>
		<p>마음먹고</p>
		<p>살을빼면</p>
		<p class="txt3">난리난다</p>
		<p>내위장들</p>
		<p>하루종일</p>
		<p class="text6">밥달라고</p>
		<p>난리난다</p>
	</div>

JavaScript

$(function(){
			$('.txt3').prevUntil('.title').css({background:'aqua',border:'1px solid red'});
			$('.txt3').nextUntil('.text6').css({background:'aqua',border:'1px solid red'});
		});

ex) 13인접관계선택자상위 요소선택자

HTML

<span>parents() 메서드를 사용하여 id가 "childEl"인 엘리먼트의 조상 엘리먼트중 id가 "parentEl"인 엘리먼트를 찾아 색을 바꿔 주세요.</span>
	<div >
		<ul>
			<li>1</li>
			<li class="parentEl">2</li>
			<li>3
				<ul>
					<li>3-1</li>
					<li>3-2</li>
					<li class="parentEl">3-3
						<ul>
							<li>3-3-1</li>
							<li>3-3-2</li>
							<li id="childEl">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>

JavaScript

$(function(){
			$('#childEl').parents('.parentEl').css({background:'red'});
		});

ex) 14인접관계선택자가장 가까운 상위 요소선택자

HTML

<span>closest() 메서드를 사용하여 id가 "childEl"인 엘리먼트의 가장 가까운 상위 엘리먼트를 찾아 border 5px 빨간색을 바꿔 주세요.</span>
	<div>
		<ul>
			<li>1</li>
			<li class="parentEl">2</li>
			<li>3
				<ul>
					<li>3-1</li>
					<li>3-2</li>
					<li class="parentEl">3-3
						<ul>
							<li>3-3-1</li>
							<li>3-3-2</li>
							<li id="childEl">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>

JavaScript

$(function(){
			$('#childEl').closest('.parentEl').css('border','5px solid red');
		});
profile
JooSehyun
이전 포스트

Front-end 국비지원 #030일

다음 포스트

Front-end 국비지원 #032일

0개의 댓글