JavaScript

인접 관계 선택자종류사용법설명부모 요소 선택자$("요소 선택").parent()선택한 부모 요소를 선택합니다.상위 요소 선택자$("요소 선택").parents()선택한 요소의 상위 요소를 모두 선택합니다.가장 가까운 상위 요소 선택자$("요소 선택").closest("div")선택한 요소의 상위 요소 중 가장 가까운 만 선택합니다.하위 요소 선택자$("요소 선택 하위 요소")선택한 요소에 지정한 하위 요소를 선택합니다.자식 요소 선택자$("요소 선택>자식 요소")선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택니다.자식 요소들 선택자$("요소 선택").children()선택한 요소의 모든 자식 요소를 선택합니다.형(이전) 요소 선택자$("요소 선택").prev()선택한 요소의 바로 이전 요소를 선택..

h1 요소와 ID가 tit3인 h3 요소의 스타일을 변경하여, 배경색을 하늘색으로, 테두리를 빨간색 점선으로 적용하기 제이쿼리 선택자 직접선택자 인접선택자  결과 💡 일치선택자 h1에 tit 부분에 배경색과 border 지정하기 제이쿼리 선택자 직접선택자  결과💡 연습문제#wrap 밑에 h1 태그만 선택해서 디자인 적용    background-color yellow    border 2px dashed #f00  인접한 관계 선택자 내용 하위 요소 선택자 내용2  결과

들어가기 전에💡 라이브러리? 자주 사용되는 함수들의 모임(묶음)을 말합니다. 💡 jquery를 사용하게 된 배경웹 브라우저(익스플로러, 크롬, 사파리 등…) 간의 js 문법이 잘 동작하지 않았음크로스 브라우저 문제 ⇒ jquery가 등장바닐라 js 보다 코딩이 짧고 사용이 쉬운 것이 장점단점으로는 용량이 크고, 성능이 떨어짐💡 jquery? 함수를 이용해서 DOM을 조작하는 것임 jQuery 기본문법$(function() {jquery 실행문});HTML 위쪽에 넣어도 실행되게 만드는 구문 ⇒ HTML 태그 보다 뒤 늦게 실행을 시켜주는 구문// 사용법$(function(){ $('#title').css('color', 'skyblue');}); 전체 선택자‘*’ 키워드를 사용하며, 전체 태그를 선..

자바스크립트를 사용하여 프로그래밍을 할 때는 데이터를 변수와 상수라는 박스를 만들어 그 안에 넣어서 사용합니다.이때, 변하지 않는 값이라면 변수를, 고정된 값이라면 상수를 사용합니다. 변수와 상수? 어떤 의미를 가진 하나의 데이터가 여러 곳에서 사용될 때 변수나 상수를 사용하면 코드 작성이 간편해집니다.이때 값을 저장하고 변경할 수 있는 것을 변수, 똑같이 값을 저장하지만 변하지 않는 고정값을 담는 것을 상수라고 합니다. 다음은 변수와 상수를 선언한 코드입니다. 해석을 해보자면 switchOn 이라는 박스에 true 라는 값이, PI(원주율)이라는 박스에 3.1415926535라는 값이 들어있다는 뜻입니다. 여기서 switchOn은 let을 사용한 변수, PI는 const를 사용한 상수라고 부릅니다.이처..

템플릿 문자열? 문자열 안에서 변수를 전개하기 위한 표현법 기존의 작성법에서는 문자열과 변수를 결합할 때 +를 사용하였습니다. const name = "junhyuk"; const age = 30; const message = "내 이름은 " + name + " 이고, 나이는" + age + "살 입니다." console.log(message); 이렇게 작성할 경우 +를 입력해야하는 번거로움이 있습니다. 그래서 ES2015 이후에는 템플릿 문자열을 이용해 다음과 같이 더욱 편리하게 입력할 수 있습니다. const name = "junhyuk"; const age = 30; const message = `내 이름은 ${name} 이고 나이는 ${age}살 입니다.` console.log(message); ..

Hello JavaScript! 자바스크립트의 기초를 배워봅시다! 화면 출력하기 : alert ( ) alert ( ) 명령문은 말 그대로 알림창을 띄우는 명령어 입니다. hello JavaScript 을 띄워볼까요? // TODO : 화면 출력 방법 (결과 확인용) // 1) 사용법 : alert("문자열"); // 코딩 용어 : ;(세미콜론), :(콜론), &(엔퍼센트) // 자바스크립트(js) 명령문(문장)의 끝에는 ;(세미콜론) 붙임(생략가능) alert("Hello JavaScript"); 화면 출력하기 console.log() console.log() 명령문은 브라우저 내 개발자 콘솔창에서 결과값을 확인할 수 있습니다. console.log("Hello JavaScript"); 를 입력하고 출..

문서 객체 모델(DOM, Document Object Model) 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 HTML 언어로 작성한 웹 문서의 DOM을 HTML DOM이라고 하며, XML 문서에서 사용하는 XML DOM도 있음 DOM은 웹 문서를 하나의 객체로 정의 웹 문서를 이루는 텍스트, 이미지, 표 등의 모든 요소도 각각 객체로 정의 웹 문서 전체 - Document 객체 삽입한 이미지 - image 객체 DOM은 웹 문서와 그 안의 모든 요소를 '객체'로 인식하고 처리함. DOM 트리 부모와 자식 구조로 표시하면 마치 나무 형태가 되므로 DOM 트리라고 한다. DOM 트리에서 가지가 갈라져 나간 항목을 노드(node)라고 하며, ..

자바스크립트의 기본 입출력방식에는 여러가지가 존재합니다. 아래의 내용은 JS의 기본입출력 방식에 대해 설명하겠습니다. 😊 알림창 출력하기 첫 번째로는 알림창을 출력하는 방법입니다. 알림창은 가장 많이 사용하고 간단한 대화상자입니다. 알림창은 간단한 실행결과를 표시할 때 사용합니다. 알림창 출력의 기본은 아래와 같습니다. 알림창 출력 alert("메세지"); 알림창을 만드는 방법은 alert()를 입력하고 괄호 안에 홑따옴표 또는 쌍따옴표와 함께 출력할 메시지를 입력해주시면 됩니다. 한 번 실습을 해볼까요? "안녕하세요" 라는 메시지를 출력해보겠습니다. 확인 창 출력하기 알림창은 단순히 메시지를 보여주는 기능을 하지만 확인 창은 사용자가 확인/취소 버튼을 직접 클릭할 수 있습니다. 그러면 선택한 결과에 맞..