[엘리스 AI 트랙 2기] 3주차-JavaScript 기초(07/07)

자료의 출처는 '엘리스 AI 트랙 2기 (https://aitrack.elice.io/)' 'JavaScript 기초'이며, 학습 후 정리한 내용입니다.

⚡️올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다.⚡️

1. 자바스크립트 소개

01. 자바스크립트 소개

자바스크립트란?

이미지 슬라이드 효과, 팝업 효과 등의 기능을 포함한 동적인 웹사이트 제작 시 사용되는 프로그래밍 언어

(참고: 자바스크립트 위키백과)

자바스크립트 활용 범위

IoT(사물인터넷)

하이브리드 앱

서버개발

등

02. 자바스크립트의 변수

변수란?

데이터를 담는 공간

(그릇, 박스 등으로 비유)

변수 선언 및 데이터 저장

var fruit; //변수 선언 
fruit = “apple” //변수 초기화
//변수명   데이터
var fruit = “apple”; //변수 선언 및 초기화

• 변수 선언
데이터를 담을 공간을 생성하는 것

• 변수 초기화
생성된 변수에 데이터를 전달하는 것

데이터 변경

 var fruit = “apple”; // <= 변수 선언과 초기화를 한줄에 표현
fruit = “banana”;

변수 fruit의 데이터를 apple 에서 banana로

변경 변수는 이미 선언되었으므로 var 다시 작성할 필요가 없다.

변수 안의 데이터 확인 방법

 var fruit = “apple”; 
 console.log(fruit); //apple 출력

console.log();는 변수 안에 데이터를 확인할 때 사용하는 명령어 (Web에서 inspection -> console에서 명령 확인가능)

- 실제 프로그램상에 나타나지 않는다

;document.write(변수명): 변수의 데이터를 웹 화면에 출력할 때 사용하는 명령어
document.writeln(변수명); 사용하면 문자가 새로운 줄에 출력 (ln -> line)

변수 생성 시 주의 사항

//변수명은 숫자로 시작할 수 없으나, 중간이나 끝에는 올 수 있다.
var 1str;
// 변수명은 최대한 자세하게 작성 
var randomNumber;
// 의미가 불명확한 단어들의 조합은 피해야 함 
var tmax;

자바스크립트 사용 방법

<body>
  <script src="index.js"></script>
</body>

</body> 태그 바로 위에 사용하는 것을 권장

-> JS는 웹 브라우저 위에서 구동되기 때문에 html 및 css가 모두 전개된 이후에 순서대로 사용하기 위함

변수 데이터 확인 방법

우 클릭 후 크롬 개발자 검사 or F12

03. 자바스크립트 데이터 타입

데이터 타입이란?

초콜릿도 다양한 종류가 존재하듯 변수에 전달되는 데이터 타입에도 여러 종류가 존재

8가지 데이터 타입

String	Number	Function	Array
문자열	숫자	함수	배열
Object	Boolean	undefined	null
객체	불린	정의되지 않음	널

문자열

var str1 = “Hello World”;
var str2 = ‘Nice to meet you’;
var str3 = “20”; //숫자가 아닌 문자열

“큰 따옴표” 또는 ‘작은 따옴표’ 안에 작성된 데이터

문자열 주의 사항

var str1 = “Elice’; //혼용 불가 
var str2 = “He’s a boy”; // <= 중간에 따옴표를 쓰는 경우, string을 감싸는 따옴표와 다른 따옴표를 사용
var str3 = ‘He\’s a boy’; // "\"를 사용하여 따옴표 사용

숫자

 var num1 = 10; //정수 
 var num2 = -10; //음수 
 var num3 = 3.14; //실수

별도의 기호 없이 숫자를 입력한 상태

함수

함수 유형 1

var func1 = function() {
	console.log(“Func1”);
} //함수 생성 
func1(); //함수 호출

함수 유형 2

function func1() {
    console.log(“Func1”);
} //함수 생성 
func1(); //함수 호출

• 함수 생성
function 키워드를 사용하여 생성

• 함수 호출

함수 안에 있는 코드를 실행시키겠다는 의미

var area = function(width, height) {
    return width * height;
}
area(10, 20)

• 매개변수: 인자로부터 전달받은 값이 들어가는 통로. 상황에따라생략가능

• 인자: 함수에게 전달하는 데이터
• return: 함수 안에 데이터를 저장할 때 사용

함수 데이터 호출 방법

var area = function(width, height) {
    return width * height;
}

//새 변수를 생성한 후, 그 변수를 console.log()로 감싸기 
var result = area(10, 20);
console.log(result);

