코딩하는라민

렛츠기릿 자바스크립트 책 #4 함수, 객체 §. 함수 1. 함수 - 함수 : 특정한 작업을 수행하는 코드 - 선언한다 : 함수를 만드는 행위 [ 함수를 만드는 세 가지 방법 ] ① 함수 선언문 : function 키워드 뒤에 함수 이름을 넣는 방식 function a() { } ② 함수 표현식 : 상수나 변수에 대입하는 방식 const b = function() { } ; ③ 화살표 함수 : 화살표 기호를 사용해 함수를 만들 수도 있다. const c = ( ) = > { } ; - 호출한다 : 함수를 사용하는 행위. - 선언한 함수 이름 뒤에 () 를 붙이면 함수가 실행됨. > function a( ) { } → 함수 a 선언 a() ; → 함수 호출 : a 뒤에 () 를 붙임 (없음) → 함수가 정의..

렛츠기릿 자바스크립트 책 #3 객체, 배열 객체 - 자료형의 일종. 다양한 값들을 모아놓은 또다른 값. - 배열, 함수, 배열이나 함수가 아닌 객체로 구성. 배열 - 대괄호로 값들을 감싼 것. - 요소 : 배열 안의 값들. - 인덱스 : 0부터 시작하는 자릿수 - 값들의 자료형은 모두 같지 않아도 됨 - 배열 안에 다른 배열을 넣을 수 있음(이차원 배열) - 배열 안에 다른 변수를 넣을 수 있음 - 배열 내부의 값은 중복 가능하며, 빈 값도 가능. - 배열의 개수 : .length - 빈 값도 있는 개수로 친다. - 마지막 요소의 값 찾기 * 인덱스는 0부터 시작이므로 길이에서 1을 빼면 인덱스 크기가 된다. 배열에 요소 추가하기 → 대입 - 배열 앞의 괄호 숫자는 배열의 개수 - 배열의 마지막 요소 다..

렛츠기릿 자바스크립트 책 #2 변수, 조건문, 반복 변수 - 변수 : 값을 저장하고 저장한 값을 불러올 수 있음. - 선언 : 변수를 만드는 행위. - 선언문 let / const / var - 초기화 : 변수를 선언함과 동시에 값을 대입하는 행위, 결괏값은 항상 undefined로 출력 - empty : 변수 선언 시 값을 대입하지 않을 수도 있음 > let ramin < undefined - 변수명 🔵 : 한글, 한자, 유니코드, $, _ ❌ : 숫자로 시작, 예약어 - 웹 브라우저를 새로고침하면 선언한 변수가 초기화되는데, 다시 변수를 콘솔에 입력하면 정의되지 않았다고 에러 뜸 - 선언한 변수를 다시 선언하면 에러 뜸 - 선언문과 코드 식의 차이 let 으로 변수 선언 하면 결괏값이 없어 undef..

렛츠기릿 자바스크립트 책 #1 순서도, 콘솔, 자료형, 연산자 순서도 그리기 - 이중 원 : 시작, 끝 표시, 끝은 없을 수도 있다 ◎ - 타원 : 일반 절차 ○ - 마름모 : 판단(Yes or No) ◇ - 이중 사각형 : 특수 상황(대기, 이벤트) - 화살표 : 흐름 → 웹브라우저 '콘솔' - > : 프롬프트, 명령을 입력하고 Enter 를 누르면 코드 실행됨 - 인터프리터 방식 : 코드를 한 덩어리씩 실행해 결과 출력(자바스크립트) - 컴파일 방식 : 코드를 컴퓨터 언어로 변환 후 한번에 실행(C, C++, 자바 등) - REPL (Read-Eval-Print Loop) : 코드를 한 줄씩 입력받고, 받은 입력을 평가 후 결과 출력. 이 과정을 반복하는 특성. 문자열(String) - typeof ..

Javascript #15 객체 활용 33. 객체 활용 1) 객체화 시키기 BodySetBackgroundColor('black'); BodySetColor('white'); LinkSetColor('powderblue'); ↓ 아래와 같은 형태를 취하기 위해 앞에서 정의했던 함수들을 객체화 시켜줄 것임 Body . setBackgroundColor('black'); Body . setColor('white'); Link . setColor('powderblue'); function BodySetColor(color){ document.querySelector('body').style.color = color; } function BodySetBackgroundColor(color){ document.q..

