Javascript

자바스크립트 기초

Javascript 기초

JavaScript 소개

웹 브라우저 및 Node 런타임 환경에서 실행되는 인터프리터 프로그래밍 언어입니다.

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

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

주요 특징

JavaScript 소개 및 기초

변수

데이터를 저장하는 메모리 공간

개요

•

변수 

•

변수 선언

변수

자료형

자료형은 데이터의 종류를 말합니다.

자료형 분류

JavaScript 의 자료형은 문자열, 숫자, 불, undefined 가 있습니다.

자료형

연산자

변수 또는 값을 연산하는 기호

연산자 분류

•

산술 연산자

•

대입 연산자

연산자

제어문

프로그램의 실행 흐름을 제어하는 키워드 및 문장

제어문 분류

구분	설명
조건문	조건에 따라 별도의 명령을 실행하는 명령문 : if, switch
반복문	조건에 따라 일정 횟수만큼 코드를 반복 실행하는 명령문 : while, do ~while, for, for ~ in, for ~ of
기타 제어문	반복의 흐름을 제어하거나, 조건없이 흐름을 변경하는 명령문 : break, continue

제어문

배열

여러 개의 값을 저장하는 변수

용어	설명
배열의 요소	배열을 구성하는 각각의 값
배열의 길이	요소의 개수
Index(순서번호)	0부터 시작하는 요소의 위치를 가리키는 번호

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

배열

함수

“코드의 모음”

학습 요소

함수

객체

데이터와 함수를 하나로 사용하는 구조

객체

프로토타입

DOM (Document Object Model)

HTML 문서를 JavaScript 객체로 다루는 인터페이스

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

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

DOM

BOM (Browser Object Model)

웹 브라우저를 JavaScript 의 객체로 다루는 방법을 알아봅니다.

•

Window

•

Screen

•

Location

BOM

ECMAScript

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

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

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

ECMAScript

AJAX(Asynchronous JavaScript and XML)

비동기 요청

동기식

여러 작업이 서로의 타이밍(동기)을 맞추어 순서대로 동작하는 방식

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

비동기식

비동기 요청

XMLHttpRequest

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

	브라우저	node
실행 여부

XMLHttpRequest

fetch

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

	브라우저	node
실행 여부

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

•

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

fetch

jQuery AJAX

•

jQuery ajax 개발문서

$.ajax

axios

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

Axios 기본 구조

axios

개요

•

Promise

•

Promise 상태

•

주요 메소드

•

기본 예시 코드

•

API 호출 예시 코드

Promise

async & await

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

•

Promise 

•

async

•

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 플러그인 가져오기

CDN 으로 가져오기

<!-- slick css CDN -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

<!-- slick js CDN -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
HTML
복사

 FILE 로 가져오기

github.com

https://github.com/kenwheeler/slick/archive/v1.8.1.zip

<!-- slick css FILE -->
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">

<!-- slick js FILE -->
<script src="js/slick.min.js"></script>
HTML
복사

 jQuery 가져오기

<!-- jQuery CDN 방식으로 포함하기 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
HTML
복사

jQuery 포함하는 코드가 플러그인 포함코드보다 위에 있어야한다.

slick

swiper 라이브러리

Swiper - The Most Modern Mobile Touch Slider

The Most Modern Mobile Touch Slider

https://swiperjs.com/

swiper

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

2. bxslider HTML 레이아웃 코드

bx-slider