JavaScript

Dropdown menu를 만드는 DOM 프로젝트를 통해 event 등 기본적인 사용법과 동작원리를 익혀본다. \*출처: 김버그(kimbug)의 Youtube DOM 강의를 듣고, 개인 학습자료를 더해 정리했습니다. (버그님 최고!)요소(element)는 HTML ta

프로그래밍(Programming) 컴퓨터에게 일 시키는 것 자바스크립트(JavaScript) 웹 페이지와 상호작용하도록 만들어진 언어 변수(Variables) 프로그래밍을 하기 위한 값(value)을 저장하는 저장 공간 변수 이름 주의 사항(naming conventi

하나의 특정한 작업을 수행하도록 설계된 독립적인 블록변수에 이름이 있듯, 함수도 이름이 있다. 함수 이름을 부르면, 함수 내에 있는 코드가 실행된다.함수를 정의하면 "이 함수는 이런 동작을 할거야~"라고 정해두는 것과 같다.함수를 불러 실행시키는 것을 "함수를 호출한다

06-2. 다소 생소한 수학 표현식 방금 했던 계산들은 우리에게 익숙한 수학 표현식이라면, 이번에는 조금 생소한, 컴퓨터 언어에서 사용되는 수학 표현식을 한 번 보겠습니다. let num = 1; num++; let num = 1; num++; 아래와 같이 conso

자바스크립트의 꽃은 당연 배열(array)과 객체(object)가 아닐까. 자바스크립트의 데이터 구조는 객체로 이루어져 있고, 객체 안에는 또 배열이 있기 때문에 결국 데이터를 다룰 줄 안다는 것은 '배열과 객체를 이해하고 원하는 형태로 추출하기 위한 로직을 짤 수 있

자바스크립트 반복문(loop) 반복문은 어떤 것을 반복적으로 시행할 때 빠르고 간편한 방법을 제공한다. 자바스크립트에서 지원하는 반복문은 'for 문', 'do..while 문', 'while', 'for..in 문', 'for..of 문', 'break 문', 'co

String <-> Number 변환여러 데이터 타입의 boolean 값 변환✔️ true 로 변환되는 값문자열 : 비어 있지 않은 모든 문자열숫자 : 0 이 아닌 모든 숫자객체: 모든 객체 ({ }, 포함)✔️ false 로 변환되는 값문자열 : " " (빈

프론트엔드 개발에서 날짜와 시간을 다루는 경우가 많다. 회원가입 날짜와 시간, 글 작성 시간, 휴대폰 현재 시간 등 날짜와 시간을 저장하고 보여줄 때는 '날짜 객체'를 사용한다. new Date() 날짜 객체를 생성할 때는 new Date()를 쓴다. 날짜 객체는

같은 프론트엔드 개발자여도 어느 분야에서 일하느냐에 따라 주로 사용하는 함수가 달라진다. 예를 들어, 쇼핑몰/브랜드 사이트를 구현하는 경우는 사용자의 행동(마우스, 클릭)을 처리하는 event 함수를, 핀테크/데이터를 많이 다루는 사이트는 수학 관련 함수를 많이 쓸 것

객체는 이름과 값으로 구성된 프로퍼티들의 집합이다.{} (중괄호)로 감싸고, 콜론으로 구분된 이름/값의 쌍이 쉼표로 분리된 목록의 형태다.property 이름은 중복될 수 없다.property이름과 property값 사이에 ': (콜론)'으로 구분한다.property를

변수가 선언되고 사용할 수 있는 공간block이란 중괄호({} , curly brace)로 감싸진 범위로 function, for 문, if 문의 {}도 하나의 block이다.{} (block)내부에서 변수가 정의되면 변수는 오로지 {} (block)내부에서만 사용할

객체지향 프로그래밍 객체지향이란 OOP(Object-oriented Programming)라 부르는 프로그래밍의 패러다임으로 변수나 반복문, 함수와 같은 기존 프로그래밍 패러다임을 대체하는 것이 아닌, 프로그래밍 언어로 만들어진 로직을 조금 더 부품답게 만드는(=모듈화

ES6에 추가된 함수로 기존 function() 함수를 변형했다.중괄호와 return문이 생략될 경우, 화살표 오른쪽에는 리턴될 "값"만 쓰여야 한다. 특정 string을 찾기 위한 indexOf 메서드 외 기능startsWith endsWith includesrepe

arrow function을 가장 많이 사용하는 경우는 callback 함수로 사용할 때다. callback 함수란, 인자로 전달되는 함수다.array 메서드 중 반복문 map, forEach는 많이 쓰인다.map 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서

객체 순회하기 = 프로퍼티 열거(enumeration) 객체에 있는 모든 키에 한번씩 접근해야하는 코드를 써야 한다면 객체 순회를 쓸 수 있다. 다만 배열(array)과 다르게 명확하게 정해진 순서가 없기 때문에 객체의 순회는 '순서가 보장되지 않은 순회'라고 부른다.

JavaScript가 작동하기 위해서는 브라우저와 JavaScript파일을 호출하는 html파일이 필요하다.HTML 파일에 자바스크립트 코드를 넣으려면 ... 안에 작성해야 브라우저가 자바스크립트 코드라고 인식한다.JavaScript 코드를 넣는 방법은 이렇게 여러

DOM이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델이다. JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다. DOM은 브라우저에 내장되어 있는 API(Application Programming Inte

좋은 웹사이트란 무엇일까? 웹사이트 내 오류가 없고, 이동이 자연스럽고 부드러워야 하며, 클릭했을 때 빠르게 반응해서 사용자의 분노를 일으키지 않는 사이트가 좋은 사이트일 것이다. 특히 요즘에는 화려하고 다양한 기능이 들어가는 웹 사이트가 늘어나면서 프론트앤드 개발자가

이벤트의 작동 원리를 알아야 이벤트를 제대로 쓸 수 있다!김버그님의 DOM 강의를 듣고 학습한 내용입니다. 어떤 요소에서 이벤트가 발생했을 때, 그 이벤트를 전파하여 감지하는 흐름을 의미한다.HTML은 중첩된 구조(HTML -> body -> div)로 이루어져있다.만