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

ECMAScript

ECMAScript는 스크립트 언어인 JavaScript의 표준 규격을 정의하는 규격입니다.

자바스크립트의 버전을 나타내는 이름이라고 생각해도 좋습니다. 실제로, ECMAScript는 자바스크립트의 기본적인 동작, 데이터 타입, 객체, 문법 등을 정의합니다.

여러 브라우저와 JavaScript 엔진은 ECMAScript 표준을 따르며, 새로운 ECMAScript 버전이 나올 때마다 이를 구현하여 브라우저와 런타임 환경에서 개발자가 최신의 언어 기능을 사용할 수 있도록 합니다.

ECMAScript 통해 JavaSscript 언어의 표준을 정의하고, 브라우저(chrome, edge, firefox 등) 및 JavaScript 엔진이 이에 맞춰 각각 브라우저와 런타임 환경에서 ECMAScript 라는 표준으로 동작할 수 있도록 기준을 제시합니다. 이에 따라 개발자들의 브라우저 및 런타임 환경을 통해, ECMAScript 표준에 따른 JavaScript 언어의 최신 기술을 사용할 수 있습니다.

 런타임 환경?
: 프로그램이 실행되는 동안의 컴퓨터 환경을 의미합니다. 이는 어떤 프로그램이나 스크립트가 실행될 때, 해당 프로그램이 필요로 하는 여러가지 리소스와 서비스를 제공하는 환경을 말합니다.

ECMAScript

AJAX(Asynchronous JavaScript and XML)

비동기 요청

동기식

요청 후, 응답이 올 때까지 기다린다.

비동기식

요청 후, 응답을 기다리지 않고 다음 요청을 또 한다.

비동기 요청

XMLHttpRequest

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

주요 속성 및 메소드

XMLHttpRequest

fetch

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

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

•

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

•

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

•

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

반환된 객체는:

•

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

•

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

fetch

jQuery AJAX

•

jQuery ajax 개발문서

jQuery.ajax()

Data to be sent to the server. If the HTTP method is one that cannot have an entity body, such as GET, the data is appended to the URL.

https://api.jquery.com/jQuery.ajax

AJAX란?

•

AJAX (Asynchronous JavaScript and XML)

핵심 포인트

요청 → 응답이 오기를 기다리지 않고도 화면은 계속 동작한다 (비동기)

$.ajax

axios

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

Axios 기본 구조

Axios의 주요 메서드

axios

개요

•

Promise

•

Promise 상태

•

주요 메소드

•

기본 예시 코드

•

API 호출 예시 코드

Promise

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

Promise

async & await

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

•

Promise 

•

async

•

await

async

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

await

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

async & await

이미지 슬라이드

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