GSITM_하이미디어/JavaScript&Jquery (9) 썸네일형 리스트형 jQuery 활용하기 1. CallBack 함수란?· JavaScript는 순차적으로 한 줄씩 실행, 하지만 해당 효과가 끝나지 않은 상황에서도 다음 구문을 실행하기 때문에 오류가 발생할 수 있어 이러한 문제점을 방지하기 위해 콜백 함수를 사용한다. → 즉, 순차적인(동기적) 처리가 필요한 경우 사용 아래 예제를 보면 콜백 함수를 사용하지 않은 경우, hide 효과가 끝나기도 전에 alert 발생 콜백 함수를 사용한 경우, hide 효과가 완료된 후 순차적으로 alert 발생 2. 속성 조작 메서드1) 컨텐츠 가져오기 · $("").text(): 선택한 요소의 text만 가져옴 · $("").html(): 선택한 요소의 태그까지 모두 가져옴 · $("").val(): 선택한 요소의 value 값을 가져옴 · $("").. jQuery의 기초 1. jQuery 란?· 버전이나 호환성의 문제로 코드가 제대로 작동하지 않을 때가 많았는데 이 문제를 해결하고자 jQuery를 개발 · jQuery는 다양한 브라우저에서 같은 코드로 동일한 동작을 할 수 있게 하는 "크로스 브라우징" 기능을 가짐· jQuery는 JavaScript의 라이브러리로 보다 간략하고 단순한 코드로 구현 가능 2. jQuery 사용 선언· CDN 이용: 구글에 jQuery cdn 검색 → 원하는 버전의 minified 클릭 → 해당 코드 복사 → html 파일 내에 붙여넣기 · CDN 사용하지 않는 방법: VS Code에 js 폴더 생성 → jquery-3.7.1-min.js 파일 생성 → 구글에 jQuery 검색 → Download jQuery → Download jQue.. 코딩 테스트(JS)_정렬과 알고리즘, 탐색 1. 좌표 정렬· 2차원 평면 위의 점 N개가 주어진다. 좌표를 x좌표가 증가하는 순으로, x좌표가 같으면 y좌표가 증가하는 순서로 정렬하여 출력하는 프로그램을 작성하시오. · 입력: 첫 번째 행에 점의 개수 N (1 ≤ N ≤ 100,000)이 주어진다. 두 번째 행부터 x, y 좌표가 주어진다. 단, 위치가 같은 두 점은 없다. (-100,000 ≤ xi, yi ≤ 100,000) · 출력: 조건에 따라 정렬한 결과를 출력한다. 1234567891011121314151617181920212223242526272829let fs = require('fs');let input = fs.readFileSync('sort_05.txt') .toString().spl.. 코딩 테스트(JS)_정렬 ※ 정렬 기초123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657// 1. 숫자 정렬let data = [3,5, 2, 1, 4];console.log('source : ' + data); // data.sort((a,b)=>a-b);data.sort((a,b)=>{ if(ab) return -1; if(a>b) return 1; if(a==b) return 0;}) console.log('result : ' + data); // 2. 문자 정렬: 대문자의 경우 맨 앞으로 정렬됨let strData = ['fineapple', 'durian', 'carr.. 코딩 테스트(JS)와 MBTI 페이지 배포 ※ 알고리즘 코딩 테스트 문제의 입출력 형식· 알고리즘 문제에서는 입출력 양식이 주어짐→ 첫 번째 단계는 데이터를 입력받거나 생성하는 것→ 적절한 알고리즘을 사용하여 정확한 형식으로 정답 출력 1. 주사위 세 개· 1~6까지의 눈을 가진 3개의 주사위를 던져서 다음과 같은 규칙에 따라 상금을 받는 게임이 있다. · 3개 주사위의 나온 눈이 주어질 때, 상금을 계산하는 프로그램을 작성 하시오. ⓐ 같은 눈이 3개가 나오는 경우: 상금 = 10,000원 + (같은 눈) × 1,000원 ⓑ 같은 눈이 2개만 나오는 경우: 상금 = 1,000원 + (같은 눈) × 100원 ⓒ 모두 다른 눈이 나오는 경우: 상금 = (그 중 가장 큰 눈) × 100원 · 입력: 첫 번째 행에 3개의 눈이 공백을 두고 주.. 코딩 테스트(JS)와 MBTI 페이지 제작 #2 ※ 알고리즘 코딩 테스트 문제의 입출력 형식· 알고리즘 문제에서는 입출력 양식이 주어짐→ 첫 번째 단계는 데이터를 입력받거나 생성하는 것→ 적절한 알고리즘을 사용하여 정확한 형식으로 정답 출력 1. 최솟값, 최댓값 구하기· N개의 정수가 주어질 때, 최솟값과 최댓값을 구하는 프로그램을 작성하시오. · ⓐ reduce 함수 ⓑ reduce 사용 않고 풀 때, 두 가지 프로그램 작성할 것 · 입력: 첫 번째 행에 정수의 개수 N과 (1 ≤ N ≤ 1,000,000) 두 번째 행에는 N개의 정수를 공백으로 구분해서 주어진다. · 출력: 주어진 정수 N개의 최솟값과 최댓값을 공백으로 구분해 출력한다. 123456789101112131415161718192021222324let fs = require.. 코딩 테스트(JS)와 MBTI 페이지 제작 #1 ※ 알고리즘 코딩 테스트 문제의 입출력 형식· 알고리즘 문제에서는 입출력 양식이 주어짐 → 첫 번째 단계는 데이터를 입력받거나 생성하는 것 → 적절한 알고리즘을 사용하여 정확한 형식으로 정답 출력 ※ 파일시스템 모듈의 사용· 아래와 같이 txt, js 파일이 한 짝을 이루도록 생성한 후, 코딩 테스트 연습을 진행할 것 · txt 파일의 내용을 읽어오기 위해서는 파일시스템(fs 모듈)을 활용! 1. 두 정수 A와 B를 입력받아, A+B를 출력하시오.· 입력: 7 9 / 출력: 16 1234567// file systemlet fs = require('fs');let input = fs.readFileSync('input_01.txt') .toString().split('\n'); .. JavaScript와 연습문제 1. JS 기본 문법_조건문1) if문 if~else if( 조건 ){ 참일 때 실행할 문장 }else{ 거짓일 때 실행할 문장 } 2) 다중 if문 if~else if~else if(조건1){ 해당 조건 충족 시 실행할 문장 }else if(조건2){ 해당 조건 충족 시 실행할 문장 }else{ 그 외 실행할 문장 } 3) swich case문, break는 조건에 일치하면 멈춤의 역할, defalt는 일치하는 조건이 없는 경우 실행 switch(검사할 값, 조건){ case 조건 : 실행문장; break; case 조건 : 실행문장; break.. 이전 1 2 다음
