생활코딩 자바스크립트

document.write('<a>링크</a>')

이렇게 입력하면 문자열이 고스란히 입력되는게 아니라 html 코드가 입력됨

---

문자열 관련 기능

 

'문자'.length

문자열의 글자수 세기

alert('abcdefg'.length) 를 하면  alert에 글자수가 출력 됨!

 

str.toUpperCase()

모든 문자를 대문자로

 

str.indexOf(찾을 값)

str.indexOf(찾을 값, 찾기 시작할 인덱스)

문자열에서 찾을 문자가 몇번째에 있는지 알려줌

찾기 시작할 인덱스 기본값 : 0

-1 : 찾지 못했을 때

 

str.trim()

문자열에 있는 공백을 없애줌

---

data- 를 사용하는 방법

화면에 안보이게 데이터를 담아두는 방법

.dataset.(data-)설정이름

data-number

div.dataset.number

카멜표기법으로 변하는 것을 주의

 

data- 는 css에서도 사용할 수 있음

---

값을 받아오기

.value

---

리팩토링

코드 기능은 그대로 두고 비효율적인 코드를 정리하는 것

 

중복을 저 끝까지 쫓아가서 없애버리자!

 

코드를 줄이고 싶을 때

this, 변수 사용

 

데이터가 바뀐다고 로직을 수정하는 일이 발생하지 않도록 코드를 짜기

---

qureySelectorAll()의 반환값은 배열

그래서 이걸 선택자로 써서 속성을 먹일 수는 없는듯

---

self

읽기 전용 속성, window를 참조

+

self와 this의 차이점 공부하기

 

return

반복적으로 사용되는 식을 간단하게 가져다 편하게 쓰기좋음

함수를 다양한 용도로 활용할 수 있음

 

---

코드가 너무 많아서 복잡해지면 정리정돈을 위해 함수와 객체를 잘 쓰기!

 

객체

함수와 변수가 많아지면 연관된 것들을 서로 그룹핑해서 정리정돈하는 것!

중복되는 속성을 묶을 수 있는 폴더

 

객체에는 문자도 숫자도 배열도 함수도 담을 수 있음

 

객체의 프로퍼티를 구분할 때는 ,를 사용

 

배열 > 순서있게 정보를 저장, []사용

객체 > 이름있게 정보를 저장. {}사용

 

객체에 속해있는 함수 = 메소드

객체에 속해있는 변수 = 프로퍼티

 

이미 생성된 객체에 내용 추가하기

객체명.프로퍼티 = "값";

공백이 있는 키는 ["프로 퍼티"]을 사용해 추가하거나 불러온다.

객체명["프로 퍼티"] = "값";

 

객체에 있는 모든 속성을 가져와야 할 때

for ... in 반복문 사용

for (let key in object) { // for in 반복문

document.write(key) // object의 키를 모두 가져옴
document.write(object[key]) // object의 키 값을 모두 가져옴

}

 

메소드에서 객체를 가리킬 때 this 사용가능

---

파일을 속성별로 쪼개기 > 최고의 정리정돈!

파일로 나눠서 정리하면 브라우저가 다운받았다가 저장된 파일을 계속 사용해서 서버에서 비용을 절감할 수 있음!

---

라이브러리 > 내가 만들고자 하는 프로그램에 필요한 부품

프레임워크 > 만들고자 하는 것에 필요한 공통적인 부분을 만들어놓은 것 필요한 부분만 고치면 되는 반제품

---

API

애플리케이션을 만들기 위해서 프로그래밍을 할 때 사용하는 조작 장치

예 : alert함수를 사용하면 브라우저에 경고창을 띄움 > 내용은 내가 적었지만 경고창의 모양이나 작동하게 하는 것은 내가 짠게 아님

---

조언!

프로젝트를 시작할 때 최소한의 요소로만 구성한다!

머리가 복잡해지면 아무것도 할 수 없음!

이러다가 도저히 해결할 수 없을 때 새로운 개념을 도입한다!

또 해결할 수 없을 때 공부를 한다!

 

검색하기

태그를 삭제하거나 자식태그를 추가하고 싶을 때 document

그래도 안되면 DOM

웹브라우저를 제어해야한다면 window

웹페이지를 리로드하지 않고 정보를 변경하고 싶다면 ajax

웹페이지가 리로드 되어도 현재 상태를 유지하고 싶다면 cookie > 사용자를 위한 개인화된 서비스를 만들 수 있음

인터넷이 끊겨도 동작하는 웹사이트를 만들고 싶다면 offline web application

화상통신 웹앱을 만들고 싶다면 webRTC

사용자의 음성을 인식하고 음성으로 정보전달을 원하면 speech로 시작하는API

3차원그래픽으로 게임같은것을 만들고 싶다면 webGL

가상현실 webVR