개인 공부
-
자바스크립트 공부(8) - 폼(Form)개인 공부/JavaScript 2021. 2. 8. 03:43
1. 폼 요소 접근하기 (1) id 또는 class 값을 사용해 접근하기 querySelector() 함수 또는 querySelectorAll() 함수를 사용한다. id 값을 사용할 때는 폼 요소 하나에, class 값을 사용할 때는 여러 요소를 가져와 배열 형태로 저장한다. 텍스트 필드에 있는 값을 가져올 때는 텍스트 필드에 접근하는 코드 맨 뒤에 .value를 붙여준다. (2) name 값을 사용해 접근하기 폼 요소에 id나 class 속성이 없고 name 속성만 있을 때 사용하는 방법이다. id, class는 CSS를 사용하면서부터 등장했지만 name은 HTML 초기부터 자바스크립트에서 값을 참조할 수 있도록 사용하던 방법이다. (* 폼 요소의 name 값은 주로 id 값과 같게 지정한다.) doc..
-
자바스크립트 공부(7) - 문서 객체 모델(DOM) (2)개인 공부/JavaScript 2021. 2. 6. 18:25
DOM 요소의 속성 노드에 접근하면 HTML 요소의 속성 값을 원하는 값으로 수정할 수 있다. 1. HTML 태그 속성을 가져오거나 수정하기 getAttribute() : 속성에 접근하기 setAttribute() : 접근한 속성의 값 바꾸기. 괄호 안에 속성 이름과 값을 넣는다. 지정한 속성이 없다면 새로 추가하고, 지정한 속성이 있다면 괄호 안에 넣은 속성 값으로 수정한다. document.querySelector("#prod-img > img").setAttribute("src", "images/coffee-blue.jpg") 🔺 setAttribtue() 함수를 사용하여 이미지 경로 수정하는 예시 위의 태그에서 querySelectorAll("img")로 접근한 후 인덱스를 지정할 수도 있지만 이..
-
자바스크립트 공부(7) - 문서 객체 모델(DOM) (1)개인 공부/JavaScript 2021. 2. 6. 17:17
문서 객체 모델(DOM)이란 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법이다. 자바스크립트를 이용해 웹 문서의 텍스트, 이미지 등의 요소를 제어하기 위해서는 반드시 이해해야 하는 개념이다. 1. DOM 트리 DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분한다. 이런 구조는 나무를 거꾸로 뒤집은 것 같은 모양을 가지고 있어 'DOM 트리'라고 불린다. DOM 트리는 가지와 노드로 표현하는데, HTML 요소만 표현하지 않는다. HTML 요소 내에 속한 텍스트, 이미지도 자식으로 간주하고 DOM 트리에 표현한다. 요소(Element) 노드 : 웹 문서의 태그 텍스트(Text) 노드 : 태그가 품고 있는 텍스트, 요소 노드의 자식 노드이다. 속성(..
-
자바스크립트 공부(6) - 배열(Array)개인 공부/JavaScript 2021. 2. 3. 17:09
배열(Array)은 여러 개의 항목을 하나의 변수에 저장해야 할 때 사용한다. 1. Array 객체로 배열 만들기 자바스크립트에서는 1. 리터럴을 사용하거나 2. Array 객체를 사용해서 인스턴스를 만들어서 배열을 만들 수 있다. (자바스크립트 내에 미리 Array 객체가 만들어져 있다.) var numbers = [1, 2, 3, 4]; // 리터럴 사용 var numbers = new Array(1, 2, 3, 4); // Array 객체 사용 length 속성을 사용하면 배열에 있는 요소의 개수를 확인할 수 있다. 2. Array 객체의 함수들 concat() : 기존 배열에 또 다른 배열이나 값을 합쳐서 새로운 배열을 만든다. 기존 배열의 값에는 영향을 주지 않는다. join() : 배열의 요소..
-
자바스크립트 공부(5) - 객체(Object)개인 공부/JavaScript 2021. 2. 1. 17:55
클래스 : 붕어빵 틀. 데이터가 들어있지 않고 템플릿만 존재하는 것. 한 번만 선언함. 정의만 해둔 것이기 때문에 실제 메모리에 올라가지는 않음.오브젝트 : 클래스를 이용해서 실제로 데이터를 넣어서 만드는 것. 클래스를 이용해서 새로운 인스턴스를 생성하면 오브젝트가 된다.클래스는 ES6부터 도입된 것. 이전에는 클래스를 정의하지 않고 바로 오브젝트를 생성함.책에서 배운 객체가 너무 이해가 잘 안 돼서 따로 찾아봤다. 객체지향 개념이 익숙하지 않아서 그런 것 같다.참고 : 자바스크립트 6. 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리 1. 자바스크립트 내 객체의 종류내장 객체(Built-int Object) : 프로그래밍을 할 때 자주 사용하는 요소로 미리 정의되어..
-
자바스크립트 공부(4) - 함수와 이벤트개인 공부/JavaScript 2021. 1. 30. 16:54
함수 정의하기 function name() { } 기본 형식은 이러하고, 필요하다면 매개변수를 지정할 수도 있다. 지역 변수와 전역 변수 스코프(Scope) : 변수를 선언하고 사용할 때 변수가 적용되는 범위 지역 변수(Local Variable) : 한 함수 내에서만 사용 가능한 변수. 함수 내에서 변수 이름 앞에 var을 붙여서 선언한다. 전역 변수(Global Variable) : 스크립트 소스 전체에서 사용 가능한 변수 블록 변수(Block Variable) : ES6 버전부터 추가된 변수로, 한 블록({}) 내에서만 유효한 변수이다. let을 사용하여 선언한다. 익명 함수 익명 함수는 이름이 없는 함수이다. 변수에 할당하거나 다른 함수의 매개변수로 사용할 수 있다. 활용 예시 : var add ..
-
자바스크립트 공부(3) - 제어문개인 공부/JavaScript 2021. 1. 30. 15:38
1. if...else문 기분 문법 if (condition) { } else { } 2. 조건 연산자 조건이 하나이고 참과 거짓일 때 실행할 명령도 하나라면 조건 연산자를 사용할 수 있다. 조건 연산자는 조건 ? 참일 때 명령 : 거짓일 때 명령과 같은 형식으로 사용한다. 3. NaN (Not a Number) 말 그대로 숫자가 아님을 의미하며 falsy 값이다. 더 자세한 정보는 다음 링크를 참고. * 참고 prompt를 이용하여 값을 받을 때 만약 사용자가 값을 입력하지 않고 취소를 누르면 변수에 null이 저장된다. 4. switch문 자바스크립트에서도 switch문을 사용할 수 있다. 5. for문 자바스크립트에서 for문은 for (var i = 0; i < 10; i++)와 같은 형식으로 사..
-
자바스크립트 공부(2) - 변수, 자료형, 연산자개인 공부/JavaScript 2021. 1. 26. 05:40
1. 변수 선언하기 변수명 앞에 var을 붙여서 선언한다. 자바스크립트의 변수도 여느 프로그래밍 언어들처럼 변수명을 지을 때는 몇 가지 규칙을 지켜주어야 한다. 여러 단어를 연결하여 변수명을 지을 때는 첫 번째 단어는 소문자, 두 번째 단어부터는 대문자로 시작하는 방법을 많이 사용한다. 이를 낙타 표기법(Camel Case) 라고 한다. (규칙 이름은 처음 알게 된 사실...!!) 또 변수명과 첫 글자로 $ 기호를 사용할 수 있다. * let과 const ES6 버전부터는 변수를 선언할 때 let과 const를 사용할 수 있다고 한다. let으로 선언한 변수는 블록을 벗어나면 사용할 수 없다. const는 상숫값을 선언할 때 사용한다. 2. 자료형 자바스크립트의 자료형은 크게 '기본형'과 '복합형'으로 ..