[JavaScript]-자바스크립트 기초

 

 

1. 자바스크립트 개요

출처 입력

1-1. 자바스크립트 특징

- 자바스크립트는 프로토타입 기반의 객체 지향 언어이다.

- 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다.

- 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다

**프로토타입정리하기

 

1-2. 프로토타입

자바스크립트의 모든 객체는 프로토타입이라는 객체를 가지고 있다.

모든 객체는 그들의 프로토타입으로부터 속성과 메소드를 상속받는다.

자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입이라고 한다.

var date=new Data(); // 디폴트 프로토타입-object.prototype, 부모 프로토타입-Date.prototype var obj= new Object(); //부모 프로토타입-object.prototype var arr=new Array(); //부모 프로토타입-Array.prototype function Dog(color, name, age){ //Dog라는 생성자 함수 작성(= 사용자 정의 프로토타입 생성) this.color=color; this.name=name; this.age=age;}

 

** 즉 생성된 객체의 부모 객체를 프로토타입이라 하고 자바스크립트의 모든 객체는 object.prototype (최상위 객체)를 디폴트로 상속받는다.

 

(1) 인스턴스 객체에 속성 및 메소드 추가

var myDog=new Dog("흰생","댕댕이",1); //부모 프로토타입-Dog과 new를 사용하여 인스턴스 객체 생성 myDog.family="코카 스파니엘"; //family 속성을 추가 console.log(myDog.family); //코카 스파니엘 console.log(Dog.family); //오류

 

위에서 추가된 family 속성은 myDog 인스턴스에만 추가되고 Dog 객체(프로토타입)에는 추가되지 않는다.

 

(2) 프로토타입에 속성 및 메소드 추가

function Dog(color, name, age){ //Dog라는 생성자 함수 작성(= 사용자 정의 프로토타입 생성) this.color=color; this.name=name; this.age=age; this.family="치와와"} //생성자 함수 내에 직접 추가 //prototype 속성 사용하여 추가 Dog.prototype.breed=function(){ return this.color+" "+this.family;};

 

생성자 함수에 직접 추가하거나 .prototype을 사용하여 추가 할 수 있다.

 

 

1-3. 소스코드 작성 규칙

- 대소문자구별하기

- 들여쓰기하기

- 세미콜론으로 문장 구분하기

 

1-4. 자바스크립트의 입출력

셀 전체 선택

• 0열 선택0열 다음에 열 추가
• 1열 선택1열 다음에 열 추가

• 0행 선택0행 다음에 행 추가
• 1행 선택1행 다음에 행 추가

열 너비 조절

행 높이 조절

입력	출력
prompt()함수	alert() 함수, document.write()함수, console.log() 함수

• 셀 병합
• 행 분할
• 열 분할
• 너비 맞춤
• 삭제

2. 변수와 자료형

출처 입력

2-1. 자료형

(1) 자료형의 종류

셀 전체 선택

• 0열 선택0열 다음에 열 추가
• 1열 선택1열 다음에 열 추가

• 0행 선택0행 다음에 행 추가
• 1행 선택1행 다음에 행 추가

열 너비 조절

행 높이 조절

기본형	string(문자열), number(숫자), boolean(논리), undefined, null
복합형	array(배열), object(객체)

• 셀 병합
• 행 분할
• 열 분할
• 너비 맞춤
• 삭제

**복합형은 객체와 배열 정리 부분 참고!!

 

2-2. 변수

자바스크립트는 변수의 자료형을 미리 지정하지 않는다 (느슨한 자료형 체크 방식)

변수에 값을 할당할 때 값에 따라 자료형이 지정된다.

 

(1) 변수 선언시 사용하는 예약어

var: 변수 재선언이 가능하다

let: 변수 재선언불가, 변수에 값 재할당 가능

const: 변수 재선언불가, 변수값에 재할당 불가

 

(2) 변수가 적영되는 범위=스코프

지역 변수: 함수 안에서 선언하고 함수 안에서만 사용하는 변수

전역 변수: 스크립트 소스 전체에서 사용할 수 있는 변수

블록 변수: 변수를 선언한 블록 내에서만 사용할 수 있는 변수

var globalVar = 100; //전역변수 선언 var localVar = 100; //전역변수 선언 test(); function test(){ globalVar = 50; //전역변수 값 재할당 var localVar = 50; //지역변수 선언: test()밖의 전역변수 localVar에 영향을 주지 않음 if( localVar != null){ let blockVar = "here is in block"; //블록변수 선언 } console.log(globalVar); //50 console.log(localVar); //50 console.log(blockVar); //error }

 

3. 제어문

출처 입력

3-1. 조건문과 반복문

셀 전체 선택

• 0열 선택0열 다음에 열 추가
• 1열 선택1열 다음에 열 추가

• 0행 선택0행 다음에 행 추가
• 1행 선택1행 다음에 행 추가

열 너비 조절

행 높이 조절

조건문	if/if-else/조건 연산자: (조건문)?(참일때 실행):(거짓일 때 실행)/switch-case
반복문	for/while/do-while

• 셀 병합
• 행 분할
• 열 분할
• 너비 맞춤
• 삭제

**) ES6에서의 for..of문

