본문 바로가기

Study/JavaScript

 (9)
[JavaScript] 이벤트, ES6 주요사항(var, let, const, 화살표 함수, 전개연산자) 이벤트를 적용하는 문법 1. 이벤트를 적용할 대상을 지정한다. 2. 이벤트의 종류를 입력한다. 3. 이벤트가 발생했을 때 수행할 코드를 기술한다. addEventListener함수를 이용하여 이벤트를 적용하고하는 대상에 이벤트가 일어나는지 확인하고 2의 이벤트가 발생되면 function함수 안의 내용이 실행되는 것이다. 대표적인 이벤트의 종류 이벤트 명 설명 click 클릭할 때 mouseover 마우스가 특정 객체 위로 올려졌을 때 mouseout 마우스가 특정 객체 밖으로 나갔을 때 mouseenter 마우스가 특정 객체 안에 들어왔을 때 mouseleave 마우스가 특정 객체에서 떠났을 때 mousedown/up 마우스를 클릭했을 때 / 마우스에서 손을 뗐을 때 scroll 문서에서 스크롤을 할 때..
[JavaScript] 자바스크립트에서 요소를 선택하는 방법 자바스크립트에서 요소를 선택하는 방법 선택자 예시 비고 태그 명 document.getElementsByTangName('h2'); 유사배열로 반환 아이디 명 document.getElementsById('logo'); 단일 값으로 반환 클래스 명 document.getElementsByClassName('link'); 유사배열로 반환 CSS 선택자 document.querySelector('header #logo'); 단일 값으로 반환 CSS 선택자 document.querySelectorAll('nav a'); 유사배열로 반환 태그 명으로 선택하기 사용예시) h1태그를 선택하여 폰트컬러 변경하기 Basic Selector Section title list item 1 list item 2 list i..
[JavaScript] 개념 정리 - 문자열 함수, 타이머, Math함수(+난수생성하기) 문자열 함수 charAt : 문자열에서 특정 인덱스 번호에 해당하는 문자가 무엇인지 반환해준다. 사용예시) String chartAt chartAt o 'h'가 0번의 인덱스 번호를 가지고 있기 때문에 4번은 'o'라고 출력이 되고 있다. IndexOf, search : 문자열에서 특정 문자가 있다면 해당 문자의 인덱스번호를 반환해준다. 사용예시) IndexOf, Search concat : 배열을 병합할 때도 사용한 concat 함수. 문자열을 병합할 때도 사용 가능하다. 사용예시) concat concat hello worldwelcome universe replace : 문자열에서 특정 문자를 다른 문자로 변경할 때 사용한다. 사용예시) replace replace welcome universe b..
[JavaScript] 개념 정리 - 조건문, 비교연산자, 논리연산자, switch, 반복문 조건문 : 주어진 조건이 참인지 거짓인지 판별하여 다음 일을 처리한다. if(조건){ 참일 때 할 일; } else { 거짓일 때 할 일; } 조건문의 축약 기본 조건문 중괄호 생략 if (ab) document.write('a가 b보다 작다'); else document.write('a가 b보다 크다'); 기본 조건문 if, else 생략 if (a document.write('a가 b보다 작다'); } else { document.write('a가 b보다 크다'); } (a
[JavaScript] 개념 정리 - 변수, 연산자, 함수, 객체, 배열 변수 : 프로그래밍을 하면서 지속적으로 사용해야하는 값들을 저장해 놓고 필요할 때 재사용하거나, 지정한 값을 수정하면서 프로그램을 효율적으로 작성하기 위해 사용한다. 변수 선언 키워드 설명 var 변수를 선언하고 동시에 값을 초기화 let 블록범위의 지역변수를 선언하고 동시에 값을 초기화 const 블록범위의 상수를 선언 ★ ECMAScript6 이후부터는 let 및 const를 이용한 변수 작성이 일반적이다. *ECMASCript란? - 표준화된 스크립트 프로그래밍 언어로서, 자바스크립트를 표준화하기 위해 만들어졌다. 웹의 클라이언트 사이드 스크립트로 많이 사용되며 Node.js를 사용한 서버 응용 프로그램 및 서비스에도 점차 많이 쓰이고 있다. 여러 버전이 있으며 많이 사용하는 버전은 ES2015와 ..
[JavaScript] 기초 - 함수 함수 : 호출될 수 있는 코드 조각. 함수를 선언하면 함수의 이름을 코드 조각 대신 사용할 수 있다. 함수 선언식 function 함수명(){ // 함수의 기능을 표현한 구문 } ★ 처음 만들 때부터 이름이 있는 함수를 만든다. 호출문을 위에서 사용해도 된다.(호이스팅이 가능함) *호이스팅: javascript에서 코드 실행 전 변수 및 함수 선언이 스코프의 최상단으로 끌어 올려지는 현상 함수 표현식 const 함수명 = function(){ // 함수의 기능을 표현한 구문 } ★ 이름이 없는 익명 함수를 만든 다음에 이름을 붙여주는 것이다. 호출문을 위에서 사용하면 에러가 뜬다. 함수 호출 : 함수가 만들어지고 나면, 함수명은 스스로 보관하고 있는 구문 대신 사용될 수 있다. 함수가 사용되기 위해서는 ..
[JavaScript] 기초 - 조건문(if~else), 반복문(while·for) 조건문 : 주어진 조건의 참/거짓 여부에 따라 프로그램의 흐름을 결정할 수 있는 구문 조건이란 불리언 데이터를 반환하거나 불리언 데이터로 해석할 수 있는 표현식을 의미한다. if문 if(조건){ // 조건이 true일 때 실행할 코드 } let number = 3 if(number === 3) { console.log("It is true!!") } /* 코드해석: 변수 number의 값이 3과 같다면 콘솔에 "It is true!!"를 출력해라. 3과 같지 않을 경우 아무 일도 일어나지 않는다. */ if-else문 : 조건이 거짓일 때의 할 일을 추가 정의할 수 있다. 반복문 : 비슷하거나 동일한 구문을 반복해서 실행해주는 구문 while문 : '주어진 조건이 참일 동안에 구문을 반복하는' 반복문이다..
[JavaScript] 기초 - 변수, 상수, prompt, 템플릿 리터럴, 연산, null, undefined 변수 : 데이터에 붙이는 이름표. 변수를 이용하면 이름표를 붙여 둔 데이터를 기억해두었다가 필요할 때마다 재사용할 수 있게 된다. 변수 만드는 방법 let 변수이름 = 데이터; 변수 명명 규칙 변수명에는 오직 문자와 숫자, 그리고 기호 중 &, _만이 포함될 수 있다. 변수명의 첫 번째 글자로 숫자가 올 수 없다. 이미 다른 뜻을 가지고 있는 단어(키워드)는 변수명으로 사용할 수 없다. 변수가 생성되고 나면, 변수(변수이름)를 지정된 데이터 대신 사용할 수 있다. 변수는 한 번에 하나의 데이터만 기억할 수 있으며, 기억하고 있는 값을 바꿔가며 사용할 수 있다. 변수를 이용하면 자바스크립트로 표현할 수 있는 모든 데이터를 기억할 수 있다. 상수 :변하지 않는 값. 값의 변경이 불가하다. 변수와 반대되는 것..

티스토리툴바