호이스팅(Hoisting)

함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

const a = 7

double() //error 발생


const double = function () {
console.log(a*2)
}


Ex) hoisting 

const a = 7

double() //14

function double () {
console.log(a*2)

ㅁ금일 학습내용:

'user strict';

// Make navbar
const navbar = document.querySelector('#navbar');
const navbarHeight = navbar.getBoundingClientRect().height;
const navbarLogo = document.querySelector('.navbar__logo');
const navbarA = document.querySelector('.problem');
console.log(`높이: ${navbarHeight}`);
console.log(navbarA);


document.addEventListener('scroll', function () {

    // 1.스크롤 시 작동할 클래스를 추가함.
    
    if(window.scrollY > navbarHeight) {
        
        navbar.classList.add('navbar--dark');
        navbarLogo.classList.add('navbar--dark2');
        
        
    } else {
        navbar.classList.remove('navbar--dark');
        navbarLogo.classList.remove('navbar--dark2');
    }

})

ㅁ getBoundingClientRect

element의 크기 및 좌표 등을 반환한다.

x , y, width, height , top, right , bottom, left  

ㅁwindow.scrollY

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

ㅁquerySelectAll

CSS에 존재하는 selector를 한 가지 또는 여러 개를 선택하여 Nodelist를 반환한다.

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll

자바스크립트의 배열 특징

• 자바스크립트의 배열은 객체로 취급된다.
• 배열의 길에 제한이 없다.
• 배열에 저장할 수 있는 데이터의 타입이 제한되지 않는다.

Push

배열에 새로운 데이터를 추가하는 메소드.

배열의 뒤부터 하나씩 추가된다.

push (값1,2..N) ;

pop

배열의 마지막요소를 제거한다.

slice

배열로부터 지정한 start와 end 요소를 리턴한다.

slice(start, end)

splice

배열에 값을 저장하거나 삭제하는 메소드이다. 지정한 index위치에 값을 저장한다.

delCount는 삭제할 개수다.

splice (index, delCount, value)

위 그림을 해석해보자면

index 1번위치에 있는 "A"를  100으로 치환한다.

그리고 데이터값이 바뀐 1번 위치 뒤 첫번째 데이터값을 제거한다.

제거하는 순서는 데이터를 바꾼 위치 다음부터 시작한다는걸 주의해야한다.

sort

배열에 저장된 알파벳 또는 숫자를 정렬한다.

sort(function (a,b) {

return a-b;})

return a-b 는 오름차순 정렬

return b-a 는 내림차순 정렬

함수를 정의하는 방법은 크게 3가지로 나눠볼 수 있다.

선언적 정의 방법, 함수 리터럴(익명함수)이용

선언적 정의 방법

function 함수명 (parameter1,2....N) {

문장;

return 리턴값;} 

세부적으로 살펴보면

ㅁ매개변수가 없는 경우

function func1() {

alert("JavaScript");}

ㅁ매개변수가 있는 경우

function func2(name) {

document.write(name + "씨 환영한다."};

ㅁ리턴값이 있는 경우

function func3 (value) {

var ans;

ans = value + 200;

return ans;

}

익명함수

var 변수명 = function(parameter1,2....N) {

문장;

return 리턴값;

}

익명함수를 사용 시 함수호출은 꼭 함수정의 후 에 사용해야한다.

그 이유는 함수가 생성되는 시점이 프로그램의 실행단계에서 생성되기 때문이다.

어떤 언어를 배우든 가장 중요한 부분이라고 할 수 있는 데이터 타입에 대해 알아보자.

자바스크립트 데이터 타입의 종류는 다음과 같다.

• String(문자데이터)
• Number(숫자데이터)
• Boolean(불린데이터)
• Undefined
• Null
• Object
• Array

String(문자데이터)

다음과 같이 따옴표를 사용해서 작성한다.

Number(숫자데이터)

정수 및 부동소수점숫자를 나타낸다.

Boolean

true, false 두 가지 값을 가진 논리 데이터이다.

Undefined

JS만이 가진 특징 하나이며 값이 할당되지 않은 상태를 나타낸다.

Null

어떤 값이 의도적으로 비어있음을 의미한다.

Object(객체데이터)

여러 데이터를 key : value 형태로 저장한다.

표기방식은 { } 을 사용하며 다음과 사진을 참고하여 사용예시를 살펴보자.

Array(배열 데이터)

여러 데이터를 순차적으로 저장한다.

filter

특정 조건을 만족하는 원소들을 찾아 그 원소들을 이용하여 새로운 배열을 만드는 함수.

여기서 다음과 같이 입력하면 필터를 걸어 새로운 배열을 만들 수 있다.

map

배열 안에 있는 모든 원소를 변환하고 싶을 때 사용.

추가로, for 또는 forEach를 써서 위와 같은 결과를 낼 수 있다.

forEach

forEach() 메소드는 배열에 있는 원소들을 일괄적으로 실행시킬 때 이용한다.

추가로, 위 사진보다 더 간단하게 표현할 수 있는 방법이 있다.

화살표함수로도 표현할 수 있다.

함수의 개념

특정코드를 하나의 명령으로 실행시킬 수 있게 해주는 기능을 말함.

function ( parameter ) 

여기서 parameter 는 매개변수라고도 불린다. 매개변수란, 함수를 호출할 때 괄호 안에 적는 것을 말한다.

예시.

IF 조건문

: ''만약~라면'', ''만약 ~ 아니라면'' 등의  if 조건문은 자바스크립트에서 가장 일반적으로 사용되는 조건문입니다.

if조건문은 조건에 따라서 코드를 실행하거나 실행하지 않습니다. 이때 조건은 불(boolean) 자료형을 말합니다.

해당 조건문의 종류는 아래와 같이 if, else, else if 3가지가 있습니다.

1. if

코드작성 예시

if 

> if ( 273 <135 ) {

 alert( '273 <135' = >true) }

alert ('종료') 

결과값 : 종료

2. else

코드작성예시

> const date = new Date()

   const hour = date.getHours()

if (hour < 12 ) {

alert ('오전입니다.');

} else {

alert ('오후입니다.');

}

결과값 : 오전입니다 or 오후입니다. *코드를 실행시키는 시간대에 따라 다른 값을 출력할 수 있습니다.

3. else if

코드작성예시

> const date = new Date()

   const hour = date.getHours()

if (hour < 11 ) {

alert ('아침 먹을 시간입니다.');

} else if {

if (hour < 15) {

alert ('점심 먹을 시간입니다.')

} else { 

alert ( '저녁 먹을 시간입니다.')

}

결과값 : 저녁 먹을 시간입니다. *코드를 실행시키는 시간대에 따라 다른 값을 출력할 수 있습니다.