본문 바로가기
관리자

JavaScript

(25)
Javascript / DOM / Event (addEventListener, onclick) 1. 기본개념 Event란 웹페이지에서 사용자의 click, drag & drop, keyboard 입력 등을 의미한다. javscript에서 event 속성을 어떤 개체(예를 들면, 버튼)에 주게 되면, event 발생 시에 어떤 동작을 하도록 만들 수 있다. 대표적인 예로, click에 대한 아래 예제를 살펴본다. ex1) addEventListener를 활용하여 click 발생 시, 함수 실행 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 // HTML 코드 Submit // addEventListener 실행 코드 document.querySelector('#submit').addEventListener('click..
Javascript / Callback, High Order Function, hoisting 1. 함수 표현식(function expression)과 함수 선언식(function declaration) 함수를 만드는 방법은 함수표현식과 함수선언식이 있다. 1 2 3 4 5 6 7 8 9 10 11 12 alpha(5) // 결과 : ReferenceError: Cannot access 'alpha' before initialization beta(5) // 결과 : 25 //함수 표현식 const alpha = function(num){ console.log(num * num) } //함수 선언식 function beta(num){ console.log(num * num) } Colored by Color Scripter cs -함수 표현식 : 어떤 변수에 함수를 지정하는 방법으로, 이를 활용하..
Javascript / 기초 / 객체지향 (Object-oriented) 객체지향 프로그래밍의 기초는 다음 글을 통해 파악할 수 있다. - 객체지향 프로그래밍 이 글은 기초 파악 후 Javascript에서의 객체지향 프로그래밍 방법에 대해 알기 위한 내용이 담긴 글이다. 간단하게, 객체는 동일한 속성을 갖는 변수들을 정의하기 위해서 사용한다. 동일한 속성을 갖는 집합체를 Class라 하고, Class의 객체들을 인스턴스(Instance)라 한다. Class는 속성과 메소드를 사용한다. ex) Car 객체 : brand, speed라는 속성을 갖고, speedUp이라는 메소드를 가짐. 속성 : Car1 = 'H사, 100km/h', Car2 = 'T사, 50km/h' 메소드 : Car1.speedUp(10) : 110 km/h, Car2.speedUp(50) : 100 km/h..
Javascript / 기초 / Scope, 선언키워드(var, let, const) 1. Global/Local Scope Scope는 어떤 변수가 적용되는 범위를 나타낸다. Global scope, local scope로 구분된다. >> 안쪽 scope에서는 바깥 변수/함수에 접근 가능하지만, 바깥쪽 scope에서는 안쪽 변수/함수에 접근할 수 없다. 1 2 3 4 5 6 7 8 9 let wish = 'I want'; function foods(){ let food = 'cheese burger'; return wish + ' ' + food; } foods(); // 결과 : 'I want cheese burger' food; // 결과 : ReferenceError 2. Block, function scope 2-1. Block Scope block은 중괄호'{ }' 안의 영역을..
Javascript / Closure Function (Currying, Closure module pattern) 1. Closure 함수의 정의 함수 자체를 어떤 함수의 parameter로 받아오면, 받아온 함수 내에서 부모 함수에 대한 변수를 사용할 수 있는 것을 Closure라고 한다. 또는, 자식함수 자체를 Closure라고도 한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 // Sourcecode function parentFn() { let parentVar = 'Burger'; console.log(parentVar); function childFn(){ let childVar = 'Chee..
JavaScript / Rest Parameter, Spread Operator Rest Parameter Rest Parameter는 함수를 선언할 때, 여러 개의 Parameter 중에 남은(rest) Parameter들은 '배열'의 형태로 지정하는 것을 말한다. parameter의 이름 앞에 '...' 을 써주면 된다. 1 2 3 4 5 6 7 8 9 10 11 function egg1(spam, ...rest){ return rest } egg1(1, 2, 3, 4, 5); // 결과 : [2, 3, 4, 5] function egg2(spam, mayo, joa, ...rest){ return rest } egg2(1, 2, 3, 4, 5); // 결과 : [4, 5] cs >> Rest Parameter는 함수 선언 시에, Parameter 목록의 맨 마지막에만 써야한다...
Javascript / 기초 / 객체(Object) 객체(Object) 1. 객체가 필요한 이유 객체는 같은 카테고리의 정보를 여러 개 만들어 줘야할 때, 간결하고 명확하게 표현하기 위해 만든다. User에 대한 'name, email, address' 가 있고, User2에 대한 'name, email, address'가 있을 때, 각 값들을 지정하기 위해서는 변수를 총 6개 만들어 주거나, 배열을 2개 만들어서 각 요소들을 index화 해야하는 불편함이 있다. 그래서 객체를 생성해준다. ex) 변수 6개 : user1_name, user1_email, user1_address, user2_name, user2_email, user2_address 객체 2개: user1 = {name : 'steve', email: '...', address: '.....
Javascript / 기초 / 배열, 반복문 1. 반복문 1-1. for문 if문과 같은 형태로 사용하면 되는데, 대신 조건문에 차례대로 '초기화; 조건식; 증감문'을 작성해주어야 한다. >> 초기화, 조건식 다음에 ';(세미콜론)'을 써야함을 기억하자. ',(comma)'가 아님. for(초기화; 조건식; 증감문){ 조건식을 만족하기 전까지 반복적으로 실행하고 싶은 문구; } ex) let sum = 1; for(let n = 1; n 만약 초기화문에서 let을 안쓰면, 자동적으로 변수 n을 var n 으로 잡아준다. js에서는 let, var, const 등이 있는데, 지정하는 것에 따라 사용하는 범위가 달라진다. 추후에 자세히 배울 수 있다. >> 반복문에서 continue를 쓰면, 다음 if문을 무시하고 다음 증감문으로 넘어가라는 뜻이 되고..