자바스크립트 배열은 다른 언어의 배열과 약간 다른 점이 있다. 배열 내부의 데이터 타입은 서로 달라도 된다. 배열 크기는 동적으로 변경 가능하다. JS의 배열 내에는 number, string, boolean 뿐 아니라 변수, 객체와 함수도 담을 수 있다. 배열 선언 1. 배열 리터럴 대괄호를 사용하여 선언 let arr = ['mon', 'tue', 'wed', 'thur', 'fri', 'sat', 'sun']; let arr2 = []; arr2[0] = 'first'; arr[1] = 2; arr[2] = true; ※ 배열 리터럴 ([]) 사용해 선언하는 것을 선호 2. Array() 생성자 함수를 이용해 배열 선언 let arr = new Array('mon', 'tue', 'wed'); le..
DOM - Document Object Model : 문서 객체 모델 : HTML, XML 문서의 구조화된 표현을 제공하는 표준 +) 문서 객체란 html 문서의 태그들이 자바스크립트가 이용할 수 있는 객체로 만들어진 것 : 자바스크립트는 DOM을 통해 HTML에 접근 가능 : 자바스크립트가 DOM 구조에 접근하여 문서 구조, 스타일, 내용 등 변경 가능 : DOM 이용하여 HTML 태그, 속성, 스타일 등 추가 / 삭제 / 변경 document node : document 객체 : DOM 트리 접근하기 위한 최상위 노드 : 모든 DOM 트리에 접근하기 위한 시작점 element node : HTML 구성 요소(태그)를 의미 : 문서 내 태그들은 모두 element node attribute node :..
변수 선언 변수: 값을 저장하거나 유지하는 역할 const a = 5; // 숫자 5 const b = 2;// 숫자 2 const c = "2"; // 문자 2 const myName = "name"; console.log(a + b);// 7 console.log(a + c);// 52 console.log("hello " + myName); constant인 변수를 생성. a에는 숫자 5 값이 대입되었다. 변수를 선언함으로써 5대신 a 사용 가능. b는 " "로 묶여져 있기 때문에 숫자 2가 아닌 문자 2로 대입된다. 변수를 선언할 때는 키워드 선언(const, let) 변수 이름 = 대입할 값; 순서로 작성해주면 된다. 변수 이름은 camelCase 방식 선호. var 중복 선언 가능. var를 ..
ES는 ECMAScript의 줄인 말로 기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈인 크로스 브라우징 이슈를 해결하기 위해 JS를 표준화한 것이다. ES5와 ES6처럼 뒤에 버전 숫자를 붙여 사용된다. let, const 키워드 추가 ES5에는 var 만 존재하여 재할당, 재선언에는 자유로웠지만, 호이스팅 문제가 발생하였다. ES6에서는 var를 사용할 때 호이스팅 문제를 해결하기 위해 let과 const가 도입되었다. 호이스팅이란? : 함수나 변수 선언이 코드 최상단으로 끌어올려지는 현상 : 변수나 함수가 어디서 선언이 되었든 최상단에 위치하게 되어 어디서든 참조 가능한 것 add(1, 2); function add(a, b){ return a + b; } add(1, 2)를 실행할 때 fun..
자바스크립트(JavaScript)란? : 객체 기반의 스크립트 언어 : HTML로 웹의 내용 작성, CSS로 웹 디자인, 자바스크립트로 웹의 동작을 구현 : 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측에서도 프로그래밍 가능 : 현재 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있음. JavaScript 특징 : 동적이며 타입을 명시할 필요 없는 인터프리터 언어 : 객체 지향 프로그래밍과 함수형 프로그래밍 모두 표현 가능 : HTML의 내용, 속성, 스타일 변경 가능 : 이벤트 처리하고 사용자와의 상호작용 가능 HTML에서 JavaScript 불러오기 HTML 내부에 JS 코드를 작성하는 방법 태그 내부나 태그 내에 위치하면 된다. 외부에 JS 파일을 ..
Front-End/JavaScript 2022. 11. 30. 21:59
자바스크립트 배열은 다른 언어의 배열과 약간 다른 점이 있다. 배열 내부의 데이터 타입은 서로 달라도 된다. 배열 크기는 동적으로 변경 가능하다. JS의 배열 내에는 number, string, boolean 뿐 아니라 변수, 객체와 함수도 담을 수 있다. 배열 선언 1. 배열 리터럴 대괄호를 사용하여 선언 let arr = ['mon', 'tue', 'wed', 'thur', 'fri', 'sat', 'sun']; let arr2 = []; arr2[0] = 'first'; arr[1] = 2; arr[2] = true; ※ 배열 리터럴 ([]) 사용해 선언하는 것을 선호 2. Array() 생성자 함수를 이용해 배열 선언 let arr = new Array('mon', 'tue', 'wed'); le..
Front-End/JavaScript 2022. 11. 30. 14:45
DOM - Document Object Model : 문서 객체 모델 : HTML, XML 문서의 구조화된 표현을 제공하는 표준 +) 문서 객체란 html 문서의 태그들이 자바스크립트가 이용할 수 있는 객체로 만들어진 것 : 자바스크립트는 DOM을 통해 HTML에 접근 가능 : 자바스크립트가 DOM 구조에 접근하여 문서 구조, 스타일, 내용 등 변경 가능 : DOM 이용하여 HTML 태그, 속성, 스타일 등 추가 / 삭제 / 변경 document node : document 객체 : DOM 트리 접근하기 위한 최상위 노드 : 모든 DOM 트리에 접근하기 위한 시작점 element node : HTML 구성 요소(태그)를 의미 : 문서 내 태그들은 모두 element node attribute node :..
Front-End/JavaScript 2022. 11. 30. 14:43
변수 선언 변수: 값을 저장하거나 유지하는 역할 const a = 5; // 숫자 5 const b = 2;// 숫자 2 const c = "2"; // 문자 2 const myName = "name"; console.log(a + b);// 7 console.log(a + c);// 52 console.log("hello " + myName); constant인 변수를 생성. a에는 숫자 5 값이 대입되었다. 변수를 선언함으로써 5대신 a 사용 가능. b는 " "로 묶여져 있기 때문에 숫자 2가 아닌 문자 2로 대입된다. 변수를 선언할 때는 키워드 선언(const, let) 변수 이름 = 대입할 값; 순서로 작성해주면 된다. 변수 이름은 camelCase 방식 선호. var 중복 선언 가능. var를 ..
Front-End/JavaScript 2022. 11. 30. 14:42
ES는 ECMAScript의 줄인 말로 기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈인 크로스 브라우징 이슈를 해결하기 위해 JS를 표준화한 것이다. ES5와 ES6처럼 뒤에 버전 숫자를 붙여 사용된다. let, const 키워드 추가 ES5에는 var 만 존재하여 재할당, 재선언에는 자유로웠지만, 호이스팅 문제가 발생하였다. ES6에서는 var를 사용할 때 호이스팅 문제를 해결하기 위해 let과 const가 도입되었다. 호이스팅이란? : 함수나 변수 선언이 코드 최상단으로 끌어올려지는 현상 : 변수나 함수가 어디서 선언이 되었든 최상단에 위치하게 되어 어디서든 참조 가능한 것 add(1, 2); function add(a, b){ return a + b; } add(1, 2)를 실행할 때 fun..
Front-End/JavaScript 2022. 11. 30. 14:42
자바스크립트(JavaScript)란? : 객체 기반의 스크립트 언어 : HTML로 웹의 내용 작성, CSS로 웹 디자인, 자바스크립트로 웹의 동작을 구현 : 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측에서도 프로그래밍 가능 : 현재 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있음. JavaScript 특징 : 동적이며 타입을 명시할 필요 없는 인터프리터 언어 : 객체 지향 프로그래밍과 함수형 프로그래밍 모두 표현 가능 : HTML의 내용, 속성, 스타일 변경 가능 : 이벤트 처리하고 사용자와의 상호작용 가능 HTML에서 JavaScript 불러오기 HTML 내부에 JS 코드를 작성하는 방법 태그 내부나 태그 내에 위치하면 된다. 외부에 JS 파일을 ..