자바스크립트

자바스크립트 메소드의 사용 방법에 관련된 포스트의 주제 별 분류 페이지입니다.

각각의 포스트에는 메소드의 사용 방법 및 다양한 예제와 snippet을 담고있습니다.

Expressions & Operators

• 삼항 연산자 (ternary operator)
• 디스트럭처링(destructuring) 표현식
• spread operator 연산자
• 옵셔널 체이닝 (optional chaining) 연산자
• null 병합 (nullish coalescing) 연산자

Statements & Declarations

• for 문 반복문
• while 반복문
• for…of 반복문
• for…in 반복문
• try…catch 에러 핸들링

Event

• addEventListener 이벤트 리스너
• onclick 버튼 클릭

Standard built-in objects

Collections

• Array.forEach 루프
• Array.map 배열 매핑
• Array.filter 배열 필터링
• Array.reduce 사용 방법
• Array.push Array.pop 배열 마지막 요소 추가/제거
• Array.shift Array.unshift 배열 시작 요소 추가/제거
• Array.splice 배열 요소 추가/제거
• Array.join 배열 합치기
• Array.slice 배열 자르기
• Array.concat 배열 합치기
• Array.sort 배열 정렬 (오름차순, 내림차순)
• Array.find 배열 특정 값 찾기
• Array.includes 배열 특정 값 포함 확인
• Array.reverse 배열 뒤집기
• 배열 생성
• 배열의 모든 값 더하기 (for, forEach, reduce)
• 배열에서 특정 요소 제거
• 배열 검색 (filter, find, includes, indexOf)
• 배열 중복 제거
• 배열 무작위로 섞기 (shuffle)
• 배열 최대값, 최소값 찾기
• Set 객체 사용 방법
• Map 객체 사용 방법

Text processing

• String.split 문자열 자르기
• String.substring 문자열 자르기
• String.startsWith 특정 문자열 확인
• String.endsWith 특정 문자열 확인
• String.replace 문자열 치환
• String.trim 앞뒤 공백 제거
• String.toLowerCase, String.toUpperCase 대소문자 변환
• String.indexOf 특정 문자 위치 찾기
• String.padStart 문자열 0으로 채우기
• 문자열 길이 확인하기 (length)
• 템플릿 리터럴(백틱) 사용 방법
• 문자열 공백 제거 (trim, replaceAll)
• 특정 문자열 제거
• 특수문자 제거 (replace)
• 랜덤 문자열 만들기 (random)
• RegExp 이메일 검증
• JSON 문자열 변환 (stringify)
• 문자열 JSON 변환 (parse)

Numbers and dates

• Date 날짜 포맷 yyyy-mm-dd hh:mm:ss
• 날짜 정규식 체크
• 반올림, 올림, 내림 (round, ceil, floor)
• 랜덤 숫자(난수) 생성 (random)
• 최대값 최소값 (Math.min Math.max)
• 절대값 구하기 (abs)
• 소수점 자르기 (toFixed)
• 문자열을 숫자로 변환하는 방법
• 퍼센트, 백분율 구하는 공식
• 코드 실행 시간 측정

Web APIs

Window

• 대화상자 (alert, confirm, prompt)
• console.log 사용 방법 (로그 찍기)
• Fetch API로 HTTP 통신하기
• localStorage 데이터 저장
• 현재 URL 가져오기 (location)
• URL 객체 정규식 유효성 검사
• 타이머 함수 setTimeout setInterval

Document Object Model (DOM)

Document 검색

• querySelector, querySelectorAll 요소 찾기
• getElementById ID로 요소 찾기
• getElementsByTagName 태그로 요소 찾기
• getElementsByClassName 클래스로 요소 찾기

Element 속성

• hasAttribute 요소 속성 체크
• getAttribute 요소 속성 가져오기
• setAttribute 요소 속성 설정
• removeAttribute 요소 속성 제거
• classList 사용 방법

Element 생성, 배치, 제거

• createElement 요소 생성
• appendChild 요소 추가
• insertBefore 요소 삽입
• removeChild 요소 제거
• replaceChild, replaceWith 요소 교체
• 동적 HTML 생성, 추가, 제거
• button 버튼 만들기
• form 사용법 input 값 가져오기
• textarea 만들기
• select option으로 드롭다운 메뉴 만들기
• div a로 드롭다운 메뉴 목록 만들기
• 체크박스 사용법
• 라디오 버튼 만들기 (radio button)

관련 페이지

• HTML
• CSS

자바스크립트 란?

자바스크립트는 웹사이트와 애플리케이션을 동적이고 대화형으로 만들 수 있는 컴퓨터 프로그래밍 언어입니다.

브라우저 뿐만 아니라 서버에서도 직접 실행할 수 있다는 점에서 특별한 언어입니다.

이는 HTML(HyperText Markup Language) 및 CSS(Cascading Style Sheet)와 함께 인터넷에서 가장 널리 사용되고 있는 프로그래밍 언어 중 하나입니다.

실제로 2023년 3월의 조사에 따르면 모든 웹사이트의 98.4%가 자바스크립트를 사용하고 있습니다.

자바스크립트, CSS, HTML은 함께 작동하며 대부분의 웹사이트와 온라인 애플리케이션에서 사용자가 직접 접하는 요소를 구성합니다.

이러한 코딩 언어를 집의 구성요소로 생각해 볼 수도 있습니다:

• HTML은 집의 기초입니다. 이는 웹사이트의 기본 레이아웃, 구조, 콘텐츠를 제공합니다.
• CSS는 인테리어 디자인입니다. 이는 디자인, 글꼴, 색상, 효과, 시작요소 등을 제공합니다.
• 자바스크립트는 전기 및 배관 시스템입니다. 이는 웹사이트에 역동성과 상호작용성을 제공합니다. 예를 들어 팝업, 애니메이션, 비디오, 소셜 미디어, 드롭다운 메뉴 등 기타 다양한 웹사이트 구성요소가 자바스크립트를 사용하여 생성됩니다.

자바스크립트가 없다면 웹 페이지는 대부분 정적이고 지루할 것 입니다.

자바스크립트 역사

1995년도에 Netscape는 World Wide Web의 초기 버전을 더욱 동적으로 만드는데 도움이 될 만한 스크립트 언어를 개발하고자 했고 이를 Netscape에 근무하던 Brendan Eich가 개발했습니다.

이 언어는 개발자가 웹페이지에 역동성과 상호작용성을 추가하는게 가능하다는 사실이 알려지면서 빠르게 인기를 얻었습니다.

1996년에 Netscape는 정보 기술 시스템의 사용 표준화를 목표로 하는 조직인 유럽 컴퓨터 제조업 협회(ECMA International)에 자바스크립트를 제출했습니다.

이로 인해 자바스크립트의 공식 스펙인 ECMAScript 표준이 탄생했습니다.

날로 인기가 높아짐에 따라 라이브러리 및 프레임워크, V8(Chrome이 지원하는)과 같은 전용 자바스크립트 엔진과 서버 개발환경이 만들어졌습니다.

이름의 유사성에도 불구하고 자바스크립트는 자바와는 완전히 다른 언어 입니다.