월드스토리의 코딩 나라

setTimeOut(함수, 지연시간) 설정한 delay 시간이 지난 뒤, 함수를 실행함 비동기 처리란?☆특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성☆서버로 데이터를 요청 시 서버가 언제 응답을 줄 지 모르는데 마냥 다른 코드를 실행 안하고 기다릴 수는 없음☆ 비동기 처리가 아니고 동기처리라면 코드 실행하고 기다리고, 실행하고 기다리고하면 수십분이 소요될 수 있음  비동기로만 처리 시 나타날 수 있는 문제점function goMart() { console.log("마트에 가서 어떤 음료를 살지 고민한다."); } function pickDrink() { setTimeout(function () { console.log("고민 끝"); ..

클래스란?• ES6 부터 등장한 오브젝트(객체)를 만드는 방법• 오브젝트(객체)를 만들 수 있는 ‘틀’(template)• 정해진 틀로 같은 규격의 오브젝트를 여러 개 만들 수 있으며, 재사용에 유리•  new 키워드를 이용해서 미리 만들어둔 클래스 형태의 오브젝트를 만들 수 있음 (instance 화)•  Date, Math 객체도 동일한 의미의 클래스   클래스의 사용 방법class Cat { constructor(name, age) { this.name = name; this.age = age; } mew() { console.log("야옹"); } eat() { console.log("먹이를 먹습니다."); } } let cat1 = new cat("나비", 1..

spread 연산자(.. : 전개 구문)• 반복 가능한객체에 사용하는 문법→배열, 유사 배열, 문자열 등에 사용 가능• 객체의 요소에 접근해서 요소들을 하나씩 분리해서 전개요소에 접근해서 반환• 연산자 ... 사용• 사용법 : [...arr, newarr] rest 파라미터const values = [10,20,30];function get(a, ...rest) { console.log(rest);}get(...values); 들어온 배열 값 중 하나를 제외한 나머지를 rest라는 배열로 설정함  spread vs rest• spread 파라미터는 호출시 함수의 파라미터에 사용• rest 파라미터는 호출 받는 함수의 파라미터에 사용 (선언 부분). 호출하는 함수의 파라미터 순서에 맞춰 값 설정 후 남은 ..

구조분해 할당 ( Destructuring assignment )배열이나 객체의 속성을 해체해 그 값을 개별변수에 담는 것 JavaScript에서 많이 쓰이는 자료구조인 배열과 객체를 편하게 사용하기 위함 즉, 객체나 배열에 저장된 데이터의 일부를 가져오고 싶을 때 주로 사용  배열의 구조 분해 할당const arr5 = ['tomato', 'kiwi', 'banana']; const [tomato, kiwi, banana, orange = "orange"] = arr5; console.log(tomato); let x=1, y=3; [x, y] = [y, x] console.log(x,y); // x = 3, y = 1 arr[0], arr[1] 처럼 접근하는 것이 아닌 각각의 배열 요소를 변수의..

요소의 탐색jQuery 쓰는 법의미예시• $( 선택자 ).parent().함수()• 바로 위에 존재하는 하나의 부모 요소 선택 • $( 선택자 ).parents().함수()• 바로 위 부모뿐만 아니라 부모의 부모, 모든 조상을 선택 • $( 선택자 ).next().함수()• 선택된 요소 바로 다음에 위치한 형제 요소 선택 • $( 선택자 ).prev().함수()• 선택된 요소 바로 이전에 위치한 형제 요소 선택 • $( 선택자 ).children().함수()• 선택된 요소의 자식 요소 모두 선택  클래스 조작하기jQuery 쓰는 법의미예시• $( 선택자 ).addClass(“클래스명”)• 선택된 요소에 클래스 추가• $("h1").addClass(“.c1”)• $( 선택자 ).removeClass(“클래..

jQuery자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 라이브러리 jQuery의 장점• 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원 가능 • HTML DOM을 손쉽게 조작 가능하며, CSS 스타일도 간단히 적용 가능 • 애니메이션 효과나 대화형 처리를 간단하게 적용 • 같은 동작을 하더라도 더욱 짧게 구현 가능 • 오픈 라이선스를 적용해 누구나 자유롭게 이용 가능 jQuery의 기초 표현$(선택자).동작함수(); $ 는 jQuery() 함수의 축약 형태로, 식별자 역할 jQuery의 메소드  - 기본jQuery 쓰는 법의미예시$( 선택자 ).val();value 값을 가져올 수 있다.var value = $("input").val();$(선택자).val(“..