[JS] 자바스크립트

🙏🏻  자바스크립트 JavaScript

📍  화살표 함수

1) 매개변수가 없을 경우

( ) => { ... }

2) 매개변수가 한 개인 경우

x => { ... }

3) 매개변수가 여러 개인 경우

(x, y) => { ... }

---

📍  Javascript 연산자 / 입출력 / 변수

1) 연산자

 ▪️ == : 자료형을 자동으로 형변환

 ▪️ != : 자료형을 자동으로 형변환

 ▪️ === : 값이나 자료형이 같음

 ▪️ !== : 값이나 자료형이 다름

 ▪️ ? : 삼항 연산자

 

2) 입출력

 ▪️ 알림창 출력

alert("안녕");

 ▪️ 확인창 출력

var replay = confirm("확인하시겠어요?");

 ▪️ 프롬프트창 입력 받기

var name = prompt("이름을 입력하세요.", "default");

 ▪️ 웹 문서에 내용 출력하기

document.write("환영합니다");

 ▪️ 콘솔창에 내용 출력하기 

console.log("환영해!");

→ 크롬에서 콘솔 창 띄우기 단축키 : shift + ctrl + j

 

3) 변수

* 변수 선언 : var 변수명;
 - undefinded 유형 : 자료형이 정의되지 않은 데이터
 - null 유형 : 데이터가 유효하지 않음

 ▪️ 전역변수 : 함수 밖에서 선언하거나 함수 안에서 var 빼고 선언

 ▪️ 지역변수 : 함수 안에서 var를 선언, 함수 영역 스코프를 가짐

---

📍  변수 선언 방식

1) var

- 중복 선언 가능

2) let

 - 중복 선언 불가능, 재할당 가능

3) const

 - 중복 선언 불가능, 재할당 불가능

---

📍  변수 a와 $a의 차이

1) var a

 - 자바스크립트 변수

 - 흔히 아는 방식으로 스크립트에서만 사용 가능

2) var $a

 - jQuery 변수

 - jQuery에서 사용하는 내장함수들은 모두 사용가능 -> css에도 적용 가능 

---

📍  id와 class 차이

1) id : #을 사용

2) class : .을 사용

---

📍 JSON  : Javascript Object Notation

- 데이터를 문자열의 형태로 나타내기 위해 사용

- 네트워크를 통해 서로 다른 시스템들이 데이터를 주고 받을 때 많이 사용

- xss 방지를 위해 특수문자 변환이 이루어짐 ex) 따옴표는 &quot (HTML Number로는 &#34로 표현)

① JSON.parse( )

 : JSON 문자열 → Javascript 객체

② JSON.stringify( )

 : Javascript 객체 → JSON 문자열

---

📍 Javascript에서의 Date( )

 - Month()만 +1을 해주어야 함

    👉🏻 Why? getMonth()의 반환 값이 1-12가 아닌 0-11이기 때문에

---

📍 Javascript 배열에서 원하는 값을 찾아내는 메서드

① find

 - 판별 함수를 만족하는 첫 번째 요소를 반환

 - arr.find(callback)  → 반환 타입은 찾은 요소의 타입 (없으면 undefinded)

② findIndex

 - 판별 함수를 만족하는 첫 번째 식별자 반환

 - arr.findIndex(callback)  →  반환 타입은 number (없으면 -1)

③ IndexOf

 - 인자로 받은 값을 찾아 맞는 식별자 반환  →  반환 타입은 number (없으면 -1)

---

📍 Javascript 배열에서 요소를 삭제하는 메서드

① delete

 - 기존의 key(=index)가 남아있는 채로 삭제됨

 - 해당 요소를 삭제하더라도 다른 요소의 키 값은 바뀌지 않음

② splice

 - 기존의 key(=index)가 알아서 줄어듦

 - 해당 요소를 삭제하면 다른 요소의 키 값도 바뀜

 - 사용법 : splice(index, 삭제개수)

---

📍 DOM 접근하기

1) 반환 형태가 HTML Collection인 경우

① id 선택자로 접근

document.getElementById("...")

 

② class 선택자로 접근

document.getElementByClassName("...")

 

③ 태그 이름으로 접근

document.getElementByTagName("...")

 

2) 속성, 텍스트, 노드까지 제어하려는 경우

✔️ Document.querySelector( )

 - 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫번째 element 반환

 - 일치하는 요소가 없을 경우 null 반환

 

① id="hello"라면

document.querySelector("#hello")

 

② class="bye"라면

document.querySelector(".bye")

---

📍 FormData 객체

 - 폼을 쉽게 보내도록 도와주는 객체

var formData = new FormData([form]);

  → HTML에 form 요소가 있는 경우 해당 폼 요소 필드 전체가 자동 반영됨

 

FormData.append(name, value)

  → name과 value를 가진 폼 필드 추가

---

📍 이벤트 처리

< 태그 on 이벤트명 = "함수명">

  →  <a href = "#" onClick = "alert("클릭")"> </a>

 

웹 요소.onClick = "함수명"

  →  document.querySelector("p").onClick = changeColor;

---

📍 Javascript 객체

① 내장 객체 : Array, Date 등

1) 초깃값이 없는 경우

var num = new Array();         →  배열 크기 지정 x          
var num = new Array(5);       →  배열 크기 지정 o

 

2) 초깃값이 있는 경우

