1D

이벤트객체★ ★ ★ ★ ★이벤트객체는 이벤트 핸들러 안에 포함된 객체로 이벤트가 발생하면 생성된다. event객체에는 이벤트와 관련된 다양한 정보를 가지고 있다.이벤트의 종류에 따라 이벤트 객체의 property와 method들을 골라서 사용할 수 있다.예를 들어 이벤트가 발생된 대상(태그)에 접근할 때 this라는 키워드를 사용할 수 있다. [이벤트 객체의 property]- altKey : 이벤트가 발생했을 때 alt가 눌렸는지에 대한 여부를 boolean 값으로 반환한다.- ctrlKey : 이벤트가 발생했을 때 ctrl이 눌렸는지에 대한 여부를 boolean 값으로 반환한다. - shiftKey : 이벤트가 발생했을 때 shift가 눌렸는지에 대한 여부를 boolean 값으로 반환한다. - bu..

getAttribute(),setAttribute()메서드웹 요소를 문서에 삽입할 때 태그 속성을 함께 사용하면 DOM트리에 속성노드가 추가되면서 속성값이 저장된다. 이 때 속성에 접근하려면 getAttribute()메서드를 사용하고 속성값을 수정하려면 setAttribute()메서드를 사용한다. [기본형]요소.getAttribute("속성명")요소.setAttribute("속성명","바꿀 값") div id="pic"> img src="./img/image01.jpg" alt="풍경" id="girl" width="200" height="200" /> div> script> function dis..

매개변수 없이 함수에 전달된 값 받아오기 함수 정의문에서 arguments를 사용하면 매개변수를 사용하는 것처럼 함수의 인수값을 받아올 수 있다. arguments는 전달된 인수를 배열에 담아 저장한다. 하지만 arguments의 배열은 배열처럼 생겼지만 실제로 배열은 아니다. 이렇게 배열처럼 생겼지만 배열은 아닌 배열들을 '유사 배열' 또는 'array-like'이라고 부른다. 이렇게 인수의 갯수를 알 수 없는 가변 인자 함수의 경우 arguments 객체를 통해 인수를 확인할 수 있고 인수는 유사배열 안에 순차적으로 저장된다. 가변인자함수는 매개변수를 통해 인수를 전달받는 것이 불가능하므로 arguments객체를 통해 인수를 전달받는다. 하지만 arguments는 유사배열이라서 배열의 메서드를 사용..

var를 이용한 변수의 특징 자바스크립트 ES6버전에서는 변수를 선언하기 위해 let과 const라는 새로운 예약어가 생겼다.var대신 let과 const라는 변수가 생긴 이유를 알려면 '변수의 스코프'라는 것을 이해해야한다.변수 또는 함수의 유효범위를 뜻하는 'scope'자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 범위를 '스코프(scope)'라고 한다.변수가 어디까지 유효한지 범위를 가리키는 영역이 필요하다는 의미이다. 자바스크립트 함수에서 변수를 사용할 때에는 이 영역에 주의해야한다. 한 함수 안에서만 사용하고 다른 함수에서는 사용할 수 없는 변수가 있는가하면 어느 함수에서나 다 사용할 수 있는 변수가 있다. 한 함수에서만 사용할 수 있는 변수를 '지역변수' 또는 '로컬변수local ..

브라우저 객체 Browser Object Model (BOM)브라우저에 내장된 객체를 '브라우저 객체'라고 한다. 브라우저 객체의 최상위 객체는 window라고 부르며 window가 곧 브라우저를 의미한다. window객체 안에는 여러 하위 객체가 포함되어 있다. 즉, 계층적 구조로 이루어져 있고, 이를 브라우저 객체 모델이라고 한다. window객체의 하위 객체로는 document, screen, location, history, navigator가 있다.window객체 브라우저 객체의 최상위 객체를 말한다. [메서드]1. open("url 또는 경로", "새 창 이름", "새 창 옵션") : url또는 경로의 페이지를 새 창으로 연다.2. alert("메세지") : 경고창이라고 부르고, 사용자에게 경..

