FE/JavaScript

JavaScript - 개념

soohykim 2025. 4. 10. 10:56
728x90
반응형
 

📂 JavaScript

📌 자바스크립트 기능

  • 웹 사이트에 움직이는 효과만 주는 언어
    ➡ 웹의 동적 기능 생성
    ➡ 웹 브라우저에서 실행되는 프로그램 생성
    ➡ 서버를 구성, 서버용 프로그램 생성 (Node.js 자바스크립트 프레임워크 사용)

📌 자바스크립트 특징

  • 모든 웹 브라우저에서 작동 (JS 최신 문법을 웹 브라우저에서 즉시 사용하진 못함)
  • 웹 브라우저에서 실행 결과를 즉시 확인 가능
  • 풀스택 웹 개발 등 프로그램 생성
  • 자바스크립트 공개 API 사용 가능
  • 라이브러리, 프레임워크 사용 가능
    • jQuery (자바스크립트 라이브러리) ➡ 웹 사이트 동적 개발
    • Angular, View (자바스크립트 프레임워크)

📌 자바스크립트 실행

  1. HTML 문서 안에 자바스크립트 소스 작성
  2. 외부 스크립트 파일 연결
    • 자바스크립트를 따로 작성하여 HTML 문서에 연결
    • <script src="js/파일이름.js"></script>

✔ 서버 확장 기능

  • Live Server 설치 : 소스를 웹 브라우저에서 바로 확인 가능 (open with Live Server)

📌 자바스크립트 입출력

  • prompt() 함수 : 사용자 입력값 받기
  • alert() 함수 : 알림 창으로 출력
  • document.write() 함수 : 웹 브라우저 화면에 출력
  • console.log() 함수 : 콘솔에 출력

✔ 크롬 브라우저 콘솔

  • 크롬에 about:blank ➡ ctrl+shift+J

📂 JS 문법

📌 변수, 자료형

  • 변수
    • document.querySelector("result").innerHTML
      ➡ 문서에서 선택자를 사용해 id값이 "result"인 태그 선택하고, HTML에 삽입
    • document.querySelector("result").value
      ➡ 문서에서 선택자를 사용해 id값이 "result"인 태그 선택하고, 값을 가져와 변수에 할당
function calc() {
    var currentYear = 2022; // 선언 및 값 저장
    var birthYear = prompt("태어난 연도를 입력하세요.","YYYY"); // 사용자 입력값 저장 
    var age;
    age = currentYear - birthYear + 1;
    document.querySelector("#result").innerHTML = "당신의 나이는 " + age + "세입니다.";
}

function showPrice() {
    var originPrice = document.querySelector('#oPrice').value; 
    var rate = document.querySelector('#rate').value; 
    document.querySelector('#showResult').innerHTML = "상품의 원래 가격은 " + originPrice + "원이고, 할인율은 " + rate + "%입니다."; 
}
  • 자료형
