구조분해할당(Destructuring Assignment) 구조가 있으면 그걸 해체 후 변수에 대입( assign ) 구조 분해하기 const arr=[1,2,3]; const a=arr[0]; const b=arr[1]; const c=arr[2]; console.log(arr,a,b,c); 보통 이렇게 값을 표현했었다. const [a,b]=arr; console.log(arr,a,b); 필요없는 번지수 생략 가능 (c가 생략됨) const[a, ,b]=arr; console.log(arr,a,b); 변수 생략시 해당 인덱스 값은 버리게 된다. (1,3 출력) const[a,b,c,d]=arr; console.log(arr,a,b,c,d); 없는 변수 d를 호출하더라도, 인덱스는 undefined를 ..
자유변수 & 클로져 함수 자유변수 (Free Variable) 함수 내에 선언되지 않은 변수 const test1 = () => { const greeting = '오늘 날씨 정말 좋다~'; // say의 지역변수 : name, word const say = (name) => { const word = '안녕,' + name; console.log(word); console.log(greeting); }; say('영희'); }; 여기서 say의 지역변수는 name과 word. 그렇다면 greeting은 ? 함수 내에 선언되지 않은 자유변수이다. 클로져 함수 (Closure Function) 필요한 변수를 모두 갖고 외부로부터 닫힌 함수. (지역변수, 자유변수) const test2 = () => { c..
함수 선언식 & 함수 표현식 함수 선언식 : Function Declaration 호이스팅 처리(=선언문이 최상위에서 처리되는 것)되어 선언 전에 호출이 가능하다. 함수 표현식 : Function Expression 호이스팅 처리되지 않아 선언 전에 호출이 불가능하다. 익명 함수를 대입 함수 선언식 함수 표현식 test1(); function test1(){ console.log('함수 선언식!'); } const test2 = function(){ console.log('함수 표현식!'); }; test1은 함수선언식으로, 함수가 선언되기 전에 test1();이 언급되었으나, 호이스팅 처리로 인해 선언 전에 사용이 가능하다. test2는 변수대입을 함수로 선언한 것으로, 선언 전에 호출이 불가능하다. ..
변수유효범위 block scope - const, let function scope - var 변수유효범위 확인 // 전역공간 const a = '안녕'; // 전역변수 function test1(){ console.log(a); const b = '잘가'; // 지역변수 console.log(b); } // console.log(b); // Uncaught ReferenceError: b is not defined for(let i = 0; i < 10; i++){ let k = i; } // console.log(i); // Uncaught ReferenceError: i is not defined // console.log(k); // Uncaught ReferenceError: k is not d..
클래스 제어 수강신청 클래스를 만들어보자. 수강신청 전체선택/해제 국어 영어 수학 사회 과학 this용법 전역에서 this는 window객체를 가리킨다. 태그의 inline event 속성안의 this는 현재 tag객체를 가리킨다. 전달함 사용자 클래스 제어가 체크를 통해 변경되는 것을 확인할 수 있다. 사용자 상호작용 alert , console alert("") 사용자에게 뜨는 메세지 colsole.log(" ") 개발자에게 뜨는 일반 메세지 colsole.error(" ") 오류 메세지 지정 가능 console.dir(document) 계층구조 확인가능 colsole.time 실행내용 colsole.timeEnd 실행하면 실행내용의 소요시간 알려줌 alert | console /** * alert ..
javascript 자바스크립트란, 웹브라우저에서 많이 사용하는 인터프리터 방식의 객체지향 프로그래밍 언어이다. 자바스크립트는 ECMA스크립트 표준을 따르는 대표적인 웹 기술이다. 인터프리터방식 src => object . 코딩하는 그대로 오브젝트가 된다. 컴파일방식 (인터프리터의 반대) .java=> class (컴파일) src => object (컴파일 후 실행) 여기서 object는 실제 실행파일이고, 인터프리터방식은 코딩하는 그대로 나온다고 보면 된다. 스크립트언어 : 매우빠르게 배우고 작성하기 위해 고안됨. 짧은 소스코드 파일이나 REPL(Read Eval Print Loop)로 상호작용 클라이언트 사이드 스크립트 (사용자 컴퓨터에서 처리) Javascript, VBscript, Jscript ..
Background(배경) background-image: url(절대,상대경로) background-repeat: repeat | repeat-x | repeat-y 반복여부 background-position: 배경이미지 시작위치 background-size n% | contain | cover size작성시, position 을 꼭 작성해야한다! contain: x/y축 어느 한 쪽이 꽉찰때까지만 확대/축소. 빈공간이 생길 수 있다. cover: 영역을 모두 채울때까지 확대/축소. 이미지 짤릴 수 있다. background-clip: border-box|padding-box|content-box: 배경이미지,컬러 영역 다음과 같은 스크롤시 사진은 고정되어있고 보이는 부분이 바뀌는 배경을 만들어본다...
글꼴 generic family font : serif , sans-serif , cursive, monospaced font-size : px, %, em font-weight : 100~900, bold, bolder, lighter font-style : italic, initial, nomal, oblique ... https://www.w3schools.com/cssref/pr_font_font.asp CSS font property W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, Ja..
정렬 inline요소 부모block요소의 text-align속성을 통해서 정렬. 정렬대상 a, img, span과 h1~h6, p안의 text block요소 margin속성(다른 요소와의 거리)를 이용해서 정렬 text-align : left, center, right margin : top right bottom left margin : _ auto ; _만큼 좌우 마진 똑같이 계산해서 지정 margin-left/ margin-right : auto; 좌 우측정렬 justify-content : center; 메인 축 정렬 align-items : center; 크로스 축 정렬 안녕 링크링크 제목 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ve..
h2 안녕 li Hello li 니하오 h2 잘가 li byebye li 짜이찌엔 위 코드에서 직계자식과 후손에 대해 배워보자. 직계자식 & 후손 직계자식인 parent만 h2에 대해서 노란색 배경이 설정되었다. 부모의 경우 '>' 를 사용하고, 후손의 경우 ' ' (띄어쓰기)를 사용한다. 후손에 대해 underline을 지정해주었는데, 부모 및 자식에 대해 전부 설정되었다. 부모 아래에 있는 ul, li에 대해서 색을 빨간색으로 지정해주었더니 parent아래만 빨간색으로 지정되었다. 자식에 대해서 ul, li에 대해 색을 파란색으로 지정해주었더니 child아래만 파란색으로 지정되었다. html css javascript jquery geolocation webstorage 위 코드에 대해서 형제요소에 ..
