코딩

스크롤를 아래로 내릴수록 위에 있는 프로세스 바가 색이 채워지는 걸 볼 수 있습니다.  먼저 스크롤 이벤트를 주기 위해서 스크롤이 될때마다 onScroll이라는 함수가 실행되도록 합니.;(function () { 'use strict' const get = (target) => { return document.querySelector(target) } window.addEventListener('scroll', () => { onScroll() })})() height에 보여주는 영역을 제외한 나머지 스크롤 영역의 높이를 계산이 되어야하기 때문에 scrollHight - clientHight를 빼 줍니다. 스크롤 높이는 scrollTop를 통해 알 수 있습니다.이 두 가지를 사용해서 ..

클래스  - 객체를 만들기 위한 설계도  - 프로토타입 성질을 좀더 사용하기 위한 "문법적 부가기능"  - 프로토타입과 달리 constructor 라는 함수가 별개로 있습니다.  - 클래스 선언은 호이스팅 되지 않습니다.// 클래스 선언class Car { name = "avante"; brand = "hyundai"; constructor(){}}// 클래스 표현식let Car = class { name = "avante"; brand = "hyundai"; constructor(){}} 좋은 클래스 만드는 법  - 높은 응집도와 낮은 결합도를 가진 클래스를 설계해야 합니다.     (응집도: 한 모듈 내부의 요소들이 서로 관련되어 있는 정도)     (결합도: 서로 다은 모듈 간 상호 의존 정도) ..

객체지향 프로그래밍(OOP, Object Oriented Programming) - 코드의 간결함을 유지하고 재 사용성을 향상하기 위한 프로그래밍 방법 - 프로그램을 명령어의 나열이 아닌 독립된 개념들의 상호작용으로 바라보는 것 - calss와 object 개념 사용 - class로 object의 상태와 기능을 기술할 수 있고 이를 이용하여 object를 생산할 수  있음   필수 개념 객체(object) : 특정 정보를 구성하는 독립적인 개념/ 단위를 일컫는 말 클래스(class): 객체를 생성할 수 있는 내부 변수와 함수를 정의한 설계도 멤버변수(member Variable): 클래스 객체의 각종 상태값을 저장하고 있는 자체 변수 메서드(method): 클래스, 클래스 객체가 보유한 자체 함수 생성자..

함수 정해진 입력으로 원하는 결과값을 반환해주는 코드 블록입니다. function이라는 키워드로 선언 가능하며 함수 입력값을 parameter 또는 argument라고 부릅니다. 또한, 변수에 할당할 수 있으며, 다른 함수의 인자값 또는 리턴값으로도 사용할 수 있는 일급합수입니다. // 함수 정의 function multiply(p1, p2){ return p1 * p2}// 변수 할당let multuply = function(p1,p2){return p1 * p2}//함수 호출multiply(3,5);  함수 문법1) 화살표 함수   ES6에서 소개된 신기능, 함수를 function 키워드 없이 표현 가능합니다.let num1 = (a, b = 1) {return a + b} 2) 나머지 입력값   함..

객체 Object - 여러 개의 정보를 key-value 형태로 저장하는 자료구조이자, 하나의 데이터 타입입니다.    key를 점 표기법 또는 대괄호 표기법을 이용하여 특정 정보의 값에 접근 할 수 있습니다.   다양한 정보를 가지는 복합적인 데이처를 표현할 때 주로 사용하고 이 구조를 활용한 데이터 표기방식을 JSON라고 하며 많은 서비스에서 client-server간 데이터 전달 시 포멧으로 활용합니다.    const person = { name: "Alice", age: 25, greet: function () { console.log("Hello!"); }};console.log(person.name); // 출력: Aliceconsole.log(person['age']); //..

타입(자료형)는 데이터의 종류라고 할 수 있습니다.js는 동적 타입이라 한 변수에 여러 타입의 데이터를 재할당 할 수 있는데요,먼저 원시 타입과 참조타입을 알아보겠습니다.   원시타입 primitive type - 가장 기초적인 타입을 가진 값입니다    변수에 값 자체가 저장이 되고 불면하며 변경 시 새로운 값을 생성합니다.     스택 메모리에 저장이 됩니다.    변수 간의 복사는 값 자체를 복사하며 독립적입니다.    원본은 하나 뿐입니다. 종류string: 문자열number: 숫자boolean: 논리값 (true, false)undefined: 선언되었으나 값이 할당되지 않은 상태 즉, 메모리 할당만 받은 변수입니다.null: 의도적으로 "값이 없음"을 나타냄null: 객체가 없음을 의미하는 값..

변수(Variable) - 데이터(정보)를 담을 스 메모리 공간의 이름 변수 선언(declaration) - 어떤 타입의 데이터를 담을 수 있는 메모리 공간을 활당해달라고 명령하는 것 변수 유효범위(scope)  : 선언된 변수가 메모리에서 삭제되지 않고 영향을 미칠 수 있는 코드 범위  ES6가 나오기 전 변수 선언 var1) 변수 스코프는 함수 레벨이라서 함수가 끝나는 순간 변수를 사용하지 못했습니다.function testVar() { var message = "Hello, World!"; console.log(message); // 출력: Hello, World!}testVar();console.log(message); // ReferenceError: message is not define..

메소드에서는 this는 해당 객체를 가르킵니다.const audio = { title : 'a', play (){ console.log('play', this); }}audio.play();audio.stop = function() { console.log('stop this', this0); }audio.stop();    함수에서는 this는 widndow 객체를 가르킵니다.function playAudio(){ console.log(this);}playAudio(); 생성자 함수에서는 this는  객체를 가르킵니다.function Audio(title){ this.title = title; console.log(this);}con..

타이핑 측정하는 웹사이트를 만들어보자! 기능  - 타이핑 력처리  - 타이머 기능 - 정확도, 오류수, cpm ,wpm  계산 - 타이머 기능 - 인용구 표시 업데이트 - 게임 시작 및 재시작  먼저 필요한 변수를 선언해준다.// 초기 시간 설정const TIME_LIMIT = 60;// 인용구 리스트const quotesArray = [ 'he realized what was happening and told the others.', 'And in the end it turned out that the creature was her grandfather', 'when the old man saw his granddaughter']//사용할 변수들const timerText = docum..

백그라운드 비디오 앱로드되기 전에 로딩중이라는 이미지가 보여졌다가 로드 되면 로딩중은 없어지고 동영상이 나오게 되는데 아래 버튼을 통해 재생과 중지하도록 만들겠습니다!  window가 로드될 때 로딩 중인 이미지를 css를 줘서 숨겨줍니다.const preloaderEl = document.querySelector('.preloader');window.addEventListener("load", () => { preloaderEl.classList.add("hide-preloader");})  btn 클릭했을 때 만액에 btnEl 클래스명이 slide가 없으면 add를 추가해주고 비디오를 멈춰주고 클래스명이 slide이 있다면 slide를 없애주고 비디오를 플레이 되도록 합니다.const btnEl..