Every step counts

동기(Synchronous) 모든 일을 순서대로 하나씩 처리하는 것 순서대로 처리한다 = 이전 작업이 끝나면 다음작업을 시작 요청과 응답을 동기식으로 처리한다면 요청을 보내고 응답이 올 때까지 기다렸다가 다음 로직을 처리 비동기(Asynchronous) 작업을 시작한 후 결과를 기다리지 않고 다음 작업을 처리하는 것(병렬적 수행) 시간이 필요한 작업들은 요청을 보낸 뒤 응답이 빨리 오는 작업부터 처리 예) Gmail에서 메일 전송을 누르면 목록화면으로 전환되지만 실제 메일 전송을 병렬적으로 뒤에서 처리됨 function slowRequest(callBack){ console.log('1. Initiating a process taking long time') setTimeout(function(){ ca..

Event 개요 Event란 HTML 요소에서 발생하는 모든 상황을 의미 예를 들어 사용자가 웹 페이지의 버튼을 클릭한다면 클릭에 대해 이벤트가 발생하고 우리는 이벤트를 통해 클릭이라는 사건에 대한 결과를 받거나, 조작을 할 수 있음 클릭 말고도 웹에서는 각양각색의 Event가 존재 키 입력, 브라우저 닫기, 데이터 제출, 텍스트 복사 등 Event object 네트워크 활동이나 사용자와의 상호작용 같은 사건의 발생을 알리기 위한 객체 이벤트가 발생했을 때 생성되는 객체 Event 발생 마우스를 클릭하거나 키보드를 누르는 등 사용자 행동으로 발생할 수도 있음 특정 메서드를 호출하여 프로그래밍 적으로도 만들어낼 수 있음 DOM 요소는 Event를 받고(”수신”) 받은 Event를 “처리”할 수 있음 Eve..

개요 “브라우저에서의 Javascript” JavaScript는 웹페이지에서의 다양한 기능을 구현하는 스크립트 언어 정적인 정보만 보여주던 웹 페이지를 데이터가 주기적으로 갱신되거나, 사용자와 상호 작용을 하거나, 애니메이션 등이 동작하게 하는 것을 가능하게 함 웹 페이지에서의 JavaScript 자바스크립트는 프로그래밍 언어로서의 역할도 가능하지만 클라이언트 사이드 자바스크립트 언어 위에 올라가있는 기능들은 더 다양 API라고 부르는 이 기능들은 자바스크립트 코드에서 사용할 수 있는 것들을 더 무궁무진하게 만들어줌 이 API는 일반적으로 2개의 범주로 분류할 수 있음 Browser APIs Third party APIs 브라우저에 탑재되지 않은 API 웹에서 직접 코드와 정보를 찾아야함 Google m..

배열(Array) 키와 속성들을 담고 있는 참조 타입의 객체 순서를 보장하는 특징이 있음 주로 대괄호를 이용하여 생성하고, 0을 포함한 양의 정수 인덱스로 특정 값에 접근 가능 배열의 길이는 array.length 형태로 접근 가능 배열 메서드 reverse : 원본 배열의 요소들의 순서를 반대로 정렬 push & pop : 배열의 가장 뒤에 요소를 추가 또는 제거 unshift & shift : 배열의 가장 앞에 요소를 추가 또는 제거 includes: 배열의 특정 값이 존재하는지 판별 후 참/거짓 반환 indexOf: 배열에 특정 값이 있으면 첫번째 인덱스 반환. 없으면 -1 const numbers = [1,2,3,4,5] numbers.reverse() numbers.push(100) let a ..

함수 선언식 일반적인 프로그래밍 언어의 함수 정의 방식 함수 표현식 함수 표현식은 함수의 이름을 생략한 익명 함수로 정의 가능 const sub = function(num1, num2){ return num1 - num2 } sub(7,2) // 표현식에서 함수 이름을 명시하는 것도 가능. 이 경우에는 호출에는 사용되지 못함 인자 작성 시 ‘=’ 문자 뒤 기본 인자 선언 가능 const greeting = function(name = 'Anonymous'){ return `Hi ${name}` } greeting() // Hi Anonymous Spread syntax 전개 구문 배열의 경우는 요소, 함수의 경우는 인자로 확장 가능 // 배열과의 사용 let parts = ['shoulder', 'leg..

들여쓰기와 코드 불럭 JS는 2칸 들여쓰기 사용 블럭은 if, for 함수에서 중괄호 내부를 말함 세미콜론 세미콜론을 선택적으로 사용 가능 없으면 ASI(Automatic Semicolon Insertion)에 의해 자동으로 삽입됨 주석 // comment /* multiple lines of comment like this */ 변수와 식별자 식별자 정의와 특징 Identifier는 변수를 구분할 수 있는 변수명을 말함 식별자는 반드시 문자, $ 또는 밑줄로 시작 대소문자를 구분하며, 클래스명 외에는 모두 소문자로 시작 예약어 사용 불가능(for, if, function 등) camelCase: 변수, 객체, 함수에 사용 PascalCase: 클래스, 생성자에 사용 SNAKE_CASE: 상수(const..

공부했던 setInterval과 setTimeout을 활용하여 화면을 만들어보자. 특정 문장의 글자가 마치 타이핑을 하듯 한글자씩 화면에 순차적으로 출력되도록 하고 커서바가 깜빡이는 효과도 줄 것이다. language Learn New Language 시작은 역시 HTML 태그 빌딩 let sents = ["Bienvenue!", "Welcome!", "歡迎!", "환영합니다!"]; let randSent = ""; 전역변수로는 두가지를 쓸 것이다. 먼저 네가지 언어로된 인사가 담긴 sents라는 배열과 이중 랜덤으로 뽑힌 문장을 담을 randSent이다. randomSent(); function randomSent() { randSent = sents[parseInt(Math.floor(Math.ran..

일정시간이 지난 후 코드를 실행시키는걸 호출 스케줄링이라고 한다. 두가지 명령어로 스케줄링이 가능하다. setTimeout : 일정시간이 지난 후 코드를 실행시킴 setInterval : 일정시간 간격을 두고 코드를 실행시킴 이런 차이로 setTimeout은 주로 단회성 코드에, setInterval은 반복되는 코드에 지연이 필요할 때 사용된다. 문법은; setTimeout(callback function, duration) setInterval(callback function, interval duration) 으로 작성된다. duration에 들어가는 숫자는 밀리초(1/1000초)이다. setTimeout은 해당 시간 이후 callback function이 실행되고 setInterval은 callba..

HTML, CSS, JS를 모두 사용하여 활용하는 연습이다. 인풋박스에 준비물이름을 작성하고 버튼을 누르면 버튼 박스 아래 리스트에 추가된다. 추가된 아이템은 각기 아이템 이름 오른편에 있는 X를 누르면 리스트에서 삭제된다. 어려울거 없다. 먼저 HTML로 뼈대를 잡자. 여행 준비물 점검 목록 추가 간단하게 h2 헤더하나 두고 준비물이름을 작성 받을 인풋박스와 리스트에 더해줄 버튼, 그리고 리스트가 출력될 자리를 설정했다. 스크립트 오픈 let cnt = 0; let itemNm = ""; let arr = []; 사용할 전역변수들을 선언한다. 사실 처음부터 세개를 모두 선언한건 아니고, 알고리즘을 짜고 시행착오를 거치며 필요한 변수를 추가하기도 했다. document.getElementById("ite..

document 영역에서 사용되어지는 이벤트 함수들을 보자. 마우스 이벤트: click(), focus(), blur(), input(), change(), mouseover(), mouseout(), drag() => drop(), select(), scroll() 키보드 이벤트: keydown(), keypress(), keyup() 기타 이벤트 관련 함수들: target, submit(), reset(), search() 함수를 태그 속성이나 요소에 직접 부여하는 방식보다는 차후 수정이나 유지보수의 편의를 위해 addEventListener('eventName', callback Function) 함수 사용을 권장한다. 간단하게 활용해보자. 엘비스 삼촌이 씐나게 춤추는 Fun in Acapulco의..