EMDI는 지금도 개발중

JavaScript : 자바스크립트 기초 배우기 with jQuery 본문

프론트/JavaScript

JavaScript : 자바스크립트 기초 배우기 with jQuery

EMDI 2022. 2. 16. 21:55

jQuery의 목적은 웹사이트에서 JavaScript를 훨씬 더 쉽게 사용할 수 있도록 도와주는 경량 JavaScript 라이브러리입니다. jQuery를 이용하면 AJAX 호출 및 DOM 조작과 같은 JavaScript의 복잡한 많은 부분을 단순화시켜줍니다.

* jQuery 라이브러리 기능 : HTML/DOM조작, CSS조작, HTML이벤트메소드, 효과 및 애니메이션, AJAX 등

<!DOCTYPE html>
<html>
<body>
<!-- JavaScript onClick를 이용해서 content를 직접 변경-->
<p id="memo">JavaScript</p>
<button type="" onclick='document.getElementById("memo").innerHTML = "Hello JavaScript!"'> JavaScript Button</button>

<p id="memo2">jQuery</p>
<button id="btn">jQuery Button</button>
</body>

<!-- jQuery를 사용하기 위해선 import -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
<!-- $(document).ready(function(){ 쓰는 이유는 문서 로드가 완료되기 전 jQuery코드가 실행되는 것을 방지하기 위함입니다 -->
$(document).ready(function(){
  $("#btn").click(function(){
      $("#memo2").text("Hello jQuery!");
  });
});
</script>
</html>

위의 소스는 JavaScript를 이용해서 <p>의 text를 바꾸는 방법과 jQuery를 이용해서 바꾸는 방법을 비교해보았습니다.

<!DOCTYPE html>
<html>
<body>
<p id="memo">JavaScript</p>
<!-- onclick에 직접 입력이 아닌 function으로 빼서 작업 -->
<button type="" onclick="javaScriptFunction()"> JavaScript Button</button>

<p id="memo2">jQuery</p>
<button id="btn">jQuery Button</button>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
<!-- JavaScript Button을 클릭 시 호출되는 함수 -->
function javaScriptFunction() {
	document.getElementById("memo").innerHTML = "Paragraph changed.";
};

$(document).ready(function(){
  $("#btn").click(function(){
      $("#memo2").text("Hello jQuery!");
  });
});
</script>
</html>

물론 JavaScript도 jQuery에서 사용한 function처럼 함수를 만들어 사용할 수 있습니다. 참고로 JavaScript는 <head>, <body> 등 HTML 페이지 섹션 어디에든 배치할 수 있으며, 외부 파일에 배치할 수도 있습니다.

▶ JavaScript구문과 jQuery구문

/* JavaScript 구문
 * JavaScript 구문은 두 가지 유형의 값을 정의합니다.
 * 고정값, 변수값
 */
var x, y;
x = 5 + 6;
y = x * 10;
 
/* jQuery 구문
 * 기본 구문은 $( 선택기 )입니다. 액션 ()
 * jQuery를 정의/액세스하기 위한 $ 기호
 * HTML 요소 "쿼리(또는 찾기)"를 위한 ( 선택기 )
 * 요소에 대해 수행할 jQuery 작업 ()
 */
$(this).hide()- 현재 요소를 숨깁니다.
$("p").hide()- 모든 <p> 요소를 숨깁니다.
$(".test").hide()- class="test"인 모든 요소를 ​​숨깁니다.
$("#test").hide()- id="test"인 요소를 숨깁니다.

▶ JavaScript 키워드

Keyword Description
var 변수 선언
변수는 데이터를 저장하기 위한 컨테이너
let 블록 변수 선언
변수의 값이 변경될 수 있으면 let
* let으로 정의된 변수는 재선언할 수 없음
const 블록 상수 선언
일반적인 규칙을 원할 경우 const
if 조건에서 실행할 명령문 블록을 표시
switch 다른 경우에 실행할 명령분 블록을 표시
for 루프에서 실행할 명령문 블록을 표시
function 함수 선언
return 기능 종료
try 명령문 블록에 대한 오류 처리를 구현

* var, let, const 차이점 체크하기

// var는 변수를 다시 선언하면 문제가 발생할 수 있다.
var  x = 10;
// Here x is 10
{  
var x = 2;
// Here x is 2
}
// Here x is 2
//--------------------------------------------------------
// let은 재선언할 수는 없지만
// 블록 내부에 선언된 변수는 블록 외부에서 엑세스할 수 없기 때문에
// 내부에 변수를 다시 선언해도 문제가 발생하지 않는다.
let  x = 10;
// Here x is 10
{  
  let x = 2;
  // Here x is 2
}
// Here x is 10
//--------------------------------------------------------
// const는 재할당할 수가 없다.
const PI = 3.141592653589793;
PI = 3.14;      // This will give an error
PI = PI + 10;   // This will also give an error

▶ jQuery 선택기 예시

Syntax Description
$("*") Selects all elements
$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"
$("[href]") Selects all elements with an href attribute

 

'프론트 > JavaScript' 카테고리의 다른 글

JavaScript : 자바스크립트 Errors (Try, Catch, Finally, Throw)  (0) 2022.03.16
JavaScript : 자바스크립트 Set(), Map()  (0) 2022.03.15
JavaScript : 자바스크립트 조건문, 반복문  (0) 2022.03.03
JavaScript : 날짜함수(Date Get Methods), 공식(Math)  (0) 2022.03.01
JavaScript : 데이터형식, 이벤트, 템플릿 이용 방법  (0) 2022.02.17
'프론트/JavaScript' Related Articles more
Comments