자바스크립트 기초

H·2023년 10월 17일
자바스크립트

HTML+CSS+자바 스크립트 웹 표준의 정석

목록 보기
4/4

alert과 confirm

confirm은 사용자가 확인이나 취소 버튼 중에서 직접 클릭 가능

프롬프트 창

var name = prompt("이름을 입력하세요.", "아무개");

document.write()문

웹 문서에서 괄호 안의 내용을 표시하는 명령문

console.log()문

콘솔 창에 출력

주석

/* */ 사이에는 또 다른 주석을 넣을 수 없다.

🧐 변수와 상수

변수 : 값이 여러번 달라질 수 있는 데이터
상수 : 바뀌지 않는 데이터

🧐 자료형

컴퓨터가 처리할 수 있는 자료의 형태

🧐 자료형의 유형

  • 기본형 : 숫자, 문자열, 논리형
  • 복합유형 : 배열, 객체
  • 특수 유형 : undefined, null
    • undefined : 변수에 값이 할당되지 않았다
    • null : 데이터 값이 유효하지 않은 상태

🧐 조건문

🧐 단축 평가

조건 계산을 빠르게 하는 법
And 연산자 : false가 될 확률이 높은 조건을 먼저
Or 연산자 : true가 될 확률이 높은 조건을 먼저

🧐 switch 문

default문에서는 break문 쓰지 x
case문에서는 값만 사용하고 식 사용 불가

  • prompt문에서 입력받은 값은 기본적으로 문자열로 저장된다.
    그러나 데이터 유형이 자동으로 변환되기 때문에 예상치 못하게 다르게 변환될 수 있음
    -> parseInt를 이용해 숫자로 바꿔주는 것이 안전
var num = parseInt(prompt("입장객은 몇 명인가요?"));

🧐 함수 선언문과 함수 표현식

function greeting () {
console.log("hello world")
}
let greeting=function () {
console.log("hello world")
}

🧐 함수 선언과 실행 순서

웹 브라우저에서는 자바스크립트 소스를 해석할 때는 함수 선언 부분을 가장 먼저 한다.
그래서 선언한 위치와 상관없이 함수를 실행 할 수 있다.

🧐 Var 변수

🧐 var을 사용한 변수의 특징

  • 전역변수로 사용하려면 함수 밖에서 선언하거나 var 예약어를 빼고 선언해야 한다.

🧐 var과 호이스팅

  • 상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것
  • 자바 스크립트 해석기는 함수 코드를 훑어보면서 var을 사용한 변수는 따로 기억해둔다. -> 마치 선언한 것과 같은 효과
  • var은 재선언과 재할당 가능
  • var 예약어를 사용하는 변수는 함수 영역의 스코프를 가진다.
    -> 예상하지 못한 오류 발생 가능 -> let과 const 등장

🧐 let과 const의 등장

  • let과 const는 블록 영역의 스코프
  • let 예약어를 사용하여 선언한 변수는 값을 재할당 할 수 는 있지만 재선언은 불가
  • var 예약어를 사용한 변수는 선언하기 전에 실행하더라도 undefined 값을 가질 수 있다 > 호이스팅
    but let 예약어는 호이스팅이 없다.
  • const 는 재선언이나 재할당 불가능
    -> 값이 자주 바뀌는 변수라면 let 예약어 사용, 재할당이 없는 변수라면 const 예약어 사용

🧐 자바스크립트 변수를 사용하는 방법

1) 전역변수는 최소한으로 사용
2) var 변수는 함수의 시작 부분에서 선언 (내부에서 호이스팅이 생기므로)
3) for문의 카운터 변수는 let을 사용하거나 var을 for 문 밖에서 선언하기(var변수는 함수 레벨의 스코프)

🧐 함수의 종류

🧐 익명 함수

function(a,b) {
	return a + b;
}

함수 자체가 식이므로 함수를 변수에 할당 할 수 있으며, 또다른 함수의 매개변수로 사용할 수도 있다.

🧐 즉시 실행 함수

  • 한 번만 실행하는 함수라면 함수를 정의하면서 동시에 실행 가능
  • 함수를 실행하는 순간에 자바스크립트 해석기에서 함수를 해석한다.
