코드공부방

좌표값과 더불어 웹 UI개발을 할때 거의 항상 쓰이는 window scroll과 관련된 Window 메소드에 대해 알아보자. # window.scrollTo() 지정된 좌표값으로 웹브라우저의 스크롤을 이동시킨다. const $btn = document.querySelector('.btn'); $btn.addEventListener('click', () => { // window.scrollTo(x좌표, y좌표); window.scrollTo(0, 250); }); 스크롤 이동을 부드럽게 하려면 parameter를 객체 형태로 전달하면서 behavior:'smooth'를 추가로 전달한다. const $btn = document.querySelector('.btn'); $btn.addEventListener..

웹 UI개발을 하다보면 필수적으로 브라우저 내 Element나 마우스의 좌표가 필요한 경우가 생긴다. # Element.getBoundingClientRect() getBoundingClientRect 메소드는 Element Object에 포함되어 있다. 이 메소드를 사용하여 특정 Element의 width, height, 좌표(top, left) 값을 구할 수 있다. const $googleLogo = document.querySelector('#google-logo'); const logoRect = $googleCI.getBoundingClientRect(); let logoPositionLeft = logoRect.left; let logoPositionTop = logoRect.top; let ..

window객체는 browser에서 기본적으로 제공하는 것중 하나이다. 그 중 Size(width, height)와 관련된 API를 알아보려 한다. # window.screen : 모니터 사이즈 (해상도) let screenWidth = window.screen.width; let screenHeight = window.screen.height; 스크린(모니터)의 해상도를 나타내기 때문에 헤상도를 바꾸기 전까지 값에 변화가 없다. # window.outer : 브라우저 사이즈 (탭, URL입력창 영역 등 포함) let browserWidth = window.outerWidth; let browserHeight = window.outerHeight; 웹브라우저 창의 width와 height값을 가져올 수 ..

Array는 JavaScript에서 자료구조 중 하나이다. object가 관련이 있는 변수나 함수를 그룹핑 할때 사용한다면, Array는 관련이 있는 변수들을 모아두는데 주로 사용이 되며, 때로는 object들을 모아놓는데에도 사용할 수 있다. ([{}, {}, {}, {}, {}, {}]) # 배열 선언 const array1 = new Array(); const array2 = [1, 2]; # 배열 조회 // index는 0부터 시작 (0,1,2...) const carModels = ['쏘나타', 'K5', '펠리세이드']; // 배열 크기 조회 console.log(carModels.length); // 특정 index 값 조회 console.log(carModels[2]); # 배열 loop ..

object는 연관되어 있는 데이터(변수)나 실행문(함수)를 모아놓을 수 있는 데이터 타입이다. 아래 자동차와 관련된 데이터들을 정의해놓고 console 창에 출력을 해보자. const brand = '현대'; const model = '펠리세이드'; const cc = 3000; //출력 함수 정의 function infoPrint(brand, model, cc){ console.log(`${brand} ${model} >> ${cc}cc`); } //호출 infoPrint(brand, model, cc); 잘 출력이 된다. 하지만 차량이 계속 추가 될 경우 위와 같이 데이터를 관리하면 차량이 많아질 수록 점점 힘들어진다. const car01brand = '현대'; const car01model = ..

JavaScript에서의 class 키워드는 ES6버전에 와서야 만들어졌다. class는 template라고도 불리기도 하는데 그 이유는 class자체적으로는 어떠한 데이터도 갖지 않으며 틀만 정의해둔다. 그리고 이 만들어진 틀(class)에 데이터를 넣어 만드는 것을 object라고 한다. (붕어빵 만드는 틀을 class, 그 틀에 데이터(팥 또는 슈크림 등)을 넣어 만든 붕어빵을 object라고 이해하면 좀 쉬운 것 같다.) 1. class 선언 (틀 제작) 아래는 새로 입고된 중고차를 DB에 입력 후 console에 출력하는 class를 선언한 것이다. class usedCar { //constructor constructor(brand, model){ // fields this.brand = br..

어떤 프로그래밍 언어든 마찬가지이지만 함수는 매우 중요한 역할을 한다. 프로그램 내에서 하나의 함수는 또다른 하나의 프로그램이라고 봐도 된다. 함수에 대해 자세히 알아보자. 1. 함수 생성 function fnName(parameter01, parameter02){ ... //do something ... return result; } 2. 함수는 최소단위의 프로그램 하나의 함수에서는 하나의 일만 하도록 세분화하여 설계해준다. 3. 함수 네이밍 변수명은 명사로 짓는 것이 일반적인데, 함수명은 해당 함수가 어떤 일을 수행하는지 나타내기 위해 getName, deleteName, checkingMembers와 같이 무엇을 하는지? 또는 명령어 형태 또는 동사 형태로 작성해주는 것이 좋다. (함수 이름을 만드..

앞서 JavaScript 변수 선언시 더이상 var를 사용하지 않아야 하는 이유에 대해서는 알아봤다. JavaScript의 변수를 var로 선언하지 말아야 하는 이유 JavaScript문법은 매우 유연한 언어이기 때문에 다른 언어에서는 이해할 수 없는 문법들이 허용되기도 한다. 1. var hoistring 아래 코드를 보면, 'use strict'; console.log(serviceName); serviceName = 'CodeS.. code-study.tistory.com 그럼 let과 const중 언제 어떤 것을 사용해야 할까? 그것을 알려면 두 키워드의 차이점에 대해 먼저 알아야 한다. 이 두 키워드의 차이는 바로 mutable(변경 가능), immutable(변경 불가능)의 차이이다. let키..

JavaScript문법은 매우 유연한 언어이기 때문에 다른 언어에서는 이해할 수 없는 문법들이 허용되기도 한다. 1. var hoistring 아래 코드를 보면, 'use strict'; console.log(serviceName); serviceName = 'CodeStudy'; console.log(serviceName); var serviceName; 'use strict' 모드임에도 serviceName이라는 변수를 선언도 하기 전에 값을 할당했는데 serviceName변수의 출력이 정상적으로 되었고, 그 후에 같은 이름의 변수를 선언 했음에도 아무런 문제 없이 코드가 잘 작동되고 있다. 그 이유는 var hoisting 때문이다. JavaScript는 어느 곳에 변수 선언을 하던, 변수 선언문은..