var num = ["one", "two", "three"];               →  배열 선언    
var num = Array("one", "two", "three");      →  Array 객체 사용          

 

 ✅ array의 메서드

 - concat() : 두 개의 배열을 합쳐 새로운 배열 생성

 - join() : 요소를 합쳐 문자열 생성, 구분자 지정 가능

 - push() : 맨 뒤에 요소 추가

 - pop() : 맨 뒤에 요소 꺼내기

 - unshift() : 맨 앞 요소 추가

 - shift() : 맨 앞 요소 꺼내기

 - splice() : 원하는 위치 요소 추가/삭제

 - slice() : 배열 슬라이싱

 - filter() : 주어진 함수로 참인 요소 고르기

 - every() : 주어진 함수에 대하여 참이면 true, 거짓이면 false 반환

 - forEach() : 배열 요소들에 함수 적용

 - indexOf() : 주어진 값에 배열 인덱스 찾기

 - reverse() : 배열 역순 정렬

 - sort() : 지정한 조건에 따라 정렬

 - toString() : 지정한 부분을 문자열로 반환

 

  ✔️  splice( )

    [ 매개변수가 1개인 경우 ]

     - 주어진 인덱스 이후의 값 삭제

var num = [1, 2, 3, 4, 5]일 때 splice(2)는
 현재 배열에서 2번 인덱스 이후의 값인 [3, 4, 5] 삭제

즉, num에는 [1, 2]만 남음

 

      [ 매개변수가 2개인 경우 ]

     - 주어진 인덱스 이후의 값을 지정한 개수만큼 삭제

var text = ["html", "css", "web", "js"]; 일 때 splice(2,1)은
 현재 배열에서 2번 인덱스에서부터  총 1개를 삭제하라는 의미 - web 삭제

즉, text에는 ["html", "css", "js"]만 남음

 

     [ 매개변수가 3개인 경우 ]

     - 주어진 인덱스 이후의 값을 지정한 개수만큼 삭제하고 지정한 요소 추가

var text = ["html", "css", "js"]; 일 때, splice(2,1,"jQuery") 하면
 현재 배열에서 2번 인덱스로부터 1개를 삭제하고 jQuery를 추가하는 의미 - js 삭제, jQuery 추가

즉, test에는 ["html", "css", "jQuery"]의 형태

 

✔️  slice( )

    [ 매개변수가 1개인 경우 ]

     - 주어진 인덱스 이후의 요소를 모두 슬라이싱

var num = [1, 2, 3, 4, 5]일 때 slice(2)는
 현재 배열에서 2번 인덱스 부터 마지막 인덱스까지 값을 뽑아냄

즉, 기존 배열이 변하는 것이 아니라 원하는 요소를 뽑아내는 것 [3, 4, 5]

 

        [ 매개변수가 2개인 경우 ]

     - 주어진 인덱스부터 지정한 개수만큼 꺼냄

var num = [1, 2, 3, 4, 5]일 때 slice(2.4)는
 현재 배열에서 2번 인덱스에서부터  4번인덱스-1 까지 값을 뽑아냄

즉, [3, 4]

② 문서 객체 모델 (DOM) : document, image, link 등

③ 브라우저 관련 객체 : history, location, screen 등

1) window : 브라우저 창마다 생성, 최상위 요소

2) document : HTML 문서 정보, <body> 태그 만나면 생성

3) history : 현재 창의 사용자 방문 기록을 배열 형태로 저장

4) location : 현재 페이지의 URL

5) screen : 현재 화면 정보를 알아낼 때 사용

---

📍 Javascript 조건문

 : if 안에 있는 조건식이 참인 경우 해당문을 실행

if ( 조건식 1 ) {
       실행문 1
} else if ( 조건식 2 ) {
       실행문 2
} else {
       실행문 3
}

✔️ 조건식을 거짓으로 취급하는 값

(1) false      (2) undefined      (3) null      (4) 0      (5) NaN      (6) the empty String ("")

 

✔️ 조건문에서 사용할 수 있는 비교 연산자

(1)  === , !==  : 한 값이 다른 값과 같거나 다른지 판단

(2)  < , > : 한 값이 다른 값보다 작거나 큰지 판단

(3)  <= , >= : 한 값이 다른 값보다 작거나 같은지, 크거나 같은지 판단

---

📍 Javascript 데이터 타입

1) 기본 타임

 - 숫자, 문자열, boolean, undefinded, null

 - 하나의 값을 가짐

2) 참조타입

 - 배열, 함수, 정규표현식 등

 - '이름 : 값' 형태의 프로퍼티 저장

 ✅ 참조타입(객체) 생성 방법

 ① Object( ) 생성자 함수 이용

var testObj = new Object();
testObj.name = 'hong';
testObj.age = '25';

 

② 중괄호를 이용한 객체 리터럴 방식

var testObj = {
        name : 'hong',
        age : '25'
}

 - 중괄호 안이 비어있으면 빈 객체 생성

 - 중괄호 안에 '프로퍼티 이름 : 프로퍼티 값' 형태로 표기하면 해당 프로퍼티가 포함된 객체 생성 가능

 

 ③ 생성자 함수 이용

var add = new Fuction('x', 'y', 'return x+y');

 - 'x'와 'y'는 매개변수를 의미

 - 'return x+y'는 함수 호출 시 실행될 코드를 포함할 문자열을 의미

 

   ✔️ 객체 접근 방법

   ① 마침표 . 표기법 

      testObj.name

      testObj.age

 

   ② 대괄호 [ ] 표기법

      testObj['name']

      testObj['age']