210825-26 개발일지

JANE Jeong·2021년 8월 25일
JavaScripthtml대구AI스쿨데이터타입변수실습웹프로그래밍자바스크립트문법
0

대구 AI 스쿨

목록 보기
42/51
post-thumbnail

📌 학습한 내용

전체 코드 : 💾

JavaScript

: 웹 사이트의 주요 기능들, 주요 애니메이션 효과를 구현할 때 사용되는 high level 언어.

  • 이전에는 웹사이트 영역에 대해서만 활용이 가능했지만 현재는 하이브리드 앱을 제작할 수 있을 정도로 발전

  • 하이브리드 앱 : HTML, CSS, JavaScript 세 가지 언어를 기반으로 안드로이드 앱(Java, Kotlin) 또는 아이폰 앱(Swift, Objective-C)을 제작

  • Node.js : JavaScript 언어로 구성되어 있는 서버개발을 도와주는 도구(tool)

  • IoT(사물인터넷) 개발에도 사용 가능

JavaScript의 세 분류

1) 자바스크립트 코어
: 자바스크립트의 문법적인 특징을 공부하는 영역

2) 클라이언트 측 자바스크립트
: 브라우저를 제어할 때 사용되는 자바스크립트
(스크롤의 위치, 마우스의 위치, 브라우저의 크기등을 가져오고 싶을 때, 자바스크립트를 이용해 HTML, CSS에 접근해 변화를 주고 싶을 때)

3) 서버 측 자바스크립트
: Node.js 영역, 서버 개발에 용이

JavaScript 언어를 HTML에 적용하는 방법

1) HTML 문서에 <script>를 이용해 코드(javascrip 언어)를 직접 입력

<script>
	console.log("Hello");
 //()안쪽에 입력된 정보를 console 탭에 출력하는 명령어
</script>

-> 하나의 html 문서 안에 html 언어와 javascript 언어가 혼재된 상태 (코드분량이 길어져 가독성이 떨어짐)

2) <Script src=""><script>를 이용해 javascript 파일 경로를 입력

<script src="js/main.js"></script>

👉 위의 두 가지 방법중 하나만 사용해야 함
(파일 경로를 입력한 <script>에 직접 입력하는 방식으로 작성하면 작동 x)

👉 JavaScript 코드도 html, css와 마찬가지로 위에서부터 아래로 순차적으로 실행된다.

JavaScript 주석처리 방법

1) css와 동일 (전체 주석 처리) - 전체 주석 안에 전체 주석을 넣을 수 없음.

<script>
	/*
	console.log("Welcome");
	console.log("Hello");
	*/
</script>

2) // 한 줄 주석 처리 - 전체 주석 안에 한 줄 주석을 넣을 수 있음.

<script>
  /*
	// console.log("Welcome");
	// console.log("Hello");
  */
 	// console.log("AAA");
</script>

JavaScript 문법

변수 선언

  • 변수 : 데이터를 저장하는 공간
// comic 박스 생성
// 변수 선언
var comic;

// comic 박스 안에 원피스 데이터를 할당한 상태
// 변수 초기화
comic = "원피스";

//변수 선언과 동시에 초기화 진행
var apple = "사과"; 


//변수 동시 선언
var a, b, c;
var a,
    b,
    c;

//변수 동시 초기화
var d = 10, e = 20, f = 30;
var d = 10,
    e = 20,
    f = 20;

👉 모든 변수는 선언과 동시에 undefined 가 자동으로 할당된다.

  • 변수안에 들어가는 데이터는 언제든 변경할 수 있다.
var house;
house = "집";
console.log(house);

house = "아파트";
console.log(house);
  • 최초 변수를 선언하고, 최초 초기화를 했을 때, undefined 에서 할당된 데이터로 변경되는 것.
var house;
console.log(house);

//undefined -> 집
house = "집"
console.log(house);

변수명 작성법

: 일반적으로 변수명 작성시, 최소한 두 개의 명사를 이어서 작성
-> 구체적으로 명시를 해줘야 이해가 명확해진다.

var mathScoreStudent = 10;  // camelCase
var math_score_student = 10;  //snake_case

<변수명 작성시 주의점>

  1. 하이픈(-) 사용불가 -> error로 취급
