JavaScript

1. function- input output

function name(parameter1,parameter2,... ){실행문(코드)}
= 특정 기능을 수행하도록 작성된 코드 블록

ex)01

function printHello(){
    console.log('Hello')
}
printHello();  

*밖으로 printHello(); 함수를 불러와야 실행이 된다.

결과 값 : Hello

ex)02

function log(message){
    console.log(message)
}
log('hi sehyeon')
log('hi joo')

*파라미터로 메세지를 전달하면 전달된 메세지가 나옴

첫번째 결과 값 : hi sehyeon
두번째 결과 값 : hi joo


2. parameters 파라미터(매개변수)

  • 함수를 정의할 때 나열된 변수를 뜻하며, 함수를 호출 할 때 input되는 데이터를 가르키기 위해 사용된다.
  • 매개변수(parameter, 파라미터)는 변수의 특별한 한 종류로서 함수 등에 input으로 제공되는 데이터를 말한다.
  • 매개변수는 하나의 속성값을 받을 수도 있고, object를 받을 수도 있다.
  • 매개변수의 기본값도 미리 설정해 매개변수를 받지 못한 경우 기본값으로 사용할 수 있다.

불러낼때 인자값(argument)
premitive(원시적) parameter 원시적 : 하나의 값을 줄 수 있는것

1) object parameter

ex)01

function changeName(obj){
    obj={name:'hyeons'}
}
const joo={name:'joo'}
changeName(joo)
console.log(joo);

결과 값 : object name: "joo"

방법)01

function showMessage(message, from){
    if(from===undefined){
        from='no-massege';
    }
    console.log(`${message} by ${from}`)
} showMessage('hi',)

결과 값 : hi by no-massege

방법)02

function showMessage(message, from='unknown'){
    console.log(`${message} by ${from}`)
}
showMessage('hi',) 

결과 값 : hi by unknown


3. Rest parameters

rest parameter 문법은 함수에 명시되지 않은 파라미터들을 배열로 받을 수 있다. 자바스크립트에서는 가변항 함수(variadic fucntion) 개념을 표현할때 사용된다.

*함수의 마지막 파라미터 앞에 "..."를 붙이면 함수를 호출할때 넘어온 모든 후속 파라미터들을 배열에 넣을 수 있다. 마지막 위치의 매개변수만 rest parameter로 설정 가능하다.

ex)01

function printAll(...args){
    for(let i=0; i<args.length; i++){
        console.log(args[i]);
    }
    for(const arg of args){
        console.log(arg);
    }
    args.forEach((arg) => console.log(arg))
}
printAll('joo','hyeon','se','joojoo')

결과 값 : joo , hyeon, se, joojoo, joo, hyeon, se, joojoo


4. Local scope (지역 범위)

: 블록 내부에 선언된 경우 Local scope 라고 한다.
내부에서만 사용이 가능한 변수를 지역 변수라고 한다.

*자바스크립트 스코프란 {} -밖에서는 {}안에 있는것이 보이지 않고 안에서만 보임

let globalMessage='global'; //전역변수
function printMessage(){
    let message='hello'; //local(지역변수)
    console.log(message); //안에서만 있을때 보임 
    console.log(globalMessage);
}
 printMessage();

결과 값 : global hello

함수안에 함수를 정의 할 수 있는데, 부모의 변수를 가져올수 있는데 이런것을 클로저라고 한다.

let globalMessage='global'; //전역변수
function printMessage(){
    let message='hello'; //local(지역변수)
    console.log(message); //안에서만 있을때 보임 
    console.log(globalMessage);
    ---->이어서
    function printAnother(){
        console.log(message);
        let childMessage='헬로우';
        console.log(childMessage);
    }
    printAnother();
 }
 printMessage();

기존에 Message를 printAnother를 했고 Message에 새로운 변수 childMessage에 '헬로우'를 넣어준다.
결과 값 : global hello 밑에 '헬로우' 가 나온다.


5. return a value

retrun

