JavaScript vs jQuery : 알아야 할 주요 차이점

우리는 꽤 오랫동안 JavaScript와 JQuery를 알고 있습니다. JavaScript는 jQuery보다 일찍 발명되었습니다. 둘 다 강력하고 웹 개발에 사용되며 동일한 목적, 즉 웹 페이지를 대화 형 및 동적으로 만드는 데 사용됩니다. 즉, 웹 페이지에 생명을 불어 넣습니다. 사람들은 그들이 같은 목적으로 사용된다면 왜이 두 가지 개념이 분리되어 있는지 궁금해 할 것입니다. 이 JavaScript vs jQuery 기사에서는 다음 순서로 어느 것이 더 나은지 알아볼 것입니다.

• JavaScript : 웹 개발의 강력한 언어
• JQuery : JavaScript에서 개발 된 라이브러리
• JQuery가 만들어진 이유와 JQuery의 특별한 기능은 무엇입니까?
• 예제를 통한 JavaScript와 JQuery의 차이점
  • HTML 문서에 JavaScript 및 JQuery 추가
  • DOM 탐색 및 조작
  • 이벤트 처리
  • Ajax 호출
  • 생기

JavaScript : 웹 개발의 강력한 언어

JavaScript는 웹 페이지에 상호 작용을 추가하는 데 사용되는 스크립팅 언어입니다. 웹 페이지를 만드는 데 사용되는 HTML 및 CSS와 함께 세 가지 핵심 기술 중 하나입니다. HTML과 CSS가 웹 페이지의 구조와 웹 페이지의 모양 / 스타일을 정의하는 동안 JavaScript는 상호 작용을 추가하여 웹 페이지를 동적으로 만드는 데 사용됩니다. 즉, JavaScript를 사용하면 마우스 클릭, 마우스 오버 등을위한 코드를 추가 할 수 있습니다. 웹 페이지의 이벤트 등.

JavaScript는 모든 웹 브라우저에서 지원되며 웹 브라우저에는 JavaScript 코드를 식별하고 작업 할 수있는 JavaScript 엔진이 내장되어 있습니다. 따라서 JavaScript는 주로 클라이언트 측 언어입니다. 프로토 타입 기반 객체 지향 언어뿐만 아니라 절차 적 언어로도 사용할 수있는 하나의 언어입니다. 기본 JavaScript를 사용할 때 우리는 절차 적 언어로 작업하고 고급 JavaScript는 객체 지향 개념을 사용합니다.

JavaScript와 jQuery로 넘어 가서 JavaScript에서 개발 된 라이브러리를 이해하겠습니다.

jQuery : JavaScript에서 개발 된 라이브러리

수년에 걸쳐 JavaScript는 웹 개발을위한 강력한 언어로 밝혀졌습니다. JavaScript 위에 구축 된 많은 라이브러리와 프레임 워크가 있습니다. 이러한 라이브러리와 프레임 워크는 JavaScript의 기능을 확장하고 많은 작업을 수행하며 개발자의 작업을 더 쉽게 만들기 위해 개발되었습니다.

jQuery는 그것으로 만들어진 자바 스크립트 라이브러리 중 하나입니다. John Resign이 발명 한 가장 인기있는 JavaScript 라이브러리이며 2006 년 1 월 BarCamp NYC에서 출시되었습니다. jQuery는 MIT 라이선스에 따라 라이선스가 부여 된 무료 오픈 소스 라이브러리입니다. 이것은 브라우저 간 호환성의 강력한 기능을 가지고 있습니다. JavaScript로 직면 할 수있는 브라우저 간 문제를 쉽게 처리 할 수 ​​있습니다. 따라서 많은 개발자가 브라우저 간 호환성 문제를 피하기 위해 jQuery를 사용합니다.

이제 JavaScript vs jQuery 블로그로 넘어 가서 jQuery가 만들어진 이유를 살펴 보겠습니다.

