[2024 신입부원 기초 스터디] 김수아 #3주차

JS(Java Script)

"웹페이지에 생동감을 불어넣기 위해 만들어진 언어"

JS는 본래 웹사이트에 사용될 목적으로 만들어졌다. (HTML은 웹페이지의 토대를, CSS는 이 요소들을 꾸민다.. 이 둘은 기능이 제한된 'Markup Language'이므로 'Programming Language'인 JS가 이에 생명을 불어넣는다)

이에 JS는 '브라우저'로 한정되어 있었으나, Node.js / React Native / Electron 등의 개발로 활용범위가 확장되었다. 

 

• JS는 파이썬이나 루비처럼 'Interpreter Language' (컴파일과정 거치지 않고 바로 실행)(vs. Compiled Language)
• 동적 자료형을 가짐 (코딩 자유롭게)
• 객체지향 지원하는 언어 (Prototype기반)
• First Class Object(일급 객체들) 활용해 함수형 프로그래밍

JS 사용

• 웹의 요소 제어_HTML, CSS로 할 수 없는 것들을 JS로 처리(동적인 웹페이지 가능)
• 다양한 Framework, Library사용_ React, Vue
• 백엔드(서버)개발_ Node JS ‒ Express JS___for 웹 및 모바일 애플리케이션 개발

*Framework: 대규모 정보시스템을 개발할 때 활용되는 개발 · 실행 · 테스트 · 운영 환경을 지원하는 소프트웨어.  웹 프레임워크는 데이터베이스에 연결을 설정하고 데이터를 관리하거나, 세션을 맺고 유지하는 등의 동작을 정해진 방법과 추상화된 인터페이스로 제공한다. 프레임워크에서 표준으로 제시하는 방법을 이용하면 쉽고 빠르게 안정적인 애플리케이션을 구축할 수 있다.

*Library: 데이터 관련한 파일의 집합. 재고 관리에서는 재고품의 관리 파일 집합이 데이터의 라이브러리를 구성할 수 있다. 

JS 문법

-주석

컴퓨터가 아닌, 사람을 위한 메시지(컴파일 되지 않는 코드)

• // 한 줄
• /*    여러 줄     */

-변수선언

• var: JS초창기에 사용되었으나 여러 문제점들로 인해 현재는 사용X
• let: 변수- 넣은 데이터 계속 변경가능
• const: 상수- 넣은 데이터 변경불가

let x = 10; //정수형
console.log(x);
x = "I'm Suah"; //문자열
console.log(x);
x = true //불리언
console.log(x);
let x = 55; //같은 이름을 지닌 변수(주머니)는 선언불가
const Y //값 지정하지 않고 선언만 불가
const Y = 5; //상수는 보통 대문자로 명명
console.log(Y);
Y = "I'm Suah" (X) //한 번 값을 선언하면 변경불가

**변수이름 규칙 

1. 예약어사용금지(if, for 등)

2. 문자,_, $, 숫자사용가능

3. 숫자는맨앞불가능

 

-연산자

let x;
x = 10; //대입 연산자
console.log(x + 5); //더하기
console.log(x - 5); //빼기
console.log(x * 5); //곱하기
console.log(x / 5); //나누기
console.log(x % 5); //나머지

 

-조건문

if (true) console.log('진실'); //만약에 T라면 '진실'출력
if (false) console.log('거짓'); //만약에 F라면 '거짓'출력

let love = true;

// 한줄 코드
if (love) console.log('사랑합니다.');

// 여러줄 코드
if (love) {
  console.log('사랑합니다.');
  console.log('정말 많이.');
}

 

-함수

// value : 매개변수
function count (value) {
	for (let i = 1; i <= value; i++) {
		console.log(i);
	}
}
// 5 : 인자
count(5);

 

-console API

코드의 특정지점에서 값이나 변수를 기록, 작업의 소요시간을 알아내는 등 개발자가 사용할 수 있는 디버깅 기능 제공

-> 주로 console.log()함수를 사용하며 변수의 값을 기록할 때 사용한다

 

-Alert

//alert() 함수를 사용하여 간단한 팝업 알림창을 표시
alert("Hello!!")

 

-DOM

DOM이란? "Document Object Model"의 약자로 웹 페이지의 구조화된 표현을 나타낸다. DOM은 HTML, XML 및 XHTML 문서 등을 트리 구조로 나타내며, 프로그래밍 언어를 사용하여 해당 문서의 내용, 구조 및 스타일에 동적으로 접근하고 조작할 수 있도록 한다. 웹 개발에서 자바스크립트를 사용하여 DOM을 조작하여 웹 페이지의 동적인 동작을 만들 수 있다.