과정명 : 대구 AI 스쿨 일반과정
강의 : 웹프로그래밍김인권_42자바스크립트1_210623(1/2)
주제 : html / css / Java script
Java script
- 변수와 데이터 타입
Java script시작
웹을 프로그래밍 하는 언어 중, html은 구조를 설계, css는 레이아웃과 디자인을 담당하는 언어라고 이해했다. 오늘부터 시작하게된 Java script는 인터렉티브한 효과를 구성하는 언어라고 한다. Java script는 인간에게 친숙한 언어로 High level language라고 이야기 하는데 반대의 개념으로 기계언어, Low level language가 있다. 사실 Java script를 처음 접해보는 것이라 이런 설명이 아직은 전혀이해가 되지 않는 것이 사실이다.
- 인간 친화적 언어 : High level language
- 기계 친화적 언어 : low level language
Java script는 최근까지도 개선되면서 하이브리드 앱, 즉 웹 프로그래밍의 영역은 물론 ios/ 안드로이드 앱 개발과 서버의 영역 등 다양한 분야에서 활용된다고 한다.
Java script개념의 분류
| 자바스크립트 코어 | 클라이언트 측 자바스크립트 | 서버측 자바스크립트 |
|---|---|---|
| 개발 언어의 문법적적인 개념 | 브라우저를 제어하기 위한 관리자(?) 개념 | 서버를 담당하는 개념(node JS) |
일반적인 Java script의 활용에는 '자바스크립트 코어","클라이언트 측 자바스크립트" 이 두가지가 주요하다고 한다.
Java script의 적용방법
script태그의 직접사용
<script>
console.log("Welcome")
console.log("Comment")
</script>script문서를 연동
<script src="js/function.js"></script>Java script의 js문서를 연동하는 방법과 직접 js코드를 하나의 script태그에 혼용하여 사용할 수 없다.
Java script 코어 (구조)
[ 변수 : 데이터를 저장하는 공간 ]
변수의 개념은 가깝게는 엑셀, 다른 프로그래밍 언어의 변수 개념과 거의 유사하다는 느낌이 들었다. 그 당시에는 변수를 접할 때, 그냥 이게 변수 구나하고 넘어갔었는데 지금 다시 배워보니 변수의 개념이 프로그래밍 전반에 걸처 이해가 필요한 개념이었다는 생각이 든다.
[ 변수에 사용하는 용어 ]
변수 선언 : 변수의 이름을 지정하는 것
var comic;'comic'이라는 변수명을 가진 변수를 선언(생성)하였다.
변수 초기화 : 변수에 데이터(값)를 입력하는 것
comic = "원피스";'comic'라고 선언된 변수에 "원피스"라는 값을 초기화(입력)하였다.
변수 선언 + 변수 초기화
var apple ="사과";변수 동시 선언
var a,b,c;변수 동시 선언 + 초기화
var d = 10,
e = 20,
f = 30;
var d = 10, e = 20, f = 30;모든 변수는 선언과 동시에 undefined 상태가 된다. 초기화 되지 않은 변수는 모두 undefined상태이다.
변수의 캐스캐이딩(?)
var house;
house = "집";
house = "아파트";house변수는 "아파트"라는 값을 가지게 된다.
var house;
console.log(house)
house = "집";
console.log(house);"아파트"라는 값을 가진 변수를 아래에서 "집"이라는 값으로 초기화해주면 house변수의 데이터가 "집"으로 변경된다. 변수의 초기화는 사용자가 원하는 곳에서 가능하다.
[ 변수 작성요령 ]
변수 이름 : 2개 이상의 단어를 함께 사용한다. 변수의 내용을 조금더 직관적으로 이해할 수 있게 만들어 주고 변수명의 다양화 또한 가능하다. 다른 사람이 코드를 보더라도 변수와 변수의 데이터에 대한 이해가 용의하다.
캐멀케이스(camalCase)
var mathScoreStudent = 10변수명에 사용되는 단어와 단어사이를 대문자로표기. 낙타등의 혹처럼 중간이 대문자로 솟아난 모양에서 이름 붙여짐. 제일 첫글자 소문자
스네이크케이스(snake_case)
var math_score_student = 10변수명에 띄어쓰기를 언더바("_")로 표기. 뱀처럼 긴 형태에서 이름 붙여짐
- 특수문자를 사용할 수 있다. - 사용가능한 특수문자 (_,$)
- 숫자를 사용할 수 있다. 단, 숫자가 변수명의 선두에 나올 수 없다.
- 변수명은 최대한 자세히 작성하는 것이 좋다.
데이터 타입
| 원시타입 | 참조타입 |
|---|---|
| 문자열(String) | 배열 (Arry) |
| 숫자(Number) | 함수 (Function) |
| 논리(Boolean) | 객체 (Object) |
| undifined | |
| null |
문자열(String)
var msg1 = "Hello World"
var msg2 = 'Welcome'문자 형태의 데이터. 검은색으로 표기된 값은 문자열 데이터 ""혹은''을 사용. 서로 혼용하여 사용할 수 없으며 축약어의 경우 작은 단위를 큰단위로 감싸는 형태로 사용할수 있다.
var msg4 = "she's girl"
var msg5 = "she\'s girl"숫자(Number)
var num1 = 10;
var num2 = -10;
var num3 = 3.14;
var num4 = -3.14;숫자형태의 데이터. 양수와 음수 모두 표현이 가능함. 값이 파란색으로 표기됨. 사칙연산이 가능함
연산자
숫자의 연산
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 firstName = "Inchang"
var lastName = "Hwnag"
console.log(firstName + lastName)
console.log(firstName + " " + lastName)
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);
console.log(--num10);
console.log(--num10);
console.log(++num10);
console.log(++num10);
console.log(--num10);
console.log(num10);비교 연산자 >, < , ==, ===, !=, !== <=, >=
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);
// 3개의 등호(===)가 더 엄격하게 확인한다._데이터 타입까지 검증
var num10 = 10;
var num20 = 20;
var str10 = "10"
var str20 = "20"
console.log(num10 == str10);
console.log(num10 === str10);
console.log(num20 != str20)
console.log(num20 !== str20)논리 연산자 : AND연산자(&&) OR연산자(||)
var num30 = 30;
var num40 = 40;
var num50 = 50;
var num60 = 60;
console.log(num30 === num40 && num30 === 50);
console.log(num30 === num40 || num30 === 50);
// AND연산자 : 여러 조건 중 중, 모두가 참 일때 Ture를 반환
// OR연산자 : 여러 조건중 중, 하나라도 참 일때 Ture를 반환불리언(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 = true;
bool = false;Review
첫시간에 배운 내용이 이후 강의에서 이해되는 과정은 이미 경험했다. Java script의 첫시간으로 개념부터 특징 그리고 Java script를 구성하는 변수까지, 익숙한 내용도 많았지만 처음 접하는 내용도 다소 있었다. 처음 코딩을 배울때의 감정이 들기도 했다.
처음 html과 css를 처음 접했을 때, 받았던 스트레스가 있었다. 그때의 기억으로 Java script의 시작도 걱정이많았다. 다행이 첫날, 첫강의의 내용은 어렵지 않았다. 이해 또한 그랬다.
강의 시작전 막연한 생각으로 Java script는 웹의 기능적인 부분을 담당한다고 생각했다. 인터렉티브한 효과를 구성이라는 말이 그렇게 쉽게 이해되지는 않았다. 다행히도 시작은 좋다고 생각한다. 마지막까지 잘 마무리 하겠다.
