'자바스크립트 문법 정리' 카테고리의 글 목록

자바스크립트 문법 정리

자바스크립트 설명, 문법 정리 2021.10.08

자바스크립트 설명, 문법 정리

류시우 2021. 10. 8. 14:01

2021. 10. 8. 14:01

728x90

SMALL

-------------------자바스크립트 초보자입니다 << 책보고 공부한 내용 올립니다!!!--------------

1. javescript와 DOM

DOM은 웹페이지가 일종의 문서인데, 그 문서를 표현하고 조작하고 저장하는 방법을 제공한다.

웹브라우저를 통해 화면에 나타낼 수 있으며, heml소스 자체를 나타내기로 한다.

1) 아이디를 이용하여 DOM객체 불러오기

const value = document.hetElementByld('아이디 이름')을 이용해서 element를 가져올 수 있다.

태그에 아이디를 넣어주고, 그 태그가 포함된 element를 변수에 집어 넣을 수 있다.

2) 클래스를 이용하여 DOM 불러오기

const 변수이름 = document.getElementsByClassName('클래스 이름')을 이용해서 element를 가져올 수 있다.

3) 태그 이름을 이용하여 DOM불러오기

const 변수이름 = document,hetElementsByTagName('태그이름')을 이용해서 element를 가져올 수 있다.

이런 것을 합쳐서 불러올 수 있는 기능을 가진 함수가 자바스크립트에 있으며 querySelector이다.

const vlaue = document.querySelector("클래스면(.을 붙여서 호출), 아이디면(#을 붙여서 호출), 태그이름이면 태그이름 그대로");

이런식으로 querySelector 함수를 사용하여 간단하게 element를 변수에 저장할 수 있다.

2. input에 입력한 것을 출력하는 방법

1) input 태크

input 태크는 입력을 받기 위해서 type설정을 다양하게 할 수 있으며, form 태그안에 넣는 것이 일반적이다.

<form>

<input>

</form>

<예시> javaScript를 이용해서 input 태그에 들어온 정보를 출력하는 방법(DOM 객체를 이용해서 결과 추출하기)

<!DOCTYPE html>

<head>

</head>

<body>

</form>

</body>

</html>

<form>

</form>

<ul>

</ul>

form 태그를 DOM객체로 뽑아내고 input과 ul도 뽑아준다.

1) form양식에 submit 이벤트가 추가 되었을 때 함수 생성 = submitHandler

2) input.value를 통해 현재 입력된 값 가져오기

3) 출력하기 위한 함수(outputList)를 생성, li 태크와 span 태그를 creanteElement로 생성

4) spen 태그 안에 innerText로 받아온 currentValue 값을 넣음

5) li 태크 안에 appendChild로 spen 태그를 넣은 후, ul 태그 안에 자식요소 li 태그를 appendChild로 넣는다

3. console.log() 설명

console.log()란?
자바스크립트는 html, css를 동적으로 만들어주는 기능을 담당하고 있다. (그 외에도 다양한 기능은 있다)
console.log()를 하면 콘솔창 ()안에 있는 것이 출력된다.

자바스크립트의 기본동작과정 = 브라우저에게 '누구'는 OO을 XX해라! 형식으로 동작합니다.

console.log()에서는 console이 '누구'의 주체가 될것이고, log가 XX의 주체가 될 것이고, ()안의 것이 OO의 주체가 되는 것이다.
쉽게 설명하면
console -> 객체(object)
log -> 메서드(methon)
OO -> 매개변수(parameter)가 된다.

객체안에 있는 메서드를 실행시킴으로 매개변수를 작동시키는 작업이라고 볼 수 있다.
console.log()안에 매개변수는 텍스트가 올 수 있고, 다른수식도 올 수 있다.

텍스트를 출력하고 싶다면 작은 따옴표로 감싸거나 큰 따옴표로 감싸서 텍스트라고 표시해주어야 한다.

console.warn() -> 경고 표시
console.error() -> 에러 표시
console.dir() -> DOM객체의 세부정보 확인

4. javascript 작성

<html>

<head>

<head>

<body>

<h1>javascript는 어디에 작성하는가?</h1>

<h2>

javascript는 어디에 작성하는가? javascript는 어디에 작성하는가?

</h2>

console.log("HELLO");

</script>

</body>

<html>

html파일 작성을 마친 후, body 태그가 끝나기 직전에 <script></scripr> 태그를 이용하여

