✅ 자바스크립트란
✨ 이미지슬라이드효과, 팝업효과 등의 기능을 포함한 동적인 웹사이트 제작시 사용되는 등 웹에서 보조적인 기능을 수행하기 위해 브라우저에 도입된 경량된 프로그래밍 언어이다.
📌프로그래밍
컴퓨터에게 실행을 요구하는 커뮤니케이션. 원하는 요구사항이 있을때 무엇을 실행할지 정의하여 0과 1밖에 모르는 기계가 동작 구현을 위해 정확하고 상세하게 요구사항을 설명하는 작업이다.
한마디로, 사람의 언어와 기계의 언어는 다르기 때문에 약속된 구문으로 프로그램 언어를 사용하여 프로그램 작성 후, 컴퓨터가 이해할 수 있게 컴파일을 하여 기계어로 변환하는 과정이다.
언어를 이해함에 있어서 가장 중요한 부분은 기본개념과 동작원리를 이해하는 것이다. 모든 학습을 한번에 하지 말고 중요하거나 자주 쓰는 키워드 중심으로 나누어서 학습한다.
📌변수
하나의 값을 저장하기 위해 가상의 변하는 수. 저장하여 언제든 불러오거나 변경할 수 있다. 객체(Object)나 배열같은 여러개의 값을 그룹화하여 사용하기도 한다.
var, let, const같은 선언을 하며, 언제든 재할당이 가능하다. 다만 const는 상수이기 때문에 재할당이 안된다.
변수는 식별자 법칙을 사용하는데, 예약어는 식별자로 사용할 수 없다.
var fruit; //변수선언
fruit = "apple"; //변수초기화
var fruit = "apple"; //변수선언 및 초기화
fruit = "orange"; //데이터 변경
❌ var 123; //변수명은 숫자로 시작할 수 없음
❌ var abc; //의미불명의 문자는 지양
예약어
변수, 레이블, 또는 함수 이름들은 예약어로 칭하는데, 자바스크립트 문법에서 사용하지 말자고 명시된 이름이다.
abstract, arguments, boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete, do, double, else, enum, eval, export, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanceof, int, interface, let, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, void, volatile, while, with, yield
📌데이터 타입
데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터 (숫자, 문자열, 불리언 등)의 종류를 말한다.
String > 문자열
Number > 숫자열
Function > 함수
Array > 배열
Object > 객체
Boolean > 불린(참/거짓)
undefined > 정의되지 않음
null > 값이 없음
📌함수
함수는 자바스크립트에서 가장 중요한 핵심 개념이다.
프로그래밍 언어의 함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.
입력을 받아 출력을 내보낼 때, 함수 내부로 전달 받은 변수를 매개변수(parameter), 입력을 인수=인자(argument), 출력을 반환값(return value)라고 한다.
함수는 여러 개의 함수와 값이 존재할 수 있다. 때문에 구별하기 위해서 식별인 함수 이름을 사용한다.
var section = function(width, height) {
return width * height;
}
section(10, 20);✅ (width, height) - 매개변수 : 인자로부터 전달받은 값이 들어가는 통로. 상황에 따라 생략 가능
✅ return - 리턴 : 함수 안에 데이터를 저장할 때 사용.
✅ section(10, 20) - 인자 : 함수에 전달하는 데이터
📌객체
객체는 관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부른다)의 집합이다.
var puppy = {
name: “podo”,
age: 0,
skills: [“물기”, “짖기”, “애교”],
sum: function(po, do) {
return po + do;
}
}✅ name, age, skills, sum - 프로퍼티
✅ "podo", 0, [“물기”, “짖기”, “애교”] - 데이터
✅ sum: function(po, do) - 메서드
✨ 여러 종류의 데이터 타입 삽입 가능
📌데이터의 프로퍼티, 메소드
문자열 프로퍼티, 메소드
var str1= “Hello World”;
str1.length; //문자열 길이 11
str1.charAt(0); //문자 H 추출
str1.split(“ ”); //공백기준 문자를 나눈 후 배열 [Hello, World]로 출력배열 프로퍼티, 메소드
var fruit= [“사과”, “배”, “포도”];
fruit.length; //데이터 개수
fruit.push(“딸기”); //배열 뒤 데이터 삽입
fruit.unshift(“레몬”); //배열 앞 데이터 삽입
fruit.pop(); //배열 뒤의 데이터 제거
fruit.shift(); //배열 앞의 데이터 제거math 연산 메소드
Math.abs(-3); //절대 값
Math.ceil(0.3); //올림
Math.floor(10.9); //내림
Math.random(); //임의의 숫자 출력문자를 숫자로 변환 메소드
parseInt(“20.6”); //정수 형태의 20 변환
parseFloat(“20.6”); //실수 형태의 20.6 변환📌연산자
산술 연산자
console.log(10 + 10); //20
console.log(10 - 10); //0
console.log(10 * 10); //100
console.log(10 / 10); //1
console.log(10 % 10); //0 나머지의 수
console.log("10" + "10"); //1010 문자열일 경우, 나열 됨
console.log("10" - "10"); //0
console.log("10" * "10"); //100
console.log("10" / "10"); //1
console.log("10" % "10"); //0 나머지의 수증감 연산자
var num = 1;
console.log(++num); //num+1 후 num 출력
console.log(--num); //num-1 후 num 출력
console.log(num++); //num 출력 후 num+1
console.log(num--); //num 출력 후 num-1비교 연산자
console.log(10 == 20); //값이 같다
console.log(10 === 20); //데이터 타입과 값이 같다 console.log(10 !== 20); //값이 같지 않다
console.log(10 > 20);
console.log(10 >= 20);
console.log(10 < 20);
console.log(10 <= 20);논리 연산자
//두 조건 모두 참인 경우에만 true 반환하는 AND 연산자
console.log(10 === 10 && 20 === 30);
//둘 중 하나만 참이여도 true 반환하는 OR 연산자
console.log(10 === 10 || 20 === 30);조건문
//조건이 주어지고 해당 조건이 성립 되었을 때, 실행이 된다.
var podo = 0;
var huchoo = 6;
if(podo > huchoo){
console.log("포도는 후추보다 나이가 많다.");
}else if(podo == huchoo){
console.log("포도는 후추와 동갑이다.");
}else{
console.log("포도는 후추와 나이가 적다.");
}반복문
//for(초기화 변수값; 조건; 증감표시){수행할명령}
for(var i = 0; i < 10; i++) {
console.log(i);
}
//while(조건){수행할명령} num<10이 참일 동안 중괄호 안의 코드를 실행
var num = 0;
while(num < 10) {
console.log(num);
num++;
}
//do{수행할명령} while(조건); while의 조건과 관계없이, do의 명령을 무조건 실행부터 한다
var i = 12;
do {
console.log(i);
i++;
} while(i < 10);