전체 글28

• 

  러쉬 홈페이지 클론코딩 하기 러쉬를 선택한 이유 러쉬 홈페이지 메인에는 애니메이션이 상당히 많다. 애니메이션이 많아지니 JS 코드도 많아질 수 밖에 없는데, 레이아웃 구조는 단순하다. 스터디로 같이하실 두분을 모셔서, 각자 2주간 매일 클론코딩 진행해서 블로그에 올리기로 했고 가끔씩 디스코드로 만나서 회의를 할 예정이다. 최대한 2주 내로 메인페이지,메뉴페이지는 구현했으면 좋겠다. 9월 15일 회의를 시작으로 클론코딩을 시작한다. 더보기 러쉬 홈페이지 사진 클론코딩/Lush 2022. 9. 8.

• 

  산술 연산자 산술 연산자 란? 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술연산이 불가능 한 경우, NaN을 반환한다. 피연산자의 개수에 따라 이항,단항 산술 연산자로 구분한다. 이항 산술 연산자( 덧셈 / 뺄셈 / 곱셈 / 나눗셈 / 나머지 ) 이처럼, 2개의 피 연산자를 산술하여 숫자 값을 만드는 것을 이항 산술 연산자 라고 한다. 모든 이항 산술 연산자는 피연산자의 값을 변경하는 "부수 효과"가 없다. 부수 효과가 없어, 어떤 산술 연산을 해도 피연산자의 값이 바뀌는 경우는 없고 언제나 새로운 값을 만든다. 단항 산술 연산자( ++ / -- / + / - ) 1개의 피 연산자를 산술 연산하여 숫자 값을 만드는 것을 단항 산술 연산자 라고 한다. ++ / -- 증가/감소 연산자는 피연산.. Javascript Deep Dive/연산자 2022. 9. 8.

• 캐러셀(이미지 슬라이드) 버튼으로 이미지 슬라이드 만들기 HTML 삽입 미리보기할 수 없는 소스 위에 적용된 코드이다. 1 2 3 버튼으로 이미지 슬라이드 만들기2 HTML 삽입 미리보기할 수 없는 소스 // js랑 버튼만 바꿨다. var photo = 1; document.querySelector('.Previous').addEventListener('click', function () { if (photo == 3) { document.querySelector('.slide-container').style.transform = 'translateX(-100vw)'; photo -= 1; } else if (photo == 2) { document.querySelector('.slide-container').style.tran.. JS실전-팁 2022. 9. 8.

• n초 후 코드 실행하기, 카운트다운 // n초 후 코드 실행하기 setTimeout(function(){실행할코드}, ms) // 5초 후 박스 사라지게 하기 setTimeout(function(){ document.querySelector('.alert-danger').style.display = "none"; }, 5000) // 5초 카운트다운 후 div 사라지게 하기 var count = 5; setInterval(function () { count -= 1; if (count >= 0) { document.querySelector('#ns').innerHTML = count1; } if (count < 0 ) { document.querySelector('.alert-danger').style.display="none"; } },.. JS실전-팁 2022. 9. 8.

