[대구AI스쿨] JavaScript 개발일지

임채업·2021년 8월 30일

JavaScript VS Code 대구AI스쿨

□ 자바스크립트 - 1강

작성코드

Git 링크.자바스크립트

1. 자바스크립트란?

● 웹사이트의 주요기능, 주요 애니메이션 효과를 구현하는 언어

● 하이브리드 앱

html, css, javaScript를 같이 이용하여 안드로이드 앱, 애플 앱을 개발 할 수 있음

● node.js – 자바스크립트 언어로 구성되어 있는, 서버개발을 도와주는 도구

● Iot에서도 활용 가능

2. 자바스크립트 특징

● 인간에게 친숙한 언어, High Level Language(하이레벨 언어)

● 3가지 분야로 구분해서 공부하기
① 자바스크립트 코어 – 개발언어의 문법적인 내용을 담당
② 클라이언트 측 자바스크립트 – 브라우저를 제어할 때 사용하는 자바스크립트
③ 서버 측 자바스크립트 – 서버와 관련된 자바스크립트, node.js의 사용 영역

3. 자바스크립트 적용 방법

① html 파일 내에서 <script>를 이용하는 방법
② html 파일 내에서 <script src=“”>를 이용하여 자바스크립트의 파일 경로를 입력해 연동하는 방법

※ 사용할 때, <script> 혹은 <script src=“”> 중 하나만을 선택해서 이용해야 함(두가지 방식 같이는 되지 않음)

4. 자바스크립트 명령어

● console.log(); - ()안의 입력된 어떠한 정보를 console탭에 출력하는 명령어

5. 자바스크립트 코어

● 주석 처리 방법
① 전체 주석 - /* console.log("Coment"); */
② 한줄 주석 - // console.log("Coment");

※ 전체 주석 안에 한줄 주석을 넣는 방식은 사용 가능함

6. 자바스크립트 변수

● 자바스크립트 변수(=박스)

데이터를 저장하는 공간

6. 개발용어 정리

● 변수 선언 – 예시) var comic;

● 변수 초기화 – 예시) comic = "패트레이버";

● 변수 선언 및 초기화 – 예시) var apple = "사과";

● 여러개의 변수를 동시에 생성
→ var a, b, c;

● 모든 변수는 선언과 동시에 undefined가 자동으로 할당됨
예시)

var computer;

console.log(computer);

● 변수명 작성 방식
① 캐멀 케이스 – 다음 단어가 이어질 때, 첫글자를 대문자를 사용하는 방법
var mathScoreStudent = 10;

② 스네이크 케이스 – 언더바(_)를 사용하여 단어를 구분하는 방법
var math_score_student = 10;

※ ‘-’는 자바스크립트에서 사용할 수 없음(에러 발생)
var math-score-student = 100; (X)

※ 변수명에서 첫글자로 특수문자 2가지( _ , $ )는 사용 가능함

var _math;
var $math;

※ 변수명 앞에 숫자가 먼저 나와서는 안됨
var apple10; (O)
var 10apple; (X)

※ 변수명은 최대한 자세하게 적으면 좋음 → 어떤 의미로 작성한 것인지 파악이 가능하게 하기 위함

7. 데이터 타입

● 자바스크립트의 =(등호)에 들어가는 여러 가지 데이터 종류

1) 원시 타입
① 문자열(String) - console에서 검은색 글자로 표시됨
② 숫자(Number) - console에서 파란색 글자로 표시됨
③ 논리(Boolean) - true와 false(참과 거짓)만 가지고 있음
④ undefined
⑤ null

2) 참조 타입
⑥ 배열(Array)
⑦ 함수(Function)
⑧ 객체(Object)

8. 원시 타입

● 비교 연산자 == 와 === 의 차이점(!= 와 !== 도 포함됨)

=== , !== 는 데이터 타입까지 일치하는지 확인함
※ 정확성을 위해서 ===와 !==를 사용하는 것을 추천함

예시)

var num10 = 10;
var num20 = 20;

var str10 = "10";
var str20 = "20";

console.log(num10 == str10);  -> true
console.log(num10 === str10);  -> false

console.log(num20 != str20);  -> false
console.log(num20 !== str20);  -> true

● 논리 연산자 : AND(&&), OR(||)

