JavaScript

JavaScript ES6 (ECMAScript 2015 또는 ECMAScript 6)은 ECMA-262 기술 규격에 따라 정의하고 있는 2015년에 도입된 최신 버전의 JavaScript를 말한다.ES6 버전에서 var 이외에 let, const가 추가되었다.가장 큰

전개 구문(spread operator)이란?배열이나 객체를 전개하는 문법으로, 《 구조 분해 할당 》과 함께 정말 많이 사용된다.문법배열이나 객체 앞에 점 세 개를 붙여주면 된다. 배열짜잔!🎇배열에 4를 추가하고 싶다면? 《 push 》를 사용해도 좋지만, 전개 구

5월 17일, 영민이는 학교에 떨어져 있는 의문의 구슬을 만지자 갑자기 타임워프를 할 수 있는 능력이 생겼습니다. 이를 실험하고자 time.js를 만들었지만, 아쉽게도 time.js를 작성하는 도중 타임워프를 해 코드가 다 완성하지 못했습니다. 여러분들은 미완성인 ti

실행 시 아래 출력 값을 출력하는 객체 exid를 작성하세요. 다음과 같은 동작을 하는 함수를 구현해 exid.js로 제출해야 합니다. 또한 같은 기능을 가진 함수를 메소드 체이닝으로 재구현해 exid-method-chaining.js 로 제출해주세요.exid는 다음과

성결대학교에서 공부를 하고 있는 천민우는 최근 새로나온 전자기기를 구입하기 위해 안양1번가를 전전하며 알바를 구하기 시작하였다.그 결과 안양1번가의 명물 꽈배기 집에 알바로 들어가게 되었다!민우는 꽈배기를 만드는 업무에 배정을 받게 되었는데, 꽈배기를 만들려면 다음 아

https://velog.io/@sieunpark/HTTP-%ED%94%84%EB%A1%9C%ED%86%A0%EC%BD%9C

이터러블과 이터레이터는 이해가 됐는데 제너레이터는 잘 이해가 안가는 것 같다.. 나중에 꼭 다시 복습해보자.지난 포스팅에서 이터러블과 이터레이터에 대해서 살펴보았다.또한 제너레이터라는 것을 사용하면 이터레이터를 편리하게 만들 수 있다는 것을 알게 되었다.이번 포스팅에서

이번 주 퀴즈는 API 서버 통신을 연습 해볼 겁니다.JSONPlaceholder - Free Fake REST API해당 사이트는 Fake API를 지원하는 서버로 프로미스를 공부할 때 참고가 되는 사이트입니다.fetch는 Promise를 반환하는 메서드입니다. co

Map과 Set은 최근 등장한 자료구조이다.데이터의 구성, 검색 및 사용을 객체(object)와 배열(array)보다 효율적으로 처리할 수 있게 한다.Map 및 Set은 모두 값 추가, 검색, 삭제 및 모든 값 제거를 수행할 수 있다.Map이란?Map은 키-값 쌍을 저

CSS 선택자로 문서 내 첫 번째 요소를 반환한다.일치하는 요소가 없으면 null을 반환한다.Happy 클래스 명을 가진 첫 번째 요소의 배경색을 핑크색으로 바꿔보자짜잔!

JavaScript에서 제공하는 DOM(Document Object Model) 메서드 중 하나로, 특정 ID를 가진 HTML 요소를 선택하는 데 사용한다.ex. ID가 'greeting'인 div 요소의 텍스트를 'Merry Christmas🎄'로 변경한다.Merr

CSS 선택자로 문서 내 모든 요소를 배열로 반환한다.Happy 클래스 명을 가진 모든 요소의 배경색을 핑크색으로 바꿔보자

addEventListener() 메소드는 이벤트 리스너를 등록하는 메소드이다.이벤트 리스너는 특정 이벤트가 발생할 때 실행되는 함수를 말한다.addEventListener() 메소드는 이벤트 대상 요소와 이벤트 유형, 이벤트가 발생했을 때 실행할 함수 세 개의 매개변

senlnterval(콜백함수, 시간) 함수는 일정 시간마다 함수를 반복해서 실행한다.시간은 밀리초 단위로 사용된다. (1000밀리초 = 1초)3초마다 "나는 행복한 사람이야!" 를 출력하는 코드를 작성해보자.위 코드를 아래와 같이 동시에 실행할 수 있다.senlnte

웹 문서에서 각 요소의 포함 관계를 나타낸 것을 DOM 트리라고 하고,여기에서 가지가 갈라져 나가는 부분을 노드라고 한다.DOM 트리의 시작 부분(html) 노드는 루트 노드라고 한다.DOM에 접근할 때 querySelectorAll() 메서드를 사용하면 여러 개의 노

