네이버 클라우드 캠프/JavaScript 4

[Jquery] Selector

Selector(선택자) 직접 선택자 직접 선택자는 전체, 아이디, 클래스, 태그, 그룹 총 5가지 선택자로 구성됩니다. 전체 선택자는 DOM의 모든 태그를 한번에 선택합니다. 기호는 $("*") 이고 달러와 all(*) 표시만 기억하면 쉽게 쓸 수 있죠. 아이디 선택자는 해당 아이디명인 태그를 고르고, $("#아이디명") 으로 사용합니다. 클래스 선택자는 클래스를 고르고 $(".클래스명") 이렇게 씁니다. 그룹 선택자는 여러 선택자를 묶어서 고를 수 있고, $("선택자1, 선택자2, ...") 이렇게 사용합니다. 선택자 n에는 아이디, 클래스, 태그 선택자 등 다양하게 입력이 가능해서 유용합니다. 종류 코드 전체 선택자 $("*") 아이디 선택자 $("#아이디") 클래스 선택자 $(".클래스명") 태그..

[Jquery] Jquery 기초

Jquery Jquery는 자바스크립트의 DOM 객체 조작을 도와주는 라이브러리 입니다. 선택자부터 이벤트, 애니메이션 등 DOM 객체를 선택하거나 DOM 객체에 특정 이벤트를 만들고 애니메이션 효과를 추가할 때 유용합니다. 자바 스크립트만으로 작성하기 보다 편하죠. 예를 들어, 순수 자바스크립트로는 두 줄을 작성해야 box 객체를 조작할 수 있습니다. //순수자바스크립트 선택자 const box = document.getElementById("box"); const box = document.querySelector("#box"); jquery로 작성해보겠습니다. // jquery 선택자 const box = $("#box"); 훨씬 간단하죠? Jquery 장점 DOM 객체를 조작할 때 자바스크립트 네..

[JS] 변수 선언과 사용

자바스크립트의 변수: 타입이 존재하지 않는다. 기본 자료형인 숫자형, 문자열, 논리형, 배열, 객체, undefined, null 7개의 자료형이 존재하긴 하지만 변수를 선언할 때 자료형을 지정할 수가 없습니다. 자료형 유추 기능을 통해서 할당되는 변수의 값에 의해 자동적으로 자료형이 정해집니다. 자료형을 지정하지 않다보니까 에러잡기가 힘들어져 최근에는 타입스크립트(자바스크립트 + 타입)라는 언어가 유행합니다. 버전 별로 차이가 있습니다. ES 5는 아래와 같이 사용합니다. var num = 1; // 숫자형으로 사용. var numStr = "1"; // 문자열이나 숫자형으로 사용 var sum1 = num + 2; // 3 var sum2 = numStr + 2; // 3 ES 6로는 다음과 같습니다..

[JS] 자바스크립트 기초

JavaScript 1995년에 넷스케이프에서 제작한 인터프리터 언어입니다. 인터프리터는 각 브라우저에 내장되어, OS가 아니라 브라우저에서 동작합니다. HTML이 웹 문서의 구조를 담당하고 css가 웹 문서의 디자인을 담당한다면 JavaScript는 웹 문서를 동적으로(다이나믹하게) 구성할 수 있게 해줍니다. JavaScript의 특징 1) HTML 웹 문서의 태그들을 제어 가능합니다. - 사용자에 의해 이벤트(사용자가 행하는 동작)가 발생했을 때 스타일을 바꾼다든지 애니메이션 효과를 준다든지 등과 같은 태그 제어가 가능합니다. 2) 다양한 라이브러리나 API가 존재하여 개발 기간을 단축시킬 수 있습니다. - 데이터 시각화, 차트, 그래프, 통계 등에 활용되는 라이브러리나 지도 API, 주소 API 등..