JS (26) 썸네일형 리스트형 JS #7-자바스크립트 기초 개념7 (객체) 복습 화살표함수 : 일반 함수를 만들 때 사용한다. 클래스 : 생성자를 만들 때 사용한다. (객체 중심) normal function, concise method => 나를 호출한 대상으로 this를 가르킨다. 하 Arrow function => this를 바인딩하지 않기 때문에 내 상위 환경에서 this를 가져오도록 설계되어있다. 제곱수를 만드는 함수 let pow = (numeric, powerCount) => { let total = 1; for (let i = 0; i 배열의 크기만큼 돌아가니까 제곱의 기능이 제대로 작동된다. 함수와 변수의 연산 변수 x와 함수 a 를 연산하는 경우, 무조건 함수가 먼저 실행된다. 함수는 실행을하면 재귀 함수 안쪽 pow가 계산될 때 함수 실행 환경이 설정되고 바.. JS #6-자바스크립트 기초 개념6 (함수표현식, 화살표함수) 함수 getComputedStyle(node)[prop] : html 태그의 값을 가져오는 것 node 는 요소노드(클래스), prop은 프로퍼티를 가르킨다. ㄴ node에 $0을 입력하면 선택된 엘리먼트의 값을 가져온다. function getStyle(node, prop) { getComputedStyle(node)[prop]; //html의 태그의 값을 가져온다.node가 요소노드 prop이 프로퍼티 } const first = document.querySelector('.first'); const size = getStyle(first, 'fontSize'); console.log(size); querySelector(요소 노드); 해당하는 id나 class의 값을 가져온다. node = docu.. JS #5-자바스크립트 기초 개념5 (반복문, 함수) do-while 문 do 안의 내용을 while문의 조건에 해당할 때까지 출 let i = 0; do { console.log(i); i++; } while(i js에 있는 key라는 을 조회할거야 )! 조상의 메서드를 빌려쓰는 형태! Object의 prototype에 있는!! hasOwnProperty를 불러다가 빌려쓰는 형태이다. call-> js의 key라는값을 조회할게~ 라는 뜻. call(빌려쓰는 주체 , hasOwnProperty의 찐 인수); for (let key in js) { console.log(key); } 부모의 요소때문에 더럽혀진 것을 제외하기 위해서는 for (let key in js) { if(Object.prototype.hasOwnProperty.call(js.key)){.. JS #4-자바스크립트 기초 개념4-논리연산자, 조건문 switch, 반복문 while 논리연산자 OR || 피연산자가 모두 false인 경우를 제외하고는 모두 true 첫 번째 Truthy를 찾는 것 hour가 10보다 작거나 18보다 큰 것에 해당한다면 블록 안의 조건을 수행한다. OR 연산자가 여러개인 경우 가장 왼쪽 피연산자부터 시작하여 오른쪽으로 나아가며 피연산자를 평가한다. 각 연산자를 불린형으로 변환한다. 변환 후 그 값이 true 이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다. 피연산자 모두를 평가한 경우(모든 피연산자가 false로 평가되는 경우) 엔 마지막 피연산자를 반환합니다. AND && 두 피연산자가 모두 참(true)일 때 값을 반환하며, 그 외엔 false를 반환한다. 첫 번째 Falsy를 찾는 것 첫 번째 False를 만나면 반환한다. 두 피연.. JS #3-자바스크립트 기초 개념4-문자형변환, 조건문 형변환 문자형변환 String 함수 사용 String함수를 통해 문자로 변경해준다. 대부분 예측 가능한 방식으로 일어난다. 문자형 변환 - 암시적 형변환 숫자 + 작은따옴표를 통해 암시적 형변환이 가능하다! 숫자형 변환 Number함수 사용 숫자와 관련된 함수와 표현식에서 자동으로 일어난다. 문자열이 숫자형으로 자동 변환된 후 연산이 수행된다. 아래와 같은 방법으로 연산을 수행한 것이다. 문자열을 숫자로 변환? -> NaN가 뜬다. 문자열의 처음과 끝 공백이 제거된다. 공백 제거 후 남아있는 문자열이 없다면 0 Number("자바스크립트") => 이 경우에는 NaN이 나오게 됩니다. 숫자형 변환 - 암시적 형변 문자열로 된 숫자에다가 암시적 형변환을 해준다. undefined 와 Null의 숫자형 변환 .. JS #3-자바스크립트 기초 개념3 함수의 호이스팅 : 통째로 올라간다. 일반 변수와는 다르게 함수는 통째로 호이스팅된다. 때문에 함수가 선언되기도 전에 호출할 수 있다. 자료형 1차적으로는, 개괄적으로 훑어볼 예정이다. 자바스크립트의 변수는 자료형에 관계 없이 모든 데이터일 수 있다. 따라서 변수는 어떤 순간엔 문자열 다른 순간엔 숫자가 될 수 있다. 자료의 타입은 있지만 값의 타입은 언제든지 바꿀 수 있는 언어! "동적 타입" 언어라고 부른다. (정적타입 = 타입스크립트) 자바스크립트엔 8가지 자료형이 있다. 1. 숫자형 정수, 실수도 나눠져있지 않다. 숫자형엔 일반적인 숫자 외에 Infinity, -Infinity, NaN(Not a Number)같은 특수 숫자 값이 포함됩니다. 문자에 연산이 되는 경우는 '+' 연산자의 경우만 가능.. JS #2-자바스크립트 기초 개념2 (전역 실행 환경, TDZ) 자바스크립트 사용 방식 1. 내부방식 (스크립트 자체를 html 파일 내에 넣어서 사용한다) 2. 외부 방식 (html과 js 파일을 따로 주어 불러주기하여 사용한다.) 2번 방식으로 사용한다. 캐시 외부 방식으로 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시에 저장하므로, 성능상의 이점이 있으나 바로 수정 반영이 안될 때가 있다. ->강력 새로고침으로 해결해줄 수 있다. 코드 구조 문 -> 값을 반환하지 않는다. 식 -> 값을 반한한다. 암시적 세미콜론 자바스크립트는 '암시적'으로 세미콜론으로 인식하여 실행이 된다. 다만 불완전하게 줄바꿈이 일어나는 경우는 예외 대괄호 앞에서는 세미콜론이 있다고 인식하지 않기 때문에 위와 같은 상황에서는 처리가 되지 않는다. 변수 : 변할 수 있는 수 상수.. JS #1-기초 개념 & 개발환경설정 웹브라우저에서 JS의 기능은 제약이 걸려있다. (웹브라우저를 통해 로컬 파일에 접근할 수 없도록 만들어졌다.) *동일 출처 정책에 의해 도메인이 같은 웹페이지에 대해서만 데이터 교환이 가능하다. ㄴ A 사이트에서 B사이트에서 받아온 페이지상의 정보에 접근할 수 없다. JS만의 강점 html/css와 완전히 통합할 수 있음 간단한 일은 간단하게 처리할 수 있게 해줌 모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨 서버, 모바일앱 등에서 구동이 가능하다. 서버: node 라이브서버 터미널에서 실행하기 명령어로 npm 실행하기 npm run dev --> dev를 스크립트로 등록한 상황이다 run을 붙이면 npx로 실행시켜주는 것이다. 2. eslint 설치, 실행하기 $npm init @eslint/c.. 이전 1 2 3 4 다음
