[대구AI스쿨] JavaScript 개발일지
□ 자바스크립트 - 1강
작성코드
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();
□ 어려웠던 점
자바스크립트라는 내용 자체가 처음이라서 내용을 이해하기가 많이 어려웠습니다.
□ 해결방법
강의 내용 중 이해가 되지 않으면 그 부분을 반복해서 보고, 인터넷에서 추가적으로 검색하여 해결하고자 하였습니다.
□ 학습 소감
새로운 프로그래밍 언어를 배우는 것은 정말 어렵다는 것을 체감합니다. 이러한 내용을 단시간에 습득할 수 있을지 걱정은 되지만, 최선을 다해보고자 합니다.
Author And Source
이 문제에 관하여([대구AI스쿨] JavaScript 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rim_chaeeop/대구AI스쿨-JavaScript-개발일지저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)