자료형설명예시
number (숫자) 따옴표 없이 숫자 var average = 1;
string (문자열) 작은/큰 따옴표 묶어 문자열 var message = "one";
boolean (논리형) 참/거짓 age > 2 (False)
undefined 자료형 정의하지 않음  
null 값이 유효하지 않음  
array (배열) 한 변수에 여러 값 저장 var season = ["봄", "여름", "가을", 겨울"];
object (객체) 함수와 속성이 함께 포함 var name = { FirstName : "Soo", LastName : "Kim";}

📌 제어문

  • if문 : if(조건) { "조건=True" } else { "조건=False" }
  • 조건 연산자 : (조건) ? "조건=True" : "조건=False"
var number = prompt("숫자 입력");        
if (number < 0) {                                  (number < 0) ? alert("0 이상의 수 입력") : document.write("입력한 숫자 : " + number);
  aleart("0 이상의 수 입력");
}else{
  document.write("입력한 숫자 : " + number);
}
  • switch문 : switch(변수) { case "값" : 실행; break; } ➡ 조건 3개 이상
var season = prompt("계절 선택 : 1-봄, 2-여름, 3-가을, 4-겨울");

switch(season) {
  case "1" : document.write("계절은 <string>봄</string>입니다. </p>");
    break;
  ...
  default : alert("잘못 입력했습니다");
}
  • for문 : for(var i=시작값; i<종료값; i++) { 반복 실행 }
var sum = 0;

for (var i=1; i<6; i++) {
  sum += i;
}

document.write("덧셈 결과" + sum);
  • while문, do~while문 : while(조건) { 반복 실행 } ➡ 특정 조건에 따라 반복
var i = 0

do {
  document.write("반복 조건이 true이면 반복 <br>");
  i += 1;
} while (i < 10);

📌 함수

  • 함수 선언 : 어떤 명령을 처리해야 할지 미리 알려 주는 것
  • 함수 실행 : 선언한 함수를 가져와 사용하는 것
function addNumber(a, b) {
  var sum = a + b;
  console.log(sum);    
}
addNumber(10, 20)
  • return문
var num1 = parseInt(prompt("1번째 숫자 : "));
var num2 = parseInt(prompt("2번째 숫자 : "));
var result = addNumber(num1, num2);
alert("두 수를 더한 값은 " + result + "입니다");

function addNumber(a, b) {
  var sum = a + b;
  return sum;
}
  • 익명 함수 : 함수 자체가 "식"으로, 익명 함수를 변수에 할당, 다른 함수의 매개변수로 사용 가능
  • 즉시 실행 함수 : 함수를 정의하면서 실행하는 함수
var add = function(a, b) { // 익명함수 선언
  return a + b;
}
var sum = add(10, 20); // 익명함수 실행

var result = (function(a, b) { // 즉시 실행 함수 
  return a + b;
}(10, 20));
console.log(result);

📌 이벤트

  • 이벤트 핸들러 : 이벤트와 이벤트 처리 함수 연결
  • 마우스 이벤트
속성설명
click HTML요소를 마우스로 눌렀을 때 이벤트 발생
dbclick HTML요소를 마우스로 두 번 눌렀을 때 이벤트 발생
mousedown 요소 위에서 마우스 버튼을 누르는 동안 이벤트 발생
mousemove 요소 위에서 마우스 포인터를 움직일 때 이벤트 발생
mouseover 마우스 포인터가 요소 위로 옮겨질 때 이벤트 발생
mouseout 마우스 포인터가 요소를 벗어날 때 이벤트 발생
mouseup 사용자가 누르고 있던 마우스 버튼에서 손 뗄 때 이벤트 발생
  • 키보드 이벤트
속성설명
keypress 키를 눌렀을 때 이벤트 발생
keydown 키를 누르는 동안 이벤트 발생
keyup 키에서 손을 뗄 때 이벤트 발생
  • 문서 로딩 이벤트
속성설명
abort 웹 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트 발생
error 문서가 정확히 로딩되지 않았을 때 이벤트 발생
load 문서 로딩이 끝나면 이벤트 발생
resize 문서 화면 크기가 바뀌면 이벤트 발생
scroll 문서 화면이 스크롤되었을 때 이벤트 발생
unload 문서를 벗어날 때 이벤트 발생
  • 폼 이벤트
속성설명사용 태그
blur 폼 요소에 포커스를 잃었을 때 이벤트 발생  
change 목록이나 체크 상태 등 변경되었을 때 이벤트 발생 input, select, textarea 태그
focus 폼 요소에 포커스가 놓였을 때 이벤트 발생 text, select, textarea, button 태그
reset 폼이 다시 시작되었을 때 이벤트 발생  
submit submit 버튼을 눌렀을 때 이벤트 발생  

📖참고📖

추가 이벤트 목록

📌 객체

  • 객체 : 하나의 변수에 여러 정보를 저장하고 처리하는 기본 단위
  • 속성 : 객체에서 값을 담고 있는 정보 (➡ 객체.속성)
  • 메서드 : 객체가 어떻게 동작할 지 선언해 놓은 함수
  • 인스턴스 : 프로토타입을 사용해 만들어낸 객체 (➡ new 객체( ) )
var now = new Date()  // Date 객체의 인스턴스를 만들어 now 변수에 저장
now                  // ➡ Mon Dec 12 2022 11:50 GMT+0900
now.toLacaleString() //"2022. 12. 12. 오후 11:50:33"
  • 객체 종류
    (1) 내장 객체 : 미리 객체로 정의됨
    ➡ Number, Boolean, Array, Math(3) 브라우저 객체 모델 (BOM) : 웹 브라우저의 주소 표시줄, 창 크기 등 객체로 다룸
    ➡ Navigator 객체, History 객체, Location 객체, Screen 객체
    • 리터럴 표기법 : 변수를 선언하면서 동시에 값 지정해주는 표기 방식 (개별적으로 객체 선언하고 사용)
    • 생성자 함수 : 속성과 함수의 틀을 만들어 필요할때마다 틀을 복제한 인스턴스 생성 (객체 틀 생성)
  • (4) 사용자 정의 객체
  • (2) 문서 객체 모델 (DOM) : 웹 문서 안에 포함된 이미지, 링크, 텍스트 필드 등 객체 정의
    ➡ Document 객체, Image 객체
// (1) 리터럴 표기법 
var book = { // book 객체 선언한 후 속성과 함수 정의 
	title: "javascript",
	price: 100,
	info: function() { // info 함수 정의
    alert(this.title + "가격은 " + this.price +"입니다");
	}
};
book.info();  // book 객체의 info() 함수 실행 

// (2) 생성자 함수 
function book(title, price) {
  this.title = title; // this.속성 이름
  this.price = price; // this가 가리키는 것은 선언하고 있는 객체 자체 
}
var html = new book("javascript", "100"); // 인스턴스 생성

📖참고📖

속성과 함수 목록 ➡ method 확인

📌 Array 객체

  • Array 생성
    (1) var numbers = new Array();
    (2) var numbers = ["one", "two", "three"];
    (3) var numbers = new Array("one", "two", "three");

  • concat() 함수 : 2개 이상의 배열 연결
  • join() 함수 : 배열 요소를 연결

  • pop() 함수 : 배열 맨 뒤에 있는 요소 추출
  • push() 함수 : 배열의 맨 끝에 요소 추가
  • shift() 함수 : 배열 맨 앞에 있는 요소 추출
  • unshift() 함수 : 배열의 맨 앞에 요소 추가

  • splice() 함수 : 원하는 위치의 요소를 삭제, 추가 ➡ splice(위치, 개수, 삭제할 위치에 새로 추가)
  • slice() 함수 : 원하는 위치의 요소 여러개 추출
var nums = ["1", "2", "3"];
var chars = ["a", "b", "c"];

nums.concat(chars)    // ["1", "2", "3", "a", "b", "c"]
nums.join( )         // "1, 2, 3"
nums.join("-")       // "1-2-3"

nums.push("4", "5")  // ["1", "2", "3", "4", "5"]
nums.unshift("0")    // ["0', "1", "2", "3"]

nums.splice(1)       // ["1"] 1번째 이후 모두 삭제 
nums.splice(1, 0, "4") // ["1", "4", "2", "3"]
nums.slice(1, 3)     // ["2", "3"] 인덱스 1부터 인덱스 2까지

📂 문서 객체 모델 (DOM)

📌 DOM (Document Object Model)

  • DOM 정의 : 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법
  • DOM 특징
    (1) 웹 문서의 태그는 '요소 노드'로 표현
    (2) 태그가 품고 있는 텍스트는 '텍스트 노드(자식 노드)'로 표현
    (3) 태그의 속성은 '속성 노드(자식 노드)'로 표현
    (4) 주석은 '주석 노드'로 표현
  • getElementByld() : DOM 요소를 id 선택자로 접근
<body>
  <div id="container">
    <h1 id="heading">제목</h1>
document.getElementByld("heading").onclick = function() {
  this.style.fontSize = "5em"   // 제목을 누르면 글자 크기가 커짐 
}
  • getElementsByClassName() : DOM 요소를 class 값으로 찾음
 <p> 내용1 <span class="accent"> 중요 내용1 </span> 내용2 <span class="accent"> 중요 내용2 </span></p>
document.getElementsByClassName("accent")[0].style.textDecoration = "underline" // 첫번째 텍스트에 밑줄
  • getElementsByTagName() : DOM 요소를 태그 이름으로 찾음
document.getElementsByTagName("h1")[0].style.backgroundColor = "#eee" // h1 태그 첫 번째 요소 배경색 바꿈
  • querySelector(), querySelectorAll() : #id 값, .class값, 태그 이름 으로 DOM 요소 찾기
document.querySelector("#heading")  // id 값
document.querySelector(".accent")   // class 값
document.querySelector("h1")        // 태그 이름
  • getAttribute() / setAttribute() : HTML 태그 속성을 가져오기 / 수정하기
document.querySelector("#prod-img > img").getAttribute("src") // 이미지 파일 경로 확인
document.querySelector("#prod-img > img").setAttribute("src", "images/coffee-blue.jpg") // 경로 수정
  • addEventListener() 함수 : 한 요소에 여러 이벤트가 발생했을 때 동시에 처리
pic.addEventListener("mouseover", changePic, false); // 이벤트 유형, 함수, 캡처 여부 (기본값: false)
pic.addEventListener("mouseout", originPic, false);
  • DOM으로 CSS 속성에 접근하고 수정
    • 텍스트 색상 바꾸기
      document.querySelector("#id").style.color = "white"
      document.querySelector("#id").style.backgroundColor = "" // 배경색 지우기
      document.querySelector("#id").style.borderRadius = "50%" // 테두리 둥글게 처리

    • 웹 요소를 화면에 표시
      document.querySelector("#id").style.display = "block" // 화면에 표시
      document.querySelector("#id").style.display = "none" // 화면에서 숨기기
  • DOM에 새로운 요소 추가
    • createElement() : 새 요소 노드 만듦
    • createTextNode() : 텍스트 내용이 있을 경우 텍스트 노드 만듦
    • appendChild() : 텍스트 노드를 요소 노드에 자식 노드로 추가함
    • createAttribute() : 요소에 속성이 있을 경우 속성 노드를 만듦
    • setAttributeNode() : 속성 노드를 요소 노드에 연결함
    • appendChild() : 새로 만든 요소 노드를 부모 노드에 추가함
// <p class="accent"> new Text </p> 
// 웹 문서에 텍스트 단락 추가 과정 
var newP = document.createElement("p")            // 요소 노드 만들기 
var newText = document.createTextNode("new Text") // 텍스트 노드 만들기
newP.appendChild(newText)                         // 자식 노드로 추가하기 
document.body.appendChild(newP)                   // body 태그 안에 p 태그 추가 
var attr = document.createAttribute("class")      // 속성 노드 만들기 
attr.value = "accent"
newP.setAttributeNode(attr)                       // 속성 노드 연결하기

📖참고📖

DOM 트리 생성 과정

📌 폼

  • 폼 정의 : 사용자가 정보를 입력할 수 있게 만들어 놓은 웹 요소
  • 폼 요소에 접근 방법
    (1) id/class 값 사용 : document.querySelector("#id").value
    (2) name 값 사용 : document.forms_name.input_name.value
    (3) 폼 배열 사용 : document.forms[0].elements[0].value

📂 브라우저 객체 모델 (BOM)

📌 BOM (Browser Object Model)

  • BOM 정의 : 자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화
  • 브라우저 내장 객체
객체설명
Window 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체 (최상위 객체)
Document 웹 문서에서 body 태그 만나면 만들어지는 객체 (HTML 문서 정보 가짐)
History 현재 창에서 사용자 방문 기록 저장
Location 현재 페이지에 대한 URL 정보
Navigator 현재 사용 중인 웹 브라우저 정보
Screen 현재 사용 중인 화면 정보 다룸
  • Window 객체
    : 웹 브라우저 상태를 제어하는 객체 (➡ 객체.속성)
속성설명
document 브라우저 창에 표시된 웹 문서에 접근
frameElement 현재 창이 다른 요소 안에 포함되어 있으면, 그 요소 반환 (아니면 null 반환)
innerHeight 내용 영역의 높이
innerWidth 내용 영역의 너비
localStorage 웹 브라우저에서 데이터 저장하는 로컬 스토리지 반환
location Window 객체의 위치/현재 URL
name 브라우저 창의 이름 가져오거나 수정
outerHeight 브라우저 창의 바깥 높이
outherWidth 브라우저 창의 바깥 너비
pageXOffset 스크롤했을 때 화면이 수평으로 이동하는 픽셀 수 (=scrollX)
pageYOffset 스크롤했을 때 화면이 수직으로 이동하는 픽셀 수 (=scrollY)
parent 현재 창이나 서브 프레임의 부모 프레임
screenX 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서부터 떨어져 있는 거리
screenY 브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서부터 떨어져 있는 거리
sessionStorage 웹 브라우저에서 데이터를 저장하는 세션 스토리지 반환

함수설명
alert() 알림 창 표시
blur() 창에서 포커스 제거
close() 현재 열려 있는 창 닫기
confirm() 확인 창 표시 (확인, 취소)
focus() 현재 창에 포커스 부여
moveBy(가로,세로) 현재 창을 지정한 크기만큼 이동
moveTo(가로,세로) 현재 창을 지정한 좌표만큼 이동
open(링크) 새로운 창 열기
postMessage() 다른 창으로 메시지 전달
print() 현재 문서 인쇄
prompt() 프롬프트 창에 입력한 텍스트 반환
resizeBy(가로,세로) 지정한 크기만큼 현재 창 크기 조절
resizeTo(가로,세로) 동적으로 브라우저 창의 크기 조절
scroll() 문서에서 특정 위치로 스크롤함
scrollBy() 지정한 크기만큼씩 스크롤
scrollTo() 지정한 위치까지 스크롤
setCursor() 현재 창의 커서 변경
showModalDialog() 모달 창 표시
sizeToContent() 내용에 맞게 창 크기를 맞춤
stop() 로딩 중지

- Navigator 객체
: 웹 브라우저 관련 정보 저장 (웹 브라우저 버전, 어떤 플러그인 설치되어 있는지, 웹 브라우저 온/오프라인 상태)

속성설명
appCodeName 브라우저 이름(코드 이름) 문자열로 반환
appName 브라우저 공식 이름을 문자열 반환
appVersion 브라우저 버전 문자열 반환
battery 배터리 충전 상태 정보를 객체로 반환
connection 브라우저 장치의 네트워크 정보를 객체로 반환
cookieEnabled 쿠키 정보를 무시한다면 false, 아니면 true 반환
geolocation 모바일 기기를 사용한 위치 정보를 객체로 반환
maxTouchPoints 장치에서 동시에 터치 가능한 포인트가 몇 개인지 반환
platform 브라우저 플랫폼 정보를 문자열로 반환
userAgent 현재 브라우저 정보가 있는 사용자 에이전트 문자열 반환

✔ 렌더링 엔진

➡ 렌더링 엔진 : 브라우저에서 웹 문서를 화면에 표시하기 위해 웹 문서의 태그, 스타일 해석하는 프로그램
➡ Navigator 객체는 렌더링 엔진의 이름을 보고 웹 브라우저 종류 구별
➡ 자바스크립트 엔진 확인 : navigator.useragent
➡ 브라우저 - 렌더링 엔진 - 자바스크립트 엔진

브라우저렌더링 엔진자바스크립트 엔진
크롬(Chrome) 블링크(Blink) V8
파이어폭스(Firefox) 게코(Gecko) 스파이더몽키(SpiderMonkey)
인터넷 익스플로러 트라이덴트(Trident) 차크라(Chakra)
사파리(Safari) 웹킷(Webkit) 자바스크립트코어(JabascriptCore)
오페라(Opera) 블링크(Blink) V8

✔ 콘솔 창 열기

Ctrl + Shift + J

📖출처📖

웹프로그래밍을 위한 자바스크립트 기본편

728x90
반응형