• 이메일 정규식 검증하기 document.querySelector('.btn-primary').addEventListener('click', function(e){ var text = document.querySelector('#id').value; var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; //regExp = 정규식으로 이메일 형식 검사 if(regExp.test(text) === true ){ alert("이메일 형식이 맞습니다."); } else { e.preventDefault(); // 폼전송 막기 alert("이메일 형식이 아닙니다."); } }) 전송 JS실전-팁 2022. 9. 8.

• 데이터 타입의 필요성,동적 타이핑 데이터 타입에 의한 메모리 공간의 확보와 참조 숫자, 문자열타입 외의 데이터 타입의 크기를 명시적으로 규정하고 있지 않다. 숫자 = 배정밀도 64비트 부동소수점 형식을 사용( 8비트 ) ( 위키 참조 ) 심벌 테이블 : 컴파일러 또는 인터프리터는 심벌 테이블 이라고 부르는 자료 구조를 통해 식별자를 키로 바인됭 된 값의 메모리주소, 데이터타입, 스코프 등을 관리한다 데이터 타입에 의한 값의 해석 예를들어 메모리에 저장된 값 0100 0001을 숫자로 해석하면 65인데, 문자열로 해석하면 'A'이다. var score = 65; 일 경우, score에 할당된 값은 숫자 타입의 값으로, socre 변수를 참조하면 메모리 공간의 주소에서 읽어들인 2진수를 숫자로 해석한다. 데이터 타입이 필요한 이유 값을 저장.. Javascript Deep Dive/데이터 타입 2022. 9. 7.

• undefined 타입, null 타입, 심벌 타입, 객체 타입 undefined undefined 값은 undefined 가 유일하다. var 키워드로 선언한 변수는 암묵적으로 undefined 로 초기화 된다. null null 의 값은 null 이 유일하다. 대소문자를 구분하므로 주의한다. 값이 없다는 것을 의도적으로 명시할 때 사용한다. 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것도 의미한다. 심벌 타입 ES6에서 추가된 7번째 타입, 변경 불가능한 원시 타입의 값이다. 다른 값과 중복 되지 않는 유일무이한 값이다. 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다. 심벌 이외의 원시 값은 리터럴을 통해 생성하지만 심벌은 Symbol 함수를 호출해 생성한다. 이 때 생성된 심벌값은 외부에 노출되지 않으며 다른값과 절대 중복되지 않는 유일무이한.. Javascript Deep Dive/데이터 타입 2022. 9. 7.

• 템플릿 리터럴(` `), 불리언 타입 템플릿 리터럴 이란? 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 편리한 문자열 처리기능을 제공한다. 런타임에 일반 문자열로 변환되어 처리된다. 백틱( ` ` )을 사용해 표현한다. 멀티라인 문자열 일반 문자열 내에서는 줄바꿈(개행)이 허용되지 않는다. 일반 문자열 내에서 줄바꿈 등의 공백을 표현하려면 백슬래시( \ ) 로 시작하는 이스케이프 시퀀스를 사용해야 한다. 이스케이프 시퀀스 의미 \0 Null \b 백스페이스 \f 폼 피드, 프린터로 출력할 경우 다음 페이지의 시작 지점으로 이동한다. \n 개행. 다음 행으로 이동 \r 개행. 커서를 처음으로 이동 \t 탭(수평) \v 탭(수직) \uXXXX 유니코드. 예를들어 '\u0041'은 'A' '\uD55C'는 '한' '\u{1F600}'은 😁 .. Javascript Deep Dive/데이터 타입 2022. 9. 7.

• Semantics Tag(시맨틱 태그) article - 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다. https://developer.mozilla.org/ko/docs/Web/HTML/Element/article aside - 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다. https://developer.mozilla.org/ko/docs/Web/HTML/Element/aside details - "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다. 요약이나 레이블은 요소를 통해 제공할 수 있습니다. 정보 공개 위젯은 보통.. HTML 2022. 9. 7.

• 데이터 타입(정의, 숫자타입, 문자열타입) 데이터 타입이란? 값의 종류 자바스크립트(ES6)는 7개의 데이터 타입을 제공한다. 숫자 타입 : 산술 연산을 위해 주로 사용 문자열 타입 : 텍스트를 화면 출력을 위해 주로 사용 구분 데이터타입 설명 원시 타입 숫자 타입 숫자,정수와 실수 구분 없이 하나의 숫자 타입만 존재 문자열 타입 문자열 불리언 타입 논리적 참(true)와 거짓(false) undefined 타입 var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 심벌 타입 ES6에서 추가된 7번째 타입 객체 타입 객체, 함수, 배열 등 숫자 타입 숫자 타입은 모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않는다. 2진수,8진수,16진수를 표현하.. Javascript Deep Dive/데이터 타입 2022. 9. 7.

• 표현식과 문 표현식 표현식(expression)은 값으로 평가될 수 있는 문(statement)이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다. (리터럴도 값으로 평가되기 때문에 표현식이다) 문 문(statement)은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다. 문의 집합으로 이뤄진 것이 프로그램이며, 문을 작성하고 순서에 맞게 나열하는 것이 프로그래밍이다. //문을 명령문이라고도 부른다. // 변수 선언문 var x; // 표현식 문(할당문) x = 5; // 함수 선언문 function foo () {} // 조건문 if (x > 1) { console.log(x); } // 반복문 for (var i = 0; i < 2; i++) { console.log(i); } 세미콜론.. Javascript Deep Dive/표현식과 문 2022. 9. 6.

• 값 (value), 리터럴 (literal) 값(value)이란? 값은 식(표현식)이 평가되어 생성된 결과를 말한다. var sum = 10 + 20 ; 이 경우, 변수 sum에 할당된 값은 10+20 이 아닌, 10+20을 평가한 값인 30이다. 값은 다양한 방법으로 생성할 수 있다. 가장 기본적인 방법은 리터럴을 사용하는 방법이다. 리터럴(literal)이란? 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 "표기법"이다. 리터럴 종류 리터럴 예시 비고 정수 리터럴 100 부동소수점 리터럴 10.5 2진수 리터럴 0b01000001 0b로 시작 8진수 리터럴 0o101 ES6에서 도입. 0o으로 시작 16진수 리터럴 0x41 ES6에서 도입. 0x로 시작 문자열 리터럴 'Hello' "Hello" 불리언 리터럴 t.. Javascript Deep Dive/표현식과 문 2022. 9. 6.