jQuery가 생성 된 이유와 jQuery의 특별한 기능은 무엇입니까?

JavaScript에서는 기본 작업을위한 많은 코드를 작성해야하는 반면 jQuery를 사용하면 한 줄의 코드로 동일한 작업을 수행 할 수 있습니다. 따라서 개발자는 JavaScript보다 jQuery로 작업하는 것이 더 쉽다는 것을 알게됩니다.

• JavaScript는 jQuery가 진화 한 기본 언어이지만 jQuery는 이벤트 처리, DOM 조작, Ajax 호출을 JavaScript보다 훨씬 쉽게 만듭니다. jQuery를 사용하면 웹 페이지에 애니메이션 효과를 추가 할 수 있습니다.이 효과는 JavaScript로 많은 수고와 코드 라인을 필요로합니다.
• jQuery에는 웹 페이지에서 작업을 수행하기위한 플러그인이 내장되어 있습니다. 플러그인을 사용하려면 웹 페이지에 플러그인을 포함하거나 가져 오기만하면됩니다. 따라서 플러그인을 사용하면 애니메이션과 상호 작용 또는 효과의 추상화를 만들 수 있습니다.
• jQuery로 사용자 정의 플러그인을 만들 수도 있습니다. 웹 페이지에서 특정 방식으로 애니메이션을 수행해야하는 경우 요구 사항에 따라 플러그인을 개발하여 웹 페이지에서 사용할 수 있습니다.
• jQuery에는 높은 수준의 UI 위젯 라이브러리도 있습니다. 이 위젯 라이브러리에는 웹 페이지에서 가져 와서 사용자 친화적 인 웹 페이지를 만드는 데 사용할 수있는 다양한 플러그인이 있습니다.

차이점을 이해합시다.

자바 스크립트 대 jQuery

예제를 통해 JavaScript와 jQuery의 차이점을 살펴 보겠습니다.

예제가있는 JavaScript vs jQuery

예제를 살펴 보겠습니다.

HTML 문서에 JavaScript 및 jQuery 추가

JavaScript는 태그 내부의 HTML 문서에 직접 추가되거나 src 속성을 사용하여 HTML 문서에 외부 JavaScript 파일을 추가 할 수 있습니다.
스크립트 태그 안에 직접 작성 :

alert ( '이 경고 상자는 onload 이벤트와 함께 호출되었습니다.')

jQuery를 사용하기 위해 웹 사이트에서 파일을 다운로드하고 SCRIPT 태그의 src 속성에서 다운로드 한 jQuery 파일의 경로를 참조하거나 CDN (Content Delivery Network)에서 직접 가져올 수 있습니다.

CDN 사용 :

DOM Traversal과 Manipulation을 이해합시다.

DOM 탐색 및 조작

JavaScript에서 :

document.getElementById () 메서드를 사용하거나 document.querySelector () 메서드를 사용하여 JavaScript에서 DOM 요소를 선택할 수 있습니다.

