제이쿼리

[jQuery] 제이쿼리 '동작' 메서드

제이쿼리는 '선택' + '동작' 으로 이루어져 있다 이 '동작' 부분에는 다양한 메서드가 있는데, 이를 활용하여 원하는 요소에 클래스를 추가/제거 하거나, 속성을 읽고 쓰거나, 스타일을 입히는 것 등이 가능하다 클래스 관련 // item에 header 클래스 추가 $('#item').addClass('header'); // item에 header 클래스 제거 $('#item').removeClass('header'); // item에 header 클래스가 없으면 추가, 있으면 제거 $('#item').toggleClass('header'); // item에 header 클래스가 있으면 true, 없으면 false 리턴 $('#item').hasClass('header'); 속성 관련 // img 태그의 ..

[jQuery] 제이쿼리 Audio 다루기

오디오 재생하고 정지하기 소리의 상태는 크게 '생성', '재생', '정지' 총 3가지 단계로 나눌 수 있다 let audioFile = new Audio("file location or URL"); // 생성 audioFile.play(); // 재생 audioFile.pause(); // 정지 정지 이후 재생 위치 설정하기 위 코드에서 여러 번 '재생'과 '정지'를 눌러보면, 멈춘 시점 다음부터 이어서 재생된다. 처음 또는 특정 시점부터 재생하고 싶을 경우 currentTime 속성을 활용해 재생 할 위치를 설정할 수 있다. audioFile.currentTime = 0; // 오디오 파일 재생 위치 설정 HTML 삽입 미리보기할 수 없는 소스 Music Start PAUSE STOP

[JavaScript] 자바스크립트 Date 정리

날짜와 관련된 프로그램은 Date 객체를 활용해 만들 수 있다 객체 만들기 우선 객체를 만들어야 활용할 수 있으며, 두 가지 방법이 있다 현재 날짜로 설정 파라미터 없이 new Date()를 하면 현재 날짜로 설정되어 있는 Date 객체가 생성되어 리턴된다 let date = new Date(); 원하는 날짜로 설정 파라미터를 써주면 원하는 날짜로 설정할 수 있다 만약 날짜만 쓸 경우, 0시 0분 0초로 지정된다 // 2022년 1월 11일 18시 50분 30초 let date1 = new Date('Jan 11, 2022 18:50:30'); let date2 = new Date('2022-01-11T18:50:30'); // 1999년 03월 02일 (날짜만) let date3 = new Date('..

[JavaScript] 자바스크립트 Array 정리

배열의 길이 length 속성은 배열의 길이를 담고 있다 let brands = ['Apple', 'Coca-Cola', 'Starbucks']; console.log(brands.length); 3 배열에서 특정 값 찾기 문자열에서 사용했던 indexOf가 배열에서도 똑같이 동작한다 array.indexOf(item)을 하면 array배열에 item이 포함되어 있는지 확인할 수 있다 만약 포함되어 있다면, item이 있는 인덱스가 리턴된다 포함되어 있지 않다면, -1이 리턴된다 여러 번 포함되어 있으면, 처음 발견된 인덱스가 리턴된다 let brands = ['Apple', 'Coca-Cola', 'Starbucks']; console.log(brands.indexOf('Starbucks')); con..

[JavaScript] 자바스크립트 String 정리

문자열의 길이 length 속성은 문자열의 길이를 담고 있다 let str = 'Codeit'; console.log(str.length); 6 특정 인덱스의 문자 받아오기 str.charAt(index)를 하면 문자열 str의 index 인덱스에 있는 문자를 받아올 수 있다 let str = 'Codeit'; console.log(str.charAt(2)); d 문자열 안에서 다른 문자열 검색 str.indexOf(searchValue)를 하면 문자열 str 내에 문자열 searchValue가 포함되어 있는지 확인할 수 있다 만약 포함되어 있다면, 문자열이 시작되는 문자의 인덱스가 리턴된다 포함되어 있지 않다면, -1이 리턴된다 여러 번 포함되어 있으면, 처음 발견된 인덱스가 리턴된다 let str =..

[JavaScript] 자바스크립트 Math 정리

절댓값 (Absolute Number) Math.abs(x)를 하면 x의 절댓값 리턴 console.log(Math.abs(-10)); console.log(Math.abs(10)); 10 10 최댓값 (Maximum) Math.max 함수에 파라미터로 여러 수를 넘겨주면, 그 중 가장 큰 값 리턴 console.log(Math.max(2, -1, 4, 5, 0)); 5 최솟값 (Minimum) Math.min 함수에 파라미터로 여러 수를 넘겨주면, 그 중 가장 작은 값 리턴 console.log(Math.min(2, -1, 4, 5, 0)); -1 거듭제곱 (Exponentiation) Math.pow(x, y)를 하면 x의 y승의 결과값 리턴 console.log(Math.pow(2, 3)); con..

제이쿼리(jQuery)와 자바스크립트(Vanilla JS) 이벤트 핸들링 차이

HTML 태그에 이벤트를 직접 명시해두지 않고 깔끔하게 함수로 분리하기 위해 같은 코드를 제이쿼리(jQuery)와 바닐라 자바스크립트(Vanilla JavaScript)로 작성해 보았다 아래 두 코드의 의미는 동일하다 제이쿼리 (jQuery) 코드 $('#home').on('click', clickHome); $('#seoul').on('click', clickSeoul); $('#tokyo').on('click', clickTokyo); $('#paris').on('click', clickParis); $('#photo').on('mouseenter', mouseEnterPhoto); $('#photo').attr('src', 'images/home.png'); $('#home').css('font-w..

제이쿼리(jQuery) 설치 및 사용법

"write less, do more." 적게 작성하고, 많은 것을 하자 제이쿼리(jQuery)란? 제이쿼리(jQuery)는 웹 사이트에 자바스크립트를 쉽게 활용할 수 있도록 만들어주는 오픈소스 기반의 자바스크립트 라이브러리이다. 2006년 미국의 존 레식(John Resig)에 의해 뉴욕 시 바캠프에서 공식적으로 소개되었다. 작지만 풍부한 기능을 강점으로 여러 자바스크립트 라이브러리 중 높은 점유율을 보였으며 전 세계 개발자 설문 조사 StackOverflow Developers Survey 2020에 따르면 jQuery는 개발자 사이에서 가장 많이 사용되는 웹 프레임워크로 1위를 차지했다. 그러나 현재는 웹브라우저 환경의 변화(Google Chrome), 가상 DOM을 사용하는 리액트(React.js..