(function() {
명령
}());

🧐 화살표 함수

  • 익명 함수에서만 사용할 수 있다.
  • 매개변수가 없는 경우
const hi  = function() {
return "안녕하세요?";
}
// 를 화살표 함수로 표현하면
const hi = () => { return "안녕하세요?" };
// 한 줄 뿐이라면 아래와 같이도 표현가능 (return 문은 생략된 것으로 간주)
const hi = () => "안녕하세요?";
// 매개변수가 1개인 경우 매개변수의 괄호는 생략 가능
let hi = user => { ... };

🧐 객체

자바스크립트에서 객체는 데이터를 저장하고 처리하는 기본 단위

🧐 자바스크립트에서 사용하는 객체

  • 문서 객체 모델(DOM) : 객체를 사용해 웹 문서를 관리하는 방법
  • 브라우저 관련 객체
  • 내장 객체 : 웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있다.
  • 자바스크립트 내장 객체에는 웹 문서의 계층 구조와 상관없이 나타낼 수 있는 객체가 있다. Array 객체와 Date 객체가 대표적

🧐 Array 객체의 메서드

  • every : 배열의 모든 요소가 주어진 함수에 대해 참이면 true 반환, 그렇지 않으면 false 반환
  • filter : 배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만든다.
  • splice : 배열에 요소를 추가하거나 삭제 - 배열의 중간 부분에서 요소를 추가하거나 삭제, 한꺼번에 요소를 2개 이상 추가하거나 삭제하는 경우
  • slice : 배열에서 특정한 부분만 잘라 낸다.
  • join : 배열 요소를 연결해서 하나의 문자열로 만들어준다.

splice

  • 인수가 1개인 경우 : 지정한 인덱스의 요소부터 배열의 맨 끝 요소까지 삭제
  • 인수가 2개인 경우 : 첫 번째 인수는 인덱스 값이고 두 번째 인수는 삭제할 요소의 갯수
  • 인수가 3개 이상인 경우 : 첫 번쨰 인수는 배열에서 삭제할 시작 위치, 두번째 인수는 삭제할 갯수, 세번째 인수부터는 삭제한 위치에 새로 추가할 요소 지정

slice

  • 시작과 끝 인덱스를 지정해서 요소를 여러 개 꺼내고, 실행 결과 기존 배열이 바뀌지 않는다.
    기존 배열을 바꾸지 않으면서 요소를 꺼냄
  • 인수가 하나면 그 인수를 시작 인수로 간주하고 지정한 요소부터 마지막 요소까지 꺼내서 반환
  • 인수 2개를 사용하면 첫 번째 인수는 배열의 시작 인덱스, 두번째 인수는 끝 인덱스의 바로 직전 인덱스

🧐 브라우저와 관련된 객체

  • window : 브라우저 창이 열릴 때마다 하나씩 만들어진다.
  • document : 웹 문서마다 하나씩 있으며 body 태그를 만나면 만들어진다.
  • navigator : 현재 사용하는 브라우저의 정보가 담겨있다.
  • history : 현재 창에서 사용자의 방문 기록 저장
  • location : 현재 페이지의 URL 정보가 담겨 있다.

새 브라우저 창을 여는 open() 메서드

  • window.open(경로, 창 이름, 창 옵션)
  • 창 이름을 지정안하면 계속해서 새로운 팝업 창이 열림
    이름 지정하면 지정한 창에만 내용이 나타난다.
  • 웹 브라우저에서 팝업을 차단하면 window.open()은 null을 반환
    -> window.open() 메서드를 실행한 후 반환값을 체크하면 팝업이 차단되었는지 알 수 있다.

navigator 객체
userAgent : 사용자의 웹 브라우저 정보를 서버로 보낼 때 유용

history 객체

  • 방문한 사이트 주소가 배열 형태로 저장된다.
    보안 문제 때문에 읽기전용
  • back(), forward()
  • go() : history 목록에서 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러온다.

location 객체
브라우저의 새로 고침과 같은 역할을 하는 reload() 메서드와 현재 창에 다른 문서나 사이트를 보여주는 replace() 메서드가 매우 유용!

