본문 바로가기
반응형

JavaScript71

[Javascript] - Slide/Carousel 효과내기 Javascript에 다양한 Slide 라이브러리가 있다. Owl Carousel, Swiper JS, Splide, Flicking 등등 라이브러리를 사용하는 것도 좋은 방법이지만, 때로는 직접 만들어보는것도 좋다. 1. HTML // HTML 2. JS var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("image-fade"); for (i = 0; i slides.length) { slideIn.. 2024. 1. 23.
[Javascript] infinite scroll (리스트 불러오기) Infinite scroll은 Paging 하는것을 대신해서 스크롤을 내릴때 리스트를 불러오는 기능을 말한다. 아래처럼 단순하게도 구현이 가능하다. 하지만 보통의 경우에는 한 페이지에 리스트 20개씩 보여지는 페이지를 만들게 되지만, 때때로 스크롤을 내릴경우 다음 페이지의 리스트 20개를 불러오는 기능을 구현해야할 경우가 생긴다. 그때 이 포스팅이 도움이 됐으면 한다. 리스팅할 컨텐츠가 필요하기 때문에 만들어져있는 API를 이용해서 설명하려고 한다. 메인 소스 및 API는 아래 링크를 참고하면 된다. https://www.javascripttutorial.net/javascript-dom/javascript-infinite-scroll/ 먼저 index.html을 생성하고 아래 코드를 넣는다. * CSS.. 2023. 11. 30.
[Javascript] 백준 - 2739번 구구단 문제 N을 입력받은 뒤, 구구단 N단을 출력하는 프로그램을 작성하시오. 출력 형식에 맞춰서 출력하면 된다. 입력 첫째 줄에 N이 주어진다. N은 1보다 크거나 같고, 9보다 작거나 같다. 출력 출력형식과 같게 N*1부터 N*9까지 출력한다. 예제 입력 1 복사 2 예제 출력 1 복사 2 * 1 = 2 2 * 2 = 4 2 * 3 = 6 2 * 4 = 8 2 * 5 = 10 2 * 6 = 12 2 * 7 = 14 2 * 8 = 16 2 * 9 = 18 let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().split('\n'); let n = Number(input[0]); for(let i = 1; i 2023. 11. 29.
[Javascript] 백준 - 2480번 주사위 세개 문제 1에서부터 6까지의 눈을 가진 3개의 주사위를 던져서 다음과 같은 규칙에 따라 상금을 받는 게임이 있다. 같은 눈이 3개가 나오면 10,000원+(같은 눈)×1,000원의 상금을 받게 된다. 같은 눈이 2개만 나오는 경우에는 1,000원+(같은 눈)×100원의 상금을 받게 된다. 모두 다른 눈이 나오는 경우에는 (그 중 가장 큰 눈)×100원의 상금을 받게 된다. 예를 들어, 3개의 눈 3, 3, 6이 주어지면 상금은 1,000+3×100으로 계산되어 1,300원을 받게 된다. 또 3개의 눈이 2, 2, 2로 주어지면 10,000+2×1,000 으로 계산되어 12,000원을 받게 된다. 3개의 눈이 6, 2, 5로 주어지면 그중 가장 큰 값이 6이므로 6×100으로 계산되어 600원을 상금으로 받게.. 2023. 11. 29.
[Javascript] 백준 - 2438번 별찍기 1 문제 첫째 줄에는 별 1개, 둘째 줄에는 별 2개, N번째 줄에는 별 N개를 찍는 문제 입력 첫째 줄에 N(1 ≤ N ≤ 100)이 주어진다. 출력 첫째 줄부터 N번째 줄까지 차례대로 별을 출력한다. 예제 입력 1 복사 5 예제 출력 1 복사 * ** *** **** ***** let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().split('\n'); let n = Number(input[0]); let result = ""; for(let i = 0; i < n; i++){ for(let j = 0; j 2023. 11. 29.
[Javascript] 정렬 - 삽입정렬(Insertion Sort) 1. 삽입 정렬 각 숫자를 적절한 위치에 삽입하는 정렬 기법 동작 방식 1. 각 단계에서 현재 원소가 삽입될 위치를 찾는다. 2. 적절한 위치에 도달할 떄까지 반복적으로 왼쪽으로 이동한다. 시간 복잡도 삽입 정렬이란 각 원소를 적절한 위치에 삽입하는 정렬 기법 매 단계에서 현재 처리중인 원소가 삽입될 위치를 찾기위해 약 N번의 연간이 필요하다. 결과적으로 약 N개의 단계를 거친다는 점에서 최악의 경우 O(N²)의 시간 복잡도를 가진다. 삽입정렬 예시 *삽입 정렬을 수행할 떄는 처음에 첫번째 원소는 정렬이 되어있다고 고려한다. 소스코드 예시 //삽입정렬함수 function insertionSort(arr) { for (let i = 1; i < arr.length; i++){ for (let j = i; .. 2023. 11. 28.
반응형