자바스크립트
자바스크립트는 웹 브라우저에서 동작되는 스크립트 언어입니다.
자바스크립트(JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다. 자바스크립트는 본래 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌던 아이크(Brendan Eich)가 처음에는 모카(Mocha)라는 이름으로, 나중에는 라이브스크립트(LiveScript)라는 이름으로 개발하였으며, 최종적으로 자바스크립트가 되었다. 자바스크립트가 썬 마이크로시스템즈의 자바와 구문이 유사한 점도 있지만, 이는 사실 두 언어 모두 C 언어의 기본 구문에 바탕을 뒀기 때문이고, 자바와 자바스크립트는 직접적인 관련성이 없다. 이름과 구문 외에는 자바보다 셀프나 스킴과 유사성이 많다. 2013년 1월 기준으로, 가장 최근 버전은 자바스크립트 1.8.5이고[3], 파이어폭스 3에서 지원된다. 표준 ECMA-262 3판에 대응하는 자바스크립트 버전은 1.5이다. ECMA스크립트는 쉽게 말해 자바스크립트의 표준화된 버전이다. 모질라 1.8 베타 1이 나오면서 XML에 대응하는 확장 언어인 E4X(ECMA-357)를 부분 지원하게 되었다. 자바스크립트는 브라우저마다 지원되는 버전이 다르다.(출처:위키백과)
자바스크립트 언어의 특징
자바스크립트는 인터프린터 언어입니다.
자바스크립트 코드는 작성된 순서대로 구문을 분석합니다. 만약 코드에 문제가 생기면 에러가 발생한 다음 줄 부터는 구문을 분석하지 않습니다.
자바스크립트는 클리이언트 스크립트 언어입니다.
자바스크립트는 서버에서 실행되지 않고, 사용자 컴퓨터에서 실행되는 클라이언트 언어입니다. 서버에서 운영되는 PHP, JSP, ASP언어와 비교됩니다.
자바스크립트는 객체기반 언어입니다.
C++와 JAVA와 같이 클래스를 이용하여 객체를 생성하는 클래스 기반 객체 지향 언어입니다. 자바스크립트는 클래스가 아닌 프로토타입을 상속하는 프로토타입 기반 객체 지향 언어입니다.
자바스크립트는 다양한 라이브러리가 지원되는 언어입니다.
자바스크립트를 이용한 언어에는 제이쿼리(jQuery), 앵귤러(Angular)js, 리액트(React)js, 노드(Node)js 등이 있습니다. 이를 통해 다양한 기능을 쉽게 구현할 수 있으며, 뛰어난 효과를 만들어 낼 수 있습니다.
자바스크립트는 동적 타입의 언어이며 클로저를 정의합니다.
C++와 JAVA는 실행되기 전에 변수 타입을 정하는 언어이며, 자바스크립트는 변수 타입이 없는 동적 타입의 언어이며, 자바스크립트 함수는 클로저(Closure)를 정합니다.
자바스크립트 기술적 요소
ECMAScript
자바스크립트는 ECMA-262 문서로 공개되고 있으며 핵심기술은 ECMAScript로 규정되어 있습니다. ECMAScript는 ECMA(Ecma International)라는 조직이 표준화 작업을 하고 있으며, 현재 최신버전은 ECMAScript8입니다.
클라이언트 언어 자바스크립트
- Window 인터페이스 : 자바스크립는 브라우저를 조작하는 기능을 제공
- DOM : 자바스크립트는 HTML 문서를 조작하는 기능을 제공
- XMLHttpRequest : 자바스크립트는 서버와 비동기로 통신하는 기능
자바스크립트는 웹 브라우저에 작동되는 클라이언트 언어입니다. 자바스크립트는 ECMAScript가 규정한 코어 언어와 웹 브라우저로 구성되어 있습니다.
서버 언어 자바스크립트
웹 서버에서 동작되는 자바스크립트를 서버 측 자바스크립트라고 합니다. 웹 서버를 구현 하는데 Perl, PHP, Python, Ruby 등의 프래그래밍 언어가 널리 사용되고 있으며, 최근에는 서버 측 언어로 자바스크립트를 많이 사용하고 있습니다.
- Node.js : 구글이 개발한 자바스크립트 실행 환경
- Rhino : 모질라가 개발한 자바스크립트 실행 환경
- Aptana Jaxer : 압타나가 개발한 자바스크립트 실행 환경
자바스크립트 기초
자바스크립트 주석
일반적으로 특정 코드에 대한 설명을 입력하거나 특정한 부분의 코드가 실행되지 않도록 사용하는 코드입니다.
/* .... */ : 여러줄에 주석을 적용하는 경우// : 한줄에 주석을 적용하는 경우<!-- --> : HTML 주석/* .... */ : CSS 주석
다음의 키워드는 자바스크립트에서 사용하기 때문에 사용자가 임의로 사용 할 수 없습니다.
break,
case,
catch,
continue,
debugger,
default,
delete,
do,
else,
finally,
for,
function,
if,
in,
instanceof,
new,
return,
switch,
this,
throw,
try,
typeof,
var,
void,
while,
while,
with,
class,
enum,
export,
extends,
import,
super,
implements,
interface,
let,
package,
private,
protexted,
public,
static,
yield
자바스크립트 사용 방법
자바스크립트를 사용하는 방법은 외부파일, 스크립트 태그, 태그에 직접기술하는 방법이 있습니다.
<!-- 외부 파일로 로드하는 방법-->
<script type="text/javascript" src="javascript.js"></script>
<!-- script 태그 사이에 기술하는 방법-->
<script type="text/javascript">
document.write("hello");
</script>
변수
변수는 하나의 데이터를 저장하는 저장소입니다.
변수는 변하는 수를 의미하며, 사용 가능 범위에 전역변수, 지역변수, 매게변수, 멤버변수로 나눌 수 있으며, 변수는 식별자로 구분해야 하기 때문에 변수에는 숫자, 문자열, 불린, 함수, 객체 등을 사용할 수 있습니다.
변수 선언
변수를 선언하는 방법
let 변수명;
let 변수명 = 값;
let 변수명 = 값;
변수명
- 예약어 : 자바스크립트에서 정해진 단어 즉 자바스크립트 문법을 규정짓기 위해 자바스크립트에서 사용하는 특수한 키워드입니다.
- 식별자 : 사용자가 임의로 사용하는 단어 즉 변수나 함수를 사용할 때 정의하는 키워드입니다.
식별자를 만드는 규칙
- 사용자가 사용할 수 있는 문자 알파벳(a~z,A~Z), 숫자(0~9), 밑줄(_), 달러기호($)
- 첫 글자는 숫자를 사용할 수 없습니다. 첫글자 알파벳(a~z,A~Z), 밑줄(_), 달러기호($) 중 하나여야 합니다.
- 공백을 주면 안됨 : 밑줄(_) 사용 가능, 하이픈(-) 사용안됨
- 특수 기호를 사용할 수 없습니다.
- 키워드(예약어)를 사용 할 수 없습니다.
단어를 조합할 때 규칙
- 언더스코어 노테이션(스네이크 표기법) : color_top와 같이 중간에 '_'를 사용합니다.
- 캐멀 노테이션(로어 캐멀 표기법) : colorTop와 같이 두번째 단어의 첫 글자를 대문자로 사용합니다.
- 파스칼 노테이션(어퍼 캐멀 표기법) : ColorTop와 같이 모든 단어의 첫 글자를 대문자로 사용합니다.
변수 종류
-
var,let,const let: 값(데이터)의 재할당 가능const: 값(데이터)의 재할당 불가능- 지역변수 : 특정 범위 안에서만 사용하는 변수
- 전역변수 : 모든 영역 안에서 사용하는 변수
- 매개변수(파라미터) : 함수 외부에서 함수 내부로 데이터를 전달하기 위한 변수
- 멤버변수(프로퍼티) : 클래스 내부에서 만들어지면 주로 객체에서 사용하는 변수
지역변수 / 전역변수
let x1 = 1000; // (전역)변수 x1에 숫자를 1000을 저장
let x2 = 2000; // (전역)변수 x2에 숫자를 2000을 저장
let x3; // (전역)변수 x3를 선언
x1 = 100; // (전역)변수 x1에 숫자를 1000에서 100으로 변경
x2 = 200; // (전역)변수 x2에 숫자를 2000에서 200으로 변경
function func(){
let x1 = 3000; // (지역)변수 x1에 숫자를 3000을 저장
let x2 = 4000; // (지역)변수 x2에 숫자를 4000을 저장
x1 = 300; // (지역)변수 x1에 숫자를 3000에서 300으로 변경
x2 = 400; // (지역)변수 x2에 숫자를 4000에서 400으로 변경
x3 = 500; // (전역)변수 x3에 숫자를 500을 저장
}
매개변수
// 매개변수를 이용해서 화면에 "jQuery"를 출력하세요!!
function demo(str){
console.log(str);
}
demo("jQuery");
변수 유형(자료형)
| 자료형 | 설명 |
|---|---|
문자열 ( String ) |
"문자", "string" 처럼 따옴표를 사용한 문자의 집합을 문자열이라고 합니다. |
숫자 ( Number ) |
숫자에는 정수와 실수가 있지만, 자바스크립트에서는 정수와 실수를 구분하지 않고 사용할 수 있습니다. |
특수값 ( undefined ) |
변수 선언시 자료형의 지정이 이루어지지 않거나, 어떤 자료형인지 알 수가 없을 경우에 undefined라고 표시가 됩니다. |
특수값 ( null ) |
null은 아무런 값이 없는 경우를 의미하며, 주로 변수를 초기화 할 때 사용합니다. |
객체 ( Object ) |
객체 형태의 자료형도 자바스크립에서 사용 할 수 있습니다. |
배열 ( array ) |
배열 형태의 자료형도 자바스크립에서 사용 할 수 있습니다. |
논리 ( Boolean ) |
참과 거짓을 나타내는 자료형이며, 오직 true, false로만 표현을 합니다. |
함수 ( Function ) |
function은 자바스크립트를 구성하는 기본 단위이며, 자료형으로 변수에 넣을 수 있습니다. |
String
- 문자 데이터
- 따옴표를 사용합니다.
-
',",`
let myName = "JJGODCOM";
let email = 'jjgodcom1@gmail.com';
let hello = `hello ${myName}?!`;
var str1 = "javascript"; //큰 따옴표
var str2 = 'javascript'; //작은 따옴표
var str3 = "hello 'javascript'"; //큰 따옴표 안에 작은 따옴표
var str4 = 'hello "javascript"'; //작은 따옴표 안에 큰 따옴표
var str5 = "hello\njavascript"; //줄바꿈
var str6 = "hello\'javascript\'"; //작은 따옴표
var str7 = "hello\"javascript\""; //큰 따옴표
console.log(myName); // JJGODCOM
console.log(email); // jjgodcom1@gmail.com
console.log(hello); // Hello JJGODCOM?!
| 종류 | 설명 |
|---|---|
.indexOf() |
객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. |
.slice() |
문자열의 일부를 추출하면서 새로운 문자열을 반환합니다. |
.replace() |
어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다. |
.match() |
문자열이 정규식과 매치되는 부분을 검색합니다. |
.trim() |
문자열 양 끝의 공백을 제거합니다. |
const str = "HEllo world!";
const email = "jjgodcom1@gmail.com";
const str2 = " jjgodcom1@gmail.com";
// .indexOf()
console.log(str.indexOf("world")); // 6을 반환
console.log(str.indexOf("z")); // -1을 반환
console.log(str.indexOf("ㅁㄴㅇ") !== -1); // 비교연산자로 데이터 찾기
// .slice()
console.log(str.slice(0, 3)); // HEl을 반환
// .replace()
console.log(str.replace("world","asd")); // world를 asd로 변환
console.log(str.replace(" world!","")); // HEllo를 반환
// .match()
// 이메일 아이디 잘라내기
console.log(email.match(/.+(?=@)/)[0]); // 배열에서 0번째는 jjgodcom1이다
// .trim()
console.log(str.trim()); // 모든 공백 문자 제거
Number
- 숫자 데이터
- 정수 및 부동소수점 숫자를 나타냅니다.
| 종류 | 설명 |
|---|---|
.totoFixed() |
숫자를 고정 소수점 표기법으로 표시합니다. |
.parseInt() |
문자열 인자를 파싱하여 특정 진수의 정수를 반환합니다. |
.parseFloat() |
주어진 값을 필요한 경우 문자열로 변환한 후 부동소수점 실수로 파싱해 반환합니다. |
const pi = 3.14159265358979;
console.log(pi); // 숫자형
// .toFixed()
// 소수점 원하는 자리까지 반환
// 반환값은 문자열
const str = pi.toFixed(2);
console.log(str); // 문자열을 반환
console.log(typeof str);
// parseInt(); 소수점X 숫자로 반환
// parseInt(); 소수점 포함 숫자로 반환
const integer = parseInt(str);
const float = parseFloat(str);
console.log(integer);
console.log(float);
console.log(typeof integer, typeof float);
Math
| 종류 | 설명 |
|---|---|
.abs() |
절대값만 반환 |
.min() |
가장 작은값을 추출함. |
.max() |
가장 큰 값을 추출함. |
.ceil() |
소수점 무시하고 올림처리. |
.floor() |
소수점 무사하고 내림처리. |
.round() |
반올림 처리. |
.random() |
소수점 랜덤숫자 추출 |
// .abs() : 절대값만 반환
console.log("abs : ", Math.abs(-12)); // 12
// .min() : 가장 작은값을 추출함
console.log("min : ", Math.min(2, 8)); // 2
// .max() : 가장 큰 값을 추출함
console.log("max : ", Math.max(2, 8)); // 8
// .ceil() : 소수점 무시하고 올림처리
console.log("ceil : ", Math.ceil(3.14)); // 4
// .floor() : 소수점 무사하고 내림처리
console.log("floor : ", Math.floor(3.14)); // 3
// .round() : 반올림 처리
console.log("round : ", Math.round(3.14)); // 3
// .random() : 소수점 랜덤숫자 추출
console.log("random : ", Math.random()); // 0.~~
function random() {
return Math.floor(Math.random() * 10)
}
Undefined
- 값이 할당되지 않은 상태를 나타냅니다.
let undef;
let obj = { abc: 123};
console.log(undef); // Undefined
console.log(obj.abc); // 123
console.log(obj.x); // Undefined
Null
- 어떤 값이 의도적으로 비어있음을 의미합니다.
let empty = null;
console.log(empty); // null
Object
- 객체 데이터
- 여러 데이터를
{Key: Value}형태로 저장합니다. { }사용함
| 종류 | 설명 |
|---|---|
Object.assign() |
객체 합병 |
Object.keys() |
기존객체 이름으로 새로운 배열로 생성됨 |
const userAge = {
name : "jjgodcom",
age : 85
}
const userEmail = {
name : "jjgodcom",
email : "jjgodcom1@gmail.com"
}
const user = {
name : "jjgodcom",
age : 85,
email : "jjgodcom1@gmail.com"
}
// Object.assign() : 객체 합병
const target = Object.assign(userAge, userEmail);
const newTarget = Object.assign({},userAge, userEmail);
console.log(target);
console.log(newTarget);
console.log(target === newTarget);
// Object.keys() : 기존객체 이름으로 새로운 배열로 생성됨
const keys = Object.keys(user);
const value = keys.map(key => user[key]);
console.log(keys);
console.log(user["email"]);
console.log(value);
Array
- 배열 데이터
- 여러 데이터를 순차적으로 저장합니다.
[ ]사용함
| 종류 | 설명 |
|---|---|
.concat() |
두개의 배열 데이터를 병합 |
.forEach() |
배열 아이템 개수만큼 콜백함수 실행 |
.map() |
반환된 데이터를 기준으로 새로운 배열 생성 |
.filter() |
특정한 기준에 의해서 true값만 새로운 배열로 생성 |
.find() |
찾은 아이템을 출력 |
.findIndex() |
찾은 아이템의 index번호 출력 없을경우 |
.includes() |
배열에서 특정한 데이터가 있는지 확인 가능 |
.push() |
배열 제일 뒤에 새로운 값 추가 |
.pop() |
배열 제일 뒤쪽에 있는거 반환 |
.shift() |
배열 제일 앞쪽 데이터 반환 |
.unshift() |
배열 가장앞에 새로운 값 추가 |
.reverse() |
배열을 순서를 거꾸로 출력 |
.splice() |
배열 값 삭제 또는 교체 |
.sort() |
배열 정렬 |
const number = [1, 2, 3, 4];
const fruits = ["apple", "banana", "cherry"];
// .concat() : 두개의 배열 데이터를 병합
// 원본 배열은 수정 안됨
console.log(number.concat(fruits));
// .forEach() : 배열 아이템 개수만큼 콜백함수 실행
fruits.forEach(function (item, index, array) {
console.log(item, index, array);
});
fruits.forEach((item, index) => {
console.log("arrow : ",item, index);
});
// .map() : 반환된 데이터를 기준으로 새로운 배열 생성
const a = fruits.map(function (item, index) {
return `${item}-${index}`
});
// 화살표 함수로
const aArrow = fruits.map((item, index) => `${item}-${index}`);
const b = fruits.map(function (item, index) {
return {
id: index,
name: item
}
});
// 화살표 함수로
const bArrow = fruits.map((item, index) => ({
id: index,
name: item
}));
console.log(a);
console.log("aArrow : ",aArrow);
console.log(b[0].name);
console.log("bArrow : ",bArrow[0].name);
// .filter() : 특정한 기준에 의해서 true값만 새로운 배열로 생성
const fA = number.map(number => number < 3);
const fB = number.filter(item => item < 3);
console.log(fA);
console.log(fB);
// .find() : 찾은 아이템을 출력
// .findIndex() : 찾은 아이템의 index번호 출력 없을경우 -1
const findA = fruits.find(item => /^c/.test(item));
const findB = fruits.findIndex(item => /^t/.test(item));
console.log(findA);
console.log(findB);
// .includes() : 배열에서 특정한 데이터가 있는지 확인 가능 T or F
const includesA = number.includes(3);
const includesB = fruits.includes("jjgodcom");
console.log(includesA);
console.log(includesB);
// .push() : 배열 제일 뒤에 새로운 값 추가
// .unshift() : 배열 가장앞에 새로운 값 추가
// 원본수정됨
const number1 = [1, 2, 3, 4];
const fruits1 = ["apple", "banana", "cherry"];
number1.push(5);
fruits1.unshift(0);
console.log(number1);
console.log(fruits1);
// .reverse() : 배열을 순서를 거꾸로 출력
// 원본 수정됨
const number2 = [1, 2, 3, 4];
const fruits2 = ["apple", "banana", "cherry"];
number2.reverse();
fruits2.reverse();
console.log(number2);
console.log(fruits2);
// .splice(인덱스, 지울 아이템 개수) : 배열 값 삭제 또는 교체
// 원본 수정됨
const number3 = [1, 2, 3, 4];
const fruits3 = ["apple", "banana", "cherry"];
number3.splice(2, 1); // 2번쨰 인덱스부터 1개 삭제
fruits3.splice(2, 0, 999); // 2번쨰 인덱스에 999넣기
console.log(number3);
console.log(fruits3);
구조 분해 할당
// 구조 분해 할당
// 비구조화 할당
const user = {
name : "jjgodcom",
age : 85,
email : "jjgodcom1@gmail.com"
}
const { name, age, email, address="기본값지정" } = user;
const fruits = ["apple", "banana", "cherry"];
const [a, b, c, d] = fruits;
console.log(`사용자의 이름은 ${name} 입니다.`);
console.log(`${name}의 나이는 ${age}세입니다.`);
console.log(`${name}의 이메일 주소는 ${email}입니다.`);
console.log(address);
console.log(a,b,c,d);
전개 연산자
// 전개 연산자
const fruits = ["apple", "banana", "cherry"];
console.log(fruits);
console.log(...fruits); // 전개 연산자
// 값 : apple banana cherry
function toObject(a, b, c) {
return {
a: a,
b: b,
c: c
}
}
const toObject2 = (a, b, c) => ({a,b,c});
console.log(toObject(...fruits));
console.log(toObject2(...fruits));
함수
- 특정 동작(기능)을 수행하는 일부 코드의 집합(부분)
-
function(){}
매개변수와 인수
function sum(a, b) { // a와 b는 매개변수(parameters)
return a + b;
}
const a = sum(1, 2); // 1과 2는 인수(Arguments)
const b = sum(3, 4);
const c = sum(7, 2);
console.log(a,b,c); // 3, 7, 9
객체 데이터
// 객체 데이터
const jjgodcom = {
name: "jjgodcom",
age: 1994,
// 메소드(Method)
getName: function(){
return this.name
}
}
const hisName = jjgodcom.getName();
console.log(hisName); // jjgodcom
// 혹은
console.log(jjgodcom.getName()); // jjgodcom
즉시실행함수
// 즉시실행함수
const a = 7;
// 첫번째 방법
(
function () {
console.log(a * 2);
}
)();
// 두번쨰 방법
(
function () {
console.log(a * 2);
}()
);
타이머 함수
setTimeout(함수, 시간): 일정 시간 후 함수 실행clearTimeout(): 설정된 Timeout 함수를 종료
// setTimeout , clearTimeout
// 3초뒤 실행됨
const timer = setTimeout(() => {
console.log("tete");
},3000);
// h1 태그 클릭시 타이머 정지
const h1EL = document.querySelector("h1");
h1EL.addEventListener("click",() => {
clearTimeout(timer);
});
반복 함수
setInterval(함수, 시간): 시간 간격마다 함수 실행clearInterval(): 설정된 Interval 함수를 종료
// setInterval, clearInterval
// 3에 한번씩 실행됨
const timer = setInterval(() => {
console.log("tete");
},3000);
// h1 태그 클릭시 정지
const h1EL = document.querySelector("h1");
h1EL.addEventListener("click",() => {
clearInterval(timer);
});
ES6
화살표 함수
() => {} vs function () {}
// 다양한 화살표 함수 작성 방법
const double = function (x) {
return x * 2;
}
const doubleArrow = (x) => {
return x * 2;
}
const doubleArrow = (x) => x*2
const doubleArrow = x => x*2
const doubleArrow = x => ({ name: "jj" }) //객체 쓸떄
객체에서 생략과 arrow 함수 작성 방법
// 객체에서 생략과 arrow함수
const jjgodcom = {
name: "jjgodcom",
// : function 생략 가능
nomal() {
console.log(this.name);
},
// 객체에서 화살표 함수 작성하는법
arrow: () => {
console.log(this.name);
}
}
jjgodcom.nomal();
jjgodcom.arrow();
ES6 Classes
// ES6 Classes
// function USer(first, last) {
// this.firstName = first;
// this.lastName = last;
// }
// USer.prototype.getFullName = function () {
// return `${this.firstName} ${this.lastName}`
// }
// 위에 주석 코드를 class를 이용하여 구현
class User{
constructor(first, last){
this.firstName = first;
this.lastName = last;
}
getFullName() {
return `${this.firstName} ${this.lastName}`
}
}
const de1 = new User("a","1");
console.log(de1);
상속(확장)
class Vehicle {
constructor(name, wheel){
this.name = name;
this.wheel = wheel;
}
}
const myVehicle = new Vehicle("운송수단",2);
console.log(myVehicle);
// extends : 확장(상속)
class Bicycle extends Vehicle{
constructor(name,wheel){
super(name, wheel);
}
}
const myBicycle = new Bicycle("삼천리",2);
console.log(myBicycle);
class Car extends Vehicle{
constructor(name, wheel, license){
super(name, wheel);
this.license = license;
}
}
const myCar = new Car("벤츠", 4, true);
console.log(myCar);
메소드 체이닝
한줄로 붙여서 작성 가능하게 하는것
.split(' '): 문자를 인수 기준으로 쪼개서 배열로 반환.reverse: 배열의 순서를 뒤집는다..join(' '): 배열을 인수 기준으로 문자로 병합해 변환
const a = 'Hello';
const b = a.split('').reverse().join(''); // 메소드 체이닝...
console.log(a); // Hello
console.log(b); // olleH
console.log(a.split('')); // ['H', 'e', 'l', 'l', 'o']
console.log(a.split('').reverse()); // ['o', 'l', 'l', 'e', 'H']
배열
배열은 여러개의 데이터를 순차적으로 저장하는 저장소입니다.
배열 선언
배열 사용하는 방법
var 변수명 = [값1, 값2, 값3.....];
배열 사용하는 방식1
var arr1 = new Array();
arr1[0] = 100;
arr1[1] = 200;
arr1[0] = 100;
arr1[1] = 200;
배열 사용하는 방식2
var arr2 = new Array(100,200);
배열 사용하는 방식3
var arr3 = [100,200];
배열 예제
//변수 x = 100; 변수 y = 200 저장한 다음 출력해주세요!!
let x = 100;
let y = 200;
console.log(x);
console.log(y);
//배열을 이용해서 화면에 100과 200을 출력하세요!
let arr1 = new Array();
arr1[0] = 100; //첫번째 배열 저장소에 100을 저장
arr1[1] = 200; //두번째 배열 저장소에 200을 저장
console.log("arr1[0] : " + arr1[0]);
console.log("arr1[1] : " + arr1[1]);
//배열을 선언과 동시에 초기화하여 100과 200을 출력하세요!!
let arr2 = new Array(100,200);
console.log("arr2[0] : " + arr2[0]);
console.log("arr2[1] : " + arr2[1]);
//배열을 선언하지 않고 100과 200을 출력하세요!!
let arr3 = [100,200];
console.log("arr3[0] : " + arr3[0]);
console.log("arr3[1] : " + arr3[1]);
//배열의 크기 구하기
let arr4 = [100,200,300,400,500];
console.log("arr4 length : " + arr4.length);
//배열 가져오기
let arr5 = [100,200,300,400,500];
for(let i=0; i<arr5.length; i++){
console.log("arr5["+i+"]" + arr5[i]);
}
//배열의 합 구하기
let arr6 = [100,200,300,400,500];
let sum = 0;
for(let i=0; i<arr6.length; i++){
// sum = 100+200+300+400+500;
// sum = arr5[0]+arr5[1]+arr5[2]+arr5[3]+arr5[4]
// sum = arr5[i]+arr5[i]+arr5[i]+arr5[i]+arr5[i]
sum = sum + arr6[i];
// 0 = 0 + 100;
// 100 = 100 + 200;
// 300 = 300 + 300;
// 600 = 600 + 400;
// 1000= 1000+ 500;
// 1500
}
console.log("arr6 sum : " + sum);
배열 객체의 메서드 및 속성
| 종류 | 설명 |
|---|---|
join() |
배열 객체의 데이터를 문자형 데이터로 출력합니다. |
reverse() |
배열 객체의 데이터를 반대로 출력합니다. |
sort() |
배열 객체의 데이터를 오름차순으로 출력합니다. |
slice() |
배열 객체의 데이터를 인덱스 구간만큼 가져옵니다. |
splice() |
배열 객체의 지정 데이터를 삭제하고 새 테이터를 삽입합니다. |
concat() |
배열 객체의 데이터 중 2개의 배열 객체를 하나로 합칩니다. |
pop() |
배열 객체의 데이터 중 마지막 데이터를 삭제합니다. |
push() |
배열 객체의 마지막 인덱스에 새 데이터를 삽입합니다. |
shift() |
배열 객체의 데이터 중 첫 번째 데이터를 삭제합니다. |
unshift() |
배열 객체의 첫 번째 인덱스에 새 데이터를 삽입합니다. |
length |
배열 객체의 데이터 개수를 반환합니다. |
연산자
자바스크립트는 다양한 연산자를 통해 계산 작업을 할 수 있습니다.
산술 연산자
| 종류 | 예시 | 설명 |
|---|---|---|
+ |
x + y | 더하기 |
- |
x + y | 더하기 |
* |
x * y | 곱하기 |
/ |
x / y | 나누기 |
% |
x % y | 나머지 |
산술 연산자
var x = 100;
var y = 200;
console.log("x + y : " + (x + y)); // 300
console.log("x - y : " + (x - y)); // -100
console.log("x * y : " + (x * y)); // 20000
console.log("x / y : " + (x / y)); // 0.5
console.log("x % y : " + (x % y)); // 100
대입 연산자
| 종류 | 예시 | 설명 |
|---|---|---|
+= |
x = x + 10 | x += 10 |
-= |
x = x - 10 | x -= 10 |
*= |
x = x * 10 | x *= 10 |
/= |
x = x * 10 | x *= 10 |
%= |
x = x % 10 | x %= 10 |
대입 연산자
let x1 = 10;
let x2 = 10;
let x3 = 10;
let x4 = 10;
let x5 = 10;
x1 += 10
console.log(x1); // x = x + 10;
x2 -= 10
console.log(x2); // x = x - 10;
x3 *= 10
console.log(x3); // x = x * 10;
x4 /= 10
console.log(x4); // x = x / 10;
x5 %= 10
console.log(x5); // x = x % 10;
대입 연산자를 이용한 테이블 만들기
let table = "<table border='1'>";
table += "<tr>";
table += "<td>1</td><td>2</td><td>3</td>";
table += "</tr>";
table += "</table>";
console.log(table);
증감 연산자
| 종류 | 예시 | 설명 |
|---|---|---|
++ |
x = x + 1 | x++ 또는 ++x |
-- |
x = x - 1 | x-- 또는 --x |
증감 연산자
let num1 = 10;
let num2 = 20;
let result;
num1--; //9
console.log(num1);
num1++; //10
console.log(num1);
result = num2++;
console.log(result); // 20
console.log(num2); // 21
result = ++num2;
console.log(result); // 22
console.log(num2); // 22
비교 연산자
비교 연산자는 비교 할 때 사용하며, 결과 값은 true(참) 또는 false(거짓)로 반환합니다
| 종류 | 예시 | 설명 |
|---|---|---|
== |
x == y | 좌변과 우변이 같다 |
=== |
x === y | 좌변과 우변이 같다. 데이형도 같다. |
!= |
x != y | 좌변과 우변이 다르다. |
!== |
x !== y | 좌변과 우변이 다르다. 데이형도 다르다. |
> |
x > y | 좌변이 우변보다 크다. |
< |
x < y | 좌변이 우변보다 작다. |
>= |
x >= y | 좌변이 우변보다 크거나 같다. |
<= |
x <= y | 좌변이 우변보다 작거나 같다. |
비교 연산자
let x = 10;
let y = 20; //숫자
let a = 10;
let b = "20"; //문자열
console.log(x == y); //false
console.log(x == a); //true
console.log(y == b); //true
console.log(y === b); //false
console.log(x != a); //false
console.log(x !== a); //false
console.log(x > y); //false
console.log(x < y); //ture
console.log(x >= y); //false
console.log(x <= y); //true
논리 연산자
| 종류 | 예시 | 설명 |
|---|---|---|
&& |
x && y | 둘다 true인 경우 true를 반환합니다. |
|| |
x || y | 둘 중의 하나 이상이 true인 경우 true를 반환합니다. |
! |
!x | 반대 값을 반환합니다. |
논리 연산자
let a = 10;
let b = 20;
console.log(false || false); //false
console.log(false || true); //true
console.log(true || true); //true
console.log(false && false); //false
console.log(false && true); //false
console.log(true && true); //true
console.log(!true ); //false
console.log(!false ); //ture
console.log(a > b && a < b); //false;
console.log(a > b && a < b && a >= b); //false;
console.log(a > 200 || 50 < b); //false;
console.log(!(a > 200)); //true;
문자 결합 연산자
let x1 = 100; //숫자(number)
let x2 = "javascript"; //문자(string)
let x3 = "100"; //문자(string)
let x4 = "200"; //문자(string)
console.log(typeof(x1)); // number
console.log(x1 + 100); //숫자 + 숫자
console.log(x1 + x2); //숫자 + 문자
console.log(x3 + x4); //문자 + 문자
console.log(x1 + true); //숫자 + 불린
console.log(x1 + null); //숫자 + 특수값
console.log(true + true); //불린 + 불린
console.log(true + false); //불린 + 불린
console.log(true + null); //불린 + 특수값
x1 = "" + x1; //숫자를 문자열로 형 변환
console.log(x1);
console.log(typeof(x1)); // string
연산자 우선순위
| 우선순위 | 연산자 | 설명 |
|---|---|---|
| 1 | 괄호/대괄호 | ()[] |
| 2 | 단항 연산자 | !, ++, -- |
| 3 | 곱셈/나눔셈 연산자 | *, /, % |
| 4 | 덧셈/뺄셈 연산자 | +, - |
| 5 | 비교 연산자 | >, >=, <, <= |
| 6 | 비교 연산자 | ==, ===, !=, !== |
| 7 | 논리 곱 연산자 | && |
| 8 | 논리 합 연산자 | || |
| 9 | 대입 연산자 | =, +=, -=, *=, /=, %= |
| 10 | 쉼표 | , |
조건문
조건문은 조건식에 따라 참(true)인지, 거짓(false) 인지에 따라 자바스크립트 코드를 제어하는 제어문입니다.
if문
if문 사용하는 방법
if(조건식){
//실행 코드
}
//실행 코드
}
if문 예제
let x = 100; // 변수 x에 숫자를 100을 저장
if(x > 200) console.log(x); // 변수 x가 200보다 크면 실행(true)
if(x < 200) console.log(x); // 변수 x가 200보다 작으면 실행(true)
if(true) console.log(x);
if(false) console.log(x);
// 짝수 구분하기
let num = 2;
if(num % 2 == 0) console.log("짝수입니다.");
// 조건식에 논리형 데이터가 아닌 다른 형이 오는 경우
// 0, null, ""(빈문자), undefined --> true
let y = 100;
if(y) console.log(y);
if ~ else문
if(조건식){
//참(true)일 때 실행 코드
} else {
//거짓(fales)일 때 실행 코드
}
//참(true)일 때 실행 코드
} else {
//거짓(fales)일 때 실행 코드
}
if ~ else문 예제
//홀수 짝수 구분하기
let num = 3;
if(num % 2 == 0){
console.log("짝수");
} else {
console.log("홀수");
}
다중 if문
if(조건){
//조건이 참일 때 실행코드
} else if(조건) {
//앞 조건이 거짓일 때 실행코드
} else {
//앞의 모든 조건이 거짓일 때 실행코드
}
//조건이 참일 때 실행코드
} else if(조건) {
//앞 조건이 거짓일 때 실행코드
} else {
//앞의 모든 조건이 거짓일 때 실행코드
}
다중 if문 예제
let x = 100;
if (x == 90){
document.write("x의 숫자는 90입니다.");
} else if (x == 92) {
document.write("x의 숫자는 92입니다.");
} else {
document.write("x의 숫자를 모르겠습니다ㅠㅠ.");
}
let useID = window.prompt("ID를 입력해주삼");
let usePW = window.prompt("PW쓰삼");
if (useID == "jjgodcom" && usePW == "1234"){
alert("반갑소!");
} else if (useID == "jjgodcom"){
alert("패스워드가 틀렸습니다.");
} else {
alert("틀렸습니다.")
}
switch문
해당 조건에 맞는 값을 case로 구분해서 수행하는 제어문입니다.
switch(조건을 체크할 변수){
case 값1:
//조건을 체크할 변수가 '값1'을 가지면 실행
break;
case 값2:
//조건을 체크할 변수가 '값2'을 가지면 실행
break;
case 값3:
//조건을 체크할 변수가 '값3'을 가지면 실행
break;
case 값4:
//조건을 체크할 변수가 '값4'을 가지면 실행
break;
default:
//해당되는 갑슬 가지고 있지 않을 경우 실행
break; }
case 값1:
//조건을 체크할 변수가 '값1'을 가지면 실행
break;
case 값2:
//조건을 체크할 변수가 '값2'을 가지면 실행
break;
case 값3:
//조건을 체크할 변수가 '값3'을 가지면 실행
break;
case 값4:
//조건을 체크할 변수가 '값4'을 가지면 실행
break;
default:
//해당되는 갑슬 가지고 있지 않을 경우 실행
break; }
switch문 예제1
let color = "빨강";
switch(color){
case "빨강" :
console.log("빨강 입니다.");
break;
case "파랑" :
console.log("파랑 입니다.");
break;
default :
console.log("빨강 or 파랑 중에 입력해 주세요");
break;
}
switch문 예제2
let site = "네이버";
let url;
switch(site){
case "네이버" :
url ="www.naver.com";
break;
case "다음" :
url ="www.daum.net";
break;
case "구글" :
url ="www.goggle.co.kr";
break;
case "네이트" :
url ="www.nate.com";
break;
default :
console.log("해당 사이트는 입력값에 없음");
}
if(url) console.log(url);
조건문 연산자
조건부 연산자는 조건을 처리하는 다른 형태의 제어문입니다.
(조건) ? (참일 때 실행하는 코드) : (거짓일 때 실행하는 코드)
조건문 연산자 예제
//if - else
let value = 1;
value = parseInt(value); //숫자로 인식할 수 있도록 형 변환
if(value % 2 == 0){
alert("짝수입니다.");
} else {
alert("홀수입니다.");
}
//조건 연산자
let value2 = 1;
value2 = parseInt(value); //숫자로 인식할 수 있도록 형 변환
(value2 % 2 == 0) ? alert("짝수입니다.") : alert("홀수입니다.");
반복문
반복되는 부분을 실행할 때 사용하는 제어문입니다.
while문
let 변수 = 초기합
while(조건식) {
실행문;
증감식;
}
while(조건식) {
실행문;
증감식;
}
while문 예제1
let count = 0;
while(true){
count++;
console.log(count);
if(count > 9){
break;
}
}
while문 예제2(100보다 작은 숫자에서 4의 배수 6의배수를 출력하기)
//100보다 작은 숫자에서 4의 배수 6의 배수 출력하기
//초기값설정
let i = 1;
while(i<=100){ //i가 100보다 작거나 같을 때까지 반복 실행합니다.
if(i%4 == 0 && i%6 == 0){
console.log(i);
}
i++;
}
while문 예제3(100보다 작은 숫자에서 짝수는 빨간색 홀수는 파란색 출력하기)
//100보다 작은 숫자에서 짝수는 파란색, 홀수는 빨간색 출력하기
let i = 100;
while(i>0){
if(i%2 == 0){
console.log(i + "짝");
} else {
console.log(i + "빨");
}
i--;
}
do while문
while 문의 경우에는 조건식의 만족 여부를 먼저 검사한 후, 중괄호에 있는 실행문의 여부를 결정합니다. 하지만 do while문은 반드시 한 번은 실행분을 실행하고 조건식을 검사합니다.
let 변수 = 초기합
do{
실행문;
증감식;
}while(조건식)
do{
실행문;
증감식;
}while(조건식)
do while문 예제
let count = 0;
do{
count++;
console.log(count);
}while(count<9);
for문
for문은 특정 구문을 여러번 반복하고 싶을 때 사용하는 반복문 입니다.
for(초기값; 조건식; 증감값;){
//반복코드
}
//반복코드
}
0-100까지 반복을 한다면, 다음과 같이 표현합니다.
for(let i=0; i<100; i++){
//반복코드
}
초기값 설정 : let i=0 초기 시작 값을 0으로 설정하고, 초기값은 오직 한 번만 실행 되면 이후로는 실행되지 않습니다.
조건식 설정 : i<100; 조건에 맞으면 실행됩니다.
증감값 설정 : i++; 조건에 맞으면 1씩 증가됩니다.
//반복코드
}
초기값 설정 : let i=0 초기 시작 값을 0으로 설정하고, 초기값은 오직 한 번만 실행 되면 이후로는 실행되지 않습니다.
조건식 설정 : i<100; 조건에 맞으면 실행됩니다.
증감값 설정 : i++; 조건에 맞으면 1씩 증가됩니다.
for문 예제1
//0~100까지 출력
for(let i=0; i<=100; i++) console.log(i);
//1-100중에서 짝수만 출력
for(let i=0; i<=100; i+=2) console.log(i);
//1-100중에서 홀수만 출력
for(let i=1; i<=100; i+=2) console.log(i);
for문 예제2(5의 배수는 파랑색, 7의 배수는 빨간색, 5와 7의 배수는 검은색 출력)
//1~100까지 출력
for(let i=1; i<=100; i++){
//5의 배수는 파란색, 7의 배수는 빨간색, 5와 7의 배수는 검은색 출력하기
if(i%5 == 0 && i%7!==0){ //5의 배수이고 7의 배수가 아닌 경우
console.log(i + "5배수");
} else if(i%7 == 0 && i%5!==0){ //7의 배수이고 5의 배수가 아닌 경우
console.log(i + "7배수");
} else if(i%5 == 0 && i%7 == 0){ //7의 배수이고 5의 배수인 경우
console.log(i + "7의 배수이고 5의 배수");
}
}
for문 예제3(배열의 합 구하기)
let arr = new Array(100,200,300,400,500,600,700,800);
let sum = 0;
//8 = i<8
for(let i=0; i<arr.length; i++){
sum = sum + arr[i];
// 0 = 0 + arr[0]=(100);
// 100 = 100 + arr[1]=(200);
// 300 = 300 + arr[2]=(300);
// 600 = 600 + arr[3]=(400);
// 1000 = 1000 + arr[4]=(500);
}
console.log(sum);
다중 for문
for문 안에 for문이 있는 형태입니다.
for(let i=0; i<100; i++){
for(let j=0; j<100; j++){
//실행 코드
}
}
for(let j=0; j<100; j++){
//실행 코드
}
}
다중 for문
for(let i=0; i<8; i++){
for(let j=0; j<9; j++){
let num1 = i + 2;
let num2 = j + 1;
let sum = num1 + num2;
console.log(num1 + "X" + num2 + "=" + sum);
}
}
// let i * j = sum
// 2 * 1 = 2 3 * 1 = 3
// 2 * 2 = 4 3 * 2 = 6
// 2 * 3 = 6
// 2 * 4 = 8
//
// i = 2,3,4,5,6,7,8,9
// j = 1,2,3,4,5,6,7,8,9
다중 for문을 이용한 테이블 만들기
let num = 1;
let t = "<table border='1'>"; //테이블 시작 태그
for(let i=1; i<=10; i++){
t += "<tr>";
for(let k=1; k<=10; k++){
t += "<td>" + num +"</td>";
num++;
}
t +="</tr>";
}
t += "</table>";
console.log(t);
break문 continue
break문 continue문은 반복문을 제어하는 명령어입니다.
break문 : 코드 실행문을 빠져나갈 때 사용하며, 일반적으로 반복문을 종료할 때 사용합니다.
continue문 : 코드 실행 중에 continue를 만나면, 뒷 부분은 실행하지 않고 다음 반복 시퀀스로 넘어갑니다
continue문 : 코드 실행 중에 continue를 만나면, 뒷 부분은 실행하지 않고 다음 반복 시퀀스로 넘어갑니다
break문 continue
let count = 0;
while(true){
count++;
if(count == 3){
continue;
}
if(count > 9){
break;
}
}
객체
객체는 데이터와 연산 작업을 담고 있는 기본족인 자바스크립트 기능 입니다.
객체가 가지고 있는 기본 상태 값을 속성이라고 하고 객체가 할 수 있는 행동들을 매서드라고 합니다. 객체는 내장 객체, 브라우저 객체, 문서 객체로 나누어집니다.
속성 : 객체가 가지고 있는 기본적인 상태 값 및 속성(ex: color, width)
매서드 : 객체가 할 수 있는 동작 및 행동(ex: color 색을 변경, width값을 변경)
매서드 : 객체가 할 수 있는 동작 및 행동(ex: color 색을 변경, width값을 변경)
문서 객체
문서 객체 모델(Document Object Model)은 자바스크립트를 통해 브라우저에서 동작하는 형태를 접근하는 방식이며, 좁은 의미로는 doucment 객체와 관련된 객체의 집합입니다.
브라우저 객체
브라우저 객체 모델(Browser Object Model)은 웹 브라우저와 관련된 객체의 집합을 의미합니다.
Window 객체
브라우저 위치
let x = window.screenX;
let y = window.screenY;
console.log("브라우저의 좌표 값 :" + x + "," + y);
컨텐츠 영역 크기 구하기
let x = window.innerWidth;
let y = window.innerHeight;
console.log("컨텐츠 영역의 크기 :" + x +"," + y);
타이머 설정
//setInterval(); : 지정한 시간마다 함수를 실행 ClearInterval();
//setTimeOut(); : 지정한 시간 후 한번만 실행 ClearTimeOut();
function func(){
console.log("setInterval이 실행되었습니다.");
}
setInterval(func,1000);
navigator 객체
브라우저 속성 알아내기
console.log("appCodeName : "+navigator.appCodeName);
console.log("appName : "+navigator.appName);
console.log("appVersion : "+navigator.appVersion);
console.log("language : "+navigator.language);
console.log("product : "+navigator.product);
console.log("platform : "+navigator.platform);
console.log("userAgent : "+navigator.userAgent);
운영체제 및 스크린 정보
function info1(){
/* 브라우저 및 운영체제 종합정보를 반환후 모두 소문자로 바꿉니다.*/
let os=navigator.userAgent.toLowerCase();
/*요소 중 id의 값이 "info_wrap"은 요소 객체를 가져옵니다.*/
let info_wrap=document.getElementById("info_wrap");
/*navigator객체를 이용해 반환받은 정보에 다음과 같은 문자가 포함되어 있으면 운영체제 명을 지정한 요소 사이에 텍스트로 출력합니다.*/
if(os.indexOf('windows')>=0){
info_wrap.innerHTML="윈도우";
}else if(os.indexOf('macintosh')>=0){
info_wrap.innerHTML="메킨토시";
}else if(os.indexOf('iphone')>=0){
info_wrap.innerHTML="아이폰";
}else if(os.indexOf('android')>=0){
info_wrap.innerHTML="안드로이드";
}
}
function info2(){
/*스크린 너비와 높이 값을 가져와 각각의 변수에 저장합니다.*/
let sc_w=screen.width;
let sc_h=screen.height;
/*요소 중 id의 값이 "info_wrap"은 요소 객체를 가져옵니다.*/
let info_wrap=document.getElementById("info_wrap");
/*스크린 너비와 높이 값을 지정한 요소에 텍스트로 출력합니다. */
info_wrap.innerHTML=sc_w+"X"+sc_h;
//3초 후에 스크린 정보를 지웁니다.
//setTimeout("info_wrap.innerHTML=''",3000);
}
screen 객체
화면 크기 알아내기
console.log("width : " + screen.width);
console.log("height : " + screen.height);
console.log("availWidth : " + screen.availWidth);
console.log("availHeight : " + screen.availHeight);
console.log("colorDepth : " + screen.colorDepth);
가져오기(import) 내보내기(export)
export default
- 이름을 지정하지 않아도 됨
main.js
import checkType from './getType'; // From 'node_modules'
console.log(checkType([1,2,3]));
getType.js
export default function (data) {
return Object.prototype.toString.call(data).slice(8 ,-1);
}
named export
- 이름을 지정해서 내보내기
- 여러개 내보내기 가능
main.js
// import { random, user } from './getRandom'; // From 'node_modules'
import * as R from './getRandom'; // From 'node_modules' 한번에 가져오기
//console.log(random(), random());
//console.log(user);
console.log(R);
getType.js
export function random() {
return Math.floor(Math.random() * 10)
}
export const user = {
name: "jjgodcom",
age: 85
}
localStorage
콘솔창에서 Application 에서 Local Storage 클릭 하면 정보 열람 가능
localStorage.setItem();: 항목 추가localStorage.getItem();: 항목 읽기localStorage.removeItem();: 항목 제거
const user = {
name:"jjgodcom",
age:1,
emails:[
"jjgodcom1",
"flvns"
]
}
// JSON.stringify() : 문자 데이터화 시켜줌
// JSON.parse() : 객체 데이터로 변환
localStorage.setItem("user", JSON.stringify(user));
console.log(JSON.parse(localStorage.getItem("user")));
// localStorage.removeItem("user");
const str = localStorage.getItem("user");
const obj = JSON.parse(str);
obj.age = 22 ;
console.log(obj);
localStorage.setItem("user", JSON.stringify(obj)); // 값 변경하기
비동기
async await 없이 .then()으로 비동기 처리하는 방법
.catch()로예외처리 하는 방법
DOM API
HTML DOM
| 메서드 | 설명 |
|---|---|
document.getElementById("id"); |
지정된 id 속성을 가진 요소를 반환한다. |
document.getElementsByClassName("class"); |
지정된 class 속성을 가진 요소를 반환한다. |
document.getElementsByName("name"); |
지정된 name 속성을 가진 요소를 반환한다. |
document.getElementsByTagName("li"); |
지정된 태그 이름을 가진 문서의 모든 요소를 반환 |
.value; |
값 속성은 속성의 값을 설정하거나 반환한다. |
.src |
이미지의 src 속성 값을 설정하거나 반환한다. |
.innerHTML |
HTML 내용을 설정하거나 반환한다. |
document.write("text") |
HTML 표현식 또는 JavaScript 코드를 문서에 기록한다. |
날짜 객체 - Date()
날짜 및 시간 작업에 사용된다.
| 메서드 | 설명 |
|---|---|
new Date(); |
year, month, day, hours, minutes, seconds, milliseconds 요소를 반환한다. |
now.getFullYear() |
연도를 반환합니다. |
now.getMonth() |
월(0-11)을 반환합니다. |
now.getDate() |
월의 일(1~31일)을 반환합니다. |
now.getHours() |
시간(0-23)을 반환합니다. |
now.getMinutes() |
분(0-59)을 반환합니다. |
now.getSeconds() |
초(0-59)를 반환합니다. |
document.querySelector();
HTML 요소(Element) 1개 검색/찾기
// HTML 요소(Element) 1개 검색/찾기
const boxEl = document.querySelector(".box");
// 핸들러(Handler, 실행할 함수)
boxEl.addEventListener("click", function () {
console.log("클릭");
});
// 요소의 클래스 정보 객체 활용!
// active 클래스 추가
boxEl.classList.add("active");
// 클래스 리스트 체크해서 클래스 있을경우 T or F 반환
let isContains = boxEl.classList.contains("active");
console.log(isContains); // true
// active 클래스 삭제
boxEl.classList.remove("active");
isContains = boxEl.classList.contains("active");
console.log(isContains); // false
document.querySelectorAll();
HTMl 요소(Element) 모두 검색/찾기
// HTMl 요소(Element) 모두 검색/찾기
const boxEls = document.querySelectorAll(".box");
console.log(boxEls);
// 찾은 요소들 반복해서 함수 실행!
// 익명 함수를 인수로 추가
// 첫 번째 매개변수(boxEl): 반복 붕인 요소.
// 두 번쨰 매개변수(index): 반복 중인 번호. 0부터 카운트됨
boxEls.forEach(function (boxEl, index) {
boxEl.classList.add(`order-${index + 1}`);
console.log(index, boxEl);
});
Getter
const boxEl = document.querySelector(".box");
// Getter, 값을 얻는 용도
console.log(boxEl.textContent); // Box!!
Setter
const boxEl = document.querySelector(".box");
// Setter, 값을 지정하는 용도
boxEl.textContent = "JJGODCOM";
console.log(boxEl.textContent); // jjgodcom
charAt()
charAt() 메서드는 문자열의 지정된 인덱스에 있는 문자를 반환한다.
function myFunction() {
let str = "HELLO WORLD";
let res = str.charAt(0) // H가 출력됨
}
toUpperCase()
topperCase() 메서드는 문자열을 대문자로 변환한다.
function myFunction() {
let str = "Hello World!";
let res = str.toUpperCase();
document.getElementById("demo").innerHTML = res;
// HELLO WORLD! 가 출력됨
}
.toLocaleString()
toLocaleString() 로케일 설정을 사용하여 날짜 객체를 문자열로 변환한다.
function myFunction() {
let d = new Date();
let n = d.toLocaleString();
document.getElementById("demo").innerHTML = n;
// 2021. 2. 1. 오후 9:07:55 이 출력된다.
}
eval()
eval() 인수를 평가하거나 실행한다.
function myFunction() {
let x = 10;
let y = 20;
let a = eval("x * y") + "<br>";
let b = eval("2 + 2") + "<br>";
let c = eval("x + 17") + "<br>";
let res = a + b + c;
document.getElementById("demo").innerHTML = res;
//200, 4, 27
}