배열 자바스크립트에서는 변수 선언 시 별도의 자료형 지정이 없기 때문에 어떤 자료형의 값들이던 다 하나의 배열공간에 담을 수 있음(자바의 컬렉션과 비슷함) 배열의 0번 인덱스에서 마지막 인덱스까지 순차적으로 모두 접근할 려면 향상된 반복문 사용(for of문) 배열의 선언 배열의 선언 시 배열의 크기를 지정한 채로 선언하거나, 크기를 지정하지 않아도 됨 (크기에 제약이 없다) let arr1=new Array(); : //배열의 크기가 0인 배열 let arr1=new Array(3); : //배열의 크기가 3인 배열 let arr1= []; : //배열의 크기가 0인 배열 (권장) 배열에 값 대입 arr1[0] = "바나나"; arr1[1] = "키위"; arr1[10] = "삼겹살";// 배열의 크기..
Front-End
문자열 관련 메소드 .toUpperCase() : 전부 대문자로 바꿈 .toLowerCase() : 전부 소문자로 바꿈 .length (함수가 아니라 필드이므로 괄호가 없음) .charAt() : 제시한 인덱스에 있는 문자 하나만 반환 .indexOf("l") - 앞에서부터 첫번째 l의 위치 .lastIndexOf("l") - 뒤에서부터 첫번째 l의 위치 indexOf와 lastIndexOf에서 해당 문자가 존재하지 않을 경우 -1을 반환함 .substring(시작인덱스) : 시작인덱스에서 마지막 인덱스까지 출력 .substring(시작,종료) : 시작인덱스에서 종료 인덱스 바로 앞까지 출력 .split("구분자") - 문자를 구분자로 구분해서 배열에 담음 (자바스크립트 배열은 []) .join("구분자..
변수 선언 위치에 따른 전역변수(멤버변수)/지역변수 let 변수명 : 전역변수(global), 값을 수정할 수 있음 const 변수명 : 상수 (값을 할당하면 바꿀 수 없음) var 변수명 : 전역변수(global), 과거에 쓰이던 키워드 (최근에는 안쓰임) 변수명; : 전역변수(global) 함수, if, for문 영역 내에서 var 변수명 : 지역변수(local) 변수명 : 지역변수(local) var 변수의 문제점 var 변수는 문제점이 많아서 let,const로 대체됨 (아직도 많은 곳에서 사용되고 있음) 1. 영역문제 함수, if, for문 밖에서 let 변수를 호출하면 에러발생 let,const는 자바와 스코프 범위가 동일하기 때문 (block scope) 함수, if, for문 밖에서 var..
요소 가져오기 html 요소에 접근하기 (해당 요소객체 가져오기) 특정 요소의 값을 가지고 온다거나 변경하고자 할때는 먼저 해당 요소객체를 가지고와서, 변수에 저장하는 과정이 필요하다 1. ID로 가져오기 (getElementById) document.getElementById("아이디명"); 가져온 요소의 속성들에 접근해서 값을 가져온다거나 변경 가능 속성에 접근하고자 한다면 => 선택된 요소.접근하고자하는 속성명 속성에 접근해서 스타일을 변경하면 인라인방식으로 스타일이 부여됨 (가장 먼저 실행됨) 클릭마다 색상변경 2. 태그명으로 접근하기 (getElementsByTagName) document.getElementsByTagName("태그명") 주의사항 : element 에 ‘s' 가 붙음 선택된 여..
window 객체 자바스크립트 내장 객체로 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체 브라우저 창안에 존재하는 모든 요소들의 최상위 객체 (자바의 object와 비슷함, 모든곳에 적용되기 때문에 생략 가능) window.onload : 현재 html문서가 다 로딩이 완료되고 나서 실행할 함수를 지정하는 이벤트 속성 (window.onload=function() {}) document 객체 웹 문서마다 하나씩 만들어지는 객체 (html 문서에 대한 정보들을 가지고 있음) documents는 현재 활성화된 창에 로드된 웹 페이지의 내용을 대표하는 객체 데이터를 출력하는 기본 구문 1. 일반 사용자에게 출력 (alert) window.alert("알림창에 출력할 문구"); 2. 콘솔창에 출력 (cons..
inline(인라인) 방식 이벤트를 부여하고자 하는 요소 내에 간단한 소스코드를 작성해서 실행되게 하는 방법 실행하는 소스코드가 소량일 경우 사용 실행 코드가 여러개 있으면 세미콜론으로 구분 이벤트 속성에 debugger;를 넣으면 디버깅 모드가 됨 [표현법] 알림창 출력 콘솔창 출력 internal (내부) 방식 script 태그 영역에 함수단위로 소스코드를 작성하고 특정 요소에 이벤트 발생 시 해당 함수를 호출함으로써 실행시키는 방식 css의 style과 비슷하지만 script 태그는 head, body 태그 내에 다 작성 가능 (body태그 마지막에 작성하는걸 권장) 주석은 자바와 동일 (/*, //) 중괄호 내에는 해당 함수 호출 시 실행할 코드 기술 코트에 세미콜론은 안 써도 자동삽입 되지만 써..
웹의 3대 요소 HTML / CSS / JavaScript html : 웹 문서의 큰 틀 (뼈대) css : 스타일 (색상, 테두리, 디자인 등등) Javascript : 웹 문서 상에 이벤트가 발생했을 때 실행해야 할 동작들을 처리 (동적인 효과) 자바스크립트와 자바는 아예 연관이 없음 스크립트 언어란 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도 매우 빠르게 배우고 짧은 소스코드로 상호작용 되도록 고안됨 자바스크립트란 웹 브라우저에서 가장 많이, 가장 기본적으로 사용되는 인터프리터 방식의 스크립트 언어 컴파일 방식과 인터프리터 방식 컴파일 방식 (자바) 컴파일 거치고 나서 실행됨 코드상에 문법적인 문제가 있으면 빨간줄로 알려줌 인터프리터 방식 (자바스크립트) 컴파일 거치지 않고 곧바로..
display : flex 요소를 통해 레이아웃 구성시 별다른 사이즈, 크기, 정렬을 지정하지 않아도 유연하게 처리하는 속성 item (내부요소)을 감싸는 요소의 형식을 flex로 변경함 item에 자동으로 지정된 margin 요소가 모두 사라지고 content 영역 만큼의 크기만 가지게 됨 item에 별도에 높이, 너비가 지정되어 있지 않다면 item의 높이는 flex-container의 높이/너비와 같아지게 됨 (flex-container 정렬 방향에 따라 다름) flexbox 요소의 정렬되는 방향, 순서, 요소간의 간격을 수치적으로 처리하지 않아도 알아서 유연하게 처리해주는 형식 flexbox 이용할 때 알아야 하는 것 flexbox의 구성 flex-container : 정렬이 필요한 요소들을 감싸..
애니메이션 속성을 점차적으로 변화시켜 움직이는 효과를 내는 기법 트랜지션과 비교했을 때 시작스타일과 종료스타일을 부드럽게 이어주는 기능을 하는것은 같음 단 애니메이션은 중간에 원하는 위치에 @keyframes를 이용하여 중간스타일도 지정 가능 @keyframes 애니메이션 시작지점과 종료지점의 스타일을 정하고 keyframes의 이름 지정 시작지점과 종료지점 두개만 설정할 경우 from{ }to{ }로 설정하면 되고 중간에 하고싶은 작업이 있다면 %로 구분하여 지정 @keyframes 키프레임명{ 선택자 {스타일;} } 시작지점과 종료지점 두개만 설정할 경우 .anitest1:checked+div{ width:200px; animation-name:ani; /* 애니메이션명 지정 */ animation-..
트랜지션 태그가 특정 동작 (마우스 클릭, 마우스 호버)에 의해 변형 (이동, 확대, 찌그러짐) 되는 것 태그 이동 (translate) translate 함수를 이용하면 설정된 태그가 특정위치로 이동하게됨 슬라이드바 등에 활용됨 transform : translate(x축,y축) : 태그를 이동시킬 수 있음 tramslateX(x축) : 가로로 이동 tramslateY(y축) : 세로로 이동 perspective(원근감px) tramslateZ(px); : 3D 변형 perspective : 원근 효과, 깊이와 거리감 부여 (클 수록 더 멀리 있는 것처럼 보임) tramslateZ : 3D 공간에서 Z 축을 기준으로 원소를 이동 (양수는 가까이, 음수는 멀리) .translate:hover{ trans..
