Lpla 개발 블로그

JavaScript/실전

[JavaScript] Swiper 예제 - 3D 입체 효과(coverflow)

Swiper의 effect: 'coverflow'를 사용하여 3D 입체 슬라이드를 만들 수 있다. HTML CSS .swiper-slide { width: 20%; margin-right: 10px; height: 200px; } .swiper-slide.slide01 { background-color: #BE5EC2; } .swiper-slide.slide02 { background-color: #F862A7; } .swiper-slide.slide03 { background-color: #FF7B87; } .swiper-slide.slide04 { background-color: #FFA26A; } .swiper-slide.slide05 { background-color: #FFCE5E; } .swi..

JavaScript/실전

[JavaScript] 계산기

이 글은 유튜브 ZeroCho ES2021 자바스크립트 강좌에 나온 내용을 기초로 작성했지만 다른 부분이 존재합니다. 1. HTML 마크업, CSS 추가 자바스크립트로 단순한 사칙연산 계산기를 만들어보겠다. 실제 계산기는 신경 써야 할 게 훨씬 많고 복잡하기 때문에 여기서는 다루지 않는다. 먼저 HTML과 CSS는 아래 내용을 그대로 복사한다. 7 8 9 + 4 5 6 - 1 2 3 / C 0 = X * { box-sizing: border-box; } #result { width: 180px; height: 50px; margin: 5px; text-align: right; } #operator { width: 50px; height: 50px; margin: 5px; text-align: center..

JavaScript/실전

[JavaScript] 끝말잇기 (2)

[JavaScript] 끝말잇기 (1) 5. 현재 제시어와 이전 제시어 정의 이제 이전 제시어의 마지막 글자와 현재 제시어의 첫 글자의 일치 여부를 확인하여 일치할 경우에 다음 제시어를 변경하고, 일치하지 않을 경우에는 변경하지 않도록 해야 한다. 따라서 현재 제시어를 nowWord, 이전 제시어를 prevWord라는 변수로 정의한다. 변수를 추가한 만큼 기존 코드에도 변수를 입력하여 수정할 필요가 있다. [기존 코드] wordBtn.addEventListener('click', function(){ wordDisplay.textContent = wordInput.value; wordInput.value = ''; }); [수정한 코드] let wordInput = document.querySelecto..

JavaScript/실전

[JavaScript] 끝말잇기 (1)

이 글은 유튜브 ZeroCho ES2021 자바스크립트 강좌에 나온 내용을 기초로 작성했지만 다른 부분이 존재합니다. 1. 순서 혼자서 하는 끝말잇기 놀이를 자바스크립트로 구현하려고 한다. 무작정 코드를 작성하기 이전에 먼저 머릿속으로 구상해보자. 필요한 HTML에는 무엇이 있을까? 끝말잇기 제시어를 작성할 input 요소, 작성한 제시어를 제출할 button 요소, 그리고 제출한 제시어를 출력할 div 요소까지 필요하다. 다음으로 필요한 JavaScript에는 무엇이 있을까? 입력한 제시어를 기억하는 변수와 div 요소에 출력하는 코드, 직전에 입력한 제시어의 마지막 값과 방금 입력한 제시어의 처음 값이 일치하는지 판단 여부, 두 값이 일치한다면 div 요소의 값을 바꾸고 일치하지 않는다면 div 요소..

JavaScript/기초

[JavaScript] 함수 (2)

이전 글에서 이어집니다. [JavaScript] 함수 1. 함수란? 자바스크립트에서 함수는 가장 중요한 문법 중 하나이다. 함수란 일련의 과정을 문으로 구현하고 코드 블록으로 감싼 하나의 실행 단위로 정의한 것이다. 함수는 입력을 받아서 출력 lpla.tistory.com 6. 참조에 의한 전달과 외부 상태의 변경 엄연히 말해 자바스크립트에서 참조에 의한 전달은 존재하지 않고 값에 의한 전달만이 존재한다. 하지만 편의상 전달되는 값의 종류에 따라 값에 의한 전달과 참조에 의한 전달로 구분하여 부르기로 한다. 이 때 참조에 의한 전달은 다른 프로그래밍 언어에서 말하는 그것과 정확히 일치하지 않는다. // 매개변수 primitive는 원시값을 전달받고, 매개변수 obj는 객체를 전달받는다. function ..

JavaScript/실전

[JavaScript] 익스플로러 유튜브 로딩 문제 해결

익스플로러에서 iframe이나 object로 유튜브를 삽입하면 타 브라우저에 비해서 로딩 속도가 매우 느린 현상이 있다. 이미 이 자체만으로도 심각한 문제지만, 사이트에 페이드 등 일부 효과들이 렉을 동반한 버벅임으로 정상 실행되지 않는 것도 문제다. 크롬은 지연 로딩을 지원하고 있다. 이치럼 loading="lazy" 를 추가해주면 페이지를 로드할 때 유튜브를 읽지 않고 스크롤이 됐을 때 유튜브를 로드하여 페이지 로딩 시간을 단축시키고 렉도 줄인다. 하지만 아쉽게도 익스플로러는 지연로딩 기능이 없다. 지연로딩도 없지만 로딩 속도가 비정상적으로 느리다. 이 문제를 해결하기 위해서 익스플로러에서 페이지 로드시 유튜브를 읽지 않고 썸네일만 불러들인 다음, 썸네일을 클릭하면 유튜브 영상이 시작되도록 하는 방식..

JavaScript/기초

[JavaScript] 함수(1)

1. 함수란? 자바스크립트에서 함수는 가장 중요한 문법 중 하나이다. 함수란 일련의 과정을 문으로 구현하고 코드 블록으로 감싼 하나의 실행 단위로 정의한 것이다. 함수는 입력을 받아서 출력을 내보낸다. 이때 입력을 전달받는 변수를 매개변수(parameter), 입력을 인수(argument), 출력을 반환값(return value)이라고 한다. 함수는 함수 정의를 통해 생성되지만 정의만으로 함수가 실행되는 것은 아니다. 함수를 실행하기 위한 입력, 즉 인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 지시해야 한다. 이를 함수 호출이라고 한다. 함수를 호출하면 코드 블록에 담긴 문들이 실행되고 결과값을 반환(반환값)한다. // 함수 정의 function add(x, y) { return x + y; ..

JavaScript/기초

[JavaScript] 객체 리터럴

객체 자바스크립트는 객체 기반 언어이고 자바스크립트를 이루고 있는 모든 것이 객체이다. 정확하게는 원시 타입을 제외한 나머지 모든 것은 객체이다. 그리고 객체는 프로퍼티로 구성되어 있다. 다시 프로퍼티는 키(key)와 값(value)으로 구성되는데 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드(method)라고 부른다. 클래스 기반 언어에서 객체를 생성하기 위해 new 연산자를 사용한다. /* 1단계 : 클래스 정의 */ public class Prisoner { public int setence = 4; public int probation = 2; public string name; public string id; /* 2단계 : 클래스 생성자 정의*/ public Prisoner(s..

JavaScript/기초

[JavaScript] 논리 연산자와 단축 평가

1. 논리 연산자 자바스크립트는 세 종류의 논리 연산자가 있다. 연산자 의미 || OR && AND ! NOT OR 연산자는 피연산자 중 하나라도 true라면 첫번째 true를 반환하고 그렇지 않으면 false를 반환한다. AND 연산자는 피연산자가 모두 true라면 true를 반환하고 그렇지 않으면 첫번째 false를 반환한다. NOT 연산자는 하나의 피연산자만을 가지고 해당 피연산자의 불린형(true, false)을 역으로 반환한다. true || true; // true false || true; // true true || false; // true false || false; // false true && true; // true false && true; // false true && fals..

JavaScript/기초

[JavaScript] 삼항연산자와 조건문(if ... else문) 차이

삼항연산자(삼항 조건 연산자)는 자바스크립트에서 세 개의 피연산자를 취할 수 있는 유일한 연산자다. 삼항연산자의 표현식은 아래와 같다. 조건식 ? 조건식의 true 값 : 조건식의 false 값 삼항연산자는 첫번째 피연산자가 true라면 두번째 피연산자를 반환하고, 첫번째 피연산자가 false라면 세 번째 피연산자를 반환한다. var age = 30; var checkEven = age % 2 ? "홀수입니다." : "짝수입니다." console.log(checkEven); // "짝수입니다." checkEven은 age의 홀수, 짝수를 판단하는 삼항연산자이다. 나머지를 구하는 % 를 사용하여 나머지가 0 이라면 false로 세 번째 피연산자를 반환하고, 나머지가 1이라면 true로 두 번째 피연산자를 ..