배열객체 Array변수에는 데이터가 오직 한개만 저장된다. 만약 여러 개의 데이터를 변수에 저장하고 싶다면 배열을 이용할 수 있다.'나눌 배', '열거할 열'자를 써서 나눠서 열거한다는 의미말 그대로 여러 개의 데이터를 쭉 나열하여 하나의 변수에 담아 저장할 때 주로 사용한다.배열 안에 있는 데이터는 개수가 몇 개이든 상관없다. 배열 안이 가공되더라도 상관없다.배열을 선언하면 데이터가 들어간 순서대로 index번호라는 것을 부여받는다.index번호는 데이터 순서에 대한 자리번호로 0번부터 순차적으로 부여된다. index번호를 이용하면 해당 순번째에 새로운 데이터를 넣거나, 가공하거나 뺄 수도 있다. [기본형]1. var 참조변수 = new Array(); 참조변수[0] = 값1; 참조변수[1]..

반복문✅✨반복문은 원하는 횟수만큼 코드를 반복실행하게 만드는 문장이다.동일한 UI를 반복적으로 보여줘야 한다거나, 문장이나 문구를 반복하여 보여주고 싶을 때 사용한다. 1. while문 (~하는 동안)조건식이 만족할 때까지 {} 안에 있는 코드를 여러 회 반복 실행하고 실행 순서는 조건식을 검사하고 만족하면 {}안에 있는 코드와 증감식을 실행한다.[기본형]var 변수 = 초깃값; ------> counter변수라고 부른다.while(조건식){ 반복해야 할 자바스크립트 코드; 증감식;}구동원리:조건식이 true에서 false가 될때까지 계속 cycle을 돈다. while(10>0){반복해야 할 자바스크립트 코드 실행; --->증감식실행;--->증감식이 실행되고 나면 다시 조건 검사를 하러 간다. e..

제어문 : 문장의 형태, 프로그램의 흐름를 제어한다.조건문+선택문+반복문제어문이란?제어문은 프로그램의 흐름을 제어할 수 있도록 도와주는 문장을 말한다. 제어문에는 조건식의 만족여부에 따라 코드를 제어할 수 있는 조건문과 변수와 일치하는 값을 찾아 선택적으로 코드를 제어할 수 있는 선택문과 특정 코드를 원하는 횟수만큼 반복 실행할 수 있는 반복문이 있다. 조건문 if문(만약에~) 문장✅조건문은 조건식의 값이 true인지 false인지에 따라 자바스크립트 코드를 제어한다.조건을 여러 개 달 수 있다.if 문은 조건식을 만족(true)했을 경우에만 코드를 실행시킨다.[기본형]if(조건식){ 조건식이 true면 실행할 코드;} script> var num1 = 10; if (num1 500) {..

자바스크립트 기초· html 어느 위치든 상관없이 사용 가능.· 태그를 전부 다 인식한 상태에서 자바스크립트를 구동하기 때문에 body 아래쪽에 쓰거나 바로 위에 js라고 주석을 달고 쓴다.· head에 연결할 경우 title 아래에 쓴다.· 기본 구조 없이, css처럼 바로 쓰면 된다.· 한 줄 주석과 두 줄 이상 쓰는 주석으로 나누어져있다."use strict";//ES6버전의 엄격한 문법을 사용하겠다는 뜻.DOCTYPE html>html lang="en"> head> meta charset="UTF-8" /> meta name="viewport" content="width=device-width, initial-scale=1.0" /> title>자바스크립트기초title> ..

미디어쿼리 미디어쿼리 구문css 모듈인 미디어쿼리는 사이트에 접속하는 장치에 따라 특정한 css 스타일을 보여주는 방법이다. 미디어쿼리는 다양한 기기와 화면 크기에 대응하여 웹사이트를 효과적으로 표현할 수 있게 해준다. [기본형]@media only 또는 not 미디어유형 and (조건) and (조건){ 선택자 {속성:값}}· only - 미디어쿼리를 지원하지 않는 브라우저에서는 미디어쿼리를 무시하고 실행하지 않는다. · not - 다음에 지정하는 미디어 유형을 제외한다. 예를 들어 not tv 라고 적으면 tv유형을 제외한다. *only 또는 not - 잘 쓰이지 않아 생략가능. · and - 조건을 여러 개 연결하여 추가하는 키워드(연산자)이다. *and (조건) and 앞 뒤에는 반드시 공백으..