반응형

전체 글 118

[ javascript ] 07. String 객체

# String  속성속성설명mdnlength개수바로가기 메드메소드설명mdncharAt(position)position에 위치하는 문자를 리턴바로가기charCodeAt(position)position에 위치하는 문자의 유니코드 번호를 리턴바로가기concat(args)매개변수로 입력한 문자열을 이어 리턴바로가기indexOf(searchString, posiiton)앞에서부터 일치하는 문자열의 위치를 리턴바로가기lastIndexOf(searchString, position)뒤에서부터 일치하는 문자열의 위치를 리턴바로가기match(regExp)문자열 안에 regExp가 있는지 확인바로가기replace(regExp,replacement)regExp를 replacement로 바꾼후 리턴바로가기search(regE..

javascript+es6 2023.09.17

[ javascript ] 06. 원시타입, 참조타입, 객체

원시(Primitive) 타입, 참조(Reference) 타입 자바스크립은 크게 원시타입과 참조타입 2가지로 나눕니다. 원시타입은 number, bigint, string, boolean, null, undefined, symbol이고 값은 변수에 직접 저장됩니다. 참조타입은 array , funciton , object 등이고 값은 객체나 배열이 저장된 메모리 주소를 가리키는 포인터입니다. 변수에 할당된 값은 메모리 주소이며 이 주소를 통해서 객체나 배열에 접근할 수 있습니다. 객체란 자바스크립트는 객체(object) 기반의 스크립트 언어이며 원시타입을 제외한 나머지들은( 함수, 배열 등 )은 모두 객체입니다. 객체는 크기 두 가지 JS Object (javascript object )와 json()으..

javascript+es6 2023.09.16

[ javascript ] 05. 템플릿 리터널 , 함수, 내장함수

# 템플릿 리터널, 함수, 내장함수 # 템플릿 리터널 백틱(`)을 사용 let test='hi'; let output = `철수 ${hi}` console.log( output ) 함수 생성방법 파라미터정의하기 반환값 익명함수 즉시실행함수 # 함수 함수는 하나의 단위로 실행할 수 있도록 명령문을 그룹 한 것입니다. 동일한 코드가 여러 곳에서 반복되는 것을 방지하려면 함수를 사용하여 해당 코드를 래핑하고 재사용할 수 있습니다. 1) 함수 생성하는 방법 함수 선언식 함수 표현식 함수 정의 function 함수이름() { 실행문; } 함수 호출 함수는 정의 후 함수를 호출해야 실행됩니다. 함수명(); 함수 선언식 함수는 funciton 예약어와 함수이름 abc 함수 블록{}으로 되어 있습니다. function..

javascript+es6 2023.09.14

[ javascript ] 04. 반복문

for문 while문 do ~ while문 break문 continue문 1) for문 for (초기값; 조건식; 증감식) { 실행문; } - 초기값 변수를 선언하고 초기화합니다. 시작값 - 조건식 다음 반복을 실행해야 하는지 조건 여부를 결정하는 부울 표현식입니다 ( true , false ) 조건이 true 이면 다음 반복을 실행하고 그렇지 않으면(false) 반복문이 종료됩니다. - 증감식 ++ 변수 변수 ++ 수식 for문을 사용하여 1부터 4까지의 숫자를 콘솔에 표시 for (let i = 1; i < 5; i++) { console.log(i); } 결과 1 2 3 4 * 무한반복 for ( ; ; ) { 실행문; } let arr = [10, 20, 30, 40 ]; for( let i = ..

javascript+es6 2023.09.13

[ javascript ] 03. 조건문

if문 if ~ else문 if ~ else if ~ else if ~ else 문 삼항연산자 switch ~ case # if문 기본적인 조건문은 if문입니다. if문은 만약에 ~ 해라를 의미 합니다. 단일 if문 let age = 18; // 변수를 age 다음과 같이 선언하고 초기화합니다 18. if (age >= 18) { console.log('가입 가능합니다.'); } age >= 18이기 때문에 명령문 true내부의 코드가 if실행되어 콘솔에 메시지를 출력합니다. if~ else if( 조건식 ) { // 참 } else { // 거짓 } let age = 18; if (age >= 18) { console.log('가입 가능합니다.'); }else { console.log('가입 불가능합니..

javascript+es6 2023.09.13

[ javascript ] 02. 연산자

# 연산자 산술연산자관계(비교)연산자대입연산자논리연산자증감연산자       1) 산술 연산자+ , - , * , / , % 덧셈 연산자(+)더하기 연산자는 두 값의 합을 반환합니다. 예를 들어, 다음은 더하기 연산자를 사용하여 두 숫자의 합을 계산합니다.let sum = 10 + 20;console.log(sum); // 30 빼기 연산자(-)빼기 연산자( -)는 한 숫자에서 다른 숫자를 뺍니다.let result = 30 - 10;console.log(result); // 20 곱셈 연산자(*) 곱셈 연산자는 두 숫자를 곱하여 단일 값을 반환합니다. let result = 2 * 3;console.log(result); 나누기 연산자(/)나누기 연산자는 첫 번째 값을 두 번째 값으로 나눕니다let re..

javascript+es6 2023.09.11

[ javascript ] 01. 자바스크립트란 , 변수

# javascript 란 JavaScript는 원래 웹 페이지 요소와 상호 작용하도록 설계된 프로그래밍 언어입니다.  ECMAScript는 핵심 기능을 제공합니다.DOM( 문서 개체 모델)은 웹 페이지의 요소와 상호 작용하기 위한 인터페이스를 제공합니다.BOM( 브라우저 개체 모델)은 웹 브라우저와 상호 작용하기 위한 브라우저 API를 제공합니다. JavaScript를 사용하면 웹 페이지에 대화형 기능을 추가할 수 있습니다. 일반적으로 HTML 및 CSS와 함께 JavaScript를 사용하여 양식 확인, 대화형 지도 생성, 애니메이션 차트 표시 등 웹페이지 기능을 향상합니다. 웹 페이지가 로드되면, 즉 HTML과 CSS가 다운로드된 후 웹 브라우저의 JavaScript 엔진이 JavaScript 코드를..

javascript+es6 2023.09.11

[ html5 ] # 카카오 , 트위터, 메타, 파비콘

설명문 : 키워드 입력 - 작성자 입력 - ​ 검색 엔진 all : 기본값. 'index,follow'를 지정한 것과 같음. none : 'noindex, nofollow'를 지정한 것과 같음. index : 그 페이지를 수집대상 follow : 그 페이지를 포함해 링크가 걸린 곳을 수집대상 noindex : 그 페이지를 수집대상에서 제외 nofollow : 그 페이지를 포함해 링크가 걸린 곳을 수집대상으로 하지 않음 ​ 네이버 01) 오픈그래픽, 카카오톡이나 여러 소셜에서 링크를 보여줄 경우 그에 대한 상세 설정 ---------------- ​ 02) 트위터에 대응한 설정 특성을 지정 ---------------- # 파비콘 사이트1 사이트2 ​즐겨찾기 아이콘. 즐겨찾기(favorites)와 아이콘(..

HTML5 2023.09.06

[ CSS3 ] gradient / filter

filter 이미지 필터 효과 mdn gradient 그라디언트 mdn object-fit 나 요소 크기 mdn mix-blend-mode mdn # gradient mdn바로가기 선형 그라디언트 linear gradient : direction background: linear-gradient(진행방향, 색상지정점 1, 색상지정점 2,...) background: linear-gradient(방향, 시작색상, 종료색상) value: to top , to left , to right , to bottom, to right bottom backtgorund: linear-gradient(to right bottom, pink, yellow ) linear gradient : angle background:..

CSS3 2023.09.06

[ CSS3 ] transform / transition / animation

속성설명mdntransform변형바로가기transition효과바로가기animation애니메이션바로가기@keyframes애니메이션바로가기 transform메소드설명단위translate(x,y)요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다.px, %, em 등translateX(n)요소의 위치를 X축으로 x만큼 이동시킨다.px, %, em 등translateY(n)요소의 위치를 Y축으로 y만큼 이동시킨다.px, %, em 등scale(x,y)요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소 시킨다.0과 양수scaleX(n)요소의 크기를 X축으로 x배 확대 또는 축소 시킨다.0과 양수scaleY(n)요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다.0과 양수skew(x-angle,y-..

CSS3 2023.09.06
반응형