var math-score-student = 100;  //kebab case
  1. _, $를 제외한 특수문자는 변수의 첫 글자로 사용 불가
  2. 숫자는 변수 첫 글자로 사용 불가
  3. 변수명은 값을 유추할 수 있도록 최대한 자세히 작성
  4. 예약어는 변수명으로 사용 불가

데이터 타입 (= 데이터 종류)

: 8개의 타입과 2가지 진영

1. 원시 타입(Primitive Type)
문자열(String), 숫자(Number), 논리(Boolean, 참/거짓), undefined, null

2. 참조 타입(Reference Type)
배열(Array), 함수(Function), 객체(Object)

문자열(String)

: 두 가지 형식으로 작성 가능 (혼용x)

var msg1 = "Hellow World";
var msg2 = 'Welcome';
  • 문자열에 '/"가 들어가는 경우
var msg4 = "She's girl";
var msg5 = 'She\'s girl';

=> 검은색 텍스트로 출력됨

숫자(Number)

정수, 실수, 연산작업 모두 가능 

var num1 = 10;
var num2 = -3.14;

console.log(num1 + num2);
console.log(num1 + num3);

=> 파란색 텍스트로 출력됨

👉 연산자

1) 숫자 사칙연산

var a = 20;
var b = 10;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);  // 나머지

2) 문자열 연산

: 덧셈을 제외하고는 사칙연산 일부 작업이 가능 

var str1 = "20";
var str2 = "10";

console.log(str1 + str2);
// 글자를 이어붙인다
console.log(str1 - str2);
console.log(str1 * str2);
console.log(str1 / str2);
console.log(str1 % str2);

-> 이러한 특성을 이용해 아래와 같은 작업이 가능 (공백을 문자로 인식, html과 차이점)

var firstName = "Jane"
var lastName = "Jeong"

console.log(firstName + "       " + lastName)

3) ++, -- 연산자

: +1 / -1 씩 증가 / 감소 시킬 때 사용

var num10 = 10;

// num10 = num10 - 1;
// console.log(num10);
console.log(--num10); // 9
console.log(--num10); // 8

console.log(++num10); // 11
console.log(++num10); // 12

-> 등호 데이터는 뒤에서 부터 해석하는 것이 좋음 (10이라는 데이터가 들어있는num10에서 -1을 한 데이터(9)를 다시 자기자신에 업데이트 한 것)

👉 연산자를 앞/뒤, 어디에 붙이느냐에 따라 그 결과값은 달라짐

var num10 = 10;

console.log(num10--);
console.log(num10);
// -> 우선 num10의 값을 출력하고, -1을 차감하는 것 (후차감)

console.log(--num10);
console.log(num10);
// -> -1을 차감한 상태로 값을 업데이트를 해서 나타내는 것 (선차감)


4) +=, -+, *=, /+. %=

: 자기자신에 대해 새로운 값을 업데이트(재할당) 할 때 사용

var num20 = 20;

// num20 = num20 + 10;
num20 += 10;

console.log(num20);

5) 비교연산자

: >, <, ==, ===, !=, !==, <=, >=

  • 결과값으로 항상 논리값(Boolean)이 나온다.

  • == : 값만 동일하면 true

  • === : 값과 데이터타입 모두 동일해야 true

var num10 = 10;
var num20 = 20;

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

console.log(num10 == str10);
console.log(num10 === str10);

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

  • && : 모든 조건이 참이어야 true 반환
  • || : 하나라도 참이면 true 반환

논리값(Boolean) : true/false

: 결과값이 true/false 로 나타나는 상황 자체, 일반적으로 논리 연산자와 결합해 사용

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

ex) 사이트에 로그인 하는 경우 아이디와 비밀번호 입력시, 하나라도 틀리면 로그인이 되지 않게 함

null, undefiend

: 양쪽 모두 값이 없는 상태

  • null : 등호 사용, 변수 초기화로 명시적으로 빈 값을 변수 안에 할당한 상태
  • undefined : 변수를 선언만 한 상태

<null과 undefined 차이점>

  • typeof a : a 의 데이터 타입을 반환 
console.log(typeof 10);
console.log(typeof "Hello World");

  • typeof null -> object : null 이 태생적으로 갖고 있는 버그때문

  • typeof undefined -> undefined

  • null == undefined -> true : 값이 없음
    null === undefined -> false : 데이터타입 다름