'return 명령문은 함수 실행을 종료하고 주어진 값을 함수 호출 지점으로 반환합니다.'라고 되어있다.

  • 함수 중단
  • 주어진 값을 함수 호출 지점으로 반환

    함수에서 return 명령문에 도달하면 함수의 실행은 그 지점에서 중단되고,
    값을 제공한 경우는 함수를 호출한 곳에 그 값을 반환하는데, 이때 값을 명시하지 않으면 undefined를 반환한다.
function sum(a, b){
    return a+b; 
}
const result=sum(7, 9)
console.log(`sum:${sum(7, 9)}`);

return a+b;반환하고 끝내라 라는 의미 여기에 더이상 실행할 수 있는게 없음

결과 값 : (sum:${sum(7, 9)}) 에 sum: 이라는 문자를 벡틱안에 넣어서 텍스트로 표현되어
sum: 16 이라는 결과가 나온다.

* return과 break의 차이점

return과 반복문에서 쓰이는 break의 차이점은?
return은 함수 자체를 중단시키는데 비해 break 명령문이 실행되면 블록 문장에서 빠져나와 다음 작업을 시작한다.
return : 함수 탈출. 해당 함수(메서드) 자체에서 빠져나감.
break : 루프 탈출. for , switch , while문 등 함수 내의 반복문에서 빠져나감.


6. 함수 표현식(function expression)

함수는 *호이스팅이 된다. 변수를 선언하기 전에도 호출이 가능

*호이스팅

호이스팅 :
JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.
호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 합니다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의하세요.

출처: [https://developer.mozilla.org/ko/docs/Glossary/Hoisting]

ex) 함수 선언문 방식

function sayHi() {
  alert( "Hello" );
}

ex) 함수 표현식(Function Expression)

let sayHi = function() {
  alert( "Hello" );
};

함수 선언문 과 함수 표현식의 차이점

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.
함수 선언식은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.


7. 즉시 실행함수

즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의되자마자
즉시 실행되는 Javascript Function 를 말한다.

*전역 변수의 생성을 줄이거나 외부 접근을 불가능하게 할 때 사용한다.
정의되자마자 즉시 실행되므로 재사용이 필요 없으니 이름을 붙이지 않는다.
즉시 실행함수는 '(())' 로 함수를 감싸서 실행하는 문법으로 쓴다.

기명함수

(function hello1() {
    console.log('기명함수');
})();

익명함수

(() => {
    console.log("익명함수");
})();

이름이 없는 함수

const printYes=function(){
    console.log('이름이 없는 함수')
}

이름이 있는 함수

const printNo=function print(){
    console.log('이름이 있는 함수')
}

8. 콜백함수

const printYes=function(){
    console.log('me too')
}
const printNo=function(){
    console.log(':-(')
}
function randomQ(answer, printYes, printNo){
    if(answer==='love'){
        printYes(); 
    }else{
        printNo(); 
    }
} 
randomQ("love", printYes, printNo) 

printYes 변수에 'me too' 가 나오고 printNo 변수에는 ':-(' 가 나온다.
randomQ 라는 대답에 answer ==='love' 라는 대답이 나오면 pirntYes 아니라면 printNo가 출력된다.


9. Arrow function - ES6 문법

function이라는 키워드 대신 Arrow (화살표)를 사용하여 함수를 만들어내는 문법이다.

function 문법을 왜 사용하는지 궁금하여 검색을 해봤다.

혹시 프로그래밍할 때 function 문법은 왜 사용하는지 아십니까?
모른다면 지금 당장 외우시길 바랍니다.
1. 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때(그리고 나중에 재사용할 때)
2. 입출력기능을 만들 때
이럴때 함수를 쓰셔야 합니다. Arrow function을 사용하면 함수 본연의 입출력기능을 아주 직관적으로 잘 표현해줍니다.

  • 소괄호 생략이 가능 (파라미터가 하나라면 소괄호 생략가능)
var 두배만들기 = x => { return x * 2 }

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );
  • 중괄호 생략이 가능
    중괄호 안에 return 한줄 뿐이라면 중괄호와 return도 생략가능합니다.
var 두배만들기 = x => x * 2 ;

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