Javascript #14 객체의 메소드와 프로퍼티 32. 객체프로퍼티와 메소드 메소드 객체에 소속된 함수 프로퍼티 객체에 소속된 변수 1) 함수 정의의 표현방식 1 2 3 coworkers.showAll = function(){ ... } var showAll = function(){ } function showAll(){ ... } 모두 같은 것 2) 객체에 소속된 변수의 값으로 함수를 지정할 수 있다. (객체에 소속된 함수를 만들 수 있다.) var coworkers = { "programmer" : "ramin", "designer" : "choi" }; → key 값( = 배열에서는 index) → 객체 : 문자, 숫자, 배열, 함수 등을 담을 수 있다. - 객체에 이름이 바뀐 경우에는 cowo..

생활코딩 Javascript #13 객체와 반복문 30. 객체와 반복문 - 생성된 객체(Object)의 데이터를 모두 가져와야 하는 경우, 반복문 사용했다. 1) 객체 형태 var coworkers = { "programmer" : "ramin", "designer" : "choi" }; → key 값( = 배열에서는 index) - 왼쪽의 programmer, designer 를 key 값이라고 한다. - 이 key 값은 배열에서는 index 라고 부른다. - 객체에서는 이 index 를 key 값으로 가져온다. 2) 반복문을 사용해 모든 데이터 가져오기 for (var key in 객체이름) { ... } → 객체에 있는 key 값들을 가져오는 반복문 → 즉, 객체에 있는 key 값을 하나하나 꺼내서..

생활코딩 Javascript #12 객체 쓰기와 읽기 29. 객체 예고 1) 객체란? 객체 함수와 연관된 변수를 같은 이름으로 그룹핑해서 정리정돈하기 위한 도구 - 코드들을 정리정돈하기 위해 함수를 사용하는데, - 이러한 함수가 많아지면 함수와 연관되어 있는 변수들이 많아지면 복잡도의 한계에 도달한다. - 이런 한계 상황에서 서로 연관된 함수와 연관된 변수를 같은 이름으로 그룹핑해서 정리정돈하기 위한 도구 2) 함수의 이름 - 함수의 이름이 겹치게 되면 기존에 있던 함수는 지워진다. function setColor(color){ var alist = document.querySelectorAll('a'); var i = 0; while ( i< alist.length){ alist[i].style.col..

Javascript #11 함수 활용 > 선행 28. 함수 활용 - 위와 같이 input 안에 있던 함수를 script 태그에 따로 가져와 독립된 함수로 만들게 되면, this 라는 것이 '전역객체'를 가리키게 된다. 즉, 웹브라우저에서는 window 를 가리키게 된다. - 따라서, 위와 같이 input 태그 안에 단순히 함수를 불러오게 된다면 함수가 제대로 실행되지 않는다. - input 안에 함수에 this 라는 매개변수를 넣고, - script 의 함수에 self 라는 매개변수를 넣고 모든 this 를 self 로 바꿔주면 함수가 정상적으로 실행되는 것을 확인할 수 있다.

Javascript #10 함수 24. 함수 예고 1) 함수를 사용하는 이유 - 함수는 코드를 담고 있는 수납상자 같은 느낌 - 무수히 많은 코드를 수정하는 경우 함수를 사용하지 않았을 때 하나하나 다 바꿔줘야 하므로 현실적으로 불가능. - 함수를 사용하면 무수히 많은 코드 전체를 수정할 수 있다. - 중복된 코드를 함수로 지정하여 한줄로 단순화할 수 있다. 2) 함수 사용 시 좋은 점(장점) - 유지보수가 쉬워진다. - 코드가 단순해져서 웹 페이지의 크기가 줄어들 수 있다. 25. 함수 ( function ) 1) 반복문을 쓸 수 없는 경우 연속적으로 반복되는 것이 아니라 연속적이지 않게 반복되는 것 → 반복문을 사용하기 어렵거나 사용 불가 2) 함수 생성 및 호출 function 함수이름() { → ..