코딩하는라민

[Javascript] 참조 범위를 결정짓는 스코프(scope) - 1 [ 모던 자바스크립트 딥다이브 책 혼자 스터디하기♩ ] 이번에는 let's get IT 자바스크립트 책 공부하면서 궁금했던스코프와 클로저 개념을 딥다이브 책을 통해 차근차근 공부하고자 한다.코드의 순서에 따라 실행되기도 하고, 실행되지 않기도 하는 것이 너무 궁금했다..책을 본다고 완전히 이해될지 모르겠다. 아무튼 공부해보자. 1. 스코프 스코프는 변수를 검색할 때 사용하는 규칙. 즉, 식별자를 검색하는 규칙이다. 스코프는 전역 스코프와 지역 스코프로 나뉜다. ① 매개변수 함수 안에서 선언된 매개변수는 함수 안에서만 참조 가능하다. 함수의 바깥에서 매개변수에 접근한다면 정의되지 않는다고 뜰 것. function R(x, y){ ret..

렛츠기릿 자바스크립트 #6 계산기 만들기 - 함수 사용하기 책 + 저자 유튜브 강의(인프런) + 추가로 모르는 내용들 필기 추가하면서 공부 1. 순서도 그리기 ① 숫자1, 2 / 연산자 를 저장할 변수를 각각 생성 ② 숫자를 누르면 연산자가 입력된 유무에 따라서 숫자1에 저장할지, 숫자2에 저장할지 결정하고 변수에 숫자 저장 ③ 연산자 버튼을 누르면 숫자1의 유무에 따라 연산자를 저장하거나 경고창을 띄운다 ④ = 버튼을 누르면 숫자2의 유무에 따라 연산자를 결과에 출력하거나 경고창을 띄운다 기본원리 - 숫자1이 존재해야 연산자가 존재 가능하고, 연산자가 존재해야 숫자2가 존재 가능하다. 2. 변수 생성하고 버튼에 이벤트리스너 달기 ① 변수 생성 let numOne=''; let numTwo=''; let..

렛츠기릿 자바스크립트 #5 끝말잇기 게임 만들기 책 + 저자 강의 + 추가로 모르는 내용들 필기 추가하면서 공부 책 저자 강의(제로초) 1. 순서도 그리기 §. 순서도 그리기가 왜 중요할까? - 프로그래머는 코딩을 하는 것도 중요하지만 절차를 세우고 오류를 수정하는 것. - 순서도를 통해 코드를 수정하고, 코드를 토대로 순서도를 보완해가자. §. 프로그램의 절차를 만들 때의 원칙 ① 절차의 개수는 고정 ② 절차는 항상 같은 내용 → 구체적인 내용보다는 포괄적인 내용 ex) 4명, A, B,...(x) → 다음 사람(o) ③ (최대한) 모든 가능성 고려 ④ 예시는 절차를 검증하는 데 사용 → 구체적인 예시 - 분기점 : 판단을 요구하는 절차에서 Yes/No로 화살표 순서도가 갈라지는 부분 - 거슬러 올라간..

렛츠기릿 자바스크립트 책 #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..

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

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; } ..