생활코딩 자바스크립트
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