<null과 undefined의 사칙연산>

  • 숫자 + null = 숫자 : null이 0으로 바뀌게 됨
  • 숫자 + undefined = NaN
    NaN (Not a Number) : 숫자가 아님, 연산 불가능한 값을 전달했을 때 발생하는 오류

! 부정문

: 반대값으로 반환

  • !true -> false / !false -> ture

  • !null -> true
    !!null -> false : 이미 ture로 반환된 값을 다시 !ture 한 것으로 취급되어 false가 됨, undefined도 동일한 결과를 가짐

함수 (Function)

기본 구조

// 함수 선언 : 기능을 만든 상태
// 매개변수 : a, b
function 함수명(a, b) {
  
	console.log(a + b);
}

//함수 호출 : 만들어진 기능의 스위치를 켜는 행위 자체 
// 인수 : 10, 20
함수명(10, 20);
  • Parameter (매개변수) : 함수 작동 시 필요로 하는 값 선언
  • Argument (인수) : (인자), 함수 호출 시 전달되는 값
  • 매개변수를 지정 후, 인수 전달 시 누락된 매개변수가 있을 경우 해당 매개변수에는 undefined가 할당되어 있는 상태
  • 매개변수와 전달된 인수는 항상 쌍을 이루고 있는 상태로 함수를 호출해줘야 함
  • 자바스크립트의 모든 데이터 타입은 매개변수로 전달할 수 있다.

return

: 함수를 호출했을 때, 호출된 시점에 return 안에 들어가있는 값을 반환

  • 다른 변수에 값을 전달할 경우
function sum(num1, num2) {
	return num1 + num2;
}

var result = sum(10, 20);
console.log(result);
  • return으로 전달받은 값으로 새로운 공식에 대입할 경우
function area(hor, ver) {
	return hor * ver; 
}

var volume = area(10, 20) * 100; // 200을 갖고 있는 상태
console.log(volume);

(참고 사이트 : https://brunch.co.kr/@brunch92ny/9)

배열 (Aarray)

var alphabet = ["a", "b", "c"];
console.log(alphabet);

-> 각각의 좌표값(index)
0: "a"
1: "b"
2: "c"

console.log(alphabet[2]);  // c
console.log(alphabet[1]);  // b

-> 특정 데이터에 접근 가능

  • 인덱스를 이용해 데이터를 변경 가능
alphabet[2] = "d";
consle.log(alphabet); 

// => ["a", "b", "d"]

  • length : 배열안에 들어가있는 데이터의 갯수

  • 자바스크립트의 모든 데이터타입을 배열에 삽입 가능

👉 배열을 작성할 때 주의점

1) 배열 안의 데이터는 가능한 동일한 데이터 타입을 갖고 있어야 함.

var num = [10, 20, 30, 3.14]; // o
var num = [10, 20, 30, "Hello World"]; // x

2) 배열 안의 데이터는 가능한 동일한 성격을 갖고 있어야 함. 

var fruit = ["사과", "배", "바나나", "멜론"];  // o
var fruit = ["사과", "배", "바나나", "양상추"];  // x

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

var score = [[10, 20, 30], [100, 200, 300]];

console.log(score);
console.log(score[1]);
console.log(score[1][2]);

객체 (Object)

: 베열과 유사, 여러 개의 데이터를 한 곳에 넣고자 할 때(항목들을 받아내는 영역)

var student = {
	name: "Jane",
	age: 23,
	skills: ["JS", "HTML", "CSS"]
}

console.log(student);
  • key : name, age, skills
  • value : "Jane", 23, ["JS", "HTML", "CSS"]

=> property

객체 안에 있는 데이터에 접근하는 방법

1) consloe.log(변수명.데이터 key)

console.log(student.name);
// => Jane

2) console.log(변수명['데이터key']);

console.log(student['name']);
// => Jane

객체 안에 있는 특정 배열 데이터에 접근하는 방법

console.log(studet.skills[1]);
// -> HTML

기존 객체 안에 없는 새로운 데이터를 추가하는 방법

객체명.새로운key값 = "value" 직접적으로 추가

