코딩하는라민

렛츠기릿 자바스크립트 책 #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 함수이름() { → ..

Javascript #9 배열과 반복문 활용 > 선행 생활코딩 Javascript #8 배열과 반복문 Javascript #8 배열과 반복문 20. 배열 array 배열 - 배열은 대괄호 [ 부터 시작해서 대괄호 ] 로 끝난다. - 대괄호 안에 값을 적는데, 여러 개의값을 적을 수 있다. - 값과 값 사이는 콤마 , 로 구분 var c ramincoding.tistory.com 22. 배열과 반복문 하이브리드 1) 배열 안의 원소들을 불러와서 반복문으로 리스트 태그에 넣기 ① 배열 생성하기 var coworkers = ['ramin', 'choi', 'dana', 'udin'] ② 반복문 기본 형태 var i = 0; while(i < 4 ){ document.write(''); i = i + 1; } ..

Javascript #8 배열과 반복문 20. 배열 array 배열 - 배열은 대괄호 [ 부터 시작해서 대괄호 ] 로 끝난다. - 대괄호 안에 값을 적는데, 여러 개의값을 적을 수 있다. - 값과 값 사이는 콤마 , 로 구분 var coworkers = [ '원소(element)', '원소(element)' , '원소(element)' , ... ] → 배열 안을 구성하는 요소들을 ' 원소(element) '라고 한다. → 원소의 순서는 0번째부터 시작한다. 1) 배열 만들고 가져오기 Array syntax get - 변수에 배열을 저장하고, - 꺼낼 때는 index 를 이용해서 가져올 수 있다. - index 는 0번부터 시작 n-1 번째까지 있다. ex) 0번째는 ramin, 1번째는 leezche ..

Javascript #7 리팩토링(중복 제거) 18. 리팩토링 중복의 제거 코드를 효율적으로 만들어서 가독성 을 높이고 유지보수를 편리하게 만드는 것. 그리고 중복된 코드를 낮추는 방향으로 코드를 개선하는 것. → 규모가 커지는 프로그램을 틈틈이 리팩토링을 해야 좋은 프로그램을 만들 수 있다. 1) 같은 코드를 똑같이 복사하여 버튼을 두개 만든 경우 - 두번째 버튼을 눌러도 value 값이 첫번째 버튼만 변경된다. - 해결법 : id 값을 지우고, document.querySelector('#night_day') 부분을 전부 this 로 변경 - this 를 사용해서 해당 코드 내에서 작용하도록 변경 2) 변수 이용해서 중복 제거 - 공통된 부분을 변수로 두어 중복을 제거하여 코드를 간단하게 만들 수 있..