Keyword overview
Object
Built in object
BOM
The Code Card
Object
https://lshjju.tistory.com/723
Object
자바스크립트의 심장이자 모든 데이터를 담는 그릇인 **객체(Object)**에 대해 알아보겠습니다.자바스크립트에서 객체는 실생활의 사물을 프로그래밍 언어로 표현한 것과 같습니다.📘 1. 자바스
lshjju.tistory.com
Built in object
https://lshjju.tistory.com/722
Built in object
프로그래밍의 효율을 극대하게 높여주는 **내장 객체(Built-in Objects)**에 대해 알아보겠습니다.내장 객체는 자바스크립트 엔진에 이미 포함되어 있어, 우리가 별도의 설치 없이 언제든 꺼내 쓸 수
lshjju.tistory.com
BOM
https://lshjju.tistory.com/721
BOM
브라우저 객체 모델 (BOM)**브라우저 객체 모델(BOM, Browser Object Model)**은 자바스크립트가 웹 브라우저의 기능들에 접근하고 제어할 수 있게 도와주는 객체들의 집합입니다.문서 내용 자체를 다루
lshjju.tistory.com
Code training
18-1 객체 알아보기
자바스크립트에서 객체란
내장 객체
문서객체 모델 (DOM)
웹브라우저 객체
사용자 정의 객체
객체와 인스턴스
new 예약어
현재 날짜와 시간 정보 표시하기
https://github.com/lshjju/doit-hcj-new/blob/main/18/results/time-1.html
프로퍼티와 메서드 이해하기
마침표 표기법으로 프로퍼티와 메서드 작성하기
로컬 형식으로 현재 날짜와 시간 정보 표시하기
https://github.com/lshjju/doit-hcj-new/blob/main/18/results/time-2.html
18-2 자바스크립트의 내장 객체
Array 객체
Array 객체로 배열 만들기
Array 객체의 length 프로퍼티 사용하기
length 프로퍼티를 사용해 배열의 각 요소에 접근하기
https://github.com/lshjju/doit-hcj-new/blob/main/18/results/array-1.html
Array 객체의 메서드
Array 객체의 다양한 메서드
img
배열 합치기
배열끼리 합치는 concat() 메서드
배열 2개를 합쳐서 새로운 배열 만들기
https://github.com/lshjju/doit-hcj-new/blob/main/18/results/array-2.html
배열 안의 요소를 문자열로 만드는 join() 메서드
배열 안의 요소 합치기
https://github.com/lshjju/doit-hcj-new/blob/main/18/results/array-2.html
앞뒤로 요소 추가하기 및 삭제하기
새로운 요소를 추가하는 push(), unshift() 메서드
배열에 새로운 요소 추가하기
https://github.com/lshjju/doit-hcj-new/blob/main/18/results/array-2.html
배열에서 요소를 꺼내는 pop(), shift() 메서드
배열에서 요소 꺼내기
https://github.com/lshjju/doit-hcj-new/blob/main/18/results/array-2.html
원하는 위치에 요소를 추가 삭제하는 splice() 메서드
splice() 메서드를 사용해 요소 추가 삭제하기
https://github.com/lshjju/doit-hcj-new/blob/main/18/results/array-3.html
기존 배열을 바꾸지 않으면서 요소를 꺼내는 slice() 메서드
slice() 메서드를 사용해 배열 요소 꺼내기
https://github.com/lshjju/doit-hcj-new/blob/main/18/results/array-4.html
Date 객체
Date 객체 인스턴스 만들기
Date 객체로 현재 날짜 나타내기
Date 객체로 특정 날짜 나타내기
Date 객체로 특정 날짜와 시간 나타내기
자바스크립트의 날짜, 시간 입력 방식 알아보기
YYYY-MM-DD
YYYY-MM-DDTHH
MM/DD/YYYY
이름 형식
Date 객체의 메서드
자주 사용하는 Date 객체의 메서드
img
실습 - 날짜를 계산하는 프로그램 만들기
1 HTML 파일 확인하기
2 자바스크립트 코드 작성하고 결과 확인하기
준비
https://github.com/lshjju/doit-hcj-new/blob/main/18/days.html
완성
https://github.com/lshjju/doit-hcj-new/blob/main/18/results/days.html
Math 객체
Math 객체의 프로퍼티
img
Math 객체의 메서드
img
실습 - 이벤트 담청자 뽑기 프로그램
1단계 random() 메서드 알아보기
2단계 1~100 사이에서 무작위 수 출력하기
3단계 소수점 이하의 수는 버리고 출력하기
4단계 자바스크립트 코드 작성하고 결과 확인하기
준비
https://github.com/lshjju/doit-hcj-new/blob/main/18/event.html
완성
https://github.com/lshjju/doit-hcj-new/blob/main/18/results/event.html
18-3 브라우저와 관련된 객체
브라우저와 관련된 객체 알아보기
window 객체의 프로퍼티
window 객체의 메서드
새 브라우저 창을 여는 open() 메서드
웹브라우저에 팝업 창 표시하기
https://github.com/lshjju/doit-hcj-new/blob/main/18/results/popup.html
창 이름 지정하기
팝업 창 위치 지정하기
팝업 창 위치 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/18/results/position.html
팝업 차단 고려하기
팝업이 차단된 브라우저의 알림 창 표시하기
https://github.com/lshjju/doit-hcj-new/blob/main/18/results/popup-check.html
브라우저 창을 닫는 closed() 메서드
버튼을 사용해 팝업 창 닫기
https://github.com/lshjju/doit-hcj-new/blob/main/18/results/notice.html
navigator 객체
userAgent 프로퍼티 알아보기
navigator 객체 정보 살펴보기
history 객체
location 객체
현재 사이트에서 뒤로 가기 막기
https://github.com/lshjju/doit-hcj-new/blob/main/18/results/location.html
screen 객체
screen 객체를 사용해서 화면의 너비와 높이를 알아보는 예제입니다.
https://github.com/lshjju/doit-hcj-new/blob/main/18/results/screen.html
실습 - 팝업 창을 화면 가운데에 표시하기
1단계 화면 크기 계산하기
2단계 center.html 파일 수정하기
준비
https://github.com/lshjju/doit-hcj-new/blob/main/18/center.html
결과
https://github.com/lshjju/doit-hcj-new/blob/main/18/results/center.html
Copyright
이 포스팅의 깃허브코드와 강의 목차 저작권은 이지스퍼블리싱에 있습니다.
https://www.easyspub.co.kr/20_Menu/BookView/696/PUB
'Do it! 자바스크립트 웹 표준의 정석' 카테고리의 다른 글
| DOM (0) | 2025.11.26 |
|---|---|
| Function and Events (0) | 2025.11.26 |
| JS Grammar basic (0) | 2025.11.26 |
| Hello JS (0) | 2025.11.26 |