Lpla 개발 블로그

JavaScript/기초

[JavaScript] 자료형 종류

숫자형(number) – 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용 bigint – 길이 제약 없이 정수를 나타낼 때 사용 문자형(string) – 하나 혹은 그 이상의 문자로 만들어진 문자열을 나타낼 때 사용 불린형(boolean) – true, false를 나타낼 때 사용 undefined - 할당되지 않은 값 null – 알 수 없는 값 객체형(object) – 복잡한 데이터 구조를 표현할 때 사용 심볼형(symbol) – 객체의 고유 식별자를 만들 때 사용

JavaScript/기초

[JavaScript] 함수 정리(2)

함수 선언식 vs 함수 표현식 vs 화살표 함수 1) 함수 선언식 함수를 선언과 동시에 정의한다. function sayHello() { alert('Hello'); } 2) 함수 표현식 변수를 선언하고 변수에 함수를 할당한다. 이후 변수를 호출하면 함수가 실행된다. let sayHello = function() { alert('Hello'); }l 1) 함수 선언식 함수 선언식은 스크립트의 위치와 상관 없이 어디서든 사용할 수 있다. let region = 'Busan'; if (region == 'Busan') { welcome(); // 1번 실행 -> 고향이 같네요. function welcome() { alert('고향이 같네요.'); } welcome(); // 2번 실행 -> 고향이 같네요...

JavaScript/기초

[JavaScript] 함수 정리(1)

함수 선언 function name(parameters) { // 내용 } 함수 호출 function sayHello() { alert( '안녕하세요!' ); } sayHello(); 지역 변수 함수 안에서 선언한 변수는 해당 함수 안에서만 호출 할 수 있다. function sayHello() { let message = "안녕하세요!"; alert( message ); } sayHello(); alert( message ); // ReferenceError: message is not defined 전역 변수 함수 밖의 변수를 함수 안에서 호출 할 수 있다. let userName = 'Minsu'; function sayHello() { let message = 'Hello, ' + userName..

JavaScript/기초

[JavaScript] 중첩 반복문 빠져나오기

반복문을 사용하다보면 중첩 반복문을 한번에 빠져나와야 하는 경우가 흔히 발생한다. 일반적으로 반복문을 빠져나올 때 break를 쓰지만 반복문을 한 번 밖에 빠져나오지 못하는데, 이때 사용하는 것이 Label(레이블)이다. label: for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { let input = prompt(`(${i},${j})의 값`, ''); // 사용자가 아무것도 입력하지 않거나 Cancel 버튼을 누르면 두 반복문 모두를 빠져나옵니다. if (!input) { break label; } console.log(input, i, j); } } alert('완료!'); label 자리에 다른 이름을 넣어도 된다.

JavaScript/기초

[JavaScript] 논리연산자

1. || (OR 연산자) 인수 중 하나라도 true라면, true를 반환한다. alert( true || true ); // true alert( false || true ); // true alert( true || false ); // true alert( false || false ); // false 반환 값이 true면 그 값을 반환하고, 피연산자가 모두 false면 마지막 피연산자를 반환한다. alert( 1 || 0 ); // 1 alert( null || 0 || 1 ); // 1 alert( undefined || null || 0 ); // 0 2. && (AND 연산자) 두 인수 모두 true라면, true를 반환한다. alert( true && true ); // true aler..

JavaScript/실전

[JavaScript] 무작위 숫자 5개를 뽑아 오름차순으로 정렬 1

자바스크립트에서 랜덤한 숫자 5개를 뽑는다고 해보자. var 랜덤숫자 = Math.floor(Math.random() * 50) + 1; console.log(랜덤숫자); Math.random() 은 0 이상 1 미만의 무작위 난수를 생성하는 함수이고, 이를 50으로 곱했기 때문에 0부터 50사이의 난수가 생성된다. Math.floor 는 소수점 이하를 버리는데 Math.floor(Math.random() * 50) 은 0부터 50사이의 정수를 뽑는다. 단, 50 미만에 50은 포함되지 않기 때문에 +1을 추가하여야 1부터 50까지의 정수를 뽑을 수 있다. 하지만 단 하나의 숫자만을 뽑을 뿐이고 우리가 원하는 것은 5가지의 랜덤 숫자이다. var 추출 = []; for (i=1; i

JavaScript/기초

[JavaScript] scrollTop과 offset

scrollTop은 현재 스크롤의 위치값을 나타낸다. $(window).scrollTop(); 이는 브라우저 상단에서 현재 스크롤까지 이동한 값을 나타내는 코드이다. offset은 대상의 위치값을 나타낸다. $('section').offset(); 이는 section이라는 요소의 위치값을 나타내는 코드이다. 쉽게 말해 scrollTop은 가변적이고, offset은 고정적이다. 다만 offset이 항상 고정적인 것은 아닌데, 반응형에서 브라우저의 크기를 늘리거나 줄일 때 offset의 값도 변할 수 있다. 스크롤이 특정한 지점에 위치할 때, 이벤트가 발생하는 경우에 scrollTop과 offset이 모두 쓰인다. var section2Offset = $('#section2').offset(); $(wind..

JavaScript/실전

[JavaScript] JQuery 플러그인 - bxSlider

bxSlider는 매우 쉽게 이미지 슬라이더를 만들 수 있는 유용한 플러그인이다. bxSlider를 사용하지 않을 경우, setInterval, if문 등 복잡하고 긴 코드를 사용해야 하는 반면, 10줄 이내로, 그것도 아주 직관적인 코드만을 사용하여 슬라이더를 구현할 수 있다. https://bxslider.com/ jQuery Content Slider | Responsive jQuery Slider | bxSlider Coded with ♥ by bxslider.com 설치법은 위 사이트에 나와 있는 대로 I am a slide. I am another slide. header 안에 제이쿼리, bxSlider css, 제이쿼리를 작성하고 간단한 자바스크립트 문법까지 작성하면 된다.