2023.03.26 - [Front end/JavaScript] - 자바스크립트 function의 파라미터 문법 왜 쓰는가? 자바스크립트 function의 파라미터 문법 왜 쓰는가? 2023.03.26 - [Front end/JavaScript] - 자바스크립트 function 문법 왜 쓰는가? 자바스크립트 function 문법 왜 쓰는가? 자바스크립트에는 함수 function 문법이 있는데, 이 문법을 왜 쓰는지 알아야 한다. 그래야 dongwookit.tistory.com 위 포스팅에서 사용한 예제를 이어서 사용하기 때문에 위 포스팅을 보시면 이해가 더 빠를수도?! 지금까진 버튼의 onclick=" " 안에 자바스크립트 코드를 길게 짰는데 이것 도 좀 별로 같다. 자바스크립트 코드는 따로 자바스크립트..
2023.03.26 - [Front end/JavaScript] - 자바스크립트 function 문법 왜 쓰는가? 자바스크립트 function 문법 왜 쓰는가? 자바스크립트에는 함수 function 문법이 있는데, 이 문법을 왜 쓰는지 알아야 한다. 그래야 응용도 잘하고 혼자서 코드를 잘 작성 할 수 있다. 함수는 길고 복잡한 코드를 한 단어로 축약하고 싶을 dongwookit.tistory.com 위 포스팅에서 사용한 예제를 사용하므로 참고하시면 더욱 빠른 이해가 될 것입니다! function에 사용가능한 파라미터(매개변수) 문법 함수내에 파라미터를 넣어줄 수 있다. function alert(자유롭게작명) { document.querySelector('.alert-box').style.display ..
자바스크립트에는 함수 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..
프로그래밍이란 컴퓨터에게 일을 시키는것이다. 코드를 짜서 컴퓨터에게 저거해라 이거해라 일을 시키는거다. 여기서 컴퓨터에게 일을 시킬때는 사람과 대화하듯이 하면 안된다. 사람은 "너 저기가서 저것좀 바꿔와" 하면 잘 알아듣는다. 컴퓨터는 "너 저기가서 저것좀 바꿔와" 하면 절대 못알아듣는다. 왜냐하면 컴퓨터는 사람처럼 유추, 상상을 할 수가 없어서 정말 정확히 설명해줘야 알아듣는다. "너 저기가서 저것좀 바꿔" 이게 아니라 "너 id가 hello인 html요소 찾아서 텍스트 내용을 강동욱이라고 바꿔" 이렇게 말해야 알아듣는다. 이렇게 컴퓨터와 사람과의 차이점을 잘 알고 있어야 코딩,프로그래밍을 잘할 수 있다.
요즘 자바스크립트는 많은 곳에서 쓰이고 있다. 서버도 만들고 머신러닝도 하고 등등 많은 분야에서 쓰이고있다. 하지만 자바스크립트의 근본 목적은 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가 ..