예시)

var num30 = 30;
var num40 = 40;
var num50 = 50;

console.log(num30 === num40 && num30 === num50);
console.log(num30 === num40 || num30 === num50);

console.log(num30 === num40 && num30 === num50 && num40 === num50);

● 불리언(boolean) : true, false

예시)

console.log(true);
console.log(false);
console.log(1 === 2);
console.log(10 < 20);
console.log(10 === 10 || 20 === 30);

var bool_1 = true;
var bool_2 = false;

console.log(bool_1);
console.log(bool_2);

● null, undefined – 값이 없는 상태
① null : 변수 초기화로 명시적으로.... 빈 값을 변수 안에 할당한 상태
② undefined : 변수를 선언만 한 상태

예시)

var n = null;
var u;

console.log(n);
console.log(u);

※ null과 undefined 차이점(null이 object로 표기되지만 이는 오류이며, 수정이 되지 않음)

console.log(typeof null);
console.log(typeof undefined);

※ ! (부정 연산자)

console.log(!true);
console.log(!false);

console.log(!null); // true
console.log(!!null); // !true

console.log(!undefined); 
console.log(!!undefined);

console.log(10 + null); // null --> 0
console.log(10 + undefined); // Nan (Not a Number)

□ 자바스크립트 2/2

9. 참조 타입

● 함수(function)

예시)

// 함수 선언
function sum() {

    console.log("Hello world");
    console.log(10 + 10);

}

// 함수 호출
sum();

● Parameter (매개변수), Argunent (인수)

매개변수 안에 들어갈 수 있는 데이터 타입은 모든 데이터 타입이 가능함

// 매개변수 : num1, num2
function sum(num1, num2) {

    console.log(num1 + num2);

}


// 인수 : 호출시 전달되는 값
sum(10, 20);
sum(100, 50);


function fullName(firstName, lastName) {
    console.log(firstName + " " + lastName);
}

fullName("Chaeeop", "Rim");


function area(width, height) {
    var result = width * height;
    console.log(result);
}

area(10, 20);

● return : 함수와 결합되서 사용되는 키워드, 다른 변수의 값을 전달할 때 혹은 새로운 공식을 대입할 때 사용함

※ 참고 링크(그림으로 배우는 자바스크립트) : https://brunch.co.kr/@brunch92ny/9

● 배열(Array)

예시)

var fruit = ["바나나", "사과", "멜론"];
console.log(fruit);

색인(index)

console.log(fruit[0]);  // 바나나
console.log(fruit[2]);  // 멜론

fruit[2] = "수박";
console.log(fruit);

length : 배열 안에 들어가 있는 데이터의 개수
배열에는 모든 데이터 타입을 삽입할 수 있음

var arr = [
    10,
    "Hello",
    true,
    null,
    undefined a() {},
    [10, 20, 30],
    {name: "kim"}
];

※ 주의점 2가지
① 배열 안에는 동일한 데이터 타입을 가지는 것이 좋음 → 배열 재활용이 어려워짐

var num = [10, 20, 30, "Hello World"]; (X)
var num = [10, 20, 30, 3.14]; (O)

② 가능한 동일한 성격의 데이터를 삽입하는 것이 좋음

var fruit = ["사과", "배", "바나나", "양상추"]; (X)
var fruit = ["사과", "배", "바나나"];  (O)

배열 안에 있는 배열 데이터에 접근하는 방법

var score = [[10, 20, 30],[100, 200, 300],];
console.log(score);
console.log(score[1]);
console.log(score[1][2]);

● 객체(Object)

var student = {
    name: "Chaeeop",
    age: 35,
    skills: ["자바스크립트", "HTML", "CSS"]
};
console.log(student);

객체 안의 데이터에 접근하는 방법
① .(컴마)를 활용하는 방법
onsole.log(student.name);

② key 값을 활용
console.log(student['name']);

※ 객체 내의 배열의 데이터를 알고 싶을 경우
console.log(student.skills[1]);

※ 객체 내의 데이터 변환

student.age = 100;
console.log(student);

※ 객체에 내용을 추가할 경우

student.gender = "남자";
console.log(student);

● 객체(Object) 안에 함수를 넣고(메서드), 이를 실행하는 방법

