도도의 IT이야기

우리는 $('#target');

우리는 jquery를 이용해 js dom을 아주 쉽게 사용할 수 있다. $(document).ready(function(){ }); 위의 코드를 분석해보자 $은 jquery keyword로써 모든 jquery문들은 $로 시작한다. $다음에 parenthesis가 온다. 그리고 이 괄호안에 우리가 select할 것을 두면된다. 여기서 우리는 document(전체 HTML)을 선택했다. 우리는 이제 jquery안에있는 내장 메소드를 사용해 document가 ready가 되면 안에있는 콜백함수 실행된다. 이제 jquery와 vanilla javascript의 차이점을 알아보자. 이 코드를 확인해보자. 첫번째 코드는 getElementById를 사용해 logo를 선택한다. 두번째 코드는 jquery를 사용해 l..

Mixin 함수 우선 지금까지 inheritance를 이용해 속성들을 상속받는 방법을 알아봤습니다. function Machine(){} Machine.prototype = { material : 'matal', fuel : 'gasoline', engineOn : function(){return "출발";} } function Car(brand, color){ this.brand = brand; this.color = color; } Car.prototype = Object.create(Machine.prototype); Car.prototype.wheels = 4; Car.prototype.constructor = Car; function Scooter(brand, color){ this.brand ..

복습시작 그전에 new의 역활을 정리하자면 1. 비어있는 객체를 만든다 {} 2. 생성자의 this를 비어있는 객체에 bind한다 3. 비어있는 객체에 __proto__라는 속성을 만든다. __proto__는 객체를 만든 생성자의 프로토타입 속성을 포인트한다. 4. 생성자가 비어있는 객체에 새로운 속성을 파라미터로 받은 값으로 지정해 준 다음에 this(객체)를 return한다 다른 역활을 간단한지만 3번은 이해하기가 어렵다 그러니 그림으로 표현해보자 이렇게 모든 객체안에는 __proto__라는 속성이 있고 이 __proto__는 상위 객체에서 상속받은 속성들을 나타낸다. 이거 두 개만 기억하자 1. __proto__가 가리키는 속성들이 곧 객체에 상속되는 속성들이다. 2. literal notation..

자바스크립트는 객체지향 프로그램이라는 말이 있을 정도로 자바스크립트에서 객체는 굉장히 중요한 부분을 차지합니다. 객체(Object) 뜻 우선 객체란 말이 너무 어렵군요. 저는 코딩을 공부하기 전에 객체라는 단어가 존재하는지도 몰랐습니다. 객체를 알기위해선 객체가 영어로 무엇인지 알아야합니다. 객체는 영어로 "Object" 즉 물건이라는 뜻 입니다. 그렇습니다. 객체란 물건을 의미하는 것이죠. 이게 무슨 개소리야? 이런 소리를 하신 분들도 있으겁니다. 그러니 이해하기 쉽게 코드를 예로 들면서 설명해봅시다. 그 전에 한 가지 물건이나 사람 아무거나 떠올려 봅시다. 마침 밖에 차가 있으니 저는 차를 선택하겠습니다. 그럼 밖에 있는 차에 대해 설명을 해보겠습니다 1. 바퀴가 네개있다. 2. 차는 검정색이다. 3..

다른 부분들을 공부하다보니 객체에 toStirng()이라는 메서드를 많이 사용하더라고요 number이나 다른 data type에 .toString() 메서드를 사용하면 그저 string으로 반환된 값을 주는 역활을 하지만 객체 사용하면 약간 다르더라고요. 짧게 Object.prototype.toString()대해서 알아보겠습니다. 우선 Object.prototype이라고 쓰여있으니 toString()은 빌트인 constructor 함수인 function Object()로 생성된 모든 객체에 상속되고 있다는 것을 알 수 있습니다. 그럼 이게 도데체 무엇을 하걸까요? toString() 메서드는 객체를 문자열 같은 방식으로 사용하고 싶을때 사용합니다. 예를 들어봅시다. let girl = { name:'Li..

*MDN 문법과 자료형을 개인의 복습을 위해 간추린 글입니다* 선언 방법 1. var - 변수를 선언한다. function scope이거나 global scope로 선언 가능. 동시에 값을 초기화 하는 것도 가능. 2. let - 변수를 선언한다. block scope 로 선언. 동시에 값을 초기화 하는 것도 가능 3. const - 상수를 선언한다. block scope이고 무조건 초기화 해야됨. 변수 선언 1. var a = 2; //전역또는 지역변수 가능 2. let b = 2; //block scope 지역변수 3. a = 2; // 선언되지 않은 전역변수 *초기화 되지 않은 변수는 undefined *선언되지 않은 변수를 console.log 하면 reference error let const ..

자바스크립트란? 자바스크립트는 복잡한 로직을 적용하여 "살아 숨쉬는" 웹페이지를 만드는 프로그래밍 언어입니다. 서버쪽에서 실행되는 언어가 아니라 사용자의 컴퓨터에서 실행되는 언어이기 때문에 클라이언트 언어라고도 합니다. HTML은 "정보" CSS는 "디자인" JAVASCRIPT는 "행동" 하지만 요즘 JavaScript가 엄청나게 발전했기 때문에 HTML과 CSS의 위치를 위협하고 있습니다. 자바스크립트의 날개 Web API 자바스크립트는 web API라는것을 탑재한 언어입니다. Web API 는 클라이언트 쪽에서 사용하는 API를 가르킵니다. 그럼 API가 뭔데? API (Application Programming Interface) 식당에 있다고 상상해봅시다. "오늘은 흠... 어린이 돈까스가 먹고 ..

저는 왕초보 독학러로써 제가 적은 부분에 틀린 부분이 있을 수도 있다는 점을 감안해주시길 바랍니다. HTML, CSS, 자바스크립트는 전부 다 웹 개발에 사용되는 언어입니다. 우리는 이 중에 자바스크립트(JavaScript)라는 언어에 대한 고찰을 시작하려고 합니다. 하지만. 그전에 우리가 꼭 알아야 하는것이 있습니다. 웹은 무엇일까? 인터넷 > 웹 > 웹사이트 > 웹페이지 우리는 웹을 자주 사용하지만 지나가다 아무나 붙잡고 "웹이 뭐야?!"라고 물어본다면 정확한 정의를 대답할 수 있는 사람은 많지 않을겁니다. 우선 웹을 이해하기 전에 인터넷이라는 것에대해 알아야합니다. 인터넷이란? 인터넷은 컴퓨터, 스마트폰을 포함한 전자기기들을 포괄하는 거대한 네트워크입니다. 비유를 하자면 우리가 전자기기고 인터넷은 ..

우선 저는 엄청난 코딩 초보입니다. 그냥 제가 이해한 내용을 쓰는 것으로 틀린 부분이 있을 가능성이 있습니다. 진짜 콜백 때문에 미칠줄 알았습니다. 몇일 동안 하루 종일 책상에 앉아 공부를 해도 콜백이 도저히 이해가 안가더라고요. 그래도 겨우겨우 제가 이해한 내용들을 조금 적어볼까 합니다. 제가 아는 내용을 다 적는거라 불필요하게 길 수도 있습니다. 함수는 일급객체 우선 시작하기 전에 함수는 일급객체(first class object)라는 점을 집고 가겠습니다. 일급객체란 변수, 매개변수에 담길 수 있고 return값으로도 사용될 수 있는 것을 가리킵니다. 밑에는 함수가 여러가지 형태로 사용되는 방법의 예시를 코드로 쳐봤습니다 //변수에 담긴 함수 let x = function(){ return '나는 ..