210831_[46]_대구 AI스쿨_일반과정_웹 프로그래밍_1_javascript_변수와 데이터 타입_start + 월말평가

홍연수·2021년 8월 31일
JavaScript기초과정대구AI스쿨웹프로그래밍
0
post-thumbnail

1.학습한 내용

자바스크립트에 대한 내용을 시작하였다. 초반에 개요는 정리할 부분이 많아 간략하게 내용정리를 한다.
월말 평가를 보았다. 틀린 부분에 대해서 추가적으로 리뷰하고자 한다.

월말 평가 리뷰

20문제 중 단, 2문제를 틀렸는데 전부position에 관련된 문제였다.

18번 문제는 오른쪽이라는 말을 보고 성급하게 right 50px쪽으로 답을 하였다.
부모요소를 기준으로 설정하여 오른쪽 이동을 하려면 relative로 설정을 하여야 하고 자식은 3차원 요소인 absolute로 하여 left: 50px;로 설정을 하여야 한다. 왼쪽을 기준으로 띄워져서 상대적으로 50px이 떨어지게 되니까.. 둘다 relative를 하게되면 우선 output으로 나오는 값 자체는 문제에 명시된것 처럼 된다.
하지만, 부모의 기준값으로 절대적으로 움직이게 되는 absolute를 설정 해주어야 한다.

19번 문제 같은 경우 브라우저 뷰포트를 기준으로 하려면 부모가 absolute로 설정된 상태에서 브라우저에 고정이 되는 display값인 fixed가 적용되어야 한다.