[출처]https://codingapple.com/unit/es6-3-arrow-function-why/

등의 이유가 있다고 한다. 이렇게 보면 되게 간결하고 사용하기 효율적으로 보이기도 한다.

이름이 없는 익명함수의 형태이며 기존의 것과 비교를 해보자.

  • 기존 방식 ex)
function randomQ(answer, printYes, printNo){
    if(answer==='love'){
        printYes();
    }else{
        printNo();
    }
} 
randomQ("love", printYes, printNo) 
  • 기명함수 ex)
const randomQ1= function randomQ2(answer, printYes, printNo){
    if(answer==='love'){
        printYes();
    }else{
        printNo();
    }
}
randomQ1("no", printYes, printNo);

기명 함수 표현함수이름으로 함수 실행이 되지 않음
굳이 함수 이름을 쓰는 이유는 에러가 발생했을때 에러를 찾기 쉽게 해주는 장점이 있어서 사용한다.

  • Arrow function 방식 ex)
const randomQ=(answer, printYes, printNo) => {
    if(answer==='love'){
        printYes();
    }else{
        printNo();
    }
}
randomQ("no", printYes, printNo);

10. 즉시실행 함수

즉시실행 함수 - 기명즉시실행함수

방법 1

(function square(x){
    console.log(x*x);
})(2);

방법 2

(function square(x){
    console.log(x*x);
}(2));

즉시실행 함수 - 익명즉시실행함수

방법 1

(function (y){
    console.log(y*y);
})(3); 

방법 2

(function (y){
    console.log(y*y);
}(4));

변수에 즉시 실행 함수 저장

(mySquare=function (z){
    console.log(z*z);
})(2);
mySquare(4);

즉시 실행함수를 사용하는 이유는?

초기화 즉 즉시 실행함수는 한번의 실행만 필요로 하는 초기화 코드 부분에 많이 사용하기 때문이다.


11. 함수 레벨 스코프 (function level scope)

*스코프(scope)란 중괄호({})로 둘러쌓인 코드의 영역을 뜻함.

ex) 1

function functionLevelScope(){
    if(true){
        var myScope1="function level scope"
    }
    console.log(myScope1);
}
functionLevelScope();

var는 밖에서도 보여달라고 하면 보여준다. 장점?이자 단점인듯 하다. 하지만 오류를 최소화 하기 위해서는 ES6에 새로나온 let , const 를 쓰는것이 좋다.

12. 블록 레벨 스코프(function level scope)

ex)01

function blockLevelScope(){
    if(true){
        let myScope2="block level scope"
        console.log(myScope2);
    }
    console.log(myScope2);
}
blockLevelScope();

밖에서 불러내어 console.log를 보여달라고 하면 정의가 되지 않았다고 나온다.


Node.js


* Node.Js 란?

2009년 5월 27일 처음 소개된 Node.js는 오픈 소스 JavaScript 엔진인 크롬 V8에 비동기 이벤트 처리 라이브러리인 libuv를 결합한 플랫폼이다. 다시 말해, JavaScript로 브라우저 밖에서 서버를 구축하는 등의 코드를 실행할 수 있게 해주는 런타임 환경이다. Ryan Dahl이 처음 개발했으며, 처음엔 리눅스와 macOS만 지원되었으나 2011년 7월에 Windows 버전도 발표되었다.

빈번한 I/O처리에 있어서의 우수한 성능, 서버 확장의 용이성, 무엇보다도 JavaScript라는 프론트엔드 필수 언어로 백엔드까지 작성할 수 있다는 엄청난 장점 때문에 출시 이후로 빠르게 점유율을 높여가고 있다. 특히 넷플릭스처럼 엄청나게 많은 양의 인풋 아웃풋 데이터를 처리해야 하는 서비스에 있어서 강점이 두드러진다.

2014년 12월 한때 Node.js의 포크인 io.js가 나타나면서 Node.js 0.12 버전, io.js 3.3 버전까지 서로 분열된 모습으로 이어지는 듯했지만, 2015년 9월에 Node.js 4.0 버전으로 병합되어 현재에 이르렀다.