자바스크립트의 모든 데이터타입을 객체에 삽입 가능

var student = {
	name: "Jane",
	age: 23,
	skills: ["JS", "HTML", "CSS"],

	test1: true,
	test2: null,
	test3: undefined,
	test4: {color: "red"},

  	//메서드
	sum: function (num1, num2) {  
    // sum이라는 키값 자체가 함수명을 대체
		return num1 + num2
	}
};

var result = student.sum(10, 20);
console.log(result);   // => 30
  • 메서드 : 객체 안쪽에서 만들어진 함수
  • 함수 : 객체 바깥쪽에서 만들어진 함수
student.sum(10, 20);
// student라는 객체 안에 있는 sum이라는 에서드를 이용한 것.

console.log("Hellow World");
// console이라는 객체 안에 있는 log 라는 메서드를 아용한 것.

원시 타입(Primitive)과 참조 타입(Reference)의 차이점

(참고 사이트 : https://brunch.co.kr/@brunch92ny/10)

  • 원시 타입
    : 원본과 복사본의 개념이 존재, 서로 독립적
    (원본을 수정하든, 복사본을 수정하든, 서로의 데이터에는 영향을 미치지 x)

  • 참조 타입

-> Obj1이 가리키고 있는 주소를 Obj2도 가리키게 되는 것으로, 주소를 공유하고 있는 것. 따라서 주소 안의 데이터가 변경되면 양쪽 모두의 데이터가 바뀌게 되는 것이다.

배운 것 적용하기

<div id="color-bg">
	<button id=btn type="button">클릭</button>
</div>
var colors = [
	'yellow', 
	'green', 
	'pink', 
	'#dc143c', 
	'rgba(123, 123, 123, 0.5)'
];

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

btn.addEventListener('click', function() {

	// 0 ~ 4
	var random = Math.floor(Math.random() * 5) 
	// console.log(random);
	console.log(colors[random]);

	bg.style.backgroundColor = colors[random];
})
  • document : html문서에 영향력을 미치는 객체 (클라이언트 측 자바스크립트 - html 문서를 제어, 브라우저를 제어)
  • getElementById : document 객체 안에 있는 메서드
  • addEventListener('이벤트의 종류', function()' {})
    : 이벤트를 실행했을 때, 두 번째로 만들어 놓은 함수를 자동으로 호출
btn.addEventListener('click', function() {
	console.log("Hello");
})

  • 익명 함수 : 함수 이름이 없는 함수

  • 콜백 함수 : 호출 기호 없이 특정 조건 하에 자동으로 호출이 되는 함수

  • Math.random() : 0을 포함해 1미만까지의 숫자를 실수형태로 랜덤하게 표현할 때 사용하는 메서드

  • Math.floor() : 소수점 이하는 버림

추가 설명


  • 여러 개의 js 파일을 html에 연동할 때도, 작성된 순서 대로 결과값을 반환한다.

  • 하나의 js파일에서 생성한 변수를 다른 js파일에서 호출할 수 있다.

  • 하나의 js파일에서 생성한 함수를 다른 js파일에서 호출할 수 있다. 단, html파일에 연동시키는 순서는 항상 주의해야 한다. (먼저 존재하는 파일을 연동 시키고, 사용할 파일을 그 후에 연동시켜야 한다)

📌 학습내용 중 어려웠던 점

📌 해결방법

📌 학습소감

오늘부터 드디어 자바스크립트를 시작했다! 오늘은 자바스크립트 코어(문법) 영역을 중점적으로 공부했다. Python을 몇 번 다뤄 본적이 있어서 변수명과 데이터 타입에 대해서는 금방 따라갈 수 있었다. 하지만 실습에서 html과 css 그리고 자바스크립트를 연동해 다양한 객체와 메서드를 불러와서 작업할 때는 어질어질했다. 처음 접하는 작업이니 그럴 수 있다고 생각하다가도 얼른 이해해버리고 다음 단계로 넘어가야지하는 의욕이 생긴다. 오랜만에 실습이 아닌 개념 공부를 하니까 또한 재미있었다.😋

profile
JANE Jeong
늘 새로운 배움을 추구하는 개린이 🌱
이전 포스트

210824 개발일지

다음 포스트

210827 개발일지

0개의 댓글