hj2의 정보 저장 공간

window.scrollY 사용하면 현재 페이지를 얼마나 위에서 부터 스크롤했는지 px 단위로 알려준다.

window.scrollX 는 마찬가지로 가로로 얼마나 스크롤했는지 알려준다. (가로 스크롤바가 있으면)

window.scrollTo(x, y) 실행하면 강제로 스크롤바를 움직일 수 있다.
위 코드는 위에서부터 100px 위치로 스크롤해준다.

window.scrollBy(x, y) 실행하면 현재 위치에서부터 스크롤해준다.

제이쿼리

포폴에 넣은 코드

behavior 애니메이션 설정

( auto, smooth )

block 스크롤 세로방향의 정렬 위치

( start, center, end, nearest )

inline 스크롤 가로방향의 정렬 위치

( start, center, end, nearest )

코드메이트에서 자바스크립트 편을 따라가다가

인턴 생활을 시작하면서

퇴근 후에는 거의 기절하거나 낮동안의 부족한 부분들을 메꾸느라 까맣게 잊고있던 코드메이트..!

회사 생활에 이젠 익숙해졌는데 갑작스러운 계약 종료..!

그렇게 블로그를 다시 들어와보니 마침 스크립트 공부도 부족하겠다~ 시간도 있겠다~

다시 이어해보기로 했다

취준 화이팅..!

공부 화이팅

JSON =  JavaScript Object Notation

HTML

JS

결과물

콘솔은 텍스트 문자로 실행의 결과를 확인하는 일종의 디스플레이 장치 이다

javascript는 다른 언어와는 다르게 정수와 실수를 따로 구분하지 않는다.

큰따옴표나 작은따옴표로 둘러싸인 문자의 집합을 문자열이라 한다.

null 이란 '값' 이 정해지지 않은 것을 의미

undefined 란 '타입'이 정해지지 않은 것을 의미

변수란 데이터를 저장할 수 있는 메모리 공간이며, 그 값은 변경될 수 있다.

​

typeof = 변수의 타입을 나타내 줌

~타입들~

number -숫자

object  - 객체 (null도 여기포함)

undefined - 변수는 있지만 값이 없을때

string  -문자

bloonean  - 참 / 거짓 을 비교하는 데이터 타입

연산자

 +, - , *, / , % 

/  = 나눈 전체 결과

% = 몫​

대입연산자

x += y; // x = x + y
x -= y; // x = x - y
x *= y; // x = x * y
x /= y; // x = x / y
x %= y; // x = x % y

주석을 보면 알 수 있듯, = 기호 앞에 산술 연산자를 붙이게 되면 ​

왼쪽의 변수와 오른쪽 변수를 순서대로 산술 연산을 진행한 후 왼쪽 변수에 대입해요.

증감연산자

var x = 10;

x++; // 연산을 수행한 뒤, x의 값을 1 증가시킴
x--; // 연산을 수행한 뒤, x의 값을 1 감소시킴

++x; // x의 값을 1 증가시킨 뒤, 연산을 수행함
--x; // x의 값을 1 감소시킨 뒤, 연산을 수행함

증감 연산자가 변수의 뒤에 붙게 된다면,

그 줄의 코드를 전부 수행한 뒤, 증감 연산을 수행해요. 

​

반대로 증감 연산자가 변수의 앞에 붙게 된다면,

증감 연산을 수행한 뒤, 그 줄의 코드를 수행한답니다!

타입연산자

우리가 수학에서 배웠던 것처럼, 부등호가 들어간 비교 연산자는 두 값의 크기를 비교해요.

== 와 !=는 두 값이 같은지, 혹은 다른지 비교하는 연산자랍니다!

​

그럼 이때, ===와 ==의 차이는 무엇일까요?

javascript 에는 타입이라는 것이 존재한다고 했었죠?

​

== 의 경우에는 타입에 상관없이 "값만" 같으면 true를 반환해요.

===는 두 변수가 값이 같아야 하며, 타입 또한 같아야 true를 반환하는 비교 연산자에요.

두 연산자의 차이를 아시겠나요? 😀

​

​

논리연산자

&&는 두 논리식이 모두 참이어야만 참을 반환,

|| 는 두 논리식 중에서 하나만 참이어도 참을 반환,

! 는 논리식이 참이면 거짓을, 거짓이면 참을 반환합니다.

출처 : https://codemate.kr/project/WEB-%EB%A9%94%EC%9D%B4%ED%8A%B8-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%8E%B8/6-1.-%EC%97%B0%EC%82%B0%EC%9E%90

코드메이트 ~연산자

setTimeout 은 일정시간이 지난 후에 함수가 실행되도록 처리하는 역활을 하며,

  clearTimeout 은 setTimeout을 취소하는 역활을 합니다.

사용법

  [변수] = setTimeout([함수명], [함수가 실행될 시간]);
  clearTimeout([변수]);

var, let는 변수를 선언하는 키워드이고, const는 상수를 선언하는 키워드이다.

var, let은 변수선언 키워드 이므로 리터럴 값의 재할당이 가능하지만, const는 리터럴 값의 재할당이 불가능하다.

더욱이 const 키워드는 선언과 동시에 리터럴 값을 할당해 줘야 한다.

리터널이란?

리터럴과 식별자(identifier)의 차이를 이해하는 것이 중요하다.
예를들어 앞에서 room1 변수에 값 “conference_room_a”을 할당한 것을 생각해 봅시다.
roo1은 변수를 가리키는 식별자입니다.
그리고 “conference_room_a”은 문자열 리터럴인 동시에 room1의 값이다.

 왠만하면 const 키워드를 사용하여 식별자를 선언하고, 값이 변하는 식발자일 경우 let 키워드를 이용하여 선언하자.

-프로그램에서 선언되는 식별자중 값이 변하는 식별자는 드물기 때문

let, const 키워드는 block-scoped, 즉 블록(중괄호) 내부에 let, const로 선언된 변수는 외부 스코프에 영향을 주지 않는다

 #setInterval 이란?

시간을 간격으로 반복적으로 "콜백함수"를 호출하는 함수이다.

방법 

setInterval 함수의 반환값을 변수에 할당해두고,

clearInterval(변수)를 호출하여 반복을 중단하고,

다시 setInterval로 재시작해주면 된다.

intervalID : 반복작업을 종료하기 위해 호출하는 clearInterval() 함수의 파라미터

#clearInterval() 이란?

clearInterval() 함수는, setInterval() 함수에 의해 실행된 반복 작업을 종료하는 함수입니다.

이 함수는 다음의 매개변수를 입력 받습니다.

intervalID : setInterval() 함수가 리턴한 id 입니다

# setInterval 중단/재시작 방법

1. setInterval()함수의 반환값을 변수에 할당하여 반복 시작

 let 변수 = setInterval(콜백함수, 시간); 

2. clearInterval(변수)로 반복 중단

 clearInterval(변수); 

3. setInterval()함수의 반환값을 변수에 재할당하여 재시작

 변수 = setInterval(콜백함수, 시간);