배열 자바스크립트에서는 변수 선언 시 별도의 자료형 지정이 없기 때문에 어떤 자료형의 값들이던 다 하나의 배열공간에 담을 수 있음(자바의 컬렉션과 비슷함) 배열의 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/JavaScript
문자열 관련 메소드 .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 : 웹 문서 상에 이벤트가 발생했을 때 실행해야 할 동작들을 처리 (동적인 효과) 자바스크립트와 자바는 아예 연관이 없음 스크립트 언어란 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도 매우 빠르게 배우고 짧은 소스코드로 상호작용 되도록 고안됨 자바스크립트란 웹 브라우저에서 가장 많이, 가장 기본적으로 사용되는 인터프리터 방식의 스크립트 언어 컴파일 방식과 인터프리터 방식 컴파일 방식 (자바) 컴파일 거치고 나서 실행됨 코드상에 문법적인 문제가 있으면 빨간줄로 알려줌 인터프리터 방식 (자바스크립트) 컴파일 거치지 않고 곧바로..
