본문 바로가기

시작179

221110 JavaScript - setTimeout과 setInterval, 동기와 비동기, 싱글스레드,이벤트 루프(event loop) 오늘 내가 배운 것 1. setTimeout, setInterval 2. 싱글 스레드 3. 동기와 비동기 4. 이벤트 루프(event loof) 1. setTimeout, setInterval window.setTimeout window.setInterval // window는 생략 가능하다. 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출) 할 수 있게 하는 것을 '호출 스케줄링)이라고 한다. 이 두 개의 메서드는 자바스크립트의 스펙이 아니지만 시중에 나와있는 대부분의 호스트 환경에서 유사한 메서드, 내부 스케줄러를 지원한다. 기본 문법 window.setTimeout(callback, 시간) //callback : function ->실행할 함수 //시간 : number -> 시간 // ms 단.. 2022. 11. 11.
221109 JavaScript - form을 이용한 이벤트활용 오늘 내가 배운 것 1. script 태그 2. 이벤트 3. Element 생성 1. script 태그 javascript 파일을 외부 파일로 적용시켜서 사용하게 된다면 를 넣어주여야 하는데 첨부하는 위치에 따라서 자바스크립트를 읽는 시간과 렌더 영역에 보이는 시간이 달라진다. 에 넣는 경우 웹페이지를 열어 html파일을 읽을 때 제일 위에서 코드가 실행되면서 내려오다가 `script` 태그를 만나게 되면 실행되던 html이 멈추고 javascript 파일을 다운받은 뒤 실행시키고 나서 그 뒤 남은 html을 실행시키게 된다. js 파일을 다운받기 위해서 멈춰 있는 시간 때문에 사용자가 그 사이트를 이탈할 수 있다. 사용자가 웹사이트가 열리기까지 3초가 넘으면 그 사이트의 이탈자가 많다는 통계가 있다. .. 2022. 11. 10.
221108 JavaScript - 이벤트 (EVENT) 오늘 내가 배운 것 1. 이벤트 (Event) 2. 이벤트 적용하기 이벤트 적용하기 1 이벤트 적용하기 2 이벤트 적용하기 3 3. 이벤트 객체 1. 이벤트 브라우저 기준으로 설명하면 렌더 된 영역에서 `click`, `mouseover`, `mouseout` 등 특정한 행동을 했을 때 특정한 함수를 호출하는 것, 브라우저에서 이미 구현해놓은 규칙에 맞게 우리가 맞춰 사용하면 된다.(DOM) 2-1. 이벤트 적용하기 1 이벤트 적용하기 1 - HTML과 JS를 이용한다. html이랑 js를 같이 써서 구현하는 방법 속성명에 on이 붙으면 대부분 EVENT이다. on + 이벤트명 : onClick / onMouseover / onMouseout 버튼 div에 style속성을 작성할 때 CSS문법에 맞춰서 .. 2022. 11. 9.
221107 JavaScript - DOM과 BOM , 배열 연습, 간단한 알고리즘 문제(선형검색, 완전탐색), 로또 번호 생성기 만들기 오늘 내가 배운 것 1. DOM 과 BOM 2. 배열 배열의 기초 배열 선택하기, 배열 길이 구하기 배열에 요소 추가하기 1~100까지를 담은 배열 만들기 배열 안에 요소를 빼기 3. 간단한 알고리즘 문제 선형검색(완전탐색) (Linear search) 4. 로또 번호 생성기 1. DOM 과 BOM DOM (문서 객체 모델) DOM = Document Object Model 의 약자이고, 여기서 Document는 HTML을 말한다. DOM은 자바스크립트로 html을 조작하는 기능을 `브라우저`가 구현한 것 브라우저 기본적으로 HTML, CSS, JS를 해석하는 능력이 있다. 브라우저가 js를 이용해서 HTML, CSS를 조작할 수 있는 기능을 `DOM` 이라고 한다. BOM (브라우저 객체 모델) BOM.. 2022. 11. 8.
221104 - JavaScript - prototype, 메서드 Date, indexOf, 삼항연산자 오늘 내가 배운 것 1. prototype `자바스크립트는 무슨 언어이냐?` 추상적이냐 구체적이냐 prototype 언어의 특성 2. Date() 날짜 - Date 객체 다루기 3. indexOf() indexOf EX. 'indexOf()' 의 활용 - 4가지 방법 4. 삼항 연산자 1. Prototype `자바스크립트는 무슨 언어이냐?` 흔히 알고 있는 언어는 함수형 언어와 객체지향 언어가 있다. (더 많은 종류가 있겠지만 가장 많이 보인 것은 두 가지였다.) 그리고 많은 곳에 자바스크립트는 객체지향 언어다 라는 말도 많이 보였는데, 사실 자바스크립트는 `프로토타입(prototype)` 언어이다. 프로토타입은 `원래의 형태`, `원형`이라는 뜻을 가지고 있는데 객체지향 언어와 비교했을 때 객체지향 언.. 2022. 11. 5.
221103 JavaScript - 메서드, this, 생성자함수, getter, setter, 피보나치 수열, 메모이제이션 오늘 내가 배운 것 1. 메모이제이션(Memoization) - 피보나치 수열 메모이제이션 2. 객체 메서드(method) this 메서드의 종류 3. Getter 와 Setter 4. 생성자 함수 생성자 함수 `new`를 이용한 생성자 함수 1. 메모이제이션(Memoization) - 피보나치 수열 피보나치 수열은 1, 1, 2, 3, 5, 8, 13, ....이다. 규칙은 구하고자 하는 수는 앞의 두 수를 더한 값이다. 피보나치 수열을 함수로 간단하게 쓰면 이렇게 표현할 수 있다. function fibo(n) { if(n == 1 || n == 2 ) return 1 return fibo(n-1) + fibo(n-2) } n값이 작을 때는 콜 스택에 쌓이는 함수가 적어서 연산이 금방 처리되지만 n값.. 2022. 11. 4.
728x90

티스토리툴바