language/javaScript 11

44. Promise

1. 비동기 작업을 수행하는 것 : setTime, setInterver, request, event(load) -> 비동기 작업 사용 이유 : 하나의 작업을 기다리지 않고 동시 다발적으로 작업을 수행하기 위함 2. 비동기 작업의 결과를 사용하기 위해서 call back 함수를 이용한다. -> call back 함수가 없는 비동기 특성상 언제 함수가 종료 될 지 모르기 때문에 ' 비동기 함수 ' 와 ' 비동기 함수 "내부의 진짜 비동기 함수" ' 가 수행 될 경우 비동기 함수가 먼저 종료 되고, 나중에 비동기 함수 내부의 진짜 비동기 함수가 마무리 된다. -> call back 함수가 존재시, 매개변수에 외부함수를 넣기 때문에 비동기 결과를 가져 올 수 있다. 3. 콜백함수의 2가지 단점을 해결하기 위해..

language/javaScript 2023.06.13

videoRate controll

video 영상 속도가 최대 2x까지 있는게 마음에 들지 않았다. html 값을 변경하는 것으로도 작동할 수 있지만 , 만약 작동하지 않는다면 JS로 event를 발생 시켜야한다. 아래는 JS를 이용해 배속을 원하는 속도로 지정하는 코드이다. // 해당 video 동작하는 console 창에서 작동시키기 // 1. HTML5 비디오 요소 가져오기 const video = document.querySelector('video'); // 2. 비디오 플레이어 속성 가져오기 const playbackRate = video.playbackRate; // 3. 비디오 플레이어 속도 설정하기 video.playbackRate = 2.0; // 2배속

language/javaScript 2023.05.15

5. 표현식과 문

1. 값 식(표현식)이 평가되어 생성된 결과 평가: 식을 해석해서 값을 생성 혹은 참조하는 것 // 10 + 20은 평가되어 숫자 값 30을 생성 10 + 20; // 30 모든 값은 data type을 가지며 메모리에 저장된다. 현재는 값이 저장되었지만 변수가 없기에 재사용이 불가 2. 리터럴 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 리터럴의 종류 정수, 부동소수점 2진수, 8진수, 16진수 문자열 불리언 null, undefined 객체, 배열, 함수 정규식 3. 표현식 값으로 평가될 수 있는 문 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조 예 값을 생성 기존 값 참조 // 표현식 : 100 // 100은 js engine에 의해 평가되어 값을 생성하므..

language/javaScript 2023.04.30

4. 변수

변수가 존재하지 않을 시, 값은 메모리 주소에 저장된다. 메모리 주소를 통해 값에 직접 전근하려는 시도는 올바른 방법이 아니다. 변수 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 값의 위치를 가리키는 상징적인 이름 1. 식별자 변수 이름을 식별자라고 한다. 식별자는 값이 아니라 메모리 주소를 기억하고 있다. 변수, 함수, 클래스 등의 이름은 모두 식별자이다. 위의 이름과 같은 식별자는 네이밍 규칙을 준수해야한다. 선언에 의해 JS에 식별자의 존재를 알린다. 2. 변수 선언 변수 선언 변수를 생성하는 것 var, let, const 키워드 사용 JS engine에서 변수 선언 2 step 선언 단계: JS에 변수의 존재를 알림 초기화 단계 : unde..

language/javaScript 2023.04.30

01,02,03 프로그래밍, 자바스크립트란, 자바스크립트 개발 환경과 실행 방법

1. 프로그래밍, 2. 자바스크립트란 컴퓨처가 이해할 수 있는 기계어로 변환하는 일종의 번역기 번역기 컴파일러 인터프리터 컴파일 언어 인터프리터 언어 코드가 실행되기 전 단계인 컴파일 타임에 소스코드 전체를 한번에 머시 코드로 변환한 후 실행 코드가 실행되는 단계인 런타임에 문 단위로 한 줄씩 중간코드인 바이트코드로 변환한 후 실행 실행 파일을 생성 실행 파일 생성 안함 컴파일 단계와 실행 단계가 분리, 명시적인 컴파일 단계를 거치고 명시적으로 실행 파일을 실행 인터프리트 단계와 실행 단계가 분리 안됨 인터프리터는 한 줄씩 바이트코드로 변환하고 즉시 실행 실행에 앞서 컴파일은 단 한번 수행 코드가 실행될 때마다 인터프리트 과정이 반복 수행 컴파일과 실행 단계가 분리되어 있으므로 코드 실행 속도가 빠르다 ..

