728x90
JavaScript 작성법
- html에서 <body>태그 밑에 script 태그 작성
- script 태그
- javaScript 구문을 작성할 수 있게 도와주는 태그
- 파일명.js
- .html파일 <body> 아래 <script src="자바스크립트 파일 경로"></script> 를 작성하여 연결
변수
- 변수?
- 데이터를 가리키는 주소, 변수는 저장한 데이터의 주소이다.
- 주소를 알면 데이터를 가져올 수 있다.
- 변수의 값은 변할 수 있다.
- 변수 선언이란, 변수에 데이터를 정의하는 것으로 데이터를 메모리의 변수명의 공간에 담아두는 것이다.
- 메모리
- 프로그램이 실행되는 동안 필요한 데이터와 명령어를 저장하는 곳
- 렘
- CPU가 데이터를 빠르게 접근하고 사용할 수 있는 공간
- CPU
- 처리할 데이터나 명령어를 잠시 저장하고 사용하는 용도로 사용된다.
- 전원이 꺼지면 저장된 데이터가 모두 날아간다.
변수 선언_var, let, const
| var | let | const | |
| 선언 범위 | 전역범위 (함수 외부에서 선언될 경우) or 함수범위(함수 내부에서 선언될 경우) | 블록범위(선언된 블록 범위 내에서만 사용이 가능하다.) | 블록범위(선언된 블록 범위 내에서만 사용이 가능하다.) |
| 재선 | 같은 범위 내에서 재선언이 가능하다. | 같은 범위 내에서 재선언이 불가하다 | 일정한 상수 값을 유지하므로 같은 범위 내에서 재선언이 불가하다. |
| 업데이트 | 같은 범위 내에서 값 업데이트가 가능하다. | 같은 범위 내에서 값 업데이트가 가능하다. | 일정한 상수 값을 유지하므로 같은 범위 내에서 값 업데이트가 불가하다. |
| 문제점 | 변수명이 겹치는 경우 먼저 선언한 내용이 망가진다. | - | 모든 const 선언은 선언당시에 초기화 되어야 한다. |
| ex | var var1 = 1; | let let1 = 1; | const cons1 = 1; |
- 변수선언
var var1 = 1;
//var형식의 변수 var1을 선언, 데이터의 값은 1을 가지고 있다.let let2; //값을 대입하지 않고 변수의 이름만 미리 선언해 놓을 수 있다.
let2 = 56135; //값을 넣는 방법//자바 스크립트에서 변수를 선언할 때 let이나 var같은 키워드를 꼭 사용해줘야 한다.
let3 = 3; // 전역변수르 선언이 되고 예상치 못한 문제가 발행한다.
// * 절대 하면 안되는 방법 *- 변수명
- 변수명(ex. var1)은 해당 데이터에 접근할 수 있도록 변수명을 지정하는 것이다.
- console.log( );
- html 상에서 변수를 로그로 확인하는 방법
- 웹 브라우저 개발자모드(f12) 콘솔창에 괄호안에 값을 보여준다.
let let1 = 2;
consloe.log(let1); //웹 콘솔 창에 let1의 값인 2가 노출된다.
let let2 = "나는 글자"; //데이터값을 문자 저장하기 위해서는 " " 안에 넣어야 한다.
console.log(let2); //콘솔 창에 문자는 검은색, 숫자는 파란색으로 표기let let1 = 2;
consloe.log(let1); //웹 콘솔 창에 let1의 값인 2가 노출된다.
let let2 = "나는 글자"; //데이터값을 문자 저장하기 위해서는 " " 안에 넣어야 한다.
console.log(let2); //콘솔 창에 문자는 검은색, 숫자는 파란색으로 표기let let1 = 2;
consloe.log(let1); //웹 콘솔 창에 let1의 값인 2가 노출된다.
let let2 = "나는 글자"; //데이터값을 문자 저장하기 위해서는 " " 안에 넣어야 한다.
console.log(let2); //콘솔 창에 문자는 검은색, 숫자는 파란색으로 표기let let7;
console.log(typeof let7); // undefined: 값이 지정되지 않았을 때 타입.
/* 값이 부재 상태일 때, 값이 확인되지 않을 때
(=값을 넣지 않고 선언했을 때 자동으로 들어가는 데이터 타입) 나타난다. */
let let8 = null;
console.log(typeof let8); //null: undefined와 같이 값이 없음을 나타내는 타입.
//(object) 개발자가 변수에 값이 없음을 의도적으로 나타낼 때 작성한다.- 데이터의 byte
- 숫자 타입: 8 byte
- 문자열: 약 2 byte 이상( 길이에 따라 달라진다. )
- true / false (boolean): 1 byte (둘 중 하나)
- null / undefined: 0 byte
변수 타입_원시타입, 객체타입, 배열타입
원시타입
- 불변 값(변경할 수 없는 값)을 정의
- string
- 텍스트 데이터를 나타낼 때 사용한다.
- number
- boolean
- 논리요소를 나타낸다.
- true와 false 두 가지의 값을 가질 수 있다.
- 초기값: 0, -0, null, false, NaN, undefined, 빈 문자열 (" ")의 경우 false
- 문자열 “false”를 포함한 그 외의 모든 값일 경우 true
- undefined
- 전역 객체의 속성. 변수가 값을 할당받지 못한 경우 반환되는 타
- null
- 어떤 값이 의도적으로 비어있음을 표현. boolean 연산에서 거짓으로 취급한다.
래퍼런스 타입
- 객체타입 (object)
- 중괄호로 정의한다.
let obj = {a:1, b:2, c:3};
console.log("obj : a : ",obj.a); //obj 객체의 a값을 대입하거나 가져오려면 .으로 객체의 값에 접근할 수 있다.
console.log("obj : b : ",obj.b); // 객체의 키 값: 예) a, b, c
console.log("obj : c : ",obj.c);
obj.a = 10;
obj.d = 20; //객체 d 생성. d에 20의 값을 대입.
배열타입 (array)
- 대괄호로 정의한다.
- 배열의 인덱스(값의 순서)는 ( 0 ~ ‘배열의 길이 - 1’)의 값을 갖는다.
let arr = [1,2,3,"1","2","3"];
//해당 배열의 순서는 0 ~ 5
console.log("arr[0] : ",arr[0]);
console.log("arr[1] : ",arr[1]);
console.log("arr[2] : ",arr[2]);
console.log("arr[3] : ",arr[3]);
//배열에 있는 리스트들 값의 맨 뒤에 새로운 값이 추가된다.
arr.push("4");
변수명_표기법
- 케밥 표기법(kebab Case) : 예) let item-box; (CSS class 이름)
- 카멜 표기법(camel Case) : 자바스크립트 변수명을 선언할 때 자주 사용하는 표기법 예) let itemBox;
- 스네이크 표기법(snake Case) : 예) let item_box;
- 헝가리안 표기법: 정한 타입을 변수명에 작성해준다.(사용도가 조금 떨어진다.) 예) let stritembox;
- 파스칼 표기법(pascal Case): 추후 React(컴포넌트)에 들어가서 보게 될 예정이다. 예) let ItemBox;
연산자
- 연산을 할 때 사용하는 구문
- +(더하기), -(뺴기), *(곱하기), /(나누기), %(몫을 제외한 나머지 값 ex. 3%1=2)
// + : 더하기
let a = 3;
let b = 2;
/* 값을 가져오고 싶을 땐 a와 b를 작성한 것처럼 변수의 이름을 적어주면
해당 변수명으로 저장된 값을 가져올 수 있다. */
let c = a + b;
console.log(c);
let text1 = "나는 ";
let text2 = "배고프다";
//문자열을 +로 더해서 하나의 문자열로 합쳐준다.
console.log(text1 + text2);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log("a",a % b);- ++(값이 1씩 증가), - -(값이 1씩 감소), **(예. 2 ** 3 = 2^3)
- ++, - -는 변수의 값이 변하는 연산자이다.
let test1 = 1;
console.log(test1 + 1); // 값이 +1 되도록 노출은 시켜주지만 a의 값이 변한 것은 아니다.
console.log(test1); // 값이 1로 노출된다.
test1 = test1 + 1;
console.log(test1); // 위에서 변수에 값을 더한 값을 대입하였기 때문에 원래 변수 값에서 다른 값이 나온다.- 값을 비교하는 연산자: !, ==, ===, ! =, ! ==, >, < , < =, > =
- ! : bool 값을 반전시킨다.
- == : 두 변수의 값이 서로 같을 경우 true, 두 변수의 값이 서로 다를 경우 false
let test4 = 2;
let test5 = 4;
let test6 = "2";
console.log(test2 == test3);
console.log(test4 == test5);
console.log(test4 == test6); //자료형이 달라도 값이 같으면 true- === : 더욱 정밀하게 비교하는 연산자. 값과 type까지 비교하여 동일해야 한다.
- != : 두 변수의 값을 비교하고 값의 결과를 반전시켜 값이 같으면 false, 같지 않으면 true
- !== : 두 변수의 값과 type을 비교하고, 값의 결과를 반전시켜 값과 type 모두 같으면 false, 둘 중 하나라도 다르면 true (===의 반대)
- <, > : 부등호 방향으로 값이 크면 true, 크지 않으면 false, 값이 같아도 false
- <=, >= : 크거나 같을 경우 또는 작거나 같을 경우 사용하는 연산자 (=는 꼭 부등호 뒤에 기입하여야 한다.)
if 문
if 문 (비교문)
- 문법
if (조건식) {
.... 실행문 .... }- if문을 실행시키는 조건은 if ( ) 괄호안에 조건이 ture 냐 false냐에 따라서 실행시킨다.
- 조건이 참(true)일 경우 실행, 거짓(false)일 경우 실행하지 않는다.
let age = 1;
let age2 = 10;
//age = 나
if(age < age2) {
console.log("내 나이가 작구나") //괄호 안에 조건이 true이므로 조건이 실행된다.
//(false는 조건이 실행되지 않는다.)
}if ~ else
- 문법
if (조건식) {
.... 조건이 참(true)일 경우 실행문 .... }
else {
.... 조건이 거짓(false)일 경우 실행문 .... }- if문과 달리 조건이 거짓일 경우에도 출력할 값을 입력할 수 있다.
let age = 1;
let age2 = 10;
if(age > age2) {
console.log("내 나이가 작구나") //if문의 조건이 true인 경우 실행
}
else{
console.log("네 나이가 크구나") //if문의 조건이 false인 경우 실행
}if ~ else if ~ else
- 문법
if(조건식 1){
.... 조건식 1이 참(true)일 경우 실행 .... }
else if(조건식 2){
.... 조건식 2가 참(true)일 경우 실행 .... }
else if(조건식 3){
.... 조건식 3가 참(true)일 경우 실행 .... } //else if는 여러 개 쓸 수 있다.
else{
.... 조건식 1, 2, 3 모두 거짓(false)일 경우 실행 .... }let b = 5;
let c = 5;
if(b < c){
console.log("c가 b보다 크다") //if문이 true면 실행
}
else if(b > c){
console.log("c가 b보다 작다") //if문이 틀리면 해당 조건에 비교하고 true일 경우 실행
}
else{
console.log("c와 b가 같다") //else if문이 false일 경우 실행
}for문
- 여러번 반복 실행해야 할 구문이 있을 때 사용한다.
- 무한으로 반복시키는 조건은 사이트가 터지므로 조심할 것
let e = 5;
for(let f=1; f < e; f++){
console.log(f);
}👩💻중간실습_변수선언, console 적용
실습내용
- 간단히 let 선언문으로 type1이라는 변수를 만들고 값을 넣지 말고 선언
- 그 밑에 console.log() 로 type1 변수의 값을 확인하고
- 값을 확인 한 뒤에 그 밑에다가 5라는 값을 대입하고
- console.log()로 값을 확인
- console.log()변수의 type 값을 확인
- 그 다음에 밑에 "본인 이름"을 type1변수에 대입 마지막으로 console.log() 확인
결과물
js
let type1;
console.log(type1);
type1 = 5;
console.log(type1);
console.log(typeof type1);
type1 = " * * * ";
console.log(type1);실행화면
728x90