여기서부터는 javascript문법을 따라서 해석해주세요! 라고 명령하면 된다.

왜 밑에 작성하는지 궁금할 수 있다 위에 작성해도 무방하다. 하지만 지금은 코드 수가 적어서 밑에 적어도 무방하지만,자바스크립트의 코드수가 길어지면 웹사이트를 로드하는데 오래걸린다.

때문에 html 밑에 작성하면 화면이 보여지고, 동적인 작업은 좀 오래걸리더라도 웹페이지가 정상작동하는구나 하고 보여질 수 있기 때문이다.

외부에서불러와서 작성하는 방법

<.js 파일 만들기 예시>

<html>

<head>

</head>

<body>

<h1>javascript는 어디에 작성하는가?</h1>

<h2>

javascript는 어디에 작성하는가? javascript는 어디에 작성하는가?

</h2>

</body>

<html>

src속성을 이용하여 hello.js라는 파일을 불러오면 된다. 같은 폴더안에 있다면 위의 예제처럼 불러오면 되고,

그 파일의 루트를 찾아서 불러와도 된다.

5. javescript의 데이터타입(원시타입, 객체에 대한 설명)

자바스크립트 데이터 타입이란? :

데이터는 변수에 값을 넣을 때 등등 어떠한 값을 의미한다. num2; 에서 2가 데이터가 된다.

자바스크립트는 데이터 타입이 동적 타입이다

C언어나 JAVA언어는 데이터에 따라 타입을 다르게 지정해줘야 하는 반면, 자바스크립트는 자유롭게 지정이 된다.

정수, 문자열 같은 다양한 타입의 데이터 대입이 가능하다.

실행시, 변수에 저장된 데이터 타입을 동적으로 바꿀수 있다는 특징이 있따.

자바스크립트 데이터타입

1)원시타입

자바스크립트 데이터 타입은 두가지로 나눌 수 있다. 그중 하나가 원시타입이다.

원시타입은 숫자, 문자, 논리값, 특수한 값(null, underfined), 심볼을 지칭한다.

자바스크립트는 숫자를 모두 64비트 부동소수점으로 표현한다.

심볼은 자기자신을 제외한 그 어떤 값과도 다른 유일무이한 값이라고 한다.

symbol();

symbol();을 실행하면 위의 심볼과 아래 심볼은 유일무이한 값을 생성하기 때문에 다른 심볼 값이다.

그리고 광호안에 인수를 전달하면 생성된 심볼에 대한 설명을 덧붙이는 것이 된다.

6. 객체타입

객체란? : 이름과 값을 한쌍으로 묶은 데이터를 여러개 모은 것이라고 한다.

객체는 프로퍼티(property)를 가지고 있는데, 프로퍼티는 객체에 포함된 데이터 하나를 위미한다 (이름과 값의 묶음)

객체를 생성하는 두가지 방법

1) 객체 리터럴 사용하는 방법

2) 생성자라는 함수 사용방법

< 객체 리터럴 이용 예제>

let com = {

name : "컴커니어",

age : 22

}

중괄호 안에 객체 리터럴을 넣어서 com이라는 변수에 대입하는 방식으로 선언할 수 있다.

프로퍼티끼리의 구분은 쉼포(,)로 구분해주고, 프로퍼티의 이름과 값은 구분은 콜론(;)으로 구분한다.

<객체를 생성하고, 프로퍼티 값에 접근하는 방법>

com.name -> 컴커니어

com["age"] -> 22

대괄호를 통해서 프로퍼티를 읽을 때는 문자열로 표현해야 한다.

<없는 프로퍼티 호출>

com.tall -> underined << underined를 반환하게 된다.

없는 프로퍼티에 값을 대입하면 객체에 새로운 프로퍼티 추가가 될 수 있다

com.tall = 180; 이라고하면

객체내부에 tall:180 이라는 프로퍼티가 들어간 것이다

객체 내부에 프로퍼티 삭제하는 방법

delete com.tall; -> 객체 내부 프로퍼티 삭제

java, C는 객체에 프로퍼티를 추가 및 삭제할 수 없다

객체에 프로퍼티로 함수가 오는 방법

객체의 프로퍼티 중 함수 객체의 참조를 값으로 담고있는 프로퍼티를 가르켜 메소드라고 한다.

메소드를 호출할 때 객체이름.함수이름(); 의 방식으로 부른다

