/ LECTURE

JS - Array / Function / Node

이 페이지는 다음에 대한 공부 기록입니다

JAVA(자바), Python(파이썬) 기반의

AI 활용 응용 소프트웨어 개발자 양성 과정

2021.11.10. ~ 2022.05.18.

찾으시는 정보가 있으시다면
주제별reference를 이용하시거나
우측 상단에 있는 검색기능을 이용해주세요

38일차 수업

배열

구성 : 배열의 요소(값) + 위치를 가르키는 index

인덱스는 항상 0 부터 시작, 2의 32승까지 있음

var arr1 = [ ];	// 크기 설정 불가능
var arr2 = Array(10);	// 생성과 동시에 크기 설정 가능, 10칸 배열 생성 예시
var arr3 = new Array(9);	// 생성과 동시에 크기 설정 가능,
var arr4 = new Array(1,2,3,[88,99], “문자열);	// 배열 요소 넣어주면 초기값으로 생성 가능
var arr5 = [1,2,3, [99,88], “문자열”];	// 배열의 요소의 타입이 고정되지 않는다
var arr6 = [ ];
arr4[0];	// 배열 요소 선택, 배열명[인덱스];
arr6.push(“3”);	// 배열에 요소 추가하기	배열명.push(값);
arr6[4] = “3”;		//  배열에 요소 추가하기	배열명[인덱스] = 값;
arr6[99] = 1;	// 인덱스가 연속적이지 않아도 됨, 비어있는 값도 존재, 크기가 가변적
delete arr6 [4];	// 해당 인덱스의 요소만 지움
arr6.pop();		// 해당 배열의 끝자리부터 요소와 함께 인덱스까지 지움
arr7 = [ [ ] , [ ] , [ ] ];	// 2차원 배열 만들기

function

함수, 하나의 작업을 수행하도록 설계된 독립적인 블록 { … }

  • 함수 내 실행문에서의 변수는 독립적인 블록이라 지역 변수

  • 외부의, 전역변수를 호출할 때는 java의 this 처럼 window로 구분

필요한 경우에 함수를 호출하여 작업을 반복 수행

하나의 데이터 타입처럼 존재, 변수나 배열, 함수에 함수를 넣을 수 있음

// 함수 선언 : function 함수 이름 (매개변수…){ 실행문 }
function add(x,y){return x + y;};
// return 은 함수의 실행을 멈추고 return 키워드 다음에 명시된 표현 값을 호출한 대상에게 반환한다
var plus = add();	// 함수명 변경가능

Hoisting

코드를 실행하기 전에 변수 선언 / 함수 선언이 프로그램이 구현되는 부분에서 최상단으로 끌어 올려진 것같은 현상, JS의 특징

이러한 문제를 예방하기 위해서 변수선언을 항상 상단에 적어준다

var num = 10;
function print(){
    console.log(num);	// output undefined
    var num = 20;
    console.log(num);	// output 20
}

Parameter

function을 정의할 때 전달받고자 하는 데이터를 괄호 안에 정의

argument : parameter를 통해 전달받은 데이터

JS에서는 default 값을 정할 수 있음

function test(a,b=1,c){ … };
test(1,2,3,4);
test(1,2);	// 선언된 parameter만큼 작성하지 않아도 됨
test(1);		// b의 값이 주어지지 않으면 default 인 1로 대체
function(…args){  };	// parameter 제한없이 모두 args 배열에 넣어 argument로 이용할 수 있음

Object

숫자, 문자, Boolean, undefined 를 제외한 모든 것

var person = {	// object 선언
name : “스폰지밥”,	// 키와 값으로 구성, property
age : 30,		// 키는 문자열, 값은 일반적인 값, 각 property는 comma로 구분
id : function() {…},	// 함수 : 메소드, 이름은 키가 대체하기 때문에 작성할 필요없음
};
person.age;	// property 값 호출하기, 객체이름.property;
person[‘name’];	// property값 호출하기, 객체이름[property];
person.id();	// 함수 호출하기, 객체이름.함수이름();

Node

계층 구조에 들어있는 정보

문서 노드 : HTML 전체를 나타내는 노드, document

요소 노드 : HTML 태그

속성 노드 : 요소 노드(태그)에 대한 정보를 가진 노드, 자식으로 포함이 안됨

텍스트 노드 : 모든 텍스트를 나타내는 노드, 시작태그와 종료태그 사이 공백도 해당

주석 노드 : 주석을 나타내는 노드

DOM

노드 간에 연결선을 만들어주면 노드 트리

document 안에 담겨져 있는 노드를 관리하는 것이 목적

Node

루트 노드 : 최상단 노드, 모든 노드의 부모, 유일하게 부모가 없음

일반 노드 : 단하나의 부모 노드 존재, 자식은 자유롭게 가짐

Node 관계

형제 노드 : 같은 부모를 가진 노드

조상 노드 : 현재 노드를 기준으로 상위에 존재하는 모든 노드

자손 노드 : 현재 노드를 기준으로 하위에 존재하는 모든 노드

Access Node

getElementByTagName() 등 요소와 관련된 메소드를 이용하여 접근 가능

노드 관계를 활용해 접근하는 방법

  • parentNode : 부모 노드

  • childnodes : 자식 노드 리스트

  • firstChild : 첫 번째 자식 노드

  • lastChild : 마지막 자식 노드

  • nextSibling : 다음 형제 노드

  • previousSibling : 이전 형제 노드

접근한 노드 데이터 가져오기

  • nodeName : 노드의 태그 이름, 속성 이름

  • nodeValue : 노드의 담긴 값, 문자열

  • nodeType : 노드의 타입

// In HTML
<!DOCTYPE html>
<html lang=”ko”>
	<head>
	</head>
	<body>
		<p id = “nodeTest”></p>
	</body>
</html>

// In JS
function nodeTest(){
document.getElementById(“nodeTest”).innerText = document.children[0].children[1].children[0].nodeName;	// output BODY
// children은 비 요소들을 제외해준다, 그래서 childNodes를 더 안쓰게 됨