📃 요약
Javascript 는 객체지향언어로 가장 인기가 높고
활용성이 높으며 다른 언어에 비해 배우기도 쉬운 언어임
초장기에는 웹브라우저에서만 동작했으나 현재는 웹브라우저 없이도 동작하는 언어가 되어 인기가 더 높아지고 있음
- 자바스크립트 : HTML/CSS 등과 더불어 웹브라우저에서 주로 동적인 행동(동작)을 나타내기 위한 언어 ( 클릭 , 마우스 이동 등 ) - 현재는 동적인 행동뿐만 아니라 간단한 연산 및 데이터 임시 저장 등 다양한 형태로 코딩되고 있음( 프론트 코딩 + 백엔드 코딩 )
요소 기술 :
– Basic : Javascript
📃 기술 구현
스펙 :
- vscode - js (es6)
📃 변수/상수
식별자 : 변수명, 상수명, 함수명, 배열객체명 등이 있음
1) 변수 : 한가지 값을 저장하는 곳(장소), 변하는 값
예) let inputValue = “a”;
2) 상수 : 한가지 값을 저장하는 곳(장소), 변하지 않는 값
예) const INPUTVALUE = “a”;
식별자 명명법 : 카멜표기법(낙타표기법), 파스칼표기법, 언더바표기법(스네이크표기법)
- 카멜표기법 : 단어와 단어사이 대문자 , 예) helloWorld - 파스칼표기법 : 첫단어 대문자, 두번째단어 대문자, 예) HelloWorld - 언더바표기법 : 단어와 단어사이 _(언더바) 예) hello_world
📃 자료형
자료형 : 문자열(String), 숫자(Number), 참/거짓(true), 객체(배열, 일반객체), null/undefined 등이 있음( 참고 : 잘 쓰이지 않는 Symbol 자료형이 있음)
- 문자열 : 따옴표로 묶어서 표기
예) let value = “abcde”; - 숫자 : 따옴표를 묶지 않고 표기
예) let value = 1; - 참/거짓 : true, false
예) let value = true; - 배열객체 : 여러가지 값을 저장하는 곳(장소), 변수명은 같고 변수명에 번호(인덱스번호)를 붙여 사용함, 번호는 처음 0 부터 순차적으로 n까지 사용됨
예) let arr = [“a”, “b”, “c”];
alert(arr[0]); // a 출력됨
alert(arr[1]); // b 출력됨 - 객체 : 사람, 사물, 책상, 컴퓨터 등 실생활의 모든 것을 대상으로 코딩함, 대상의 특징을 나타내는 속성으로 주로 객체를 정의함
let person = {
name: "안지영",
email: "hong@naver.com",
phone: "010-1234-5678",
age: 24,
job: true
}
console.log(person.name); - null : 아무것도 포함되지 않는 값을 의미, 주로 초기화시 과거에 사용되었으나 현대적인 코딩에서는 null 로 초기화하는 것을 추천하지 않음
예) let value = null; // value 값 null 로 초기화(과거 코딩)
let value2 = “”; // 초기화시 “” 또는 0 으로 초기화하는 것을 추천함 undefined : 정의되지 않는 자료형, 주로 어떤 객체에 그 속성이 없는데 속성을 접근하면 에러가 발생하는데 그때 자주 볼 수 있음
예)
let cat = {
name: “나비”,
age : 1
}
alert(cat.code); // undefined 에러 발생, cat 객체에 속성 code 가 없음
📃 연산자 :
코딩은 수학의 이론을 많이 받아 들였으며 사칙연산자, 비교연산자, 증감연산자 가 있음
1) 사칙연산자
+(덧셈), -(뺄셈), *(곱셈), /(나눗셈(슬래쉬)), %(나머지연산자: 나누어서 나머지가 결과로 나옴)
// 1) 덧셈 let num = 52 + 273; // 변수 정의 (값 저장), 변수명(상수명) 유일 // 결과 출력 alert(num);
2) 비교연산자
>=(크거나같음), <=(작거나같음), >(크다), <(작다), ==(같다), ===(같다, 좀더 엄격하게 검사, 추천)
3) 논리 연산자
참/거짓을 이용해서 논리 연산함
(1) 논리 곱(and, ***) : && (연산 시 하나라도 거짓이면 거짓)
let hello = true && true; // true let hello2 = true && false; // false // 결과 출력 : alert, console.log alert(hello); alert(hello2);
(2) 논리 합(or) : || (연산 시 하나라도 참(true)이면 참)
let hello = true || true; // true(참) let hello2 = true || false; // true(참) // 결과 출력 // 줄복사 : ctrl + d alert(hello); alert(hello2);
(3) 논리 부정 : !(반대), (참이면 거짓, 거짓이면 참이됨)
let hello = !true; // 출력 alert(hello);
대입 연산자 : =(대입연산자)
변수, 상수에 값을 넣을 때 사용
let hello = "안녕하세요"; let num = 1;
대입연산자 축약형
let x = 10; // x 의 변수에 10 값을 저장(대입연산자 = 사용) x = x + 5; // 10 + 5 => 다시 x 로 저장됨, x = 15; x += 5; // +(덧셈) 축약형
증감 연산자(*)
1씩 증가 또는 1씩 감소함
사용법 : 변수++, ++변수, 변수--, --변수 등 예) let x=10; ++x; // x=11 (1증가된 결과 현재 라인에서 확인 가능) alert(x); // x=11 --x; // x=10 alert(x); // x=10 // 뒤에 붙이기 : 변수++, 변수-- let y=10; y++; // y=10 alert(y); // y=11 (1증가된 결과 다음 라인에서 확인 가능) y--; // y=11 alert(y); // y=10
📃 2진수/8진수/16진수/10진수 :
- 10진수 : 0 ~ 9 숫자로 표기
- 2진수 : 0 , 1 숫자로 표기
- 8진수 : 0 ~ 7 숫자로 표기
- 16진수 : 0 ~ 16 숫자로 표기
10진수 -> ?진수 변경
사용법 : 10진수 -> ?진수 변경 숫자.toString(진수); // 진수로 바뀐 숫자문자열 예) let num = 12; alert(num.toString(8)); // 8진수 숫자문자열
?진수 -> 10진수로 변경
사용법 : parseInt(숫자, 진수표시) => 결과가 10진수로 나옴 let char = 10; // 8진수 alert(parseInt(char, 8)); // 8진수 -> 10진수로 변경
📃 아스키 코드표 :
- 컴퓨터는 0, 1의 숫자만 인식함
- 아스키 코드표 : 숫자와 문자를 연결한 표
- 문자 -> 아스키코드 변경 :
사용법 : 문자.charCodeAt(문자열자리수)
예)
alert(charNum.charCodeAt(0));
- 아스키코드 -> 문자 변경 ```js 사용법 : 문자.fromcharCode(문자열자리수) 예) alert(charNum.charCodeAt(0));
📃 bit 연산자 :
- 컴퓨터는 0, 1의 숫자만 인식함
비트
- 컴퓨터의 최소 단위
- 컴퓨터 cpu 연산단위 : 4bit(1개의 숫자) -> 8bit(1개의 숫자)
-> 64bit(1개의 숫자, 문자) (속도 성능 증가)
컴퓨터 단위
1byte == 8bit 1KB == 1024byte 1MB == 1024KB 1GB == 1024MB 1TB == 1024GB (컴퓨터 하드디스크/이동식 디스크) 1HB == 1024TB
비트 연산자 :
- 0, 1 만으로 서로 연산하는것 - 내부적으로 2진수로 변경해서 연산하고 결과는 다시 십진수로 바꾸어서 내보냄 - &(and), |(or), ~(not, 값을 반전), ^(xor, 서로 다르면 1, 같으면 0 이됨)
& 연산자
1 & 1 => 1,
1 & 0 => 0,
0 & 1 => 0,
0 & 0 => 0
| 연산자
1 & 1 => 1,
1 & 0 => 1,
0 & 1 => 1,
0 & 0 => 0
~ 연산자
~1 => 0,
~0 => 1
📃 조건문(if/else if/else 문)
코딩 시 조건에 따라 출력 또는 다른 문장을 실행하고 싶을 때 사용
1) 사용법 : 조건문이 참이면 실행문(문장) 실행
if( 조건문 ) {
실행문(문장);
}
예)
let age = 20;
if( age > 20 ) {
alert(“성인입니다.”)
}
2) 사용법 : 조건문이 참이면 실행문(문장) 실행 , 거짓이면 실행문2(문장2) 실행
if( 조건문 ) {
실행문(문장);
} else {
실행문2(문장2);
}
예)
let age = 20;
if( age > 20 ) {
alert(“성인입니다.”);
} else {
alert(“성인이 아닙니다.”);
}
3) 사용법 : 조건문이 참이면 실행문(문장) 실행, 조건문2가 참이면 실행문2(문장2) 실행, 모두 거짓이면 실행문3(문장3) 실행
if( 조건문 ) {
실행문(문장);
} else if( 조건문2) {
실행문2(문장2);
} else {
실행문 3(문장 3);
}
예)
let age = 20;
if( age >= 20 ) {
alert(“성인입니다.”);
}else if( age == 19 ) {
alert(“청소년입니다.”);
}else {
alert(“미성년입니다.”);
}
📃 반복문( for )
동일한 형태로 많은 수의 결과를 출력 또는 반복적으로 실행하고 싶을 때 사용
사용법 :
for(초기값; 조건식; 증감식) {
반복문(문장);
}
예) 0 ~ 2까지 3번 알림창(alert) 출력하기
for(let i=0; i < 3; i++) {
alert(i);
}
📃 조건문/반복문의 다양한 형태
자바스크립트는 조건문(if문) / 반복문(for문) 의 기본형태 외에 유사한 기능을 제공하는 다른 사용법이 있음.
조건문에는 3항연산자(리액트에서 사용)와 switch 문이 있고, 반복문에서는 while문이 있음
조건문
3항 연산자 (**) : if문처럼 간단한 조건문에 사용, 리액트에서 자주 사용
사용법 : 조건식이 참이면 실행문을 변수에 저장하고,
아니면 실행문2가 변수에 저장됨
let 변수 = (조건식) ? “실행문” : “실행문2”;
예) :
let num = 2; // 초기값 지정
// 3항 연산자 사용
let result = ( num == 2 ) ? “num이 2임” : “num 이 2가 아님”;
// 결과 출력
alert(result);switch 문 :
사용법 : 변수가 값이면 실행문 실행 ,
값2 이면 실행문2 실행, 모두 아니면 실행문n 이 실행됨
switch(변수) {
case 값:
실행문;
break;
case 값2 :
실행문2;
break;
…
default :
실행문n;
}반복문 : while 문
while 문 : 주로 무한히 반복되는 반복문에서 사용됨( 형태가 간단 )
사용법 : 조건식이 참일 동안만 실행문이 반복 실행됨,
거짓이면 반복을 중단하고 빠져나옴.
초기값;
while(조건식) {
실행문;
증감식;
}
예)
let i = 0; // 초기값
while(i<3) {
alert(i); // 실행문
i++; // 증감식
}
📃 js 함수
js 내장함수 : js 에서 미리 만들어 놓은 유용한 함수들을 말함
장점) 코딩 생산성 향상(코딩 라인이 짧아짐)
1) 배열 함수
(1) .push() : 배열의 끝에 값추가
let num = [1,2,3]; // 배열정의 num.push(4); console.log(num); // 1,2,3,4
(2) .pop() : 배열의 끝에 값삭제
num.pop(); console.log(num); // 1,2
2) 수학 함수
(1) .toFixed() : 소수점 자르기
사용법 : 변수.toFixed(자리수); 예) let x = 12.4763; console.log(x.toFixed(2)) // 3번째 자리부터 버림
(2) 최대값 구하기
사용법 : Math.max(숫자, 숫자2,...) : 최대값 구하기 예) let num = 1; let num2 = 2; console.log(Math.max(num, num2)); // 2
(3) 최소값 구하기
사용법 : Math.min(숫자, 숫자2,...) : 최소값 구하기 예) let num = 1; let num2 = 2; console.log(Math.min(num, num2)); // 1
3) 날짜 함수 : Date 객체
- 현재 날짜 / 시간을 가져오는 함수
// 날짜 : 현재 년/월/일 , 시/분/초
let date = new Date(); // Date 객체 생성방법
// 출력 : 날짜
let year = date.getFullYear(); // 현재 년도
let month = date.getMonth() + 1; // 현재 월(0 ~ 11) + 1
let day = date.getDate() // 현재 일
console.log("year", year);
console.log("month", month);
console.log("day", day);
// 출력 : 시간
let hour = date.getHours(); // 현재 시
let minute = date.getMinutes(); // 현재 분
let second = date.getSeconds(); // 현재 초
console.log("hour", hour);
console.log("minute", minute);
console.log("second", second);
📃 함수
함수 : 중학교때 배운 수학시간 함수와 유사하며 미리 정해 놓은 코드를 재사용할 수 있게 만들어 주는 기능(*****)
장점) 코딩 생산성 향상(코딩 라인이 짧아짐)
함수의 요소
1) 매개변수 : 함수내에서만 사용되는 변수로 주로 함수 밖에서 값을 넘기면 매개변수에 임시 저장해서 함수 안에서 코딩시 사용됨 2) return : 함수 안에서 코딩된 결과를 함수밖으로 내보내기 할 때 사용되는 예약어 3) 3가지 함수 정의 방법이 있음
함수 정의 방법
1) 1st 함수 정의 : 매개변수, 리턴값 없는 함수
사용법 :
1) 1st 사용 형태( 매개변수 없음 , return 예약어 안씀)
// 함수 정의(선언)
function 함수명() {
실행문;
}
// 함수 사용(실행, 호출)
함수명();
예)
// 함수 정의
function myAlert() {
alert(“안녕하세요”);
alert(“안녕하세요 2”);
}
// 함수 사용(실행, 호출)
myAlert(); // 안녕하세요 안녕하세요2 가 출력됨
2) 2nd 함수 정의 : 매개변수만 있는 함수
2) 2nd 사용 형태(매개변수 있음, return 예약어 안씀)
: 1st 형태보다 좀 더 효율적인 함수 형태
// 함수 정의(선언)
function 함수명(매개변수) {
실행문(매개변수);
}
// 함수 사용(실행, 호출)
함수명(매개변수);
예)
// 함수 정의
function myAlert(params) {
alert(params);
alert(params + 2);
}
// 함수 사용(실행, 호출)
// 1st 형태보다 매개변수 값만 넘겨서 다양한 출력 상황에서 좀 더 유연한 코딩을 할 수 있음( 1st 함수 형태는 다시 함수를 작성해야 hello hello2를 출력할 수 있음)
myAlert(“안녕하세요”); // 안녕하세요 안녕하세요2 가 출력됨
myAlert(“hello”); // hello hello2 가 출력됨
3) 3rd 함수 정의 : 매개변수, 리턴값이 모두 있는 함수
3) 3rd 사용 형태(매개변수 있음, return 예약어 있음)
: return 변수 -> 변수의 값을 함수밖으로 내보내기 할 수 있음
function 함수명(매개변수) {
return 실행문(매개변수);
}
let 결과변수 = 함수명(매개변수);
예)
// 함수 정의
function myAlert(params) {
return params;
}
// 함수 사용(실행, 호출)
// 함수의 실행 결과값을 변수에 저장해 둘 수 있음
let result = myAlert(“안녕하세요”);
alert(result); // 안녕하세요 출력
alert(result + 2); // 안녕하세요 2 출력