2022년 10월 3일 기준으로 최신 버전은 18.10.0, LTS 버전은 16.17.1이다. 최신 버전은 기능이 불안정하거나 일부 모듈이 작동하지 않을 수 있으므로 안정성을 보장하고 싶으면 LTS 버전을 사용하는 게 좋다.


설치 및 사용

  1. https://nodejs.org/ko/ 노드js 홈페이지에 들어간다.

  1. 안정적이고 신뢰도가 높은 LTS 버전으로 다운 받는다.
  1. 설치가 완료되면 VS code 에서 터미널을 누른다.

  1. 봐야하는 자바스크립트 파일을 불러오기 위해서는 경로부터 설정을 한다. EX) cd 를 쓰고 javascript\js
  1. 자바스크립트 파일의 경로까지 들어오게 된다면 node xxx.js 를 치면 크롬 콘솔창 처럼 VS code 터미널에서도 콘솔 값이 도출된다.

  1. node 02_date.js 를 불러왔고 다음에 또 타이핑을 하는것이 아니라 방향키 ↑를 눌러주면 전에 작성했던 코드가 나온다. + 콘솔 결과값


Date (년-월-일-시-초 : 시간)

함수명의미설명
getFullYear() , setFullYear()년도0~11 > 1월~12월
getMonth() , setMonth()
getDate() , setDate()
getDay() , setDay()요일0~6 > 일요일 ~ 토요일
getHours() , setHours()시간
getMinutes() , setMinutes()
getMilliseconds() , setMilliseconds()밀리초내용3입니다
getSeconds() , setSeconds()
getTime() , setTime()Unix 타임1970/1/1 12:00 기준 경과한 밀리 초

ex) 오늘 날짜는?

const moment=require('moment');
let d=new Date();
console.log(d);

결과

이 코드를 추가 하게 되면

console.log(moment().format('dddd'))
console.log(moment().format("MM,DD, YYYY")) 

요일이랑 날짜순서도 정할 수 있다.

ex) 일주일 전, 일주일 후

//일주일 전
console.log(moment().subtract(7,"days").format('YYYY-MM-DD'))
console.log(moment().add(-7,"days").format('YYYY-MM-DD'))
//일주일 후
console.log(moment().add(+7,"days").format('YYYY-MM-DD'))

결과

일주일 전 : 2022-11-24
일주일 후 : 2022-12-08
*moment() 뒤에 .subtract(7,"days")를 붙여주고 7일 전으로 도출해도 되고 .add(-7,"days")를 붙여주고 -7일로 계산해도 된다.

ex) getTimezoneOffset

getTimezoneOffset() 메서드는 호스트 컴퓨터와 UTC 사이의 시간차를 분으로 가져온다.

console.log("timezone", d.getTimezoneOffset());

결과

timezone -540

*대한민국은 UTC+9 이기 때문에 분으로 나타내어 -540분이 나온다.

ex) getFullYear

let year=d.getFullYear();
let utcYear=d.getUTCFullYear();
console.log(year,utcYear); 

결과

2022 2022

ex) getMonth

let month=d.getMonth()+1;
let utcMonth=d.getMonth();
console.log(month, utcMonth);

결과

12 11

ex) getDate

let date=d.getDate();
let utcDate=d.getDate();
console.log(date, utcDate);

결과

1 1

ex) getDay

let day=d.getDay();
console.log("day",day);

결과

day 4

ex) getHours

let hour=d.getHours();
let utcHour=d.getHours();
console.log(hour, utcHour); 

결과

17 17

ex) getMinutes

let minute=d.getMinutes();
console.log(minute); 

결과

54

ex) getSeconds

let second=d.getSeconds();
console.log(second); 

결과

46

JQuery

02_탐색 선택자

01.위치 탐색 선택자_:first 필터셀렉트 .first() 메서드

결과

HTML

