자바스크립트
-
자바스크립트 실습(1) - 숫자 맞히기 게임개인 공부/JavaScript 2021. 2. 10. 16:55
컴퓨터가 랜덤으로 1~100 사이의 숫자를 생성하고, 사용자가 그 숫자를 맞히는 게임이다. 사용자가 입력한 숫자가 정답보다 작다면 DOWN, 크다면 UP, 같다면 맞혔다는 문구를 출력한다. 더보기 var comNum = Math.floor(Math.random() * 100 + 1); // 컴퓨터가 만든 숫자 var userLabel = document.querySelector("#try"); var display = document.querySelector("#display"); var counter = document.querySelector("#counter"); var tryCount = 0; // 시도 횟수 userLabel.onkeydown = function(e) { if (e.keyCode..
-
자바스크립트 공부(9) - 브라우저 객체 모델(BOM)개인 공부/JavaScript 2021. 2. 10. 02:46
브라우저 객체 모델(BOM)이란 웹 브라우저 전체를 객체로 관리하는 것을 말한다. BOM을 통해서 자바스크립트 프로그램이 브라우저 창을 관리할 수 있다. Window 객체는 브라우저 창이 열릴 때 가장 먼저 만들어지는 객체이다. 이 객체는 최상위에 존재하며 그 하위에 브라우저 각 요소에 해당하는 객체들이 존재한다. DOM에 속하는 Document 객체 역시 Window 객체 안에 속해있다. 웹 페이지 '내'에 존재하는 요소들을 관리할 때는 DOM, '밖'에 존재하는 요소들을 관리할 때는 DOM을 사용한다고 생각하면 될 것 같다. 1. Window 객체 (1) 속성 innerWidth, innerHeight : 웹 사이트 내용 부분의 너비와 높이 outerWidth, outerHeight : 웹 브라우저의..
-
자바스크립트 공부(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..
-
자바스크립트 공부(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. 자료형 자바스크립트의 자료형은 크게 '기본형'과 '복합형'으로 ..