var seasons = ["spring","summer","fall","winter"]; for (let value of datas) console.log(value); //spring summer fall winter

 

여러값을 차례로 순회하고 인덱스 값이 필요 없는 경우 사용한다

 

4. 함수 function()

출처 입력

4-1. 함수의 선언과 실행

//함수선언 function addNumber (a,b) { var sum = a + b; console.log(sum); } //함수실행 addNumber(10,5);

 

 

4-2. 함수 표현식

 

(1) 익명 함수

//익명함수 예시 var addNum = function (a,b) { return a+b; } var sum = addNum(10,20); console.log(sum); //30

 

함수 자체가 식이기 때문에 변수에 할당할 수 있고, 다른 함수의 매개변수로 사용할 수 있다

함수 선헌 후 변수에 할당하여 사용하고, 변수를 함수의 이름처럼 사용하여 익명 함수를 실행할 수 있다

 

(2) 즉시 실행 함수

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

 

함수를 정의함과 동시에 실행하는 함수이다.

함수를 소괄호(())로 감싸며 소스의 끝에 세미콜론을 붙여 실행한다.

 

(3)화살표 함수

//매개변수가 없는 화살표 함수 const hi = () => "안녕하세요"; hi(); //"안녕하세요" //매개변수가 1개인 경우 const hi2 = name => "${name}님, 안녕하세요"; hi2("영지"); //"영지님, 안녕하세요"; //매개변수가 2개 이상인 경우 const add = (a,b) => a+b; add(2,3); //5

 

ES6에 새롭게 도입된 함수 표현식이다.

function 예약어를 사용하지 않는다.

 

5. 객체와 배열

출처 입력

객체(object)

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

객체의 종류: 내장객체, 문서객체모델(DOM), 브라우저객체 모델(BOM), 사용자 정의 객체

객체의 구성: 속성 & 메소드

참조방법: 객체변수에 마침표(.)를 찍고 속성의 이름을 적어 참조한다

 

5-1. 객체 생성 방법

 

(1) 리터럴 표기법