innerHTML, textContent, innerText 프로퍼티를 이용하여 웹 요소의 접근한 후 내용을 가져오거나 수정할 수 있다.아래 코드에서 두 번째와 세 번째 p 태그는 display:none을 사용해서 화면에 감추었으므로 브라우저 창에 보이지 않을 것이다.

js로 css의 스타일을 수정하기 위해서 `요소.style.속성명`을 사용해야한다. ▶ CSS 속성에 접근하고 수정하기 버튼을 클릭했을 때 글자의 배경색과 innerText을 사용하여 내용을 수정해보자 ▶ 클래스 스타일 추가하고 삭제하기 > js를 사용하면 필요할

▶ 폼 요소에 접근하기 > 웹 문서의 폼 요소에는 사용자가 내용을 입력하는 텍스트 필드뿐이 아니라 라디오 버튼이나 체크 박스와 같이 클릭하는 요소가 있다. 이렇게 다양한 요소에 접근하는 방법에 접근하는 방법에 대해 알아보자. ▶ 폼 요소 값 가져오기 >

▶ 자주 사용하는 이벤트 ▷ 문서 로딩 이벤트 | 이벤트 | 이벤트가 발생하는 순간 | |:--:|:--:| | abort | 웹 문서가 완전히 로딩되기 전에 불러오기를 멈추었을 때 | | error | 문서가 정확히 로딩되지 않았을 때 | | load | 문서 로딩

DOM에는 웹 문서에 발생하는 이벤트를 저장하는 event 객체가있다.event 객체를 통해 이벤트가 발생한 대상을 확인할 수 있다.웹 문서에 이벤트가 발생하면 자동으로 이벤트와 관련된 객체가 만들어진다.이것 외에도 다양한 event 객체가 존재하니 필요할 때 검색하기

open("URL", "새창이름", "새창옵션")URL 페이지를 새 창으로 나타낸다.alert(date)경고 창을 나타낸다.방문자가 확인 버튼 누르면 alert()을 사용한 후 다음 위치 코드 수행한다.prompt("질문", "답변")문자열을 입력할 때 사용숫자를 입력

저번 포스팅에서 DOM 트리와 노드리스트를 다루었다. click 같은 이벤트가 발생했을 때 기존에 없던 새로운 문서를 웹 문서에 추가해야 한다. 즉, DOM 트리에 새로운 노드를 추가해야 하는것이다. 어떻게 DOM을 사용하여 웹 요소에 접근할 수 있을지 살펴보도록

- 내장 객체란 사용자가 쉽게 가져와서 사용할 수 있도록 미리 만들어진 객체이다. ▶ window 객체 - 웹 브라우저 창 관리 ▷ window 객체의 프로퍼티 > - 웹 문서를 열면 가장먼저 window라는 객체가 만들어지는데, window 객체의 프로퍼티 중 자주

- js 내장 객체 중에서 Data 객체는 날짜와 시간에 대한 정보를 조절할 수 있는 객체이다. 현재 날짜와 시간을 홈페이지에 출력하거나 달력을 표시할 수 있고, 특정까지 얼마나 남았는지 세는 등 여러가지로 응용이 가능하다. ▶ js 객체의 인스턴트 만들기 > - D

➡️ 함수를 주기적으로 반복적으로 실행하고 중단하기 위해 아래와 같은 함수를 사용한다. 일정시간 마다 함수를 반복적으로 실행하는 함수이다.시간은 1ms 단위이며, 1초마다 실행시키고싶으면 1000ms 를 쓰면 된다.handler 는 반복적으로 실행할 함수를 말한다.He

전체 클래스 문자열을 한번에 설정하거나 가져오려는 경우에 사용한다.클래스 하나만 조작하고 싶을 때 사용하고 싶을 때 사용할 수 없다.짜잔!🎇짜잔!🎇⚠️ 클래스명 추가시에 기존에 가지고 있는 class명들을  전부 지우고 추가한다.짜잔!🎇클래스를 개별적으로 조작하려

split이란?split은 "나뉘다", "분열되다" 라는 뜻을 갖고 있다.문자열을 분할하여 배열로 리턴하는 함수이다.사용법str : 변경하고자 하는 문자열separator(선택사항) : 문자열을 구분할 기준이 되는 문자열, 기본 값은 공백 (" ")limit(선택사항)

substr, slice는 문자열에서 특정한 구간의 문자열을 추출한다.substr시작 위치부터 몇 개까지 자를지 선택할 수 있다.slice시작 위치부터 끝까지 자른다.짜잔!🎇https://opentutorials.org/course/50/97