Javascript

자바스크립트 기초

Javascript 기초

JavaScript 소개

웹 페이지를 동적으로 만들고 사용자와 상호 작용하는 기능을 구현하는 데 사용됩니다.

Node 런타임 환경에서 실행 가능한 프로그램을 구현하는 데도 사용됩니다.

주요 특징

기본 용어

키워드

JavaScript 소개 및 기초

변수

개요

•

변수 

•

변수 선언

•

let vs var

•

상수

변수

자료형

자료형 분류

•

문자열 자료형

•

숫자 자료형

•

불 자료형

•

undefined

자료형

연산자

연산자 분류

•

산술 연산자

•

대입 연산자

•

비교 연산자

•

논리 연산자

•

문자열 연산자

연산자

제어문

제어문 분류

제어문

배열

JavaScript 에서는 배열 요소에 여러 자료형을 혼합하여 저장 가능

JavaScript 에서는 배열 요소를 추가/삭제 가능

배열

함수

학습 요소

함수

객체

프로토타입

DOM (Document Object Model)

“JavaScript 로 HTML 을 조작할 수 있게 해주는 연결 도구“

웹 페이지 로드 → 브라우저가 DOM 생성

요소의 목적과 특징을 정의하고, 접근하는 방법을 제공

DOM은 HTML 문서의 계층적 구조와 정보를 표현하며, 이를 제어할 수 있는 프로퍼티와 메소드를 제공하는 트리 자료구조입니다.

DOM 을 이용한 작업

•

HTML 요소 및 속성을 추가, 변경, 제거

•

HTML 요소의 CSS 스타일 추가, 변경, 제거

DOM

BOM (Browser Object Model)

•

Window

•

Screen

•

Location

•

History

Window

창(팝업 창) 열기, 닫기, 이동, 크기 확인 및 조절 등을 할 수 있다.

BOM

AJAX(Asynchronous JavaScript and XML)

개요

•

Promise

•

Promise 상태

•

주요 메소드

•

기본 예시 코드

•

API 호출 예시 코드

Promise

비동기 작업의 성공 또는 실패 결과를 처리하는 객체

Promise

async & await

JavaScript의 비동기 프로그래밍을 간편하게 만드는 키워드입니다.

•

Promise 

•

async

•

await

async

async: "비동기" 또는 "비동기식"이라는 의미로 해석됩니다. 영어 단어 asynchronous의 줄임말로, 동시에 일어나지 않는 것을 의미합니다.

await

await: "기다리다" 또는 "대기하다"라는 의미로 해석됩니다. 영어 동사 await에서 유래한 것으로, 어떤 일이 완료되기를 기다리는 것을 의미합니다.

async & await

fetch

JavaScript에서 제공하는 API 중 하나로, 네트워크 요청을 만들고 응답을 다룰 수 있게 해주는 기능을 제공합니다. fetch API는 Promise를 기반으로 동작하며, 비동기적으로 네트워크 요청을 처리할 수 있습니다.

fetch() 는 자바스크립트의 브라우저 내장 함수로, 네트워크에서 리소스를 가져오는 동작을 간결하게 표현합니다. fetch() 함수는:

•

첫 번째 인자로 URL을 받습니다.

•

두 번째 인자로 옵션 객체를 받습니다.

•

Promise 타입의 객체를 반환합니다.

반환된 객체는:

•

API 호출이 성공했을 경우에는 응답(response) 객체를 resolve합니다.

•

실패했을 경우에는 예외(error) 객체를 reject합니다.

fetch

XMLHttpRequest

XMLHttpRequest는 브라우저에서 제공하는 객체로, 비동기적으로 서버와 통신할 수 있도록 도와줍니다. 초기에 주로 사용되었으나, 콜백 지향적이고 복잡한 API 구조로 인해 가독성이 떨어지는 단점이 있습니다.

주요 속성 및 메소드

XMLHttpRequest

axios

axios는 JavaScript의 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js 환경에서 모두 사용할 수 있습니다. axios는 Promise를 기반으로 한 강력한 기능과 다양한 설정 옵션을 제공하여 네트워크 요청을 보다 편리하게 다룰 수 있도록 도와줍니다.

Axios 기본 구조

Axios의 주요 메서드

axios

이미지 슬라이드

slick

jQuery 기반 이미지 슬라이드 라이브러리

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

https://kenwheeler.github.io/slick/

 slick 플러그인 가져오기

 jQuery 가져오기

내가 만든 css / script 가져오기

앞에 내용을 한 번 포함하기

이미지 슬라이드 HTML 코드 작성

기본 스타일 지정하기

슬라이드 영역 반응형 적용하기

 slick 슬라이드 시작하기!

다양한 옵션 적용하기

slick

swiper 라이브러리

Swiper - The Most Modern Mobile Touch Slider

The Most Modern Mobile Touch Slider

https://swiperjs.com/

1. swiper 플러그인 가져오기

index.html

2. swiper HTML 레이아웃 코드

swiper

1. bx-slider 플러그인 가져오기

2. bxslider HTML 레이아웃 코드

3. 기본 스타일 적용하기

bx-slider