정의한 함수명을 객체 뒤에 .메서드를 적용하면 됨

예시)

var student = {
    sum: function (num1, num2) {
         return num1 + num2;
    }
};

var result = student.sum(10, 20);
console.log(result);

● 원시 타입(Primitive Type)과 참조 타입(Reference Type)의 차이점
① 원시 타입은 원본 데이터를 수정하여도 복사복이 바뀌지 않음
예시)

var str1 = "Hello World";
var str2 = str1;

str1 = "Nice";

console.log(str1);
console.log(str2);

② 참조 타입은 원본 데이터를 수정하면 복사본의 내용도 바뀜 → 데이터의 주소를 사용하는 방식

둘 중 하나라도 수정되면 주소 안의 값이 바뀌므로, 둘 다 값이 변경됨
예시)

var obj1 = {name: "Chaeeop"};
var obj2 = obj1;

obj1.name = "Park";

console.log(obj1);
console.log(obj2);

10. 자바스크립트 기능 연습해보기

● 버튼을 눌렀을 때, 배경색이 바뀌는 기능 만들기

document 객체 : html문서에 영향력을 발휘하는 객체, 클라이언트 축 자바스크립트
addEventListener 메서드 :
익명 함수 : 함수 이름이 없는 함수
콜백 함수 : 호출 기호 없이 특정 조건 하에 호출되는 함수
예시 )

btn.addEventListener('click', function() {
    console.log("Hello");
});

● 1 ~ 6 숫자를 랜덤하게 가져오는 게임

숫자를 제어할 때 사용하는 객체 → Math 객체
Math.random() : 0에서 1 미만의 값을 랜덤하게 가져옴
Math.random() * 6 : 0에서 5.99999~ 미만의 값을 랜덤하게 가져옴 (0 ~ 0.99999...)
Math.floor(Math.random() * 6) : 내림 처리 (0 ~ 5)
Math.floor(Math.random() * 6) + 1 : 내림 처리 (1 ~ 6)

예시)

var colors = [
    'yellow',
    'green',
    'pink',
    '#dc143c',
    'rgba(123, 123, 123, 0.5)'
];

btn.addEventListener('click', function() {
    
    //0 ~ 4
    var random = Math.floor(Math.random() * 5);
    console.log(random);

});

● 위의 랜덤값을 가져오는 코드를 사용하여, 클릭 시, 배경색이 변하도록 하는 코드 작성하기

var colors = [
    'yellow',
    'green',
    'pink',
    '#dc143c',
    'rgba(123, 123, 123, 0.5)'
];

var bg = document.getElementById('color-bg');

btn.addEventListener('click', function() {
    
    //0 ~ 4
    var random = Math.floor(Math.random() * 5);
    console.log(colors[random]);

    bg.style.backgroundColor = colors[random];
});

※ background-color, border-radius, margin-top (자바스크립트는 ' - '을 인식하지 못함)
그렇기에 캐멀케이스로 미리 작성되어 있음
예시) background-color → backgroundColor (자바스크립트)

● 변수를 만들 때의 주의점
① 변수를 만들 때, 변수는 알파벳과 숫자 조합으로 만들 수 있들 수 있지만 숫자가 앞에 와서는 안됨
② 특수문자도 첫글자로 사용할 수 있는 것은 2가지( _ ,$)만 사용 가능함
③ 의미가 분명한 단어의 조합으로 변수 이름을 작성해야함
④ 예약어(var, typeof, fuction, null, undefined, false, true, console 등)와 관련된 에러를 피하기 위해서는 2개 이상의 명사 조합으로 변수 이름을 작성하는 것이 좋음

● 두 개의 서로 다른 자바스크립트 파일을 연동시키더라도, 위에서부터 순차적으로 읽음

예시)

[html]
<script src="js/main.js"></script>
<script src="js/custom.js"></script>

[main.js]
console.log("Main");

[custom.js]
console.log("custom");

※ main.js 에서 작성한 내용을 custom.js에서 호출이 가능함. 단, 연동되는 순서는 중요함.

예시)

[html]
<script src="js/main.js"></script>
<script src="js/custom.js"></script>

[main.js]
function mainFunc() {
    console.log("Main Func");
}

[custom.js]
mainFunc();