자바스크립트에는 함수 function 문법이 있는데, 이 문법을 왜 쓰는지 알아야 한다. 그래야 응용도 잘하고 혼자서 코드를 잘 작성 할 수 있다. 함수는 길고 복잡한 코드를 한 단어로 축약하고 싶을 때 쓰는 문법이다. 어려운말로 표현하면 특정 기능을 다음에도 쓰기 위해 모듈화해놓는 문법이다. function 문법 사용법 function 자유롭게작명() { 축약하고 싶은 긴 코드 } 위 코드를 작성하고 자유롭게작명() 이거 쓸 때 마다 그자리에 축약하고 싶은 긴 코드가 실행된다. function 문법 응용 예제 2023.03.26 - [Front end/JavaScript] - 동적 UI 만드는 방법 여기서 작성한 예제이다. 참고하면 더 빠른 이해가 될 것이다! 열기 알림창 여는 코드를 function ..
동적 UI 만드는 방법에 대해서 알아보자. 웹페이지에선 탭, 모달창, 서브메뉴, 툴팅 등 수백개의 동적인 UI를 만들 수 있다. 하지만 수많은 UI들을 하나하나 다 외워서 만드는게 아니라 동적인 UI 만드는 방법을 알면 다 응용해서 만들 수 있다. 동적 UI 만드는 방법 1. HTML CSS로 미리 UI 디자인을 해놓는다. (필요없을땐 숨기기) 2. 버튼을 누르거나 할 경우 UI를 보여달라고 자바스크립트 코드짜기 1. HTML CSS로 미리 디자인하기 알림창임 .alert-box { background-color: skyblue; padding: 20px; color: white; border-radius: 5px; display: none; } 여기서 미리 html css로 디자인 해놓고 display..
요즘 자바스크립트는 많은 곳에서 쓰이고 있다. 서버도 만들고 머신러닝도 하고 등등 많은 분야에서 쓰이고있다. 하지만 자바스크립트의 근본 목적은 HTML 조작이 목적이다. 자바스크립트를 쓰는 가장 큰 이유는 HTML 조작가능해서 쓰는것이다. 자바스크립트를 사용해서 HTML 조작을 하면 뭐가 좋은가? => 동적인 UI 만들수 있다. 그 외에도 자바스크립트를 사용하면 아래와 같은 기능들을 사용할 수 있다. 서버와 통신가능 클릭, 타이핑 감지 비동기처리 자료다루기 등등 다른 많은 기능들이 있음. 자바스크립트로 HTML 조작 및 변경하는 법 안녕하세요! document.getElementById('???').??? = '???'; 여기 물음표만 맘대로 바꿔주면 html의 모든걸 변경하고 조작할 수 있다. docu..
오늘은 얕은복사와 깊은복사의 차이점에 대해 알아보려고 한다. 우선 얕은복사와 깊은복사의에 대해 알아보기 전에 참조에 관한 개념을 이해해야한다. 참조란? let 강동욱 = { name: '강동욱', age: 26, job: 'frontEndDeveloper' } let 손흥민 = 강동욱; // 강동욱과 손흥민은 참조관계가 된다. 손흥민.name = '손흥민'; 손흥민.age = 30; 손흥민.job = 'soccer player' console.log(손흥민); // {name: '손흥민', age: 30, job: 'soccer player'} console.log(강동욱); // {name: '손흥민', age: 30, job: 'soccer player'} 위처럼 참조관계가 되면 손흥민의 속성(nam..
class를 상속한 class를 만들고 싶을 때 쓰는 extends class 할아버지{ constructor(name){ this.성 = 'Kim'; this.이름 = name; } } 이 class가 유용한 나머지 이것과 유사한 class를 하나 더 만들고 싶다. 그러면 직접 class를 하나 더 만들어서 내용을 복붙하면 된다. 하지만 class안에 복사할 내용이 너무나도 많으면 코드가 너무나도 길어진다. 그래서 개발자들이 extends라는 문법을 만들었는데 이걸 이용해서 class를 만들면 기존에 있던 class의 내용을 그대로 복붙해서 만들어 낼 수 있다. "다른 class를 상속해서 만들 수 있게 도와주는 문법"이다. 그래서 할아버지 class를 상속하는 아버지 class를 만들어보겠다. cla..
상속을 구현하는 또 다른 방법인 class 문법을 알아보자. 자바스크립트에서 class 라는 문법은 ES6에 추가되었다. 다른 객체 지향언어들과 비슷한 문법이다. class 문법은 constructor라고 명시적으로 적어 줄 수 있다.👍 // ES6 class 키워드로 구현하는 constructor 기계만들기 class 부모 { constructor() { this.firstName = '강'; } } var 자식 = new 부모(); console.log(자식); // 부모 {firstName: '강'} console.log(자식.firstName) // 강 constructor() { } 라고 쓴 부분에 this.~~~ 하면 새로 생성되는 오브젝트들에 값을 부여할 수 있다. 상속가능한 함수를 추가하려..
상속기능 구현 할 수 있는 방법이 몇가지 더 있는데 이번엔 Object.create()로 구현해보자. 다른방법 으로 상속기능을 구현 할 수 있는 방법을 포스팅 해놨으니 참고하면 도움이 될 것이다. -prototype 2023.02.28 - [Front end/JavaScript] - 🔖 객체지향2. prototype 🔖 객체지향2. prototype function Student(이름) { this.name = 이름; this.age = 15; this.sayHi = function() { console.log('안녕하세요 ' + this.name + '입니다.') } } let 학생1 = new Student('강동욱'); let 학생2 = new Student('손흥민'); // ▲ Student가 ..
1. prototype은 constructor 함수에만 생성된다. 위 사진처럼 우리가 일반적으로 만드는 array나 object에는 prototype이 없다. 그럼 일반 object 같은걸 상속하고 싶으면 어떻게 하는가?? - constructor 함수를 만들기 - Object.create() 사용 - class 사용 2. 내 부모 유전자를 찾고 싶다면 __proto__를 출력해보면 된다. 부모로부터 생성된 자식 object들은 __proto__라는 속성이 있다. 이걸 출력해보면 부모의 prototype이 출력된다. 그래서 __proto__는 부모의 prototype과 같은 의미이다. function Student(){ this.name = '강동욱'; this.age = 15; } var 학생1 = n..
function Student(이름) { this.name = 이름; this.age = 15; this.sayHi = function() { console.log('안녕하세요 ' + this.name + '입니다.') } } let 학생1 = new Student('강동욱'); let 학생2 = new Student('손흥민'); // ▲ Student가 가지고 있는 name, age, sayHi 속성들을 물려받음 // ▲ 이러한 과정을 전문용어로 상속이라고한다. ▲ 위 코드는 객체지향 용어로 상속(inheritance)이라고 한다. Student라는 constructor가 가진 name, age, sayHi 속성들을 그대로 물려받아서 오브젝트를 하나 뽑아주는걸 상속이라고 부른다. 그래서 상속해주는 것..
🌈 constructor 문법의 용도 - object를 마구 복사(Deep copy)하고 싶을때 사용해라. - 비슷한 object 여러개 만들 때 유용하다. 비슷한 학생 object를 여러개 만들려면? - constructor 라는 object 생성 기계를 만들어라. function Student (이름) { this.name = 이름; // this는 새로생성되는 object를 뜻함(instance) this.age = 17; this.sayHi = function() { console.log('안녕하세요 ' + this.name + '입니다'); } } // ▲ 위 코드 전체를 constructor라고 함 var 학생1 = new Student('강동욱'); // ▲ Student가 가지고 있는 na..
