FE가 되고싶니? 나도✨

Array 객체의 메소드 (= 배열에 적용할 수 있는 전용 함수다.)

String 객체의 메소드

Join()

▶ 하나 하나의 배열 요소들이 하나의 문자열로 호출

▶ 매개 변수 자리에 무엇이 들어가는지에 따라서 결과 값이 달라진다.

▶ join의 배열을 문자열로 반환해준다.

▶ 매개변수 자리에 아무것도 넣지 않으면 ,(쉼표)로 구분하고 ' '(빈 문자열)을 넣으면 띄어쓰기 없이 모두 붙여서 반환한다.

▶ 만약 배열의 값 사이에 구분을 짓고 싶으면 매개변수 자리에 넣어준다.

▶ join의 장점은 배열을 문자열로 바꾸는데 의의가 있다.

EX) 바람, 비, 물이라는 총 3개의 요소들을 1개의 문자열로 반환

reverse()

 

▶ 배열의 값을 역순으로 반환한다.

▶ cf) 배열이 아닌 대상에게 배열 메소드를 사용할 경우 자바스크립트 파일에서는 오류가 나지 않더라도 브라우저 상에서는 오류가 발생된다. (사용할 수 없는 것)

 

concat()

▶ 배열과 배열을 합쳐서 새로운 배열을 만든다.

▶ join과의 차이점을 기억해두기

split(분리자)

▶ 배열 메소드 join()과 정반대

▶ 분리하고자 하는 문자(‘ ’)를 기준으로 분리하여 배열로 반환

→컴퓨터에선 비어있는 공간 = (‘ ’) 도 문자로 인식한다.

replace()

▶ replace(“무엇을”, “무엇으로” ); 매개변수 자리에 코딩한다.

▶ replace는 처음 만나는 문자 1개만 변경해준다. (중요 포인트)

toLowerCase() / toUpperCase()

▶ 모두 소문자 / 대문자 로 변환

match()

▶ 0: "HELLO" :: 100% 일치하는 문자열을 찾았다는 뜻

브라우저 내장객체

▶ 웹 브라우저 관련 객체

▶ 브라우저의 창, 문서, 도구모음, 상태표시줄 등 해당하는 객체 정보를 제어

▶ 계층구조로 되어 상위 객체, 하위 객체가 있다.

객체의 종류

Window 객체 (최상위 객체)	웹 브라우저 창을 위한 속성과 메소드를 제공 하위 객체 : Docu, frame, his, loca 객체 → 종종 하위 객체의 특징을 window에 적어두기도 하는데 window는 최상위 객체라 모든 객체를 담고 있으므로 맞다.
Document 객체	웹 브라우저에서 실행되는 HTML 문서의 본문(BODY) 정보를 관리 하위 객체 : Anchor, Area, Form, image, Layer, Link 객체
Frame 객체	HTML 문서의 프레임 정보를 제공
History 객체	웹 브라우저의 히스토리 정보를 이용하여 이동
Location 객체	웹 브라우저 주소표시줄의 URL 주소 정보를 제공

 

Window 객체의 속성

self / window	자기 자신의 창
top	현재 프레임의 최상위 프레임 (자기 자신의 창을 가리킬 수 있다.)
opner	현재 창을 열게 한(생성한) 창 참조
closed	창이 닫혀 있는 상태 식별
history / location	현재 창의 history 객체 / location (주소입력) 객체

 

Window 객체의 메소드

alert()	알림창을 보여줌	focus()	특정객체에 포커스 설정
open()	새 창 열기	blur()	포커스 삭제
close()	창 닫기	print()	화면 내용 프린트
confirm()	[확인] 대화상자	setinterval()	일정 시간마다 지정된 처리를 반복 호출
eval()	문자열을 숫자로 변환	setTimeout()	일정 시간 후 지정된 처리를 호출

 

 

객체와 메소드(method)

▶객체는 데이터의 조합으로 속성과 메소드를 함께 가리키는 단위이다.

▶속성과 메서드를 합한 값이 객체가 된다.

▶속성 (property) : 객체가 가진 성질 , 또는 상태, 정적인 것, 객체 안에 함수가 아닌 값 = 속성

▶메소드 : 객체에 속한 (종속적인) 함수로 객체의 동작을 나타낸다, 동적인 것, 객체 안에 존속되어 있는 함수 = 메소드

함수

▶함수란 특정한 작업을 독립적으로 수행하는 단위

EX)리모컨 : 음소거라는 함수, 1, 2, 3, 4 숫자 함수 채널 상승 함수 등

▶메소드(method) : 함수안의 부분집합으로 객체에 속한 함수를 메소드라고 부르고 이 메소드는 객체 클래스로부터 종속적이다.

▶내장함수 : 이미 시스템에 정의되어있는 함수로 사용자가 정의 없이 사용할 수 있는 것

▶매개변수 : 함수안에 어떤 값을 입력하여야 할 때 () 안에 넣는 것 . 기본값은 비워져 있다.

EX)함수 != 붕어빵틀, 요즘 빵은 슈크림, 고구마 등 들어가는게 많음. 

▶function ⇒함수를 생성하겠다는 선언

function 이름 ⇒ 함수의 이름이 작성되어야 한다.

function 이름() ⇒ ()자리는 매개변수의 자리

function 이름(){} ⇒ {}자리는 해당 함수의 기능을 적어주는 자리 

▶함수를 호출 할 때 매개변수 자리에 값을 넣으면 해당 값은 함수의 매개변수를 타고 함수 내부로 이동해서 작동한다.

▶따라서 매개변수가 있는 함수는 호출 할 때 매개변수 자리에 해당 값을 넣어야 한다. 넣지 않을 경우 UNDEFINED라는 오류가 발생한다.

변수 :

데이터를 저장하고 참조(사용)하는 데이터의 이름. var, let 재사용이 가능하다. (var는 되도록 사용하지 않도록 하자. 권장사항이 아님.) 

let a = 2;
let b = 5;

console.log(a + b); // 7 
console.log(a - b); // -3
console.log(a * b); // 10
console.log(a / b); // 0.4

//변수의 이름을 명시하고 데이터를 넣는 행위를 변수를 선언한다 라고 한다.

상수 :

값(데이터)의 재할당 불가! const로 시작하며 선언, 값을 한번 넣으면 변경이 불가능하다.

const a = 12;
console.log(a); //12

a = 999;
console.log(a); // TypeError: Assignment to constant variable.

변수는 왜 사용하는가 ?

1. 자주 쓰는 데이터 값을 효율적으로 관리하기 위해서

2. 한 번 찾은 데이터를 재활용 하기 위해서

변수 선언방법 3가지

var 변수이름 = 데이터;

let 변수이름 = 데이터;

const 상수이름 = 데이터;

▶변수명은 중복해서 사용은 불가능. 만약 중복 할 경우 나중에 부여된 값이 덮어 쓴다. (한 공간에는 하나의 값만 부여 가능)

변수명 작성시 유의점

1. 숫자로는 시작 불가

2. 특수문자 삽입은 불가능 (예외 : _(언더 바), $(달러))

3. -(빼기) 사용불가 (예약어이기 때문에)

4. 대소문자 구분해야 된다.

5. 예약어들은 모두 불가

6. 한글을 되도록 피하는게 좋다.

변수의 종류 (유효범위, scope)

지역변수 (local vaiable) : 선언된 {} 안에서만 공유가 된다. 선언된 {}는 대부분 함수이다.

전역변수 (global vaiable) : {} 밖에서 선언되어 js 페이지 전체에서 사용이 가능한 변수

▶변수끼리 연산도 가능하다.