자바스크립트

dogyeomyeo4444·2021년 9월 1일
자습ing
post-thumbnail

오늘의 강의 내용

* 변수와 데이터 타입1편

<!-- index.html언어 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>


	<script type="text/javascript">
		/*
		console.log("Hello");
		console.log("ARSENAL");
		*/

		//console.log("world");
	</script>

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

</body>
</html>

<!-- main.js언어 -->
// comic 박스를 생성한 상태
// 변수 선언
// var comic;  //어떠한 데이터도X

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


// var apple10;
// var 10apple;

// var w;



// 데이터 타입
// 문자열(String)
/*
var msg1 = "Hello World";  
var msg2 = 'Welcome';

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

// var msg3 = "Nice to meet you';";


// She is girl
// She's girl
var msg4 = "She's girl";
var msg5 = 'She\'s 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);   //나누어서 나온 나머지값을 알고싶을때

// 문자열
// 덧셈을 제외하고 사칙연산 일부 작업이 가능하다.
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 = "Inkweon"
var lasrName = "Kim"

console.log(firstName + "           " +lasrName);   //공백을 넣는방법. 공간을 늘리면 늘어남 


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
// console.log(++num10); //12


// console.log(num10--); //10  한텀쉬고 출력
// console.log(num10); //9



// +=, -=, *=, /=, %== 연산자
/*
var num20 = 20;


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

console.log(num20);
*/




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


console.log(a > b);  //false
console.log(a < b);  //true
console.log(a >= b); //false
console.log(a <= b); //true


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);   //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);  //false
console.log(num30 === num40 || num30 === num50);  //false

console.log(num30 === num40 && num30 === num50 && num40 !== num50);   //논리연산자는 비교연자와 결합하여 사용가능
console.log(num30 === num40 || num30 === num50 || num40 > num50);
*/




// 불리언(boolean) : true, false
/*
console.log(true);     //true
console.log(false);    //false
console.log(1 === 2);  //false
console.log(10 < 20);  //true
console.log(10 === 10 || 20 === 30);  //true


var bool = true;
bool = false;
*/

  • java script언어란? 웹사이트의 주요기능이나 주요애니메이션 효과를 구현할때 사용

  • java script의 진화
    이전에는 웹사이트영역 에서만 java script를 활용할수 있었으나, html, css, java script 를 기반으로 하여 안드로이드앱 또는 아이폰앱을 제작할수있게 되었다. 우리는 이를 하이브리드앱 이라 칭한다.

  • 원래는 안드로이드앱을 개발하기 위해서는 java, 코틀린(Kotlin)언어를 따로 공부하여야 했다.

  • 아이폰앱을 개발하기위해서는 Swift 및 Objective-C언어를 따로 공부하야야 했다.

  • Node.js : java script언어로 구성되어 있는 일종의 서버개발을 도와주는 도구

  • 자바스크립트 iot 즉 사물인터넷을 구현을 하는데에도
    java script를 활용할수있다.

  • java script의 특징

1)인간에게 친숙한 언어 우리는 이걸 고급 프로그래밍 언어(high level language)라고 한다.

2)java script의 3분류

첫번째 분류) 자바스크립트 코어 : 어떤 개발언어의 문법적인 내용을 다루는 영역(한글의 자음,모음을 배우는단계)

두번째 분류) 클라이언트 측 자바스크립트 : 브라우저를 제어할때 사용되는 자바스크립트(브라우저의 스크롤, 마우스의 위치, 브라우저의 창의 크기, 자바스크립트를 가지고 html, css에 접근을 하여 변화를 주고싶을때)

세번째 분류) 서버측 자바스크립트 : Node.js영역이라고 보면된다. 위에 두가지에 비해 자바스크립트를 공부하는데 비중이 떨어진다.

  • java script언어를 적용하기 위해서는 크게 두가지 방법이 있다.

첫번째 방법 으로는

script태그를 이용하는 방법으로 console.log코드를 입력한후에 괄호안에 작성을한다.
입력한 java script코드는 웹페이지에서 오른쪽마우스 클릭->검사->console탭으로 들어가서 확인이 가능하다.

두번째 방법 으로는

<script src=""></script> //를 이용한 파일연동 방식

이 있다. 이방법은 위처럼 하였을시 html언어와 java script언어가 혼재되어 있는, 즉 코드가 길어졌을시 가독성이 떨어지기에 js라는 파일 확정명을 가지고있는 파일안에서 java script언어를 작성후 연동해주는 방식으로 java script를 적용시킬수있다.

  • 연동할때 주의점
<script src="js/main.js">
		console.log("Hello");
</script>

위처럼 두가지 방법을 혼용하여 사용할수 없다.

  • java script도 html, css와 마찬가지로 위에서 부터 순차적으로 실행된다.

  • java script 주석처리 두가지 방법

<script type="text/javascript">
		/*
		console.log("Hello");   //css주석과 같음 전체주석
		console.log("ARSENAL");
		*/

		//console.log("world"); 앞에//두개 한줄주석
</script>
* 전체주석안에 전체주석을 넣을수 없다.
* 전체 주석안에 한줄 주석은 넣을수있다.

* java script변수


변수안에 어떠한 데이터를 넣을수있다.

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


변수초기화를 하지 않고 console.log입력시 undefined가 나온다.


변수안에 들어가는 데이터는 언제든 원하는 타이밍에 변경할수있다.

  • 변수명 작성 요령
    최소 두개단어의 조합으로 정수명을 작성하는것이 좀더 안전하고, 이해하기쉬운 변수이름

  • 변수명 작성시 주의할점
    첫번째
    케밥 케이스
    var math-score-student = 100; 사용할수없다.

두번째
var _math; 두개의 특수문자 이외는 사용할수없다.
var $math;

세번째
var apple10; 사용가능
var 10apple; 사용불가능. 숫자가 앞에오면 않된다

네번째
변수명을 작성할때 최대한 자세히 작성하는것이 좋다.
즉 의미가 불분명한 단어를 쓰는것은 기피해야한다.

* java script 데이터 타입

  • 데이터의 종류 = 데이터타입
    ex) 문자열(String), 숫자(Number), 논리(Boolean),
    undefined, null, 배열(Array), 함수(Function), 객체(Object). 이상 java script 데이터종류 (추가적으로 더있기는 하다.)

  • 원시타입
    문자열(String), 숫자(Number), 논리(Boolean),
    undefined, null

  • 참조타입
    배열(Array), 함수(Function), 객체(Object)

강의가 끝난후 소감

처음 java script 강의를 들었는데, 공부할 내용이 많아
앞으로 공부하는데 있어 쉽지않을것 같은 기분이 들었다.

힘든점, 문제점

딱히 힘든점 보다는 흥미로운점이 많았다. 새로운 것을 배운다는 느낌이 강해 연습을 하고싶다는 기분이 더 앞서있었다.

개선방안

java script 연습을 하루빨리 하고싶다. 아직은 너무 기초만 배워 응용하기에는 무리일것 같다.

profile
dogyeomyeo4444
i will be the best
이전 포스트

2021.08.31유튜브4

다음 포스트

자바스크립트2

0개의 댓글