예전 학습때 정리하였던 내용에서
명쾌한 답을 찾을 수 있었다.
(reference : https://bky373.tistory.com/226)
(reference : https://velog.io/@rimu/css-%EC%9A%94%EC%86%8C%EC%9D%98-%EC%9C%84%EC%B9%98position-%EC%A0%95%EB%A6%AC)

평가에 대한 총평은 아직까지 position에 대한 특성에 대해 까먹었다는 것! 이번주에 반복학습을 하여야 할 것 같다.

자바스크립트 개요

자바스크립트는 원래 웹 사이트에 움직이는 효과를 줄 때 사용하는 언어여서 필수가 아니었지만, 지금은 서버나 웹에서 작동하는 프로그램을 만드는 등 웹의 모든 부분을 다룰 수 있는 핵심 언어이다.

  1. GSAP(GreenSockAnimationPlatform) = Small JavascriptFiles
    여러가지 API들중 하나. 주로 조작(interactive), 애니메이션(animation), 인터페이스(interface) 관련된 내용들이 많이 들어있다.
    https://greensock.com/gsap/

( reference : http://45.32.49.113/wiki/index.php/%EB%A6%AC%EB%B7%B0:_GreenSock_GSAP )

  1. Hybrid 앱
    예전과는 다르게 Javascript, HTML, CSS만 잘 알아도 google과 apple 관련된 app을 만들 수 있다.

  2. node.js
    프론트엔드 개발에서 사용하던 javascript를 백엔드 개발에서 사용할 수 있도록 만든 프레임워크이다. 흔히 백엔드 개발 언어라고 하면 PHP, 자바, 닷넷을 생각하지만 이제는 자바 스크립트만알아도 서버 개발까지 영역을 확대할 수 있다.

  3. javascript IOT 플랫폼
    사물인터넷(IOT)를 구현할 수 있다.

  4. High level language -> 인간이 접근하기 쉬운 (사용이 용이한) 언어를 의미
    javascript는 high level language
    Low level language -> 기계에 친화적인 (사용이 어려운) 언어

자바스크립트 3가지 분야


node.js 같은 경우에는 백엔드 영역이다.

자바스크립트 기본

1. 변수와 변수명


△ 변수와 변수명에 대한 정의

△ 데이터의 종류

2. 기본적인 특성

자바스크립트 언어의 큰 줄기는 식(expression)과 문(statement)이다.

식은 표현식이라고도 하는데, 연산식 뿐만 아니라 실제 값도, 함수를 실행하는 것도 식이다.
즉, 어떤 값을 만들어 낼 수 있다면 모두 식이 될 수 있으며, 식은 변수에 저장이 된다.

이에 비해 문은 명령이라고 생각할 수 있다. 문의 끝에는 세미콜론(;)을 붙여서 구분한다.

넓은 의미에서 문은 값이나 식까지 포함한다. (식 ⊂ 문)

(reference : 한 권으로 끝내는 웹 기본 교과서 (HTML+CSS+자바스크립트 웹 표준의 정석))

개발자 도구를 통해 console창을 클릭하면 console창에 출력하는 console.log()문을 통해서 출력이 가능하다. 이는 일반 브라우저 창에서는 나타나지 않는다.

웹 브라우저 화면에 출력을 하려면 document.write()문을 작성하면 된다.

HTML code

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<title></title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>



<!--  밑에 스크립트 자체가 자바 스크립트 코드이다. -->
<!-- console.log 콘솔에 특정 정보를 print할때 사용 -->

<!-- 위에서부터 순차적으로 진행이 된다. -->
	<script src="js/main.js">
		console.log("AAA");
	</script>
<!-- 위와 같이 하면 안쪽에 있는것은 작동 x -->
<!-- 자바스크립트 주석 다는 방법 -->
	


	<script> 

		/*
		console.log("Hello");	
		console.log("Comment");
		*/


	//	console.log("Hello");	한줄 주석 방식
	//	console.log("Comment");



	</script>












</body>
</html>

위에 HTML code에서처럼 <script>라는 code를 통해서 HTML안에 직접 넣을수도 있다. 아니면, css작업에서처럼 외부파일을 연결하여 사용할 수 있다.
<script src="js/main.js">script에 src에 파일 위치를 설정하면 된다.

4. 자바스크립트 스타일 가이드

자바스크립트 코딩 규칙은 스타일 가이드나 코딩 컨벤션, 코딩 스타일, 표준스타일이라고도 한다.

자바스크립트는 웹 문서에 동적인 효과를 주기 위해 출발한 언어이므로 다른 프로그래밍 언어에 비해 데이터 유형이 유연해서 곳곳에 사용자가 주의를 기울이지 않으면 오류가 발생하게 된다.

기본적인 규칙
1. 들여쓰기를 한다. (HTML, CSS와 동일)
2. 세미콜론으로 문장을 구분한다.
문장이 끝날 때 세미콜론(;)을 붙이지 않아도 실행이 되지만, 스타일 가이드에서는 문장을 끝낼 때 반드시 세미콜론을 붙이도록 권장한다. 문장을 명확하게 표시해주면 소스를 디버깅하기 쉽기 때문이다.
ex) var n = 10 x, var n = 10;
3. 공백을 넣어 읽기 쉽게 작성한다.
4. 주석을 적절하게 활용. (//(한 줄 주석) or /* */ (여러 줄 주석) (여러 줄 주석 같은 경우에는 css와 동일))
5. 식별자는 정해진 규칙을 지켜 작성
식별자(identifier)는 개발자가 자바스크립트의 변수, 함수, 속성 등을 구별하려고 이름 붙인 특정 단어를 의미한다.

var name = prompt("이름을 입력하세요.");

여기에서 name이 식별자이다.

식별자의 첫 글자는 반드시 영문자나 언더바(_) 또는 달러 기호($)로 시작해야 한다.

  1. 예약어(keyword)는 식별자로 사용할 수 없다.
    예를 들어 var는 변수를 선언할 때 쓰는 예약어이며 식별자이름으로 사용할 수 없다.

4. 변수, 기본규칙, 연산자에 대한 내용

css code

// comic 박스를 생성한 상태
// 변수 선언 (변수를 만든 상태)


// var comic;

// comic 박스 안에 원피스 데이터를 할당한 상태
// 변수 초기화 : 등호를 사용해서 데이터를 할당한 상태
// comic = "원피스";

// console.log(comic);


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

/*
var a;
var b;
var c;
*/

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


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

*/

// var d = 10, e = 20, f = 30;


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

// var computer; 

// console.log(computer);


/*
var house;
house = "집";


console.log(house);

house = "아파트"; 

console.log(house);
*/


/*
var house; 
console.log(house);

//undefined -> 집으로 바뀜

house = "집"
console.log(house);
*/


// 변수 작성방법

// 캐멀 케이스

// var mathScoreStudent = 10;

// 스네이크 케이스

// var math_score_student = 10;


// 주의점
//  밑에 작성방식은 오류가 생긴다.
// var math-score-student = 100;

// var _math;
// var $math;

// 위의 특수문자 2개 빼고는 서두에 특수문자를 넣을수 없다.



// var apple10;
// var 10apple;

//  숫자가 먼저 나오면 오류가 생긴다.


// 변수를 자세하게 작성해야 한다.


/*


//  데이터 타입 (데이터의 종류들)
// 문자열 (String)

var msg1 = "Hello World";
var msg2 = 'Welcome';


console.log(msg1);
console.log(msg2);

// var msg3 = "Nice to meet you'; 큰 따옴표, 작은 따옴표 혼용하면 안된다.



// 축약어 표현하기
// She is a girl
// She's a girl

var msg4 = "She's a girl ";
var msg5 = 'She\'s a girl';


console.log(msg4);
console.log(msg5);

//  결과 값은 동일

*/


/*
// 숫자 (Number)
var num1 = 10;
var num2 = -10;
var num3 = 3.14;
var num4 = -3.14;

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


// 연산 작업 진행 가능 (정수와 실수 합도 가능)
console.log(num1 + num2);
console.log(num1 + num3);





// 연산자 
// 숫자 사칙연산

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);

// 나누기를 하여서 나머지값만 알고 싶을때는 %로 처리

//  문자열이다. 큰 따옴표 안에 들어갔기 때문에 
// 글자를 이어 붙이게 되어서 2012을 나온다.
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);


var firstName = "Yeonsu";
var lastName = "Hong";

// 공백을 만들어준다. HTML과의 차이점
console.log(firstName + "    " + lastName);


var str11 = "현재 시간은";
var time = 10;
var str12 = "시 입니다.";


console.log(str11 + time + str12);

*/






// ++, -- 연산자
var num10 = 10;

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

//  뒤에서 부터 해석하는 것이 좋다.

//console.log(--num10); // 결과 값 9
//console.log(--num10); // 결과 값 8


console.log(++num10); 	// 11  +1씩 증가
console.log(++num10);	// 12




// console.log(num10--); //num10을 먼저출력하고 그다음 마이너스
console.log(--num10); // 선차감의 의미
console.log(num10);

/*

// +=, -=, *=, /=, %= 연산자

var num20 = 20;

// num20 = num20 + 10;

// 자기 자신을 업데이트

num20 += 10; //위와 같은 뜻이다.

console.log(num20); // 결과 값 30


*/


//  비교 연산자 >, <, ==, ===, !=, !==, <=, >=
/*
var a = 10;
var b = 20;
var c = 30;

console.log( a > b);
console.log(a < b);
console.log(a >= b);
console.log(a <= b);


console.log(a == b);
console.log(a === b);

console.log(a != b);
console.log(a !== b);

// != 값이 다른지를 검사하는 것!
*/
/*
var num10 = 10;
var num20 = 20;


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

console.log(num10 == str10); //
console.log(num10 === str10); // 데이타 타입까지 같은지 따지는 것 등호 3개

console.log(num20 != str20);
console.log(num20 !== str20); // 두개의 데이터 타입이 달라서 true로 나타난다.
*/

//  논리 연산자 : AND(&&), OR (||)
/*
var num30 = 30;
var num40 = 40;
var num50 = 30;


console.log(num30 === num40 && num30 === num50); // 양쪽 모두 참인경우 참, 하나라도 거짓이면 false
console.log(num30 === num40 || num30 === num50); // 둘중에 하나가 참이면 참으로
*/


// 불리언(boolean) : true, false 논리연산자와 결합해서 사용. ex> 포탈아이디 비번 하나라도 틀리면 x니까 여기서 활용

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

console.log(10 === 10 || 20 === 30 );

기본적인 내용은 주석처리로 설명이 정리되어 있다.

2. 실습

깃허브 소스코드 :
https://github.com/Yeonsu-Hong/Daegu-AI-school-files

3. 어려웠던 내용 & 해결방법

자바스크립트의 기초적인 내용이라서 어려운 점은 없었다.

4.소감

마지막 월말 평가가 끝났다. position 관련된 내용을 실습을 통해 좀더 익히고 부족한 부분은 강의를 다시 들어야겠다.

자바스크립트의 내용은 생소한 부분이 많았다. 역시 대학원생 시절에 하던 포트란과는 다르다. 부지런하게 정리를 해야겠다.

profile
홍연수
일단 하는 개발자
이전 포스트

210830_[45]_대구 AI스쿨_일반과정_웹 프로그래밍_15_NAVER_mobile_ver_2_end_HTML_CSS_curriculum_end

다음 포스트

210901_[47]_대구 AI스쿨_일반과정_웹 프로그래밍_1_javascript_변수와 데이터 타입_2____수정중

0개의 댓글