screen 객체
사용자의 화면 크기나 정보를 알아낼 때 screen 객체를 사용
orientation : 화면의 현재 방향

🧐 DOM

🧐 문서 객체 모델

자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법

🧐 DOM 트리

DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분한다.
부모와 자식 구조로 표시하면 마치 나무 형태가 되므로 DOM 트리라고 한다.

🧐 DOM을 구성하는 기본 원칙

  1. 모든 HTML 태그는 요소 노드
  2. HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트 노드
  3. HTML 태그에 있는 속성은 자식 노드인 속성 노드
  4. 주석은 주석 노드

🧐 DOM에 접근하기

  • id 선택자로 접근하는 getElementById() 메서드
  • class 값으로 접근하는 getElementsByClassName() 메서드 -> 반환하는 요소가 2개 이상일 수 있다.
    -> 이 메서드 사용시 요소들이 HTMLCollection 객체로 저장된다.
    이것은 배열과 비슷하고 배열처럼 사용할 수 있지만 배열은 아니다.
  • class나 id를 지정하지 않은 DOM 요소에 접근하려면 태그 이용 -> getElementsByTagName
    -> 위의 세 메소드의 반환값은 HTMLElement 객체이며 HTML요소만 저장됨

  • DOM 트리의 텍스트, 속성 노드까지 자유롭게 제어하려면 querySelector, querySelectorAll 메서드 사용!

  • 반환값은 노드이거나 노드 리스트(노드를 한꺼번에 여려 개 저장한 것, 배열과 비슷함)

  • 웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티

  • 속성을 가져오거나 수정하는 getAttribute(), setAttribute() 메서드

🧐 DOM의 이벤트 객체

웹 문서에서 이벤트가 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보가 들어있다.

  • clientX : 이벤트가 발생한 가로 위치를 반환
  • pageX : 현재 문서 기준으로 이벤트가 발생한 가로 위치를 반환
  • screenX : 현재 화면 기준으로 이벤트가 발생한 가로 위치를 반환
  • target : 이벤트가 최초로 발생한 대상을 반환
  • preventDefault() : 이벤트를 취소할 수 있는 경우에 취소

  • event에는 이벤트 정보만 들어있기에 이벤트가 발생한 대상에 접근하려면 this 사용

  • addEventListener()를 사용하면 한 요소에 여러 이벤트 처리기를 연결해 실행 가능

🧐 이벤트 캡쳐링, 버블링

캡쳐링 : DOM의 부모 노드에서 자식 노드로 전달되는 것
버블링 : DOM의 자식 노드에서 부모 노드로 전달되는 것

🧐 CSS 속성에 접근하기

document.요소명.style.속성명

🧐 노드 리스트

노드 리스트는 배열과 비슷해서 인덱스 번호로 특정 위치의 노드에 접근할 수 있다.

🧐 텍스트 노드를 사용하는 새로운 요소 추가하기

  1. 요소 노드 만들기 - createElement()
  2. 텍스트 노드 만들기 - createTextNode()
  3. 자식 노드 연결하기 - appendChild()
newP.appendChild(txtNode);
document.getElementById("info").appendChild(newP);

🧐 속성값이 있는 새로운 요소 추가하기

  1. 요소 노드 만들기 - createElement()
  2. 속성 노드 만들기 - createAttribute()
    속성 노드를 만든 수 속성값은 value 프로퍼티를 사용해서 지정
var srcNode = document.createAttribute("src");
srcNode.value = "images/dom.jpg";
  1. 속성 노드 연결하기 - setAttributeNode()
  2. 자식 노드 연결하기 - appendChild()

appendChild() - 마지막에 입력한 값을 맨 위에 나타내는 방법

itemList.insertBefore(newItem, itemList.childNodes[0]);

🧐 노드 삭제하기

부모 노드에서 자식 노드를 삭제해야 한다.
-> 부모 노드를 찾는 프로퍼티 필요

  • parentNode 프로퍼티
  • childNodes 프로퍼티
  • removeChild 메서드
li.parentNode.removeChild(li)
profile
H
나아가기
이전 포스트

CSS

0개의 댓글