이벤트객체★ ★ ★ ★ ★이벤트객체는 이벤트 핸들러 안에 포함된 객체로 이벤트가 발생하면 생성된다. 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 ..
배열객체 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..
자바스크립트 기초· 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> ..
- Total
- Today
- Yesterday
- is선택자
- 컴퓨터학원수강내용정리day1
- 문자결합연산자
- 컴퓨터학원수강내용정리day10
- UIUX
- html
- 컴퓨터학원수강내용정리day2~4
- has선택자
- order과 align-self
- nth-last-of-type
- 형태구조선택자
- uiux서비스기획
- UIUX디자이너
- 컴퓨터학원수강내용정리day05
- 제외선택자not
- 링크의종류
- of-type
- 하위정렬속성
- list-style-type
- HTML기초
- 시안만들기
- javascript기초 #uiux #증감연산자 #전위연산 #후위연산 #대입연산=
- 피그마기초
- flex태그배우기
- 플레이스홀더
- 디자인소스사이트목록
- uiux기초
- uxui디자이너되기
- CSS
- 절대경로상대경로
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |