![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bXcYwr/btsmz2oUnEQ/p1PD0jvl0dvnwAZMf5eSG1/img.png)
split() split()은 문자열을 ,(구분자)로 잘라서 배열에 담아 리턴한다. //1. 파라미터를 입력하지 않은 경우 const str = "apple banana orange"; const arr = str.split(); //[apple banana orange] //=> 문자열 전체를 하나의 배열에 담아서 리턴한다. //2. (" ")로 잘라서 배열에 담기 const str = "apple banana orange"; const arr = str.split(" "); //[apple, banana, orange] //3. ("")로 잘라서 배열에 담기 const str = "a b c"; const arr = str.split(""); //=> 한 글자씩 자라서 배열에 담는다. //4. 특정 ..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cvCUpq/btskEpN6ukE/7qK5Pr5E83Kwkib32aV0pk/img.png)
BOM, Browser Object Model 브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아닙니다. 하지만 이 모델은 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해 줍니다. 자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있습니다. Window 객체 웹 브라우저의 창(window)을 나타내는 객체로, 대부분의 웹 브라우저에서 지원하고 있습니다. 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 됩니다. Location 객체 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있습니다. 이..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/oAeSq/btsj8h9YUkA/lFGz9k10iwRkIpcqJ76QT1/img.jpg)
전역 객체(global object) 전역 객체란 자바스크립트에 미리 정의된 객체로 전역 프로퍼티나 전역 함수를 담는 공간의 역할을 합니다. 전역 객체 그 자체는 전역 범위(global scope)에서 this 연산자를 통해 접근할 수 있습니다. 자바스크립트에서 모든 객체는 전역 객체의 프로퍼티가 됩니다. 래퍼 객체(wrapper object) 이렇게 숫자, 문자열, 불리언 등 원시 타입의 프로퍼티에 접근하려고 할 때 생성되는 임시 객체를 래퍼 객체(wrapper object)라고 합니다. 프로그램이 문자열 리터럴 str의 프로퍼티를 참조하려고 하면, 자바스크립트는 new String(str)을 호출한 것처럼 문자열 리터럴을 객체로 자동 변환해주기 때문입니다. var str = "문자열"; // 문자열 ..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/ddqK6e/btsjXH8otMa/yOXP48S5m7k1WZgFS1LKp0/img.jpg)
1. Object 자바스크립의 기본 타입은 객체이다. 객체란 name과 value로 구성된 property의 정렬되지 않은 집합 // 객체도 많은 값을 가지는 변수의 하나임. var kitty = { name: "나비", family: "코리안 숏 헤어", age: 1, weight: 0.1 }; kitty.name // 나비 var person = { name: "홍길동", // 이름 프로퍼티를 정의함. birthday: "030219", // 생년월일 프로퍼티를 정의함. pId: "1234567", // 개인 id 프로퍼티를 정의함. fullId: function() { // 생년월일과 개인 id를 합쳐서 주민등록번호를 반환함. return this.birthday + this.pId; } }; pe..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/Hyyw4/btsfdXuYbhm/Dme05rGe0tukipKMe8YNt0/img.png)
출처: https://joshua1988.github.io/web-development/javascript/js-async-await/ 자바스크립트 async와 await (중급) 자바스크립트 개발자를 위한 async, await 사용법 설명. 쉽게 알아보는 자바스크립트 async await 개념, 사용법, 예제 코드, 예외 처리 방법 joshua1988.github.io 1. async, await는 무엇인가? 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와줌. 2. 기본 문법 async function 함수명() { await 비동기_처리_메서드_명(); } 함수의 내부 로직..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/b9MgfP/btsffuMy8oX/zKLzQW1WGcnoenhDMTDurk/img.png)
출처: https://joshua1988.github.io/web-development/javascript/promise-for-beginners/#promise%EA%B0%80-%EB%AD%94%EA%B0%80%EC%9A%94 자바스크립트 Promise 쉽게 이해하기 (중급) 자바스크립트 입문자를 위한 Promise 설명. 쉽게 알아보는 자바스크립트 Promise 개념, 사용법, 예제 코드. 예제로 알아보는 then(), catch() 활용법 joshua1988.github.io 1. Promise가 무엇인가? 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/B2lje/btsfjIQ4ciE/osZsAVjVxQOokmppMlSWp0/img.png)
출처: https://velog.io/@reasonz/2022.05.25-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1%ED%95%A8%EC%88%98JS-callback-function [2022.05.02] 자바스크립트 콜백함수(JS callback function) 콜백함수는 다른 함수의 인자로 사용되는 함수로 외부 함수에서 호출되는 함수를 의미한다.즉, 함수의 파라미터로 함수가 들어가는 함수가 콜백함수라는 것이다.함수 두개를 만들었다. 하나는 velog.io 콜백 함수는 왜 사용할까? 콜백함수를 사용하면 순차적으로 실행하고 싶은 코드가 있을 때 순차적으로 실행시킬 수 있다. 자바스크립트는 동기식 언어로 코드를 한..
DOM - JS가 웹 문서를 동적으로 다룰 수 있도록 문서에 있는 각 요소를 객체 형태로 처리하는 것 DOM 트리 - DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분 - 웹 문서 구조를 부모/자식 관계로 표시하면 나무를 거꾸로 뒤집어 놓은 모습 -> DOM 트리 - 웹 문서의 태그는 요소 노드로 표현한다. (Element) - 태그가 품고 있는 (Text) - Attribute getElementById() - id 선택자를 사용해 접근하기 document.getElementById("heading"); // getElementByClassName querySelector("#heading") querySelector(".bright") querySelectorAll(".bright")