자료형 자바스크립트 자료형은 크게 원시타입과 비 원시 타입으로 나뉩니다. 원시타입 자료형 : 숫자형, Binint형, 문자형, Boolean형, Null, Undefined, Symbol형 비 원시타입 자료형 : 객체, 함수, 배열 원시타입 단 하나의 값만을 갖고 있는 타입 let number = 123; number = "123"; // 원시 타입 let array = [1, "2", 3]; //비원시 타입 number 변수는 값이 123이었다가 "123"으로 변경되었지만 한 번에 하나의 값만 갖고 있는 것을 볼 수 있고, array변수는 1, "2", 3 으로 한 번에 3개의 값을 가질 수 있습니다. 숫자형 숫자형(Number)은 말 그대로 정수, 소수 등의 모든 숫자를 나타냅니다. 숫자형 타입은 덧..
변수 먼저 변수란, 프로그램이 실행되는 도중에 변경되는 값을 저장하기 위한 이름을 가진 저장소입니다. 자바스크립트에서 변수를 선언할때 let이라는 키워드를 사용합니다. let뒤에는 생성할 변수의 이름을 작성하고, 그 다음 = 연산자를 통해 해당 변수에 값을 할당합니다. 아래의 코드를 보면 color라는 변수를 생성하고 = 연산자를 통해 데이터를 저장했습니다. 그리고 결과값이 출력되는 것을 볼 수 있습니다. 변수의 값은 실행도중 변경될 수 도 있습니다. 위의 예제코드에서 skyblue라는 값이 담긴 변수 color를 중간에 yellow라는 값으로 변경하는 것도 가능합니다. 변수 명명 규칙 자바스크립트에서 변수의 이름을 결정할 때 지켜야 할 규칙을 배워보겠습니다. 첫 번째 규칙은 $와 _를 제외한 기호를 사..
이벤트버블링 아래의 코드는 각 태그에 해당하는 박스가 있습니다.(body> div > ul >li 순) 각 박스의 클릭이벤트가 발생하면 콘솔창에 기록됩니다. body div ul li body{ border : 1px solid; padding:30px; background-color:white; } div{ margin:30px; padding:30px; border : 1px solid; background-color: blue; } ul{ margin:30px; padding:30px; border : 1px solid; background-color: green; } li{ margin:30px; padding:30px; border : 1px solid; background-color: pink..
자주사용하는이벤트(Event) 마우스 이벤트 : dblclick 키보드 이벤트 : keyup, keydown 포커스 이벤트 : focus, blur window 이벤트 : resize dblclick 더블클릭하면 실행, 한번 클릭하면 아무 반응이 없습니다. 클릭 keyup 키보드 이벤트는 키보드 입력시 발생하는 이벤트이다. console창을 확인해보면 키를 입력할때마다 keyup이 찍히는걸 볼 수 있다. body> 클릭 keyup 핸들러는 이벤트객채(event)를 인수로 받음. 결과값 "텍스트" : 입력한 특정 텍스트가 콘솔창에 출력됨 event : 해당 키보드 이벤트 관련된 모든 정보가 콘솔창에 출력됨 event.key : 오직 키보드 값만 콘솔창에 출력됨 인수로 event를 받아보겠습니다. 클릭 콘솔..
이벤트 우리가 이용하는 웹사이트에는 수많은 기능을 제공합니다. 특정 메뉴 버튼을 클릭할 때 정보가 노출되거나 반대로 정보를 입력하면 서버에 저장 기능 등 이러한 기능들이 없다면 웹페이지는 그냥 글자만 있는 전자문서와 다를게 없습니다. 주로 우리들은 이 웹페이제 있는 기능을 이용하기 위해서 마우스나 키보드를 조작하여 기능을 실행합니다. 바로 이러한 행위들을 이벤트라고 부릅니다. 핸들러 이벤트가 발생하면 특정 함수를 할당해서 실행할 수 있는데, 이것을 핸들러(Handler)라고 합니다. 핸들러 표현 방식 : on+이벤트 타입 HTML DOM Event 종류 : https://www.w3schools.com/jsref/dom_obj_event.asp HTML DOM Event Object W3Schools o..
자바스크립트를 이용한 css style 제어 아래와 같은 코드가 있습니다. id를 이용해 html의 css을 scipt 안에서 바꿔보겠습니다. Box Red Green Blue script 태그안에 다음의 코드를 추가해줍니다. 주의하실점은 일반적으로 css를 작성할때 background-color:red; 와같이 대시를 사용하지만 script 안에서는 카멜케이스(camel case)로 작성해줍니다. 아니면 익숙한 방법으로 작성하실려면 대괄호를 이용해줍니다. box.style["background-color"]="blue"; 콘솔창에서 한번확인해보겠습니다. 콘솔창에 box.style을 입력해줍니다. 보시면 카멜케이스로 작성이 된 걸 알 수 있습니다. 여러속성을 동시에 적용할 수 도있습니다. border의 ..
수정 이번에는 수정을 해보겠습니다. 먼저 blue를 가져오겠습니다. 지난 포스팅에서 배웠던 것처럼 firstChild는 text를 가져오고 firstElementChild는 null 없니다 이유는 자식요소노드는 없기 때문입니다. blueTextNode라는 변수를 만들고 blue.firstChild를 넣어보겠습니다 그리고 blueTextNode의 정보들을 보겠습니다. nodeType 3은 문서를 참고하면 3은 텍스트노드임을 알 수 있습니다. https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType Node: nodeType property - Web APIs | MDN The read-only nodeType property of a Node inte..
querySelectorAll / getElementsByTagName document.querySelectorAll NodeList를 반환해줍니다. document.getElementsByTagName() HTMLCollection를 반환해줍니다. 차이점 html 코드는 아래와 같습니다. Welcome World A A first...Naver A second... B B...Daum C Excepetur sint occaecat cupidatat non proident, sunt in culpa qui offcia deserunt molit anim id est laborum. Google Red Blue Green 위의 코드를 실행시킨 사이트에서 콘솔창에서 querySelectorAll과 getEl..
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();을 호출하면 아무런 값이 ..