var mydiv = document.querySelector (“# div1”)

또는

document.getElementById (“# div1”)

jQuery에서 :

여기서는 대괄호로 묶인 선택기와 함께 $ 기호 만 사용해야합니다.

$ (selector) $ ( '# div1') – selector는 id 'div1'입니다. $ ( '. div1') – selector는 'div1'클래스입니다. $ ( 'p') – selector는 HTML 페이지

위의 문에서 $는 jQuery에 액세스하는 데 사용되는 기호이고 선택기는 HTML 요소입니다.

JavaScript에서 스타일 추가 :

document.getElementById ( 'myDiv'). style.backgroundColor = '# FFF'

jQuery에 스타일 추가 :

$ ( '# myDiv'). css (‘background-color ','# FFF ')

#myDiv 선택기는 'myDiv'식별자를 나타냅니다.

DOM 요소 선택 및 조작은 JavaScript보다 jQuery에서 훨씬 간결합니다.

이벤트 처리로 넘어갑니다.

tostring은 자바에서 무엇을합니까?

이벤트 처리

JavaScript에서는 HTML 요소를 선택합니다.

document.getElementById ( '# button1'). addEventListener ( 'click ', myCallback) function myCallback () {console ('inside myCallback function ')}

여기서 getElementById () 메서드를 사용하여 ID로 요소를 선택한 다음 addEventListener () 메서드를 사용하여 이벤트에 이벤트 리스너를 추가합니다. 이 예에서는 myCallback 함수를 'click'이벤트에 리스너로 추가합니다.

위의 예에서 익명 함수를 사용할 수도 있습니다.

document.getElementById ( '# button1'). addEventListener ( 'click ', function () {console.log ('inside the function ')})

eventListener는 removeEventListener () 메소드를 사용하여 제거 할 수 있습니다.

document.getElementById ( '# button1'). removeEventListener ( 'click', myCallback)

jQuery에서

jQuery에는 거의 모든 DOM 작업에 대해 미리 정의 된 이벤트가 있습니다. 작업에 특정 jQuery 이벤트를 사용할 수 있습니다.

$ (“p”). click (function () {// 클릭 액션})

다른 예는 다음과 같습니다.

$ (“# button1”). dblclick (function () {// id가‘button1’인 html 요소에 대한 더블 클릭 이벤트에 대한 작업}

JQuery 'on'메소드는 DOM 요소에 하나 이상의 이벤트를 추가하는 데 사용됩니다.

$ ( '# button1'). on ( 'click', function () {// action here})

on 메소드로 여러 이벤트와 여러 이벤트 핸들러를 추가 할 수 있습니다.

$ (“button1”). on ({click : function () {// action here}, dblclick : function () {// action here}})

두 개 이상의 이벤트가 아래와 같은 처리기를 가질 수 있습니다.

$ ( '# button1'). on ( 'click dblclick', function () {// action here})

따라서 더 작고 간결한 코드를 사용하면 JavaScript보다 jQuery에서 이벤트 처리가 더 쉽다는 것을 알 수 있습니다.

Ajax Calls로 넘어갑니다.

Ajax 호출

JavaScript에서

JavaScript는 XMLHttpRequest 객체를 사용하여 Ajax 요청을 서버로 보냅니다. XMLHttpRequest에는 Ajax 호출을 수행하는 여러 메소드가 있습니다. 두 가지 일반적인 방법은 open (method, URL, async, user, PSW), send () 및 send (문자열)입니다.
먼저 XMLHttpRequest를 생성 해 보겠습니다.

var xhttp = new XMLHttpRequest () 그런 다음이 객체를 사용하여 open 메서드를 호출합니다. xhttp.open ( 'GET', 'D : //getinfo.txt', true) xhttp.send ()

open 메서드는 서버 / 위치에 대한 get 요청을 만들고 true는 요청이 비동기임을 지정합니다. 값이 false이면 요청이 동기적임을 의미합니다.

게시 요청하기 :

var xhttp = new XMLHttpRequest () 그런 다음이 객체를 사용하여 open 메서드를 호출하고 게시 요청을 만듭니다. xhttp.open ( 'POST', 'D : //postinfo.txt', true) xhttp.send ()

요청과 함께 데이터를 게시하려면 xhttp의 setRequestHeader 메서드를 사용하여 전송할 데이터 유형을 정의하고 send 메서드는 키 / 값 쌍으로 데이터를 보냅니다.

xhttp.setRequestHeader ( 'Content-type', 'application / x-www-form-urlencoded') xhttp.send ( 'name = Ravi & surname = Kumar')

jQuery에서

jQuery에는 Ajax 호출을 수행하는 몇 가지 내장 메소드가 있습니다. 이러한 메서드를 사용하면 서버에서 모든 데이터를 호출하고 데이터로 웹 페이지의 일부를 업데이트 할 수 있습니다. jQuery 메소드는 Ajax 호출을 쉽게 만듭니다.
jQuery load () 메서드 :이 메서드는 URL에서 데이터를 가져와 HTML 선택기로로드합니다.
$ (“p”). load (URL, 데이터, 콜백)
URL은 데이터에 대해 호출되는 위치이고 선택적 데이터 매개 변수는 호출과 함께 전송하려는 데이터 (키 / 값 쌍)이며 선택적 매개 변수 '콜백'은로드 후 실행하려는 메소드입니다. 완성 됐습니다.

jQuery $ .get () 및 $ .post () 메서드 :이 메서드는 URL에서 데이터를 가져와 HTML 선택기에 데이터를로드합니다.
$ .get (URL, 콜백)
URL은 데이터에 대해 호출되는 위치이고 콜백은로드가 완료된 후 실행하려는 메서드입니다.

$ .post (URL, 데이터, 콜백)
URL은 데이터를 위해 호출되는 위치이고 데이터는 호출과 함께 보내려는 키 / 값 쌍이며 콜백은로드가 완료된 후 실행하려는 메소드입니다. 여기서 데이터 및 콜백 매개 변수는 선택 사항입니다.

jQuery Ajax 호출은 JavaScript보다 간결합니다. JavaScript에서는 XMLHTTPRequest 객체를 사용하고 있으며 jQuery에서는 이러한 객체를 사용할 필요가 없습니다.

애니메이션으로 넘어갑니다.

생기

JavaScript에서

JavaScript에는 jQuery animate () 함수와 같은 특정 애니메이션 함수가 없습니다. JavaScript에서 애니메이션 효과는 주로 요소의 스타일을 조작하거나 CSS 변환, 번역 또는 애니메이션 속성을 사용하여 달성됩니다. JavaScript는 애니메이션 효과를 위해 setInterval (), clearInterval (), setTimeout () 및 clearTimeout () 메서드도 사용합니다.

setInterval (myAnimation, 4) function myAnimation () {document.getElementById ( '# div1'). style.transform = 'translate (100px, 100px)'document.getElementById ( '# div1'). style.transform = 'rotate ( 20deg) '}

JavaScript의 애니메이션은 주로 CSS 속성을 조작하는 것입니다.

jQuery에서

jQuery에는 HTML 요소에 애니메이션이나 효과를 추가하는 많은 내장 메서드가 있습니다. 몇 가지를 확인해 보겠습니다.
animate () 메서드 :이 메서드는 요소에 애니메이션을 추가하는 데 사용됩니다.

$ ( '# button1'). click (function () {$ ( '# div1') .animate ({height : '300px'})})

show () 메서드 :이 메서드는 숨겨진 상태에서 요소를 표시하는 데 사용됩니다.

$ ( '# button1'). click (function () {$ ( '# div1'). show ()})

hide () 메서드 :이 메서드는 표시 상태에서 요소를 숨기는 데 사용됩니다.

$ ( '# button1'). click (function () {$ ( '# div1'). hide ()})

jQuery에는 웹 페이지에서 애니메이션과 효과를 생성하는 자체 메서드가 있습니다.

요약하자면 JavaScript는 웹 개발을위한 언어이고 jQuery는 JavaScript에서 유래 된 라이브러리입니다. 자바 스크립트와 jQuery는 웹 개발에서 그 자체로 중요합니다.

이제 JavaScript Loops에 대해 알았으니 에듀 레카. 웹 개발 인증 교육은 HTML5, CSS3, Twitter Bootstrap 3, jQuery 및 Google API를 사용하여 인상적인 웹 사이트를 만들고 Amazon Simple Storage Service (S3)에 배포하는 방법을 배우는 데 도움이됩니다.

질문이 있으십니까? 'JavaScript vs jQuery'의 주석 섹션에 언급 해 주시면 다시 연락 드리겠습니다.

자바 스크립트의 indexof는 무엇입니까