var book = { //객체 이름 title: "자바스크립트", //속성이름-title,속성값-자바스크립트 author:"고쌤", pages:500, price:15000, info: function(){ //함수이름-info alert(this.title + "책의 분량은" + this.pages + "쪽입니다.");} }; //객체의 속성과 메소드 참조하기 book.title; //자바스크립트 book.info() //알림창 뜸

 

객체를 선언하면서 동시에 값을 지정해주는 방식이다.

객체의 틀을 만들지 않고 개별적으로 객체를 선언하는 방식이다.

 

(2) 생성자 함수 사용

function Book(author, pages, price, title){ //생성자 함수 정의 this.author=author; this.pages=pages; this.price=price; this.title=title;} //생성자 함수로 인스턴스(객체) 만들기 jsBook=new Book("홍길동", 500, 15000, "자바스크립트"); //jsBook이라는 인스턴스 만들기

 

function 예약어를 사용해 프로토타입 객체를 만들고 new 예약어를 사용해 인스턴스 객체를 만들어 사용한다.

리터럴 표기법은 객체를 한번만 만들어 내는 반면 생성자 함수를 사용하면 객체를 여러번 만들 수 있다.

생성자 함수로 틀을 만들고 틀을 복제한 인스턴스(객체)를 만드는 방식이다.

 

(3) object.create() 메소드

var obj=Object.create(null, //객체의 프로토타입을 null로 지정여 생성 x:{value:100, enumerable: true}, y:{value: 200, enumerable: true}); Object.getPrototypeof(obj); //null을 반환

 

사용자가 프로토타입 객체(부모 객체)를 직접 명시할 수 있다.

 

배열(Array)

정렬된 값들의 집합이며 Array 객체로 다뤄진다

 

5-2. 배열 생성 방법

리터럴 방식 : var numbers=["1","2',"3"];

Array 객체 사용 : var numbers=new Array("1","2","3");

 

5-3. Array 메소드

 

(1)원본 배열을 변경하는 메소드

셀 전체 선택

• 0열 선택0열 다음에 열 추가
• 1열 선택1열 다음에 열 추가

• 0행 선택0행 다음에 행 추가
• 1행 선택1행 다음에 행 추가
• 2행 선택2행 다음에 행 추가
• 3행 선택3행 다음에 행 추가
• 4행 선택4행 다음에 행 추가
• 5행 선택5행 다음에 행 추가
• 6행 선택6행 다음에 행 추가

열 너비 조절

행 높이 조절

push()	하나 이상의 요소를 배열의 가장 마지막에 추가하고, 배열의 총 길이를 반환
pop()	배열의 가장 마지막 요소를 제거하고, 그 제거된 요소를 반환
shift()	배열의 가장 첫 요소를 제거하고, 그 제거된 요소를 반환
unshiift()	하나 이상의 요소를 배열의 가장 앞에 추가하고, 배열의 총 길이를 반환
sort()	해당 배열의 배열 요소들을 알파벳 순서 혹은 숫자는 자릿수 별로 비교하여 정렬
reverse()	배열 요소의 순서를 전부 반대로 교체
splice()	기존의 배열 요소를 제거하거나 새로운 배열 요소를 추가하여 배열의 내용을 변경하고 삭제 또는 추가한 요소로 이루어진 배열을 반환

• 셀 병합
• 행 분할
• 열 분할
• 너비 맞춤
• 삭제

splice() 함수 예제

var numbers=[0,1,2,3,4,5]; //인수가 하나일 때 number.splice(2) //인덱스 2 이후 끝까지 삭제 >[2,3,4,5] //반환값 numbers; //[0,1] - 수정된 배열 //인수가 두개일 때 var study=["html", "css", "web", "jquery"]; study.splice(2,1) //인덱스 2에서 한개 삭제 >["web"] //빈환값 study; //["html", "css", "jquery"] - 수정된 배열 //인수가 세개일 때 var chars=["a","e","f"] chars.splice(2,1,"c") //인덱스 2에서 1개 삭제 후 새로운 요소 추가 >["f"] //삭제된 값 반환 chars; //["a", "e","c"] - 수정된 배열 //요소를 추가할 때 chars.splice(1,0,"3","4") //인덱스 1부터 0개 삭제하고 새로운 요소들 추가 >[] //삭제한 값들 없음 chars; //["a", "3", "4", "e", "c"] - 수정된 배열

 

(2) 원본 배열은 변경하지 않고 참조만 하는 메소드

셀 전체 선택

• 0열 선택0열 다음에 열 추가
• 1열 선택1열 다음에 열 추가

• 0행 선택0행 다음에 행 추가
• 1행 선택1행 다음에 행 추가
• 2행 선택2행 다음에 행 추가
• 3행 선택3행 다음에 행 추가

열 너비 조절

행 높이 조절

join()	배열의 모든 요소를 하나의 문자열로 반환
slice()	전달밭은 시작 인덱스부터 종료 인덱스 바로 앞까지의 모든 배열 요소를 추출하여 만든 새로운 배열을 반환
concat()	해당 배열의 뒤에 인수로 전달받은 배열을 합쳐서 만든 새로운 배열을 반환
toString()	해당 배열의 모든 요소를 하나의 문자열로 반환

• 셀 병합
• 행 분할
• 열 분할
• 너비 맞춤
• 삭제

**splice() 와 slice()의 공통점과 차이점

셀 전체 선택

• 0열 선택0열 다음에 열 추가
• 1열 선택1열 다음에 열 추가

• 0행 선택0행 다음에 행 추가
• 1행 선택1행 다음에 행 추가

열 너비 조절

행 높이 조절

공통점	특정 위치의 요소를 사용한다
차이점	splice는 원래 배열을 수정하지만 slice는 원래배열을 수정하지 않고 참조만 한다

• 셀 병합
• 행 분할
• 열 분할
• 너비 맞춤
• 삭제

 

(3) 원본 배열을 반복적으로 참조하는 메소드

셀 전체 선택

• 0열 선택0열 다음에 열 추가
• 1열 선택1열 다음에 열 추가

• 0행 선택0행 다음에 행 추가
• 1행 선택1행 다음에 행 추가
• 2행 선택2행 다음에 행 추가

열 너비 조절

행 높이 조절

forEach()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행
map()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후 그 실행 결과를 새로운 배열로 반환
filter()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행 한 후 그 결과값이 true인 요소들만들 새로운 배열에 담아 반환

• 셀 병합
• 행 분할
• 열 분할
• 너비 맞춤
• 삭제

**ES6에서 추가된 메소드들

 

from() 메소드

Array.from(1,2,3); //[1,2,3] var myMap=new Map([1,2],[3,4]); Array.from(myMap); //[1,2,3,4] - 반복할 수 있는 객체 Array.from("JavaScript") //[J,a,v,a,S,c,r,i,p,t] - 배열과 비슷한 객체(length 속성 등)

 

배열과 비슷한 객체: length 속성과 인덱스 된 요소를 가지고 있는 객체

반복할 수 있는 객체: map과 set 객체 및 문자열과 같이 해당 요소를 개별적으로 선택 할 수 있는 객체

들을 배열처럼 변환시켜 준다.

**하지만 이렇게 생성된 객체는 Array 객체가 아닌 Array 객체의 자식 클래스이다.

 

of() 메소드

new Array(10); //길이가 10인 빈 배열을 생성 Array.of(10); //인수 10을 요소로 가지는 배열을 생성

 

인수로 전달받은 값을 가진 새로운 Array 인스턴스를 생성한다.

 

6. 문서 객체 모델(DOM)

출처 입력

문서 객체 모델(DOM)

xml이나 html 문서에 접근하기 위한 일종의 인터페이스이다.

웹 문서의 모든 요소를 정의하고 각각의 요소에 접근하여 조작할 수 있다.

트리 구조의 형태로 이루어져 있으면 부모 자식으로 연결되어있다.

 

6-1. DOM요소에 접근하는 방식

 

셀 전체 선택

• 0열 선택0열 다음에 열 추가
• 1열 선택1열 다음에 열 추가

• 0행 선택0행 다음에 행 추가
• 1행 선택1행 다음에 행 추가
• 2행 선택2행 다음에 행 추가
• 3행 선택3행 다음에 행 추가
• 4행 선택4행 다음에 행 추가

열 너비 조절

행 높이 조절

document.getElementByTagName()	해당 태그 이름의 요소를 모두 선택함 -> 요소들 중 하나 선택할 때는 배열선택처럼 [0] 한다
document.getElementById()	해당 아이디의 요소를 선택
document.getElementsByClassName()	해당 클래스에 속한 요소를 모두 선택 ** id 선택자와는 다르게 웹 문서 안에서 class는 여러번 사용 할 수 있다
document.getElementByName()	해당 name 속성값을 가지는 요소를 모두 선택
document.querSelector() document.querySelectorAll()	해당 선택자로 선택되는 요소를 선택, 모두 선택

• 셀 병합
• 행 분할
• 열 분할
• 너비 맞춤
• 삭제

querySelector()/querySelectorAll()

document.querySelector("#heading"); //id로 요소를 선택 document.querySelectorAll(".accent"); //class로 요소들을 선택 document.quertSelector("#prod-img>img"); //자식 선택자로 접근(>)

 

id 선택자로 접근 시 샵(#)을 붙이고, class 선택자로 접근 시 마침표(.)를 붙인다.

 

6-2. DOM요소에서 속성 변경

//querySelector로 돔요소 접근 후 getAttribute()로 속성 가져오기 document.querySelector("#prod-img > img").getAttribute("src"); //querySelector로 돔요소 접근 후 setAttribute()로 속성 변경 document.querySelector("#prod-img > img").setAttribute("src","/image/coffee-2")

 

getAttribute() : 속성 가져오기

setAttribute(): 속성 변경하기

 

**form 요소 접근 - name 값 사용하기

<form name="ship"> <label class="field" for="shippingName">이름: </label> <input type="text" class="input-box" id="shippingName" name="shippingName"> //보통 name값과 id값을 같게 지정한다 </form> //접근 document.ship.shippingName ->input으로 접근

 

name 속성은 자바스크립트에서 폼 요소를 구별하고 접근할 수 있도록 html 초기부터 사용하던 방식

7. 브라우저 객체 모델(BOM)

출처 입력

브라우저 객체 모델(BOM)

웹 브라우저 전체를 객체로 관리하는 것

자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화 해놓은 것

 

(1) 브라우저 내장 객체

셀 전체 선택

• 0열 선택0열 다음에 열 추가
• 1열 선택1열 다음에 열 추가

• 0행 선택0행 다음에 행 추가
• 1행 선택1행 다음에 행 추가
• 2행 선택2행 다음에 행 추가
• 3행 선택3행 다음에 행 추가
• 4행 선택4행 다음에 행 추가
• 5행 선택5행 다음에 행 추가

열 너비 조절

행 높이 조절

window(최상위)	브라우저 창이 열릴 때마다 하나씩 만들어지는 객체 브라우저 창 안에 존재하는 모든 요소의 최상위 객체
Document	웹 문서에서 <body> 태그를 만나면 만들어지는 객체
History	현재 창에서 사용자의 방문 기록을 저장하고 있는 객체
Location	현재 페이지에 대한 url 정보를 가지고 있는 객체
Navigator	현재 사용 중인 웹 브라우저 정보를 가지고 있는 객체
Screen	현재 사용 훙인 화면 정보를 다루는 객체

• 셀 병합
• 행 분할
• 열 분할
• 너비 맞춤
• 삭제