language/javaScript 2023.04.30

6. JS 핵심 - 객체

1. 객체 생성 종류 2가지 빈 객체 생성한 후, 멤버(속성, 함수) 추가 객체의 생성과 동시에 멤버 추가 // 1. 객체의 생성방법 const person = {}; // property 추가 person.firstName = "join"; console.log(typeof person); // object // 2. 객체 생성 + 초기화 const myObject = { firstName: "join", }; console.log(typeof myObject); // object 2. 생성자로 객체 생성 생성자를 정의하면 객체를 편리하게 생성 해당 객체 호출시 객체 이름 { property, function} 출력 하지만 type은 object 주의 생성자라고 해도 결국에는 function일 뿐이다...

language/javaScript 2023.04.20

5. JS 핵심 - 함수

1. 함수의 선언과 함수 표현식 함수는 항상 값을 반환한다. return 값이 없더라도 undefiend를 반환한다. 함수 표현식 : 함수 앞에 변수 붙여주는 것 람다식 IIFE : 즉시 호출 함수 표현식 - 람다식과 유사, 일회용 // 1. 함수 선언 function add1(a, b) { return a + b; } console.log(add1(1, 2)); // 2. 함수 표현식 var add2 = function (a, b) { return a + b; }; console.log(add2(3, 4)); // 3.lambda식 // sort() comparator 했던 것 // 4. IIFE console.log( (function (a, b) { return a + b; })(5, 6) ); 2..

language/javaScript 2023.04.19

4. JS 핵심 - 조건문, 반복문

자바와 거의 동일 향상된 for문 생김새 다름 switch문 조건식, case 문 비교 === 사용 while() 조건식 for for(a of b) : 향상된 for문 - 이걸 자주 사용 for(var x in b) : b 객체 property 값 출력 // for of const array1 = ["a", "b", "c"]; for (const element of array1) { console.log(element); } // for in var person = { fname: "woo", lname: "wee", age: 25 }; for (const key in person) { if (Object.hasOwnProperty.call(person, key)) { console.log("key: ..

language/javaScript 2023.04.18

3. JS 핵심 - 배열

참고 // dir()은 개체의 모든 속성 및 메서드를 나열하는 JavaScript의 내장 메서드. // 주어진 객체의 모든 속성을 문자열 배열로 반환하며, 이를 통해 개발자는 개체를 탐색하고 디버그한다. console.dir(); 1. 배열 java와 달리 배열의 크기는 동적으로 변경가능하다. 하나의 배열에 여러 타입의 값을 저장할 수 있다. 배열도 객체이며, new 연산자로 생성할 수 있다. 배열 생성 방법 new Array() new Array(num) :num개 길이 생성 실제 공간은 확보하지 않는다. .length를 통해서 길이로는 인정된다. 동적 배열이여서 .length가 고정 값이 아니다. [1,2,3] : 값 바로 집어넣기 참고 - 객체 배열과 동일하게 생성한다. new Object(); o..

language/javaScript 2023.04.18

2. JS 핵심 - 연산자

1. 연산자 규칙 + : 문자열을 합치는 역할도 수행한다. 그래서 우선 순위가 문자열 합하기, 산술계산(type이 number일 때만) - : 산술계산에서만 사용. 그래서 모든 type을 number로 자동 형변환하는데 이때 number로 변환이 안되는 수는 NaN 반환 **: 제곱 JS는 문자열을 중요시하기 때문에 정렬관련된 부분들은 다 사전 순서이다. 비교 같은 일반적인 비교 연산자는 자동형변환을 하지 않는다. == : 비교연산자는 자동형변환을 해준다. != : 이것도 가능 === : 얘는 type 비교도 해주는 거여서 형변환 안됨 // 연산자 let a = 7 + "5"; // +는 string 합을 나타내는 연산자로 사용될 수 있어서 string 형식 합 console.log(a); /..

language/javaScript 2023.04.18