<span>01_아이디가 el인 ul태그의 자식 엘리먼트인 li태그를 선택하고 :first 필터 셀렉터를 사용하여 첫번째 엘리먼트만 선택해 주세요.</span>
	<span>02_아이디가 method인 ul태그의 자식 엘리먼트인 li태그를 선택하고 .first()메서드를 사용하여 첫번째 엘리먼트만 선택해 주세요.</span>
	<div>
		1
		<div>
			1-1
		</div>
	</div>
	<div>
		2
		<div>
			2-1
			<div>
				2-1-1
				<ul id="el">
					<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 id="method">
				<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>

Script

$(function(){
			$('#el li:first').css({color:'red'});
			$('#method li').first().css({color:'red'});
			
			//방법1
			const method=$('#method>li');
			const firstEl=method.first();
			firstEl.css({color:'red',background:'yellowgreen', padding:"10px", boxSizing:'border-box'})
		});

02.위치 탐색 선택자_:last 필터셀렉트 .last() 메서드

결과

HTML

<span>01_아이디가 el인 ul태그의 자식 엘리먼트인 li태그를 선택하고 :last 필터 셀렉터를 사용하여 마지막번째 엘리먼트만 선택해 주세요.</span>
	<span>02_아이디가 method인 ul태그의 자식 엘리먼트인 li태그를 선택하고 .last() 메서드를 사용하여 마지막번째 엘리먼트만 선택해 주세요.</span>
	<div>
		1
		<div>
			1-1
		</div>
	</div>
	<div>
		2
		<div>
			2-1
			<div>
				2-1-1
				<ul id="el">
					<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 id="method">
				<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>

Script

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

			const method=$('#el>li')
			const lastEl=method.last();
			lastEl.css({background: 'blue'})
		});

03.위치 탐색 선택자_:even 필터셀렉트 짝수 선택

결과

HTML

<span>아이디가 el인 엘리먼트의 자식 엘리먼트인 li태그를 선택하고 :even 필터 셀렉터를 사용해 짝수 index를 같는 엘리먼트의 글자색을 바꿔 주세요.</span>
	<div>
		<ul id="el">
			<li>1 (이곳의 글자색을 바꿔주세요 )</li>
			<li>2</li>
			<li>3 (이곳의 글자색을 바꿔주세요 )</li>
			<li>4</li>
			<li>5 (이곳의 글자색을 바꿔주세요 )</li>
			<li>6</li>
			<li>7 (이곳의 글자색을 바꿔주세요 )</li>
			<li>8</li>
			<li>9 (이곳의 글자색을 바꿔주세요 )</li>
		</ul>
	</div>

Script

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

04.위치 탐색 선택자_:odd 필터셀렉트 홀수 선택

결과

HTML

<span>아이디가 el인 엘리먼트의 자식 엘리먼트인 li태그를 선택하고 :odd 필터 셀렉터를 사용해 홀수 index를 같는 엘리먼트의 글자색을 바꿔 주세요.</span>
	<div>
		<ul id="el">
			<li>1</li>
			<li>2 (이곳의 글자색을 바꿔주세요 )</li>
			<li>3</li>
			<li>4 (이곳의 글자색을 바꿔주세요 )</li>
			<li>5</li>
			<li>6 (이곳의 글자색을 바꿔주세요 )</li>
			<li>7</li>
			<li>8 (이곳의 글자색을 바꿔주세요 )</li>
			<li>9</li>
		</ul>
	</div>

Script

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

05.위치 탐색 선택자_:eq 필터셀렉트 .eq()

결과

HTML

<span>eq() 메서드로 ul의 자식 엘리먼트중 세번째 엘리먼트의 색을 바꿔주세요.</span>
	<div id="wrap">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3 ( 여기를 바꿔 주세요. )</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>
	
	<span>아이디가 el인 엘리먼트의 자식 엘리먼트인 li태그중 index가 3인 엘리먼트를 :eq필터를 사용해 선택하고 글자색을 바꿔주세요.</span>
	<div>
		<ul id="el">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4 (이곳의 글자색을 바꿔주세요 )</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
		</ul>
	</div>

Script

$(function(){
			$('#wrap ul li').eq(2).css({color:'red'});
			$('#el li:eq(3)').css({color:'red'});
		})

06.위치 탐색 선택자_:lt 필터셀렉트 :gt 필터셀렉트

