✔ TODAY
원래 진도라면 유튜브 카피켓을 해야되지만 , 시간상 자바스트칩트를 먼저 시작한다.
✔ 학습한 내용
JS에 대해서
웹개발외 사용되는 JS
1) 하이브리드웹
- js을 충분히 숙지하면 안드로이드 앱도 제작이 가능.
아이폰웹도 동시에 출시할 수 있는 웹제작이 가능.
2) node js
- js 언어로 구성되어 있는 서버개발을 도와주는 언어.
3) 자바스크립트 iot
- iot를 구현에도 js사용 가능
JS 특징
-
인간에게 친숙한 언어
- 하이 레벨 언어- 인간에게 친숙한 개발언어
<->로우레벨 언어- 기계가 이해하기 쉬운언어JS의 3분야
3가지 구분에해서 공부하는 것이 좋다
1) 자바스크립트 코어
- 개발언어의 문법적인 영역 js의 문법적인 특징들을 공부하는 영역
2) 클라이언트 측 자바스크립트
- 브라우저의 제어할때 사용하는 js
브라우저 조절등
3) 서버 측 자바스크립트
- 노드JS의 영역
▶ 1 & 2가지만 해도 충분 서버에 관심이 있는 경우에 3) 진도를 나가면 됨
JS 를 작성하는 2가지 방법
1) html내에서의 작성
<script>
console.log("hello");
</script>- html과 js 혼동된 상태 css와 마찬가지로 js의 확정명을 가진 파일안에 작성해서 밑의 방법으로 적용하는 것이 좋음
(코드길이가 길어지면 가독성이 길어져서 )
▶ 작성한js는 게발자도구의 검사
- 콘솔부분에서 확인이 가능하다
▶ 에러
- 특정부분에서 문제가 생겼을대 나옴 문제의 상황에 따라 문구가 다르게 안내되고 어느 지점을 확인 할 수 있다.
- 누르면 소스코드로 보여줌.
▶ console.log("hello"); ()
- 입력된 정보를 콘솔탭에 출력을 시키는 명령어
- 특정정보를 콘솔에 프린팅 출력할 떄 사용하는 명령어
2) 별도의 JS 파일을 만드는 방법.
src안에 js파일의 주소를 입력하면 된다.
<script src="js/main.js"></script>▶ 위에서 부터 순차적으로 실행이 된다.
주의점
연동시 주의점 . src가 적용된 태그 안에 또 안에 console.log 작성시 해당 console.log가 작동이 안됨 .
그러니 헷갈리지 말고 위의 방법 중 1개만 선택해서 하기. 2가지를 혼용해서 사용하면 안됨.
코어내용 - 마친가지로 주석을 달 수 가 있다.
2가지 방법
css에서 주석처리하는 방법 그대로 사용
2) // 앞에 적기
/
console.log("hello");
console.log("comment");
/ 전체주석처리
//console.log("hello"); 한줄만 주석처리전체주석안에 전체주석은 안되지만
전체주석안에 한줄 주석을 넣어서 주석안에 주석을 넣을 수 있다.
css와의 차이점
js의 문법
변수 개발언어를 공부할때 항상 따라오는 개념
변수는 데이터를 저장하는 공간. 변수라는 일종의 박스 안에 데이터를 넣을 수 가 있다.
변수 이사짐 - 박스 / 데이터- 물품
박스안에 들어갈 물품을 정함 . 그에 맞춰 물건을 박스에 넣음 .
박스에 구체적인 이름을 정하는걸 변수명
박스를 만드는 행위 -var를 입력
//comic 박스를 생성한 상태-안에 데이터가 없는 형태
var comic;
//comic 박스를 생성한 상태-안에 데이터가 없는 형태
var comic;
//comic 박스 안에 원피스 데이터를 할당한 상태
comic ="원피스";
//박스를 전달
console.log(comic);
개발용어 정리
변수선언 / 변수 초기화 단어에 익숙해지기
주의하기
var d = 10; ,
e = 20; ,
f = 30;
와 var d = 10 ,
e = 20 ,
f = 30; 는 다르다 후자가 바르게 된것
var computer;
console.log(computer);
선언만 한 경우에는 undefined로 나옴 js의 데이터 형태중 하나로 보면 된다.
모든 변수는 선언과 동시에 undefined가 자동으로 할당된다. >> 굉장히 중요!!!
var house;
house = "집";
console.log(house);
// 만들어진 변수안의 데이터는 언제든 변경이 가능하다.
house = "아파트";
console.log(house)
언제든 원하는 타이밍에 변경할 수 있다.
var house;
console.log(house);
house="집";
console.log(house);
최초 변수를 선언을 하고 최초 초기화를 했을때 언디파인드에서 ->집으로 값이 바뀐것으로 보면된다. 등호를 사용해서 변수값을 변화했다고 보면된다.
콘솔로그를 찍어여 보이게 된다.
중요한 개념!!!!!! 초급 중급 개념을 잡는 데 중요함~~
작성요령
var score = 10;
// 역사 점수인지 무슨과목의 점수인지 구분이 안됨. 변수명을 작성할때
// 두 개의 단어를 조합해서 사용하는 것이 좋음
var mathScore = 10;
var mathS_score =10;
//캐멀케이스 사용 비율이 압도적으로 더 높다.
var mathScoreStudent = 10;
// 스네이크 케이스
var math_score_student = 10;
// 주의점!! -는 js에서는 사용할 수 가 없다. 오류로 인식함.
//케밥케이스
//var math-score-student
// 다른 개발자가 봤을때 이해하기 쉬운 변수명을 작성하는 것이 좋음
// 변수 작성시 첫문자로 특수문자는 사용할 수 있다.
// 그러나 _, $ 만 해당 다른 특수문자로 첫문자로 사용이 안됨.
var _math;
var $math;
//숫자와 알파벳을 조함할 수 는 있으나 숫자가 먼저올 수는 없다.
var apple10;
// 최대한 자세히 작성하는 것이 좋다. 단순 약자는 이해하기 어려움
데이터 타입 = 데이터의 종류
진영1 원시타입
문자열(string)-텍스트데이터 그자체
숫자(number)
논리(Boolean)- 참/거직만 가지고 있다.
undefind-모든 변수를 선언할 때 기본적으로 가지고 있는.
null
진영2 참조타입
배열(Array)
함수(function)
객체(Object)
8가지가 있다. 그리고 2 진영으로 나누어져 있다. 추가적으로 있지만 입문단계는 여기까지
진영에따라 중복개념이 달라지는데 이게 중요하다.
데이터 타입이 어떠한 특징을 가지고 있는지 알아보자
각각의 타입마다 고유의 스킬이 있다. 다음강의에 자세히
1문자열
/데이터 타입
// 문자열
var msg1 = "hello";
var msg2 = 'wellcome';
console.log(msg1);
console.log(msg2);
// 두 가지 방법으로 문자열을 입력할 수 있으나 혼합해서 사용하면 안됨
// 문자열을 끝난 것을 인지를 못하낟.
// var msg3 ="dddd';
// 축약어를 표현
//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 firsname = "MJ";
var lastname = "Lee";
console.log(firsname + " " + lastname);
//공백도 일종의 문자열로 인식이 된다.
//문자열에서는 사칙연산은 가능하지만 덧샘을 이어붙이는 개념
//즉 다른 사칙연산들은 숫자로 인식이 되지만 덧샘의 경우에는 문자로 인식
var str11 ="현재 시간은 ";
var time =10 ;
var str12 = "시 입니다."
console.log (str11 + time + str12);
// ++ , --연산자! (두번째 연산자)
//var num10 = 10;
//console.log(--num10);
// --의 뜻은 변수안의 숫자를 -1씩 차감시킨다는 뚯
//num10 = num10 -1; //의 뜻으로 해석해
//데이터를 등호 데이터를 볼때 뒤에서 부터 보는 것이 좋음
//기존의 10데이터를 9라는 데이터로 변경
//console.log(--num10); // 으로 간소화 한 것으로보면 된다. 9
//console.log(--num10); //8
//console.log(++num10); //++도 마찮가지라고 보면 된다.
//console.log(++num10);
//++,--사용시 주의할점
//앞에 사용하느냐, 뒤에 사용하느냐 에 달라짐
//console.log(num10--); //10이 출력 변화가 없음
//num10먼저출력 그 다음에 -1을 차감 . 함텀쉬고 -1 차감
//console.log(num10); //9가 출력이 됨. 앞에서 한 텀쉬고니까 여기서 출력
//console.log(--num10);// 차감후 출력 , 선 차감
//console.log(num10);
//++e도 마찮가 연산자가 변수의 어느 위치에 하느냐에 따라 값이 달라지는 특징을 주의
// +=, -= , *=, /=, %= 자기 자신으리 업데이트
//var num20 = 20;
//num20 = num20 + 10; // 자기 자신을 새로운 값으로 업데이트
//num20 +=10; // 위의 코드와같은 의미
//console.log(num20);
//비교 연산자 >, <, ==, ===, !=, !==(값이 다른지), <= ,>=
/*
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); // 거짓 더 엄격하게 따짐 데이터 타입이 같은지 까지 따짐
//console.log(num20 != str20); // 같지 않는지 따짐. 내용물이 같아서 거짓으로
//console.log(num20 !== str20); // 참. 두 개의 데이터 타입이 다르기 때문에 다르게 치부.
// 안전하게 오류없이 코딩하기 위해서 ===,!==를 주로 사용
// 논리 연산자: and연산자(&&- 앞 뒤 모두 참), or연산자(||-앞이 참이거나 또는 뒤의 결과가 참, 둘 중 하나가 참이면 참)
/*
var num30 = 30;
var num40 = 40;
var num50 = 30;
console.log(num30 === num40 && num30 === num50 && num40 !== num50);
console.log(num30 === num40 || num30 === num50 ||num40 >num50);
*/
// 논리 연산자와 비교연산자를 섞어서 사용가능함
// 3번째 데이터 타입 불리언(boolean): ture, 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;
// 보통 논리연산자에서 - 불리언 사용:아이디와 비밀번호하나라도 틀리면