//함수 자체를 console.log()로 감싸기 
console.log(area(10, 20));

배열

 var fruit = [“사과”, “배”, “수박”]; 
 console.log(fruit); //데이터 확인

비슷한 성격을 갖고 있는 데이터를 하나의 변수 안에서 관리

배열 데이터 추출

var fruit = [“사과”, “배”, “수박”]; 
//             0     1     2
console.log(fruit[0]); //0번째 인덱스의 데이터 추출

데이터의 좌표값(index) 작성 첫번째좌표값은 0

배열 데이터 변경하기

var fruit = [“사과”, “배”, “수박”]; 
fruit[0] = “포도”;
console.log(fruit); // [“포도”, “배”, “수박”]

인덱스를 사용하여 접근 후 새로운 데이터 대입

객체

var student = {
	name : “inkwon”,     //프로퍼티: 데이터
	age : 20,
	skills : [“자바스크립트”, “HTML”, “CSS”],
	sum : function (num1, num2) { return num1 + num2;}  //메서드
}

프로퍼티, 메서드, 데이터로 구성

여러 종류의 데이터 타입 삽입 가능

프로퍼티: 이름을 가진 데이터
메소드: 이름을 가진 함수

객체가 가지고 있는 함수=> 메소드
객체가 가지고 있는 데이터 =>프로퍼티

객체 데이터 출력하기

 var student = {
	name : “inkwon”,
	age : 20,
	skills : [“자바스크립트”, “HTML”, “CSS”], 
    sum : function (num1, num2) {
		return num1 + num2; 
    }
}
console.log(student.name); //객체명.프로퍼티명 
console.log(student[‘name’]); //객체명[“프로퍼티명”]

객체 데이터 변경하기

var student = {
    name : “inkwon”,
	age : 20,
	skills : [“자바스크립트”, “HTML”, “CSS”], sum : function (num1, num2) {
        return num1 + num2;
    }
}
student.name = “Park”; //name 프로퍼티의 데이터 변경 
console.log(student.name); //Park 출력

Undefined, null

var unde;
var empty = null;

• undefined: 변수 안에 데이터를 입력하지 않은 상태 (데이터가 없는 것)
• null: 개발자가 임의로 변수 안에 빈 데이터를 삽입한 상태(빈 데이터를 지정한 것)

Boolean

var t = true;
var f = false;

참 또는 거짓 데이터가 들어가 있는 상태

04. 자바스크립트의 프로퍼티와 메서드

데이터 타입의 프로퍼티와 메서드

자바스크립트에서 사용자를 위해 사전에 작성된 편의 기능

(참고: 표준 내장 객체 - JavaScript)

문자열 프로퍼티와 메서드

var str1 = “Hello World”;
str1.length; // 문자열 길이 11
str1.charAt(0); // 문자 H 추출
str1.split(“ ”); // 공백 기준으로 문자 나눈 후 배열 [Hello, World]로 출력

배열 프로퍼티와 메서드

var fruit = [“사과”, “배”, “포도”];
fruit.length; // 데이터 개수

fruit.push(“딸기”); // 배열 뒤에 데이터 삽입 
fruit.unshift(“레몬”); // 배열 앞에 데이터 삽입

fruit.pop(); // 배열 뒤의 데이터 제거 
fruit.shift(); // 배열 앞의 데이터 제거

math의 수학 연산 메서드

 Math.abs(-3); // 절대값 
 Math.ceil(0.3); // 올림 
 Math.floor(10.9); // 내림 
 Math.random(); // 임의의 숫자 출력

문자를 숫자로 변환하는 메서드

 parseInt(“20.6”); // 정수 형태의 20 변환 
 parseFloat(“20.6”); // 실수 형태의 20.6 변환

# parse: 구문 분석

2. 자바스크립트 기초 문법 및 활용

01. 연산자

산술 연산자

 console.log(20 + 10); //30 
 console.log(20 - 10); //10 
 console.log(20 * 10); //200 
 console.log(20 / 10); //2 
 console.log(20 % 10); //0

숫자 뿐 아니라 문자열도 산술 연산자 사용 가능

 console.log("20" + "10"); //2010 
 console.log("20" – "10"); //10 
 console.log("20" * "10"); //200 
 console.log("20" / "10"); //2 
 console.log("20" % "10"); //0

문자열 산술 연산자 사용 시 "+"를 제외하고 숫자와 동일하게 사용된다.

증감 연산자

var num = 10;
console.log(++num); //num+1 후 num 출력
console.log(--num); //num-1 후 num 출력