결과

HTML

<span>아이디가 el1인 엘리먼트의 자식 엘리먼트인 li태그중 index가 3인 엘리먼트보다 index가 큰 엘리먼트를 선택해 글자색을 변경해 주세요.</span>
	<div>
		<ul id="el1">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5 (이곳의 글자색을 바꿔주세요 )</li>
			<li>6 (이곳의 글자색을 바꿔주세요 )</li>
			<li>7 (이곳의 글자색을 바꿔주세요 )</li>
			<li>8 (이곳의 글자색을 바꿔주세요 )</li>
			<li>9 (이곳의 글자색을 바꿔주세요 )</li>
		</ul>
	</div>
	
	<span>아이디가 el2인 엘리먼트의 자식 엘리먼트인 li태그중 index가 3인 엘리먼트보다 index가 작은 엘리먼트를 선택해 글자색을 변경해 주세요.</span>
		<div>
			<ul id="el2">
				<li>1 (이곳의 글자색을 바꿔주세요 )</li>
				<li>2 (이곳의 글자색을 바꿔주세요 )</li>
				<li>3 (이곳의 글자색을 바꿔주세요 )</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
			</ul>
		</div>

Script

$(function(){
			$('#el1 li:gt(3)').css({color:'red'});
			$('#el2 li:lt(3)').css({color:'red'});
		});

07.위치 탐색 선택자_first-of-type / last-of-type

결과

HTML

<span>li태그 첫번째 :first-of-type 마지막 :last-of-type를 사용하여 각각 색상을 바꿔보세요</span>
	<div>
		<ul>
			<li>1 (:first-of-type에 의한 선택)</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6 (:last-of-type에 의한 선택)</li>
		</ul>
		<ul>
			<li>1 (:first-of-type에 의한 선택)</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6 (:last-of-type에 의한 선택)</li>
		</ul>
	</div>

Script

$(function(){
			$('ul li:first-of-type').css({color:'red'});
			$('ul li:last-of-type').css({color:'green'});
		});

08.위치 탐색 선택자_nth-child / nth-last-of-type

결과

HTML

<span>아이디가 menu1인 자식 li엘리먼트의 2번째를 선택하여 색상을 바꿔보세요</span>
	<span>아이디가 menu2인 자식 li엘리먼트의 마지막 위치에서 지정한 숫자의  위치한 색상을 바꿔보세요</span>
	<div>
		<ul id="menu1">
			<li>1</li>
			<li>2 (여기 색상을 바꿔주세요)</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
		<ul id="menu2">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5  (여기 색상을 바꿔주세요)</li>
			<li>6</li>
		</ul>
	</div>

Script

$(function(){
			$('#menu1 li:nth-child(2)').css({color:'red'});
			$('#menu2 li:nth-last-of-type(2)').css({color:'red'});
		});

09.위치 탐색 선택자_only-child

결과

HTML

<span>선택한 요소가 부모 요소에게 하나뿐인 자식 요소면 선택</span>
	<div>
		<ul id="menu1">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
		<ul id="menu2">
			<li>1 (여기 색상을 바꿔주세요)</li>
		</ul>
		<ul id="menu3">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
		<ul id="menu4">
			<li>1</li>
		</ul>
	</div>

Script

$(function(){
			$('ul li:only-child').css({color:'green'});
		});

10.위치 탐색 선택자_slice

결과

HTML

<span>slice() 메서드를 이용하여 해당 위치에 색을 바꿔주세요.</span>
	<p>인자값 2개 slice(start index, end index)</p>
	<div id="wrap">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3 ( 여기를 바꿔 주세요. )</li>
			<li>4 ( 여기를 바꿔 주세요. )</li>
			<li>5 ( 여기를 바꿔 주세요. )</li>
			<li>6</li>
		</ul>
	</div>

Script

$(function(){
			$('#wrap ul li').slice(2,5).css({color:'red'});
		});

03_배열관련 메서드

01.index() 메서드

결과
*호버하면 컬러가 빨간색으로 변한다.

HTML

