728x90 전체 글651 [자바스크립트] 이벤트 버블링 응용과 dataset 저번 시간에 이벤트 버블링에 대해 배웠다. 이러한 탭을 만들 때, Products Information Shipping list라는 요소 안에 tab-button이 존재하기 때문에 이벤트리스너를 list에 하나만 달아서 3개의 버튼을 모두 조작가능하게 할 수 있다. 추가로, data-id="0" 처럼 뒤에 붙여놓은것이 보일 텐데 data-데이터이름="값" 의 형태로 데이터를 저장해둘 수 있다. 나중에 이를 활용하여 이벤트에 써 보자. function tabOpen(i) { $('.tab-button').removeClass('orange'); $('.tab-button').eq(i).addClass('orange'); $('.tab-content').removeClass('show'); $('.tab-c.. 2023. 1. 30. [자바스크립트] 이벤트 버블 이런 모달창이 있다. 검은색 배경을 클릭하면 모달창이 꺼지도록 하고싶어서 자바스크립트를 작성했다. 이렇게 작성했다. 그런데 잘 작동될까? 이 black-bg 위에 하얀색 모달 창이 얹혀있는 상태이기 때문에, 하얀색 모달창 부분을 클릭해도 이벤트가 발생하게 된다. 어떠한 요소의 이벤트가 발생하면 해당 요소의 상위요소까지 이벤트가 실행되는 현상을 이벤트 버블링이라고 한다. $('~~~').on('click',function(e){ e.target;//유저가 실제로 누른거 e.currentTarget; // this e.preventDefault(); //이벤트 기본동작을 막음 submit 등 e.stopPropagation();//내 상위 요소로의 이벤트 버블링을 막음 }) 이벤트리스너의 콜백함수에 파라미터.. 2023. 1. 30. [자바] 백준 6588번: 골드바흐의 추측 https://www.acmicpc.net/problem/6588 6588번: 골드바흐의 추측 각 테스트 케이스에 대해서, n = a + b 형태로 출력한다. 이때, a와 b는 홀수 소수이다. 숫자와 연산자는 공백 하나로 구분되어져 있다. 만약, n을 만들 수 있는 방법이 여러 가지라면, b-a가 가장 큰 www.acmicpc.net 에라토스테네스의 체 알고리즘으로 소수를 판별해놓고, 반복문으로 i를 2~100만까지 증가시키면서 i가 소수이고, n-i가 소수인 경우에 출력한다. import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; public class P6588 { static boolean.. 2023. 1. 30. [자바] 백준 11653: 소인수분해 https://www.acmicpc.net/problem/11653 11653번: 소인수분해 첫째 줄에 정수 N (1 ≤ N ≤ 10,000,000)이 주어진다. www.acmicpc.net import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; public class P11653 { public static void main(String[] args) throws NumberFormatException, IOException { BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); int n = Integer.par.. 2023. 1. 30. [자바] 1735번: 분수 합 https://www.acmicpc.net/problem/1735 1735번: 분수 합 첫째 줄과 둘째 줄에, 각 분수의 분자와 분모를 뜻하는 두 개의 자연수가 순서대로 주어진다. 입력되는 네 자연수는 모두 30,000 이하이다. www.acmicpc.net 분수의 분자,분모를 각각 따로 변수에 저장하고 두 분수를 합한 값도 분자,분모를 따로 변수에 저장 해 둔다. 그리고 반복문을 이용해서 분자,분모를 나누어 줄 것인데, for반복문을 이용, 2부터 시작해서 분자,분모가 모두 나누어 떨어지는 경우에는 나눌 수 있는 만큼 while문을 이용하여 모두 나누어주면 된다. import java.io.BufferedReader; import java.io.IOException; import java.io.Inpu.. 2023. 1. 30. [자바스크립트] for문 이용하여 탭 기능 만들어보기 for문을 써 보자. for(let i=0;i 2023. 1. 30. [자바] 백준 2252번: 줄 세우기 https://www.acmicpc.net/problem/2252 2252번: 줄 세우기 첫째 줄에 N(1 ≤ N ≤ 32,000), M(1 ≤ M ≤ 100,000)이 주어진다. M은 키를 비교한 회수이다. 다음 M개의 줄에는 키를 비교한 두 학생의 번호 A, B가 주어진다. 이는 학생 A가 학생 B의 앞에 서야 한다는 의 www.acmicpc.net 위상정렬 알고리즘을 사용하면 된다. import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.LinkedList; import java.util.Queue; import java.util.StringTokenizer;.. 2023. 1. 29. [자바] 백준 1717번: 집합의 표현 https://www.acmicpc.net/problem/1717 1717번: 집합의 표현 첫째 줄에 n(1 ≤ n ≤ 1,000,000), m(1 ≤ m ≤ 100,000)이 주어진다. m은 입력으로 주어지는 연산의 개수이다. 다음 m개의 줄에는 각각의 연산이 주어진다. 합집합은 0 a b의 형태로 입력이 주어진다. 이는 www.acmicpc.net 이코테, 자료구조에서도 배웠었던 find-union 알고리즘이다. 오랜만에 짜보니 대충은 생각나도 제대로 구현하기가 좀 힘들었는데 이코테에서 배웠던 알고리즘이 조금 더 간단했던것 같아서 그때 배운 그대로 작성 해 봤다. 2022.08.08 - [파이썬 공부/이코테] - 8. 기타 그래프 이론: 서로소 집합 자료구조 union, find import java.. 2023. 1. 28. [자바] 백준 2042번: 구간합 구하기(실패) https://www.acmicpc.net/problem/2042 2042번: 구간 합 구하기 첫째 줄에 수의 개수 N(1 ≤ N ≤ 1,000,000)과 M(1 ≤ M ≤ 10,000), K(1 ≤ K ≤ 10,000) 가 주어진다. M은 수의 변경이 일어나는 횟수이고, K는 구간의 합을 구하는 횟수이다. 그리고 둘째 줄부터 N+1번째 줄 www.acmicpc.net 실패했다. import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.StringTokenizer; public class P2042 { public static void main(String[] arg.. 2023. 1. 28. [자바] 백준 1991번: 트리 순회 https://www.acmicpc.net/problem/1991 1991번: 트리 순회 첫째 줄에는 이진 트리의 노드의 개수 N(1 ≤ N ≤ 26)이 주어진다. 둘째 줄부터 N개의 줄에 걸쳐 각 노드와 그의 왼쪽 자식 노드, 오른쪽 자식 노드가 주어진다. 노드의 이름은 A부터 차례대로 알파 www.acmicpc.net 트리를 입력받고, 전위순회, 중위순회, 후위순회 하면 된다. 입력이 한줄에 (노드) (왼쪽 자식) (오른쪽 자식) 으로 들어온다. 나는 노드를 Node클래스로 표현했고, 노드는 최대 26개밖에 되지 않기 때문에 Node배열을 만들어서 사용했다. import java.io.BufferedReader; import java.io.IOException; import java.io.InputS.. 2023. 1. 27. [자바] 백준 2748번: 피보나치 수2 https://www.acmicpc.net/problem/2748 2748번: 피보나치 수 2 피보나치 수는 0과 1로 시작한다. 0번째 피보나치 수는 0이고, 1번째 피보나치 수는 1이다. 그 다음 2번째 부터는 바로 앞 두 피보나치 수의 합이 된다. 이를 식으로 써보면 Fn = Fn-1 + Fn-2 (n ≥ 2)가 www.acmicpc.net import java.util.Scanner; public class P2748 { public static void main(String[] args) { Scanner sc = new Scanner(System.in); int n = sc.nextInt(); long[] arr = new long[90]; arr[0] = 0; arr[1] = 1; arr[2.. 2023. 1. 26. [자바] 백준 2805번: 나무 자르기 https://www.acmicpc.net/problem/2805 2805번: 나무 자르기 첫째 줄에 나무의 수 N과 상근이가 집으로 가져가려고 하는 나무의 길이 M이 주어진다. (1 ≤ N ≤ 1,000,000, 1 ≤ M ≤ 2,000,000,000) 둘째 줄에는 나무의 높이가 주어진다. 나무의 높이의 합은 항상 M보 www.acmicpc.net 나무가 100만개까지 입력될 수 있기 때문에 O(n)선에서 끝내야겠다는 생각이 우선 들었다 우선 배열을 만들어서 나무들의 키를 입력받는다. 그리고 배열을 내림차순으로 정렬하고 순회를 시작한다. h=0부터, 첫번째 나무부터. 나무를 h높이에서 자른 다음 sum을 자른 만큼 증가시켜준다. 만약 sum이 m을 초과하는 경우(나무가 남는다) 절단기를 높여야 한다. .. 2023. 1. 25. [자바스크립트] 스크롤 이벤트 스크롤 이벤트 window.addEventListener('scroll',function(){}); $(window).on('scroll',function(){}); 스크롤 이벤트이다. (아래는 jQuery) window.addEventListener('scroll',function(){ window.scrollTo(0,100); //(0,100)으로 강제 스크롤 window.scrollBy(0,100); //현재위치에서부터 (0,100)만큼 스크롤 window.scrollY; //Y축으로 얼마나 스크롤했는지 }) $(window).on('scroll',function(){ $(window).scrollTop(100); //100으로 강제 스크롤 $(window).scrollTop(); //얼마나 스크롤.. 2023. 1. 25. [자바스크립트] 캐러셀 만들기 이런 캐러셀을 만들어 보자. 1 2 3 다음 사진을 담을 slide-container이 있고 그 안에 각각의 사진은 slide-box에 들어있다. slide-container는 사진개수*100vm으로, 총 300vm의 너비로 설정하였고 slide-box는 각각 100vm으로, 가로로 정렬되도록 float: left로 설정하였다. 그리고 이 모든 박스를 둘러싸는 div를 만들고 style=overflow:hidden을 주어 화면 밖으로 튀어나간 부분은 안 보이도록 한다. $('.slide-2').on('click', function() { $('.slide-container').css('transform', 'translateX(-100vw)'); }) $('.slide-3').on('click', fun.. 2023. 1. 25. [자바스크립트] 정규식으로 이메일형식 검증하기 .includes함수로 안에 어떤 문자가 포함되었는지 검사 가능하다 그런데 안에 영어가 포함되었는지, 숫자가 포함되었는지 .. . 이런건 어떻게 할까? 정규식을 사용하면 된다. 'abcde'라는 문자열 안에 [a부터z까지] 포함되어있으면 true, 아니면 false를 출력한다. 한글도 마찬가지이다. 이런식으로 숫자의 경우는 [0-9] 아무런 문자 하나: \S a로 시작하는지: ^a a로 끝나는지: a$ a또는b: a|b 등으로 쓸 수 있다. 이메일은 (간략하게) 이렇게 쓸 수 있다. 아무 문자 여러개 + @ + 아무 문자 여러개 + . + 아무 문자 여러개 라는 뜻이다. 이제 이걸 자바스크립트로 써 보면 이렇게 사용할 수 있다. 정규식에 맞다면 true를 반환하게 되니 앞에 !를 붙여 정규식에 맞지 않는.. 2023. 1. 24. 백준 10845번: 큐 https://www.acmicpc.net/problem/10845 10845번: 큐 첫째 줄에 주어지는 명령의 수 N (1 ≤ N ≤ 10,000)이 주어진다. 둘째 줄부터 N개의 줄에는 명령이 하나씩 주어진다. 주어지는 정수는 1보다 크거나 같고, 100,000보다 작거나 같다. 문제에 나와있지 www.acmicpc.net 큐를 만들어서 입력에 맞게 명령어를 처리해 주면 된다. 간단하게 자바 라이브러리를 사용했다. import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.LinkedList; import java.util.Queue; import java.util.. 2023. 1. 24. [자바] 백준 2003번: 수들의 합2 https://www.acmicpc.net/problem/2003 2003번: 수들의 합 2 첫째 줄에 N(1 ≤ N ≤ 10,000), M(1 ≤ M ≤ 300,000,000)이 주어진다. 다음 줄에는 A[1], A[2], …, A[N]이 공백으로 분리되어 주어진다. 각각의 A[x]는 30,000을 넘지 않는 자연수이다. www.acmicpc.net 설 연휴 쉴땐 쉬더라도 쉬운거 한문제정도는 풀어놓고싶었는데 아..생각보다 잘 안풀렸다. import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.StringTokenizer; public class P2003 { pub.. 2023. 1. 24. [자바스크립트] 함수 만들기, setTimeout, setInterval function function 함수명(인자){ document.getElementById('alert').style.display = 인자; } 함수 선언 예시이다. 인자를 사용할 때는 따로 $표시 붙일 필요 없이 그냥 쓰면 된다. function printAlert(time){ $('.alert').html( time+ '초 남았어요') ; } 간단하게 +로 인자와 문자열을 붙일수도 있다. setTimeout, setInterval setTimeout(function(){ $('.alert').hide(); },5000); setTimeout(콜백함수,시간(ms단위)) 로 사용할 수 있다. 인자로 넣은 시간만큼 지나면 콜백함수가 실행된다. 위 예시는 5초 후에 .alert 클래스 요소를 hide하게 .. 2023. 1. 21. [자바] 백준 2960번: 에라토스테네스의 체 https://www.acmicpc.net/problem/2960 2960번: 에라토스테네스의 체 2, 4, 6, 8, 10, 3, 9, 5, 7 순서대로 지워진다. 7번째 지워진 수는 9이다. www.acmicpc.net 문제에서 명시해준 대로 반복문과 조건문을 작성하면 된다. N+1크기의 boolean형 배열을 만들고, 배열을 모두 true로 초기화 한다. 이후 i=2부터, i 2023. 1. 21. [자바] 백준 1700번: 멀티탭 스케줄링 https://www.acmicpc.net/problem/1700 1700번: 멀티탭 스케줄링 기숙사에서 살고 있는 준규는 한 개의 멀티탭을 이용하고 있다. 준규는 키보드, 헤어드라이기, 핸드폰 충전기, 디지털 카메라 충전기 등 여러 개의 전기용품을 사용하면서 어쩔 수 없이 각종 전 www.acmicpc.net 첫 시도 실패했다. 더보기 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.HashSet; import java.util.LinkedList; import java.util.Queue; import java.util.StringTokenizer; pu.. 2023. 1. 20. 이전 1 ··· 13 14 15 16 17 18 19 ··· 33 다음 728x90