console.log(num++); //num 출력 후 num+1 
console.log(num--); //num 출력 후 num-1

++1씩증가 --1씩감소

비교 연산자

console.log(10 == 20); //값이 같다 
console.log(10 === 20); //데이터 타입과 값이 같다 
console.log(10 !== 20); //값이 같지 않다

console.log(10 > 20);
console.log(10 >= 20);
console.log(10 < 20);
console.log(10 <= 20);

==와 ===의 차이

console.log(10 == "10");   //true
console.log(10 === "10");  //false

Boolean 데이터 타입인 true 혹은 false 반환

논리 연산자

//앞 뒤 조건 모두 참인 경우에만 true 반환하는 AND연산자 
console.log(10 === 10 && 20 === 30);
 
// 둘 중 하나만 참이여도 true 반환하는 OR연산자 
console.log(10 === 10 || 20 === 30);

02. 조건문

조건문

주어진 조건에 따라 결과값을 출력하는 구문

조건으로는 비교 연산자 또는 논리 연산자 사용

if 문

var a = 20; 
var b = 40;
if ( a < b ) {
	console.log("a는 b보다 작다.");
}

if ( 조건 ) { 수행할 명령 }
만약 a<b가 참이라면 중괄호 안의 코드를 실행

if ~ else 문

var a = 20;
var b = 40;

if ( a > b ) {
	console.log("a는 b보다 크다.");
} else {
	console.log("a는 b보다 작거나 같다.");
}

조건이 true면 if문 false면 else문 실행

else if 문

var a = 20;
var b = 40;
var c = 60;

if ( a > b ) { console.log("a는 b보다 크다.");
} else if ( b > c ) { console.log("b는 c보다 크다.");
} else if ( a < c ) { console.log("a는 c보다 작다.");
} else if ( b < c ) { console.log("b는 c보다 작다.");
} else { console.log(“모든 조건을 만족하지 않는다.”); 
}

여러 개의 조건문을 생성할 때 사용

중첩 if문