<span>index() 메서드를 이용하여 해당 위치에 색을 바꿔주고 몇번째인지 alert()을 띄어 나타내시오.</span>
	<div id="wrap">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li id="list4">4 (여기가 몇번째인지 나타내시오)</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>

Script

$(function(){
			let idx=$('#list4').index();
			console.log(idx);
			$('ul li').hover(function(){
				$('ul li').eq(idx).css('color','red')
			},function(){
				$('ul li').eq(idx).css('color','black')
			})
		});

02.each() 메서드 $.each()

결과

HTML

<span>배열에 저장된 요소의 개수만큼 메서드를 반복 실행(매개변수1, 매개변수2에는 배열에 저장된 인덱스값과 요소가 오름차순으로 대입)</span>
	<div id="wrap">
		<ul id="menu1">
			<li>토요일일</li>
			<li>자기들이</li>
			<li>미친듯이</li>
			<li>놀아놓고</li>
		</ul>
		<ul id="menu2">
			<li>내가뭐를</li>
			<li>어쨌길래</li>
			<li>뭐만하면</li>
			<li>내탓이고</li>
		</ul>
	</div>

Script

$(function(){
			let obj=[
				{"area":'서울'},
				{"area":'부산'},
				{"area":'대전'}
			];
			$(obj).each(function(i,o){
				console.log(i + ":", o);
			});
			$.each($("#menu1 li"), function(i, o){
				console.log(i + ":", o);
			});
			$.each($("#menu2 li"), function(i){
				console.log(i+":",$(this));
			})
		});

03 . map 메서드 grep 메서드

map 메서드

$.map()메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실행. 
메서드에서 반환된 데이터는 새 배열에 저장되고 그 배열 객체를 반환

grep 메서드

$.grep()메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실행하며 인덱스 
오름차순으로 배열의 데이터를 불러옴 메서드의 반환값이 true이면 데이터가 새 배열에 저장되고 배열을 반환

ex)

$(function(){
			let arr1=[
				{"area": "서울", "name":"조대리"},
				{"area": "부산", "name":"홍과장"},
				{"area": "대전", "name":"문대표"},
				{"area": "서울", "name":"오상무"}
			];

map 메서드

let arr2=$.map(arr1, function(a,b){
				if(a.area=="서울"){
					return a
				}
			})

배열에 저장된 데이터 수만큼 메서드를 반복 실행한다.
그다음 메서드에서 반환된 데이터는 새 배열에 저장되고 그 배열 객체를 반환한다.

grep 메서드

console.log(arr2);

			let arr3=$.grep(arr1, function(a,b){
				if(a.area=="서울"){
					return true;
				}else{
					return false;
				}
			})
			console.log(arr3);
		});

배열에 저장된 데이터 수만큼 메서드를 반복 실행하며 인덱스 오름차순으로
배열의 데이터를 불러온다. 메서드 반환값이 true면 데이터가 새 배열에 저장되고 배열을 반환한다.

04. inArray 메서드 isArray 메서드 merge 메서드

inArray 메서드

$.inArray()메서드는 배열에 저장된 데이터 중 지정한 데이터를 찾아 인덱스값을 반환
$.inArray(data,Array,start index)

isArray 메서드

$.isArray()메서드는 지정한 데이터가 배열 객체면 true를, 
배열 객체가 아니면 false를 반환 $.isArray(object)

merge 메서드

$.merge()메서드는 두 배열 객체를 하나의 객체로 묶습니다.
$.merge(Array1, Array2)

ex)

$(function(){
			let arr1=["서울","대전","부산","전주"];
			let arr2=["한국","미국","일본","중국"];
			let obj={"name":"조과장","area":"서울"};

			let idxNum=$.inArray("서울",arr1);
			console.log(idxNum);//있으면 index 몇번째 없으면 -1로 표현
			
			let okArray1=$.isArray(arr1);
			let okArray2=$.isArray(obj);
			console.log(okArray1);
			console.log(okArray2);
			
			$.merge(arr1,arr2);
			console.log(arr1);
		});

결과
0, true, false, Array(8)

0개의 댓글