-

• Case Styles : 프로그래밍 선언 관습 카멜식(Camel case) - 첫문자는 소문자, 두번째 단어부터 대문자 camelCase 케밥식(Kebab case) - 하이픈(-)으로 연결 - 모든 단어로 소문자로 이루어짐 kebab-case 파스칼식(Pascal case) - 카멜식과 유사하나 첫단어도 대문자로 시작 PascalCase 스네이크식(Snake case) - 언더바( _ )로 연결 - 모든 단어 소문자 snake_case

변수 - 값 변경 가능 - 기본 변수 선언방법 - let (added in ES6) - 현재 IE11에 부분적 호환varblock scope를 무시한 호이스팅 발생함수 스코프에 종속되어 함수 내에 선언한 경우 함수 밖에서 사용 Xfor문의 경우 for문도 밖에서 사용 가능let블록 스코프로 종속됨const재할당을 통해 값이 변경되거나 재 선언할 수 없음객체를 const로 할당하는 경우 속성 재할당 가능 (Object.freeze(객체명)을 통해 고정도 가능)TDZ(Temporal Dead Zone)변수의 일시적 비활성 구역var는 정의되기 전 접근 가능하여 undefined값을 갖지만, 값에는 접근할 수 없음let은 변수가 선언되기 전까지 TDZ에 머물러 초기화 전 변수에 접근 시 오류 발생let,..

함수특정 작업을 수행하는 코드의 집합반복될 수 있는 작업을 정의하여 사용기본 구조INPUT(parameter) > function() > OUTPUT기본 문법1. 함수의 선언function 함수명(매개변수, 매개변수 ...){ 문장 return 리턴값}2. 함수 실행함수명();Sourcefunction add(a, b) { // 입력(a,b) let sum = a + b; // 할일 return sum; // 출력}let result = add(1, 5);document.write(result); // 6함수의 종류사용자 정의 함수 : 사용자가 필요한 기능을 직접 만든 함수자바스크립트 코어 함수 : 자바스크립트 기본적으로 제공하는 함수 ex) pasreInt(), Math.random()..선언식..

매개변수 (Parameter) 함수를 선언할 때 사용하는 변수로, 함수가 어떤 값을 받을 수 있는지 정의하는 부분 function temp(a,b){ return a+b }인자 (Argument)함수를 호출할 때 실제로 전달되는 값으로, 파라미터가 정의된 변수에 전달되는 실제 값 let res = temp(2,3) 매개변수 활용인수를 객체 형태로 만들어 호출 시 순서에 상관없이 해당 값 변경 가능// tip 값 변경하는 함수 function calc(total, tax=0.1, tip= 0.01){ return console.log(`tax : ${tax},tip: ${tip}`) } // 1, 인자의 순서가 잘못되어 tip이 아닌 tax의 값이 변경 calc(100, 0.14) // tax : 0.14..

• 가상 요소 선택자 ::first-letter - 첫번째 글자 요소에만 적용 - 블록이나 문단요소에만 사용 가능(inline 요소 불가능) * 적용가능한 protperty 제한 사항 - 폰트 속성 전체 - 배경 속성 전체 - text-decoration 속성 전체 - 인라인 레이아웃 속성 전체 - border 속성 전체 - box-shadow - color - opacity ::first-line - 첫번쨰 줄에만 적용 - 블록이나 문단요소에만 사용 가능 (inline 요소 불가능) * 적용가능한 protperty 제한 사항 - font 속성 전체 - 배경 속성 전체 - margin 속성 전체 - padding 속성 전체 - border 속성 전체 - text-decoration 속성 전체 - colo..

• @supports : 이름이 있는 함수 - 해당 조건을 지원할 때만 요소에 색깔 적용 - 브라우저 지원 조건 구현 가능 - 서로 중첩해서 사용 가능 - 미디어 쿼리 내에 사용 가능 * 기본 문법 @supports (조건) { ... } • Sources * //그리드를 이해하는 브라우저는 이 스타일을 적용 @supports (display: grid) { section#main { display: grid; } // display:grid를 쓰지 않는 레이아웃을 적용할 스타일 // 그리드 레이아웃을 쓴 스타일 } // = 중첩하여 사용 가능 @supports (display: flex) { @media screen { /* 화면에 적용할 플레스 박스 레이아웃*/ } @media print { /* 인..

• 상태 가상클래스 :enabled - 활성화 상태인 폼요소등의 UI 요소를 가리킴 - 입력할 수 있는 요소 :disabled - 활성화 상태인 폼요소등의 UI 요소를 가리킴 - 입력할 수 있는 요소 :checked - 선택된 상태인 라디오 버튼이나 체크박스를 가리킴 - 사용자가 선택했거나 문서의 기본값이 선택된 상태여도 가능 :indetermi-nate - 선택된 상태도, 선택되지 않은 상태도 아닌 라디오 버튼이나 체크박스 - 사용자 입력에 따른 상태가 아닌 DOM 스크립트를 통해서만 만들 수 있음 :default - 기본값으로 선택되어 있는 라디오버튼, 체크 박스 등 :vaiid - 사용자가 입력한 내용이 사용자 입력란에 정해진 기준을 모두 만족하는 상태 :invalid - 사용자가 입력한 내용이 사..

• 기본 매개변수 - 항상 같은 매개변수를 반복하는 경우 기본값을 지정하여 기본 매개변수를 사용 - 매개변수는 왼쪽부터 처리하므로 기본값을 사용하는 경우 후순위로 매개변수 나열 * 기본 문법 함수명(매개변수, 매개변수=기본값, 매개변수=기본값) {} function func(b, a = 1) { console.log(b, a); } func(5); // 5, 1 • 나머지 매개변수 : 매개변수의 개수가 가변일 경우 사용하는 문법 - 마침표 3개를 입력 - 매개변수들이 배열로 들어옴 * 기본 문법function 함수(...나머지 매개변수) {}function sample(...item) { return item } console.log(sample(1, 2,3)) // [ 1, 2, 3 ] • 나머지 매개..

for 문for (초기화; 반복문 조건; 반복 처리구문) { 반복처리 내용}forEachfor, for..of와 달리 map(), filter() 등의 반환값을 그대로 루프처리 할 수 있음메서드설명배열.forEach()주어진 콜백함수를 활용하여 배열의 요소를 순서대로 처리([요소], [인덱스],[기존배열])=> {}요소, 인덱스, 기존 배열을 활용하여 처리- 콜백함수에서 인덱스와 기존배열 생략 가능const arr = ['a','b','c']arr.forEach((value, idx)=>{ console.log(value, idx);})sources// [ 짝수 출력]const arr = [1,2,3,4,5]arr.filter((value)=> value %2 ===0).forEach((value)=>{..