var a = 20;
var b = 40;
if ( a !== b ) {
	if (a > b) { 
    	console.log(“a는 b보다 크다”); 
    } else { 
    	console.log("a는 b보다 작다”); 
    }
} else { 
	console.log("a와 b는 같다”); 
}

if문 안에 또 다른 if문을 삽입할 때 사용

03. 반복문

반복문이 필요한 경우

console.log( 2 * 1 ); 
console.log( 2 * 2 ); 
console.log( 2 * 3 ); 
console.log( 2 * 4 ); 
console.log( 2 * 5 ); 
.
.	  	   고정값 가변값
console.log( 2 * 9 );

for 문

for (var i = 0; i < 10; i++) {
    console.log(i);
}

for ( 초기화한 변수값; 조건; 증감 표시) { 수행할 명령 }

while 문

var num = 0;
while (num < 10) {
    console.log(num);
    num++;
}

while ( 조건 ) { 수행할 명령 }

num<10이 참일 동안 중괄호 안의 코드를 실행

do ~ while 문

var i = 12;
do {
    console.log(i);
	i++;
} while (i < 10);

do { 수행할 명령 } while ( 조건 ) ;
while의 조건과 관계 없이, do의 명령을 무조건 실행부터 한다.

04. 자바스크립트 활용

주사위 게임

 var dice = Math.floor( Math.random() * 6 ) + 1;
               내림      0에서 1사이의 임의의 숫자 출력

소수 출력하기

 function isPrime(n) { 
 	var divisor = 2;               // 2부터 나누기 시작
    while(n > divisor) {           // n이 나누는 수 보다 클 때까지
    	if (n % divisor === 0) {   // n과 나누는 수가 나누어 떨어지면
      		return false;
    	} else {
      		divisor++;			   // 나누어 떨어지지 않는다면 나누는 수 1 증가 
  		}
  } return true;
}

문자열 거꾸로 활용하기

function reverse(str){
    var reverStr = '';
    for (var i = str.length -1; i >= 0; i--) {
	  reverStr = reverStr + str.charAt(i); 
    } return reverStr;
}
console.log(reverse(‘Hello'));  //olleH

문자열 맨 뒤부터 출력해야 하므로 i가 0이 될 때까지 1씩 감소

인덱스는 0부터 (문자열 길이-1)이라는 점 유의

3. DOM과 이벤트

01. DOM 이란?

문서 객체 모델(Document Object Model)

문서 객체 모델(Document Object Model): 객체 지향 모델로써 구조화된 문서를 표현하는 형식

HTML 문서에 대한 인터페이스

DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스
DOM은 문서의 구조화된 표현(structured representation)을 제공하여

프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다

DOM은 프로그래밍 언어와 독립적이다.
주로 자바스크립트를 사용하지만, DOM의 구현은 어떠한 언어에서도 가능

DOM의 종류

CoreDOM: 모든 문서 타입을 위한 DOM모델

HTML DOM : HTML 문서를 위한 DOM 모델

XML DOM : XML 문서를 위한 DOM 모델

HTML DOM

HTML 문서를 조작하고 접근하는 표준화된 방법

모든 HTML 요소는 HTML DOM을 통해 접근 가능

XML DOM

XML 문서에 접근하여 그 문서를 다루는 표준화된 방법을 정의

모든 XML 요소는 XML DOM을 통해 접근 가능

Document 객체

Document 객체는 웹 페이지를 의미
웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는

반드시!! Document 객체부터 시작해야 한다.

Document 메소드

HTML 요소와 관련된 작업을 도와주는 다양한 메소드 제공

• HTML 요소의 선택

• HTML 요소의 생성
• HTML 이벤트 핸들러 추가

• HTML 객체의 선택

HTML 요소의 선택

새로운 HTML 요소를 선택하기 위해 제공되는 메소드

메소드	설명
document.getElementById()	해당 아이디의 요소를 선택
document.getElemetsByClassName()	해당 클래스의 속한 쇼로를 선택
document.getElemetByName()	해당 name 속성값을 가지는 요소를 선택
document.querySelectorAll()	해당 선택자로 선택되는 요소를 모두 선택
document.querySelector()	해당 선택자로 선태되는 요소를 1개 선택

HTML 요소를 생성하기 위해 제공되는 메소드

메소드	설명
document.createElement()	지정된 HTML 요소를 생성
document.write	HTML 출력 스트림을 통해 텍스트를 출력

HTML 이벤트 핸들러 추가

HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 속성

속성	설명
요소.onclick = function() {}	마우스 클릭 이벤트와 연결된 이벤트 핸들러

DOM의 트리 구조 (HTML -> DOM)

<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 기초</title> </head>
<body>
  <article>
    <header>header</header>
    <section>
      <header>header 1</header>
	  section 1
    </section>
  </article>
</body> 
</html>

02. 자바스크립트와 DOM

DOM 요소의 선택

// HTML <li> 요소를 선택
var selectedItem = document.getElementsByTagName("li");
// 아이디가 “id"인 요소를 선택
var selectedItem = document.getElementById(“id");
// 클래스가 "odd"인 요소를 선택
var selectedItem = document.getElementsByClassName("odd");
// name 속성값이 "first"인 요소를 선택
var selectedItem = document.getElementsByName("first");

DOM 요소의 스타일 변경

// 아이디가 "even"인 요소를 선택
var selectedItem = document.getElementById("even");
// 선택된 요소의 텍스트 색상을 변경 
selectedItem.style.color = "red";

DOM 요소의 내용 변경

// 아이디가 "text"인 요소를 선택
var str = document.getElementById("text");
// 선택된 요소의 내용을 변경
str.innerHTML = "요소의 내용을 바꿉니다";

03. Node 객체

노드(Node)와 노드 트리

HTML DOM에서 정보를 저장하는 계층적 단위

노드 트리는 노드들의 집합으로, 노드 간의 관계를 나타낸다.

자바스크립트에서는
HTML DOM을 이용하여 노드 트리에 포함된 모든노드에 접근할 수 있다.

노드 간의 관계

노드트리의 모든 노드는 서로 계층적 관계를 맺고 있다.

노드의 종류

• 문서 노드(document node): HTML 문서 전체를 나타내는 노드 모든

• 요소 노드(element node): 모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드 노드

• 주석 노드(comment node): HTML 문서의 모든 주석은 주석 (주석 노드는 잘 사용하지 않는다)

• 속성 노드(attribute node): 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가진다.
하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않는다.

• 텍스트 노드(text node): HTML 문서의 모든 텍스트는 텍스트 노드

노드의 값

노드에 대한 정보는 다음과 같은 프로퍼티를 통해 접근할 수 있다.

nodeName (이름), nodeValue (값), nodeType (타입)

// HTML 문서의 모든 자식 노드 중에서 첫 번째 노드의 이름을 선택 
document.childNodes[0].nodeName;
// 아이디가 "heading"인 요소의 첫 번째 자식 노드의 노드값을 선택 
document.getElementById("heading").firstChild.nodeValue;
// 아이디가 "heading"인 요소의 첫 번째 자식 노드의 타입을 선택 
document.getElementById("heading").firstChild.nodeType;

04. 이벤트

이벤트란?

웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생

자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.

이벤트 타입

발생한 이벤트의 종류 (폼, 키보드, 마우스, HTML DOM, Window 객체 등)

// 마우스 클릭 이벤트 예시
<p onclick="changeText(this)">여길 클릭하세요!</p>

<script>
function changeText(element) {
	element.innerHTML = "내용이 바뀌었습니다!"; 
}
</script>

# this: p태그에서 나온태그 도움 객체에 자기 자신을 얘기함

이벤트 핸들러

이벤트가 발생했을 때 그 처리를 담당하는 함수
지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 실행

// 이 함수는 HTML 문서가 로드될 때 실행됨. 
window.onload = function() {
	// 아이디가 "text"인 요소를 선택함.
	var text = document.getElementById("text");
	text.innerHTML = "HTML 문서가 로드되었습니다."; 
}

4. 페이지 만들기

다양한 기능

e.preventDefault(); // 특정 기능 정지 메서드
xxx.querySelector("#intro"); // 1개의 태그를 css 선택자 기반으로 가져온다. 
xxx.querySelectorAll("a"); // 여러 개의 태그를 css 선택자 기반으로 가져온다. 
xxx.getAttribute("href"); //특정 태그가 갖고 있는 속성의 속성값을 가져온다. 
window.scrollTo({ //특정 지점으로 스크롤링
	'behavior': 'smooth', // 부드럽게 이동
	'top': xxx.offsetTop // 특정 영역의 위에서의 좌표값 
});

# offsetTop은 선택된 영역의 상단까지의 거리를 절대 좌표로 반환하는 메서드

이미지 슬라이드 만들기

setInterval(function(){
   ...
}, 3000); // 3초 간격(ms단위)으로 반복적으로 코드 실행 
xxx.animate({ // 해당 Element에 애니메이션 효과를 준다
    marginLeft: ["0px", "1024px"]
}, {
	duration: 500, // ms
    easing: "ease", // easing: 애니매이션 속도를 얼마나 빠르게 할 것인지 나타내는 것
    iterations: 1, // 몇번을 반복할지
    fill: "both" // 어떻게 채울지 / both: 양쪽 모두
}) // 애니메이션 실행

setInterval(): 자바스크립트에서 일정 시간마다 반복적으로 코드를 실행하고자 할 때 사용되는 코드

기타

xxx.classList.remove(클래스명) // 요소에서 특정 클래스 제거 
xxx.classList.add(클래스명) // 요소에 클래스명 추가 
nodeList.forEach(function(item) { // 배열의 모든 요소에 코드 적용
	console.log(item) 
})

xxx.previousElementSibling; 
// 이전 요소 선택 
xxx.nextElementSibling;
// 다음 요소 선택 
xxx.parentElement;
// 부모 요소 선택 
xxx.firstElementChild; 
// 첫번째 자식 요소 선택 
xxx.lastElementChild;
// 마지막 자식 요소 선택

// 비교 예시
<ul> 
	<li>메뉴1</li>
	<li>메뉴2</li> 
    <li>메뉴3</li> 
    <li>메뉴4</li> 
    <li>메뉴5</li>
</ul>

참고

https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

자바스크립트 - 위키백과, 우리 모두의 백과사전

자바스크립트JavaScript패러다임프로그래밍 패러다임: 스크립트 언어, 객체 지향 프로그래밍 (프로토타입 기반 프로그래밍), 명령형 프로그래밍, 함수형 프로그래밍, 사건 기반 프로그래밍설계자

ko.wikipedia.org

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects

표준 내장 객체 - JavaScript | MDN

이 장은 JavaScript의 모든 표준 내장 객체와 그 메서드 및 속성을 나열합니다.

developer.mozilla.org

'IT > 엘리스 AI 트랙' 카테고리의 다른 글

[엘리스 AI 트랙 2기] 4주차-SQL (07/13) (1)	2021.07.14
[엘리스 AI 트랙 2기] 3주차-JavaScript(07/08) (0)	2021.07.09
[엘리스 AI 트랙 2기] 3주차-Web(07/06) (0)	2021.07.06
[엘리스 AI 트랙 2기] 3주-HTML/CSS(07/05) (0)	2021.07.05
[엘리스 AI 트랙 2기] 02주차-실시간 이론강의. 알고리즘(06/30) (0)	2021.07.05