<객체 생성자 사용 예제>

생성자로 객체를 생성할 수 있다.

생성자 => new 연산자로 객체를 생성할 것이라고 기대하고 만든 함수를 의미한다.

function Com(name,age) {

this.name = name;

this.age = age;

}

let com = new Com("컴커니어", 22); // 생성자를 통해 인수 전달 하면서 객체 생성

console.log(com); // 콘솔창으로 확인하기

Com 생성자를 통해 Com 객체를 생성한다.

생성자는 앞에 문자를 대문자로 써준다. (파스칼 표기법)

this는 Com 생성자로 만들 객체를 의미한다.

여기서 Com 객체를 의미한다.

생성자를 통해서 new 연산자로 만든 객체를 인스턴스라고 부릅니다.

인스턴스는 실체라는 뜻이 있습니다.

자바스크립트는 생성자로 생성한 객체는 인스턴스가 아니다.

생성자가 클래스처럼 객체를 생성하고 있기 때문에 생성자로 생성된 객체도 인스턴스라고 한다.

<배열인지 확인하는 방법>

typeof를 사용해서 확인해도 무방하다.

정확하게 typeof는 그 안의 값이 배열인지 객체인지를 리턴해주는 역할을 한다.

쉽게 배열인지 확인하는 방법 = Array.isarray(obj)를 사용하면 된다

<예시>

Array.isArray([1, 2, 3]); // true

Array.isArray({foo: 123}); // false

Array.prototype는 스스로도 배열이다. => Array.isArray(Array.prototype); // true 라고 한다.

TIL 이스케이핑, 변수, 상수

