DOM(Document Object Model) DOM이란 문서객체모델, 즉 DOM은 웹 페이지(HTML이나 XML문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다. 즉 자바크스립트 같은 스크립팅 언어가 쉽게 웹피이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 합니다. 다시말해 문서객체란 이나 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만든 것을 말합니다. DOM은 어떻게 생성되고 보여질까? DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이도 합니다. 따라..
JS로 HTML 조작하는 방법 안녕하세요 위의 HTML 코드의 결과는 아래와 같습니다. JS로 저 안녕하세요 글자를 안녕으로 바꿔보겠습니다. HTML 코드 BODY안에 아래의 새로고침을 해보면 결과는 안녕 이라고 바뀝니다. 그러면 대체 왜 변경되는 것일까요? 코드를 그대로 해석하면 알 수 있습니다. document는 말그대로 웹문서입니다. .은 ~의 라고 해석하시면 됩니다. get은 가져오다이고 element는 html요소를 가져오라는 뜻입니다. byid 즉 id에 의해서입니다. innerHTML은 내부 html , 내부요소라고 생각하시면 됩니다. 즉, id가 hello인 HTML요소를 가져와서 '안녕'이라고 바꿔라 입니다. document.getElementById('???').???='???; 첫번째..
저번글에서 promise에 대해 공부했습니다. async, await를 사용하면 promise의 then메소드를 chain형식으로 호출하는 것보다 가독성이 좋아집니다. async 아래와 같은 함수가 있다고 가정합시다. 이 함수 앞에 async라는 키워드를 붙여주게 되면 해당 함수는 항상 promise를 반환하게 됩니다. async function getName(){ return "Mike"; } console.log(getName()); promise를 반환하기 때문에 then을 사용할 수 있습니다. async function getName(){ return Promise.resolve("Tom"); } getName().then((name)=>{ console.log(name); }); 반환값이 prm..
promise란? promise를 실생활에 빗대어 설명하면 어느 한 상점에 손님이 물건을 요구하고 해당 상점은 물건을 제작합니다. 손님은 요구한 물건이 나오기 전까지 10초마다 물건의 완성여부를 묻는 행동을 한다고 가정했을 때, 상점측은 "아니요", "만들다가 실패했어요" 등의 대답을 할 수 있습니다. 이렇게 10초마다 물어보는 비효율적인 상황에서 효율적인 방법을 찾아보면 손님이 자신의 전화번호를 상점에 남기고 완성되거나 실패하면 결과를 자신의 번호로 알려달라고 하는것이 효율적이겠지요. 이런 행위를 promise라고 하고 js에서도 해당 기능을 하는 prmise 함수가 있습니다. promise사용법 const pr = new Promise((resolve,reject) => { // code } prom..
클래스 지금까지 비슷한 형태의 함수를 생성하기 위하여 생성자 함수를 사용했습니다. 클래스라는 것을 이용해 만들 수 있습니다. 클래스는 ES6에 추가된 속성입니다. const User = function(name,age){ this.name = name; this.age = age; this.showName = function() { console.log(this.name); }; }; const mike = new User("Mike",30); 위의 생성자 함수의 코드를 클래스로 작성해보면 아래의 코드가 됩니다. class User2 { constructor(name,age) { this.name = name; this.age =age; } showName () { console.log(this.name..
프로토타입(prototype) 아래의 코드에서 user객체의 name 속성의 유무를 확인할 수 있는 hasOwnProperty라는 함수를 사용했습니다. 이 함수는 어디서 온 것일까요? const user = { name : 'Mike' } console.log(user.name); console.log(user.hasOwnProperty('name')); console.log(user.hasOwnProperty('age')); 자바스크립트의 모든 객체는 프로토타입(prototype) 이라는 객체를 가지고 있습니다. 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받습니다. 이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체..
자바스크립트에서는 일방적인 방법 외에도 함수를 어디서 어떻게 호출했느냐에 관계없이 this가 무엇인지 지정할 수 있습니다. 그럼 여기서 this는 정확히 뭔데?라는 의문이 들 수 있습니다. 이번 글에서는 this에 대해 알아보겠습니다. call call()메소드는 모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할 수 있습니다. const mike = { name : "Mike", } const tom={ name:"Tom", } function showThisName(){ console.log(this.name); } showThisName(); // 아무런 값이 뜨지 않음 showThisName.call(mike); //"Mike" 그냥 showThisName();을 호출하면 아무런 값이 ..
setTimeout 일정 시간이 지난 후 함수를 실행합니다. function fn(){ console.log(3); } setTimeout(fn,3000); 이 코드는 3초후에 로그를 찍어줍니다. setTimeOut함수는 두 개의 매개변수를 받습니다. 첫번째매개변수에는 일정시간이 지난 후에 실행해주는 함수이고, 두번째매개변수는 시간입니다. 위의코드에서 3000은 3s(3초)를 의미합니다. setTimeout(function(){ console.log(3); }, 3000); 또한 이렇게 함수를 전달하지 않고 직접 코드를 사용할 수 있습니다. 만약 인수가 필요하다면 시간 뒤에 해당 값을 넣어주면 됩니다. function showName(name){ console.log(name); } setTimeout(..
어휘적 환경(Lexical Environment) 자바스크립트는 어휘적 환경을 갖습니다. 어휘적 환경이란 간단하게 말해 정적인(변하지않는)환경입니다. let one; one = 1; function addOne(num){ console.log(one + num); } addOne(5); 이러한 코드가 있을 때 어떻게 동작하는지 알아봅시다. 코드가 실행되면 스크립트에서 선언한 변수들이 Lexical 환경에 올라가게 됩니다. let과 addOne함수 둘다 환경에 올라가지만 let변수는 초기화가 되어있지 않기 때문에 사용은 못합니다. 그에 비해 함수는 변수와 달리 바로 초기화 됩니다. 다음사진을 보겠습니다 . 이제 let one을 만나게 되면 아직 할당은 되어있지 않기 때문에 초기값 undefined을 얻게 ..
나머지 매개변수, 전개구문 나머지 매개변수와 전개 구문은 ... 로 사용되어집니다. 이 둘의 차이는 무엇일까? 인수 전달 js에서 함수에 넘겨주는 인수에 개수는 제한이 없다. 호출할 때 그 개수를 정확하게 맞출 필요가 없다. 함수에 인수를 얻는 방법은 2 가지가 있는데 하나는 arguments로 접근하는 것과 나머지 매개변수 Rest parameters로 접근하는 것이다. function showName(name){ console.log(name); } showName('Mike'); showName('Mike', 'Tom'); arguments 함수로 넘어 온 모든 인수에 접근 함수내에서 이용 가능한 지역 변수 length/index Array 형태의 객체 배열의 내장 메서드 없음(forEach, ma..
구조 분해 할당 구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 입니다. 배열구조분해 let[x,y] = [1,2]; console.log(x); // 1 console.log(y); // 2 다음 코드도 보겠습니다. let users = ['Mike', 'Tom', 'Jane']; let[user1, user2, user3] = users; console.log(user1, user2, user3); let[user1, user2, user3] =users; 는 아래의 코드와 같습니다. let user1 = users[0]; let user1 = users[0]; let user1 = users[0]; 결과는 아래입니다. 배열 구조 분해 : 기본값 le..
이전 시간에 배열을 배울때 배열에 관련된 기본적인 메소드에 대해 배웠습니다. 다시 살펴보면 push() : 뒤에 삽입 pop() : 뒤에 삭제 unshift() : 앞에 삽입 shift() : 앞에 삭제 이 외에도 배열은 유용한 메소드를 가지고 있습니다. 배열메소드(Array methods) splice() arr.splice(n,m) : 특정 요소 지움 n은 시작이고 m은 개수입니다. 앞 포스팅에서 배웠던 문자열 메소드중 slice()와 햇갈리면 안됩니다. slice()는 특정 범위의 문자를 반환해주고, splice()는 특정 범위의 요소를 지워줍니다. let arr = [1,2,3,4,5]; arr.splice(1,2); console.log(arr); // [1,4,5] 추가로 arr.splice(..
String ', ", ` 작은따옴표 큰따옴표는 큰 차이가 없기 때문에 상황에 맞게 사용합니다. 예를들면 html코드 같은경우 큰따옴표로 된 내용들이 있으므로 작은 따옴표로 감싸는것이 편합니다 let html = `
toString() 10진수 -> 2진수/16진수 let num = 10; num.toString(); // "10" num.toString(2); // "1010" 괄호안에 숫자를 사용하면 그 숫자의 진법으로 바꿔줍니다. let num2 = 255; num2.toString(16); // "ff" Math JavaScript에는 수학과 관련된 프로퍼티와 메소드들을 가지고 있는 Math라는 내장 객체가 있습니다. 예를 들면 Math.PI; 는 3.141592...이 나오게 됩니다. 올림 올림은 Math.ceil()을 사용합니다. let num1= 5.1; let num2= 5.7; Math.ceil(num1); // 6 Math.ceil(num2); // 6 내림 내림은 Math.floor()을 사용합니..
property key : 문자형 지금까지 객체 property key는 문자형으로 만들었습니다. 하지만 아래처럼 숫자형이나 불린형으로 만들어 보면 어떨까요? const obj = { 1:'1입니다.', false:'거짓' } Object.keys(obj); // ["1", "false"] keys()함수를 통해 확인을 해보면 1과 false가 문자형으로 반환됩니다. 그리고 실제로 접근을 할때도 문자형으로 접근할 수 있습니다. obj['1'] // "1 입니다." obj['false'] // "거짓" 이렇게 객체 property는 문자형으로 가능합니다. 그리고 하나더 가능한것이 있는데 바로 Symbol입니다. Symbol Symbol은 유일한 식별자를 만들 때 사용합니다. 즉 유일성이 보장됩니다. con..
