월드스토리의 코딩 나라

클래스란?• 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(“..

DOM(Document Object Model) • HTML 문서 요소의 집합!• HTML 문서는 각각의 node 와 object 의 집합으로 문서를 표현• 따라서 각각 node 또는 object 에 접근하여 문서 구조 / 스타일 / 내용 등을 변경 할 수 있도록 하는 것 Document웹 페이지에 존재하는 HTML 요소에 접근하여 행동을 하고자 할 때 사용하는 객체 Document 요소 선택하는 법 태그 용어의미• document.getElementById(아이디 속성값)태그의 Id 속성값이 특정값인 녀석을 가져온다.• document.getElementsByClassName(클래스 속성값)태그의 클래스 속성값이 특정값인 태그를 선택한다.• document.getElementsByTagName(태그 이..

Javascript 표준 객체자바스크립트가 기본적으로 가지고 있는 도구라고 보면 된다.Date 객체매 순간 바꾸는 시간과 날짜에 관한 정보를 얻기 위해 사용하는 객체초기화 방법new Date(); //1970년1월1일을 default로 가지는 객체 반환new Date(밀리초); //1970년1월1일부터 특정 시간만큼 지난 날짜 반환new Date(년, 월, 일, 시, 분, 초); //특정 시간으로 초기화하여 반환 Date 객체를 변수로 사용 가능한 함수 함수의 표현함수의 의미 Date.now()현재 년도, 월, 일, 시간까지 반환 date.getFullYear() date  값이 가지는 년도 반환date.getMonth()0~11사이의 숫자로 월을 표시(0 = 1월)date.getDate()1~31사이의..

기본 for문 let numbers= [1, 2, 3, 4, 5, 6]; let fruits= ["사과", "바나나", "수박", "포도", "파인애플"]; for(let i= 0; i for of 반복문 let numbers= [1, 2, 3, 4, 5, 6]; let fruits= ["사과", "바나나", "수박", "포도", "파인애플"]; let numbersLength= numbers.length; let fruitsLength= fruits.length; for(let number of numbers) { console.log(number); } for(letfruitoffruits) { console.log(fruit); } forEachlet numbers = [1, 2, 3, 4, 5, ..

문자열에서 사용 가능한 메소드내장메소드메소드의 의미length문자열의 길이를 반환toUpperCase()문자열 전체를 대문자로 변경toLowerCase()문자열 전체를 소문자로 변경indexOf("")몇번째 인덱스인지 숫자로 반환slice(start, end)start 인덱스부터 end-1 인덱스까지의 값을 빼냄replace(문자열1, 문자열2)문자열의 특정 값을 찾아 제일 먼저 나온 녀석을 문자열2로 변경함replaceAll(문자열1, 문자열2)문자열1을 전부찾아서 문자열 2로 바꿔줌repeat(n)문자열에 대해 n번 반복trim()문자열의 양끝 공백 없애기split()매개변수로 들어온 문자열을 문자 단위로 쪼개서 배열로 만듬

1. 연산자의 개념연산자는 코드에서 값을 계산하거나 평가하는 데 사용됩니다. 대표적인 예로는 산술 연산자, 할당 연산자, 비교 연산자 등이  존재합니다..참고 문서: MDN 자바스크립트 연산자2. 값과 표현식리터럴 (Literal)리터럴은 코드에서 값을 나타내는 표기법입니다.숫자 리터럴: 1, 123문자열 리터럴: 'hello', "world"템플릿 리터럴: 안녕, ${name}함수 리터럴: function() {}표현식 (Expression)값으로 평가될 수 있는 코드를 의미합니다.let b; // 선언문b = 2; // 표현식, 할당문let a = b = 2; // 표현식console.log(a); // 2 출력 3. 산술 연산자 (Arithmetic Operators)산술 연산..