ESCAPING를 활용하면 alert창에서 (') (")를 띄울 수 있다.

alert('show\'s javascript); -> 작은 따옴표를 넣거나 작은 따옴표 안에 큰따옴표를 넣어도 출력이 가능하다.

alert은 브라우저에서 출력해주는 것이기 때문에 이스케이핑을 활용해서 줄바꿈도 가능하다.

alert("안녕하세요.\n반갑습니다.");

변수란? : 변하는 값을 담는 그릇이라는 의미로 상수는 변하지 않는 값을 의미한다.

작성법 2가지

1. myMountain(카멜표기법)

2. my_mountain(언더스코어 표기법)

요소.style의 방식은 inline의 css를 가져올수 있다. 직접 css를 inline으로 주고 싶을 때에도 사용할 수 있다.

요소.style를 사용 할때는 자바스크립트에서 -(대시)의 경우 마이너스로 인식하기 때문에 css와 다르게 적어야 한다.

캐멀표기법으로 작성법 : wlndows.getComputerStyle(요소)

클로저란? : 외부함수가 return으로 죽었음에도 불구하고 내부함수에서 외부함수에 위치한 변수의 제어가 가능한 경우

<클로저 예제>

function outer() {

let myNumber = 1;

function inner() {

document.write(++myNumber + '<by>');

}

inner(); // myNumber 변수가 계속해서 초기화된다, 한번만 초기화 하고싶다면 앞에 return을 붙이자

}

outer();

<클로저 한번만 초기화 예제>

function outer() {

let myNumber = 1;

function inner() {

document.write(++myNumber + '<by>');

}

return inner();

}

let myFunc = outer();

outer();

<중요>

--- 클로저의 정의 ---

myFunc()는 call할 때마다 inner 함수 내부에 있는 구문이 실행이 되는데, myNumber라는 변수가 1씩 계속 증가하는 결과를 보인다.

함수는 return을 하면 그 함수가 종료되는 것으로 알며, outer함수는 return inner;을 하고 종료가 되었음에도

우리는 myNumber 변수를 제어할 수 있다.

클로저는 Lexical Scope에 영향을 받지 않는 Static변수를 만들어내기 위한 방법이며,

Lecical Scope는 함수를 함수내부에 적으며 지역함수가 되고 함수내부에 변수는 지역변수가 되듯이 상황에 따른 Scope를 뜻한다.

Static변수는 자바스크립트에서는 쓰지않는다. 그래서 클로저를 사용하여 만들어낸다.

---클로저를 쓰는 이유---

랙시컬 스코프에 한정되지 않는 Static변수를 만들어내기 위해 클로저의 개념을 빌려 만들어낸다고 해석을 하였고,

클로저는 자바스크립트에만 있는 개념이 아닌 다른언어에서도 존재하는 개념이다.

<메서드>

Array.prototype.push() => push 메서드는 요소를 뒤에서 추가한다.

Array.prototype.pop() => pop메서드는 요소를 뒤에서 삭제한다.(1개)

Array.prototype.unshift() => unshift 메서드는 push와 마찬가지로 배열요소에 삽입하는 것으로 위치가 다르다.

Array.prototype.shift() => shift메서드는 pop와 비슷하지만, 위치가 다르다, 맨 앞에 있는 것을 삭제한다.

Array.prototype.splice() => splice는 (몇번째 위치, 삭제할 개수, 삽입할 요소(생략가능))으로 작성, index는 위치값이다

splice는 삽입 삭제 둘다 할 수 있으며, 삭제만 하는 것도 가능하다. 삭제라는 개념보다는 꺼내온다는 개념으로 이해하자

Array.prototype.concat() => concat 메서드는 기존 배열을 건드리지 않고 새로운 배열을 만들며 기존 배열은 건들지 않는다.

--------------------------------------------추가할 사항--------------------------------------------

1. 변수

자바스크립트에는 변수형(int, double, string)이 존재하지 않는다.

var 이라는 가변형 변수만 존재하여 초기화 할때 형태에 알아서 할당된다.

var i; var x = 123; var y = "123"; var z = false; var w = null;

var의 유효 범위는 함수 내부로 조건문이나 반복문 안에서 초기화 된 경우라도 함수 내부 블록이라면 어디서나 호출할 수 있다. 최신 자바스크립트에선 let이라는 가변형 블럭 지역 변수와 const라는 불변형 블럭 지역 변수가 추가되었다.

let x = 123; x = "123"; const y = false; y = null; // error

2. 연산자

+, -, *, /, % 등의 기본 연산은 물론 ++, --와 같은 증감 연산자도 사용할 수 있다.

a = a + 1 (x) a += 1 (o)

자바스크립트에서 a = a + 1 과 같은 표현은 쓰지 말라고 한다. 무조건 할당 연산자를 사용하라고 한다.

자바스크립트는 자바와 마찬가지로 스트링 컨케트네이션이 되므로 문자열을 덧셈기호로 간단히 붙힐 수 있다.

var s = "String1" + "String2"; console.log(s); String1String2

3. 조건문

a==b a!=b a==b && a==c a==b || a==c a > b if (a > b) { console.log("a is more than b.") } else if (a == b) { console.log("a is the same as b.") } else { console.log("a is less than b.") }

4. 함수

---선언과 호출은 방법---

function notify(message) { console.log('# NOTIFICAION : ' + message); } notify('say something'); # NOTIFITAION : say something

자바스크립트의 함수는다채롭게 선언할 수 있다.

---함수를 생성---

var notify = function (message) { console.log('# NOTIFICAION : ' + message); } notify('say something');

최근 자바스크립트 문법에선 화살표 함수라는 개념이 도입되었다.

var notify = () => { console.log('# NOTIFICAION : ' + message); } notify('say something');

여러가지 형식을 가지고 있는데 정해진 규칙은 없으므로 자신이 원하는 방식으로 일관성 있게 작성하면 된다.

함수 내부의 함수나 익명 함수는 화살표 함수로 그 외에는 함수 선언식을 사용하였다.

화살표 함수의 경우 최신 문법이므로 구형 브라우저에선 인식되지 않는 점을 참고하자.

---값을 반환하는 함수 작성---

function add(value1, value2) { return value1 + value2; } var a = 10; var b = 20; console.log(add(a, b)); 30

---화살표 함수 표현---

var add = (value1, value2) => value1 + value2; console.log(add(10, 20)); 30

화살표 함수의 경우 중괄호를 생략할 수 있으며, 중괄호를 생략할 경우 화살표 다음에 선언된 식이 return 되는 것으로 간주한다.

5. 배열

배열이란? : 변수의 값이 연속적으로 나열된 형식

배열의 선언

var arr = new Array();

var arr = [];

배열에 값 삽입 : 초기화시 값 삽입

var careers = [

"Warrior",

"Archer",

"Wizard"

];

인덱스를 이용하여 삽입

var careers = [];

careers[0] = "Warrior";

careers[1] = "Archer";

careers[2] = "Wizard";

push 메서드를 사용하여 삽입

var careers = [];

careers.push("Warrior");

careers.push("Archer"); careers.